@charset "UTF-8";
.chat-bot{
	position:fixed;
	bottom:30px;
	right:30px;
	max-width:400px;
}
#chat-wrap{
  width:400px;
	background:#fff;
	border-radius:10px;
	box-shadow:0 0 5px rgba(0,0,0,0.2);
}
#chat-wrap p{
  text-align:center;
  padding:5px 0;
  background:linear-gradient(135deg, #ff8a01, #f4aa00);
  color:#fff;
  font-size:18px;
  font-weight:bold;
}
.chat-container{
  padding:20px;
}
/* ラジオボタンとラベルのスタイリング */
#user-input-container {
    margin-top: 10px;
}

.radio-option {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    box-shadow: 0 -0 5px rgba(0,0,0,0.1);
}

#user-input-container label {
    margin-left: 5px;
    font-size: 14px;
    cursor: pointer;
}

#user-input-container input[type="radio"] {
    cursor: pointer;
}

/* ラジオボタンとラベルのスタイリング */
.radio-option {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    background-color: #f8f8f8; /* 背景色 */
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd; /* 枠線 */
    cursor: pointer;
}

.radio-option:hover {
    background-color: #e8e8e8; /* ホバー時の背景色 */
}

#user-input-container input[type="radio"] {
    margin-right: 10px;
    accent-color: #007bff; /* ラジオボタンの色（ブラウザによってはサポートされていない場合があります） */
}

#user-input-container label {
    margin: 0;
    flex-grow: 1;
}

.link-button {
    display: inline-block;
    padding: 20px 10px;
    background:linear-gradient(135deg, #ff8a01, #f4aa00);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    /* box-shadow: 0 6px 0 #ffc186; */
    text-align: center;
    font-size: 20px;
    margin-top: 40px;
    font-weight: bold;
}
.link-button:hover{
	color:#fff;
	text-decoration:none;
	opacity:0.8;
}
.chat-result-can {
    color: #28a745; /* 例: 緑色のテキスト */
    background-color: #eaffea; /* 背景色 */
    font-weight: bold;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid #28a745; /* 枠線 */
    font-size: 16px; /* フォントサイズ */
    text-align: center; /* テキストを中央揃え */
    max-width:100% !important;
}
.chat-result-cant {
    color: #250a45; /* 例: 緑色のテキスト */
    background-color: #eaffea; /* 背景色 */
    font-weight: bold;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid #28a745; /* 枠線 */
    font-size: 16px; /* フォントサイズ */
    text-align: center; /* テキストを中央揃え */
    max-width:100% !important;
}

/* チャットメッセージのスタイリング */
#chat-messages li {
    list-style-type: none;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 10px;
    max-width: 70%;
    word-wrap: break-word;
}

/* チャットbotのメッセージ */
#chat-messages .bot-message {
    background-color: #f0f0f0;
    align-self: flex-start;
}

/* ユーザーの回答 */
#chat-messages .user-message {
    background-color: #383838;
    color: white;
    align-self: flex-end;
    margin-left: auto; /* 右寄せ */
}

/* チャットメッセージを含むコンテナ */
#chat-messages {
	padding:0;
    display: flex;
    flex-direction: column;
}

#chat-container {
    width: 300px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    border-radius: 10px;
    overflow: hidden;
    z-index: 1000; /* 他の要素の上に表示 */
}

#chat-header {
    background: linear-gradient(135deg, #ff8a01, #f4aa00);
    color: white;
    padding: 10px;
    text-align: center;
    position: relative;
		border-radius:10px 10px 0 0;
}

#close-chat {
    position: absolute;
    right: 10px;
    top: 10px;
    border: none;
    background: none;
    color: white;
    cursor: pointer;
    font-size: 20px;
}
#chatbot-trigger{
	position:relative;
	width:150px;
	height:110px;
	padding:10px;
	border-radius:20px;
	background:linear-gradient(135deg, #ff8a01, #f4aa00);
	box-shadow:0 0 12px rgba(0,0,0,0.4);
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	font-weight:bold;
	font-size:18px;
	color:#fff;
}
#chatbot-trigger:before{
	position:absolute;
	bottom:-8px;
	right:7px;
	width:34px;
	height:41px;
	background:url(../images/chat-click.png);
	background-size:cover;
	content:"";
}
#chatbot-trigger-close{
	display:none;
}
@media screen and (max-width: 959px){
	.chat-bot{
		right:10px;
		z-index:1000;
		width:calc(100% - 20px);
		bottom:calc(74px + 5vw);
		display:flex;
		justify-content:flex-end;
	}
	#chat-wrap{
		width:100%;
	}
	#chat-messages{
		overflow:scroll;
		max-height:calc(100vh - 350px);
	}
	.link-button{
		padding:10px;
		font-size:18px;
		margin-top:20px;
	}
	#chat-messages li{
		max-width:90%;
	}
	#chatbot-trigger-close{
		display:flex;
		position:absolute;
		top:-10px;
		right:-5px;
        z-index:10;
		font-size:16px;
		font-weight:bold;
		width:24px;
		height:24px;
		justify-content:center;
		align-items:center;
		background:#fff;
		border-radius:50%;
		color:#333;
	}
}