@charset "UTF-8";

html,body,main,.main-area{
	height: 100%;
	font-size:14px;
}
body{
	background-color: white;
}
main.dsb-full-page{
	background-image: url(./img/bg.webp);
	background-repeat:no-repeat;
	background-size:cover;
	position: relative;
	background-position: bottom;
}

/* main#main-chat-bg {
	background-size:cover;
	position: relative;
	background-image: url(./img/bg002.png);
} */


.m-bottom-30{
	margin-bottom: 30px;
}

.main-area{
	display: flex;
	width: 90%;
	min-width: 720px;
	justify-content: center;
	align-items: center;
	margin: auto;
	max-width: 1440px;
}

#chat-start-form {
    align-items: center;
	display: flex;
	flex-direction: column;
}

#form-area {
	box-sizing: border-box; /* Width設置の際に、paddingが含まれるように　*/
	font-size: 20px;
	/* background-image:url(./img/input_name.png); */
	padding: var(--dsb-skin-large-spacing);
	width: 456px;
	position: relative;
	display: flex;
    flex-direction: column;
	align-items: stretch;
	margin-top: 65px; /* 13inchなど小画面で頭切れ防止のため、キャラのはみ出し分（160px - 30px)/2 を考慮した中央調整 */

	/* デザイン部変更箇所 入口フォームの設定(外側) */
	background-color: #FFF;					/* 背景色 */
	border-color: #DED3CB;						/* ボーダーカラー */
	border-width: 8px;	 						/* ボーダー太さ */
	border-radius: 30px; 						/* 丸角 */
	border-style: solid; 						/* ボーダースタイル */
	/* 	box-shadow: 2px 2px 10px rgba(0,0,0,0.4); */  /* 影 */
	/* backdrop-filter: blur(10px); */			/* ぼかし効果 */
	min-height: 320px;		 					/* 最小高さ値を設定する場合 */
}

#form-area .form-avatar{
	width: 100px;
	display: inline-block;
	margin-top: -160px; /* キャラクターの高さをマイナス */
}

#form-area .form-example{
	font-size: 14px;
	line-height: 1.4;
	width: 100%;
	padding: var(--dsb-skin-medium-spacing);
	box-sizing: border-box;

	/* デザイン部変更箇所 入口フォームの設定(内側) */
	background-color: #F7F2EE;					/* 背景色 */
	border-radius: 20px; 						/* 丸角 */
	/* box-shadow: 2px 2px 10px rgba(0,0,0,0.4);  /* 影 */
	min-height: 200px;		 					/* 最小高さ値を設定する場合 */
	/*max-height: 400px; */ 					/* 最大高さ値を設定する場合 */
}

#form-area .form-example p{
	padding-top: 25px;
	margin-bottom: 8px;
}

#form-area .form-example .form-text{
	box-sizing: border-box;
}

#form-area .form-text {
	margin-top: 20px;
}

/* デフォルトのスタイル(/public/full/style.css)を上書き */
/* 名前記入画面　*/
#form-area .form-bottom {
	transform: none;
	inset: 0;
	margin-top: 20px;
	position: relative;
}

main[data-action='index'] .form-example .logo-area {
	max-height: 150px;
}

main[data-action='index'] .form-example .logo {
	max-height: 150px;
}

main[data-action='index'] #form-area .form-example.form-content .form-text .text {
    padding-top: 0px;
	margin-top: 0px
}

main[data-action='index'] #form-area #dsb-chat-name {
	box-sizing: border-box;
	margin-bottom: 0;
	width: 100%;
	height: 46px;
	line-height: 46px;
	background-color: #FFF; /* デザイン部変更箇所 名前入力フォームの背景色 */
	color: #000; /* デザイン部変更箇所 名前入力フォームの文字色 */
}

main[data-action='index'] #chat-start-form img.form-avatar {
    position: static;
    transform: none;
    margin-left: 0;
}

/* デフォルトのスタイル(/public/full/style.css)を上書き --- END */

/* #656 PLAY NOW ボタンCSS化 */
#form-area .form-bottom button{
	box-sizing: border-box; 
	position: relative;
	width: 250px; /* デザイン部変更箇所 ボタンの幅（多言語SKINとして使用時は数値を「200px」へ変更） */
	height: 50px; /* デザイン部変更箇所 ボタンの高さ */
	text-align: center;
	background-color: #8B5E4A; /* デザイン部変更箇所 ボタンの背景色 */
	color: #fff;/* デザイン部変更箇所 ボタンの文字色 */
	border-width: 3px; /* デザイン部変更箇所 ボタンの枠線の太さ */
	border-style: solid; /* デザイン部変更箇所 ボタンの枠線スタイル */
	border-color: #fff; /* デザイン部変更箇所 ボタンの枠線色 */
	border-radius: 60px; /* デザイン部変更箇所 ボタンの丸角 */
	/* box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5); */ /* デザイン部変更箇所 ボタンの影 */
	overflow: hidden; /* ロールオーバー時に角ばった部分が左端から一瞬はみ出す現象の対応　*/
	justify-content: center;
	z-index: 1;
	cursor: pointer;
	font-weight: 600; /* デザイン部変更箇所 ボタンの文字の太さ */
	font-size: 16px; /* デザイン部変更箇所 ボタンの文字サイズ */
	letter-spacing: 1px; /* デザイン部変更箇所 ボタンの文字間隔 */
}

#form-area .form-bottom button i{
	align-content: center;
	margin-right: 5px;
}

#form-area .form-bottom button .btn-text{
	font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴシック", "Hiragino Sans", "Trebuchet MS", sans-serif; /* デザイン部変更箇所　ボタンテキストのフォント */
}

#form-area .form-bottom button::after{
	width: 100%;
	line-height: 100%;
	background-color: #fff; /* デザイン部変更箇所 スライドの背景色 */
	position: absolute;
	inset: 0;
	content: '';
	transform: scaleX(0);
	border-radius: inherit;
	transform-origin: left center;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1); /* デザイン部変更箇所 スライドのアニメーション時間 */
}



/* #656 PCのhoverを特定し、スマホなどのタッチ端末に副作用にならないように */
@media (hover: hover) and (pointer: fine){
	#form-area .form-bottom button:hover{
		color: #8B5E4A; /* デザイン部変更箇所 ボタンの文字色 */
		border-color: #8B5E4A; /* デザイン部変更箇所 ボタンの枠線色 */
	}
	
	#form-area .form-bottom button:hover::after{
		transform: scaleX(1);
		z-index: -1;
	}
}

.img-area{
	position: fixed;
	width: 480px;
	bottom: 0px;
	right: -20px;
}
.img-area img{
	width: 500px;
	margin-left: 0px;
	
}
.img-area .fukidasi{
	line-height: 24px;
	position: absolute;
	top: 0px;
	right: 0px;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}

.img-area .ai-label {
	width:130px;
}
.img-area .fukidasi.think{
	display: flex;
	align-items: center;
}


.img-area .fukidasi.think .normal-text{
	display: none;	
}
.img-area .fukidasi .thinking-text{
	display: none;
}
.img-area .fukidasi.think .thinking-text{
	display: block;	
	margin-top: -1em;
}


.fukidasi {

	position: relative;
	display: inline-block;
	margin: 1.5em 15px 1.5em 0;
	padding: 0 24px;
	padding-top: 15px;
	width: 160px;
	height: 160px;
	text-align: center;
	background: #FFF;
	border-radius: 50%;
	box-sizing: border-box;
}

.fukidasi:before {
	content: "";
	position: absolute;
	bottom: -12px;
	left: 16px;
	margin-top: -15px;
	border: 15px solid transparent;
	border-right: 15px solid #FFF;
	z-index: 0;
	transform: rotate(-52deg);
}

/* チャット画面 */
main[data-action='chat'] .main-area{
	background-color: #FFF; /* デザイン部変更箇所 メインエリアの背景色 */
	/* border: 10px solid #000; */ /* デザイン部変更箇所 枠線（太さ、種類、色） */
	/* border-radius:10px; */ /* デザイン部変更箇所 メインエリアの丸角 */
	/* backdrop-filter: blur(10px); */ /* デザイン部変更箇所 ぼかし効果 */
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3); /* デザイン部変更箇所 メインエリアの影 */
	padding: var(--dsb-skin-large-spacing); /* デザイン部変更箇所 多言語SKINとして使用する場合は数値を「0」に変更 */
	/*
	display: flex;
	width: 80%;
	max-width: 800px;

	height: 80%;
	min-width: 900px;
	justify-content: center;
	align-items: normal;
	margin: auto;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translateX(-50%)
				translateY(-50%);
	padding: 20px;
	*/
}

main[data-action='chat'] .main-area .left{
	--dsb-main-area-left-side-width: 300px;

	width: var(--dsb-main-area-left-side-width);
	/* padding: var(--dsb-skin-large-spacing); */ /* デザイン部変更箇所 多言語SKIN特殊な余白調整 */
	padding-right: var(--dsb-skin-medium-spacing);
	box-sizing: border-box;
	line-height: 1.5;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
}

main[data-action='chat'] .main-area .left .greeting-area{
	flex-grow: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

main[data-action='chat'] .main-area .left .site-name-log{
	/* flex-shrink: 0; /* ロゴが縮まないように */
	width: 100%;
	margin-left: auto;
	margin-right: auto;

	/* デザイン部変更箇所 チャット画面のロゴ画像の最大値 */		
	max-height: calc(
		0.8 * 
		(
			var(--dsb-main-area-left-side-width) -
			var(--dsb-skin-medium-spacing)
		) /* padding-leftがあるため、その分マイナス調整 */
	); 								
}

main[data-action='chat'] .main-area .left .site-name-log .logo-area, 
main[data-action='chat'] .main-area .left .site-name-log .logo-area .logo{
	max-width: 100%;
	height: 100%;
	display: flex;
  	justify-content: center;
}

main[data-action='chat'] .main-area .left .chat-name{
	padding:6px 8px;
	border-radius: 5px;
	margin-top: var(--dsb-skin-medium-spacing);
	margin-bottom: 15px;
	font-size: 18px;
	background-color: #E4D2C7; /* デザイン部変更箇所「こんにちは～さん」背景色 */
	color: #000000; /* デザイン部変更箇所「こんにちは～さん」文字色 */
}

/* 説明文のx-scrollの対策　abcdefghi...のような長い言葉があってもちゃんとワードブレイクする */
main[data-action='chat'] .main-area .left .explanatory_text{
    overflow-x: hidden;
	overflow-wrap: break-word;
    word-break: break-word;
	/* color: #000; */ /* デザイン部変更箇所　会社説明文文字色 */
}

main[data-action='chat'] .main-area .left .fixed-banner-area{
	width: 100%;
}	

main[data-action='chat'] .fixed-banner-area img{
	max-width: 100%;
	display: block;
	margin-top: var(--dsb-skin-small-spacing);
	margin-left: auto;
	margin-right: auto;
}

main[data-action='chat'] .main-area .right{
	display: flex;
	flex-direction: column;
}

main[data-action='chat'] #chat-area{
	width: 100%;
	height: 100%;
	background-color: #F7F2EE; /* デザイン部変更箇所　チャット欄　背景色変更 */
	border-radius:10px; /* デザイン部変更箇所 角丸（多言語SKINとして使用時は数値を「0px 30px 30px 0px」へ変更） */
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding-bottom: var(--dsb-skin-small-spacing);
}

main[data-action='chat'] #chat-area .dsb-chat-name-me{
	padding-right: 10px;
}

main[data-action='chat'] #chat-area .dsb-talk-me{
	margin-right: 10px;
}

main[data-action='chat'] #chat-area .dsb-talk-to{
	margin-left: 10px;
}

main[data-action='chat'] #chat-area .chat-area .faq-area{
	--faq-gap: 10px;

	padding-left: 0;
  	padding-right: 0;
	gap: var(--faq-gap);
}

main[data-action='chat'] #chat-area .chat-area .faq-area .qa-item{
	margin-right: 0;
	margin-bottom: 0;
	width: calc(
		50% 
		- var(--dsb-skin-medium-spacing) 
		- (var(--faq-gap) / 2)
	); 
}

main[data-action='chat'] #chat-area #free_chat_form{
		padding-left: var(--dsb-skin-medium-spacing);
		padding-right: var(--dsb-skin-medium-spacing);
	
}

main[data-action='chat'] #chat-area .chat-area{
	overflow-x: hidden;
	overflow-y: auto;
	padding-top: var(--dsb-skin-small-spacing);
	/* flex-grow: 1; */
	/* min-height: 0; */
	padding-left: var(--dsb-skin-medium-spacing);
	padding-right: var(--dsb-skin-medium-spacing);
}

/* デザイン部変更箇所 おしゃべりスペース　 */
main[data-action='chat'] .chat-top{
	color: #fff;				/* おしゃべりスペース上部帯　文字色 */
	background-color: #B07A62;	/* おしゃべりスペース上部帯　背景色 */
}

/* デザイン部変更箇所 チャットエリア内の吹き出し関連　START */
/* -----SKINO1以外にアンコメントし活用 ----- */
/*  デザイン部変更箇所 ユーザー送信トーク  */
main[data-action='chat'] .chat-area .dsb-talk-to{
	background-color: #E4D2C7; /*　ユーザー送信トークの背景色 */
	/*  color: #000;  */ /*　ユーザー送信トークの文字色 */
}

/*  デザイン部変更箇所 ユーザー送信トーク(三角部分)  */
main[data-action='chat'] .chat-area .dsb-talk-to::before,
main[data-action='chat'] .chat-area .dsb-talk-to::after{
	border-right: 10px solid #E4D2C7; /*　ユーザー送信トークの背景色（三角部分） */
}

/*  デザイン部変更箇所 AI送信トーク  */
main[data-action='chat'] .chat-area .dsb-talk-me{
	background-color: #FFFFFF; /*　AI送信トークの背景色 */
/*  color: #000;  */ /*　AI送信トークの文字色 */
}

/*  デザイン部変更箇所 AI送信トーク(三角部分)  */
main[data-action='chat'] .chat-area .dsb-talk-me::before,
main[data-action='chat'] .chat-area .dsb-talk-me::after{
	border-left: 10px solid #FFFFFF; /*　AI送信トークの背景色（三角部分） */
}

/*  デザイン部変更箇所　質問を送信ボタン  */
main[data-action='chat'] .submit-btn{
	width: 100%;
	height: 52px;
	border-radius: 5px;
	color: white;
	background-color: #8B5E4A;
	border: 1px solid #8B5E4A;
}

/*  デザイン部変更箇所　チャット　氏名文字色  */
main[data-action='chat'] .dsb-chat-name{
	color: #000000;
}

/*  デザイン部変更箇所 「同意する」「スキップする」「間違いない」ボタン */
#chat-area .chat-area .privacy-btn,
#chat-area .chat-area .pinfo-skip-btn,
#chat-area .chat-area .pinfo-confirm-btn{
    color: #ffffff;
    background-color: #CD1616;
}

/*  デザイン部変更箇所 「同意しない」「間違っている」ボタン */
#chat-area .chat-area .privacy-btn.disagree-btn,
#chat-area .chat-area .pinfo-confirm-btn.wrong-btn{
    color: #ffffff;
    background-color: #2F2F2F;
}

/*  デザイン部変更箇所 QA 「関連するQ&A」「別の回答を見る」ボタン */
#chat-area .chat-area .faq-area .qa-item,
#chat-area .chat-area .dsb-kouho-item,
#chat-area .chat-area .dsb-use-ai-btn{
    color: #000000;
    background-color: #EBAB8F;
}

/*  デザイン部変更箇所 QAのQアイコン  */
#chat-area .chat-area .faq-area .qa-item .icon::before{
    background-image: url(./img/custom_q.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 37px;
    height: 32px;
}
/* デザイン部変更箇所 チャットエリア内の吹き出し関連　END */

/* main[data-action='chat']  #event-banner-area{
	position: fixed;
	top: 70px;
	right: 100px;
}
main[data-action='chat'] #event-banner-area a.dsb-chat-banner-btnn.bg-jagged{
	right: 40px;
}
main[data-action='chat'] #event-banner-area a.dsb-chat-type-text{
	position: relative;		
} */


@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}


#chat-back-btn{
	top: 24px;
	position: absolute;
	left: 24px;
	display: block;
	background-image: url(./img/button.png);

	height: 50px;
	width: 174px;
}

.free_chat_form{
	display: flex;
}
.submit-btn{
	width: 100%;
	height: 52px;
	border-radius: 5px;
	color: white;
	background-color: #8B5E4A; /* デザイン部変更箇所　質問を送信ボタン背景色 */
	border: 1px solid #8B5E4A; /* デザイン部変更箇所　質問を送信ボタン線（太さ、種類、色） */

}

#caution-comment{
	/* デザイン部変更箇所　チャット欄下 注意文(回答は必ずしも〜)文字色 */
	color: #8B5E4A;
}

#Lyid{
	color: black;
	font-size:14px;/*★文字サイズ指定*/
	line-height: 24px;
	box-sizing: border-box;/*★枠線や余白も含めたサイズにする*/
}

/* 
@media screen and (max-width: 1600px) {
main[data-action='chat']{

	.main-area{
		left: 20px;
		transform: translateX(0%)
					translateY(-50%);		
	}
	
}
 */

@media screen and (max-width: 1200px) {
	/*  デザイン部変更箇所 アバターアイコン背景(スマホ)  */
	/* main[data-action='chat'] .dsb-chat-icon-box{
		background-color: #F3FFB4; */

	/*  デザイン部変更箇所　質問を送信ボタン文字色(スマホ) */
    main[data-action='chat'] .submit-btn .smart{
        color: #8B5E4A;
    }

	main[data-action='chat'] #chat-area{
		padding-bottom: 0;
	}

	/*  デザイン部変更箇所　チャット画面下部背景(スマホ) */
	main[data-action='chat'] #chat-area .chat-bottom-area{
		background-color: #EBE2DB;
	}

	main[data-action='chat'] .main-area{
        padding: 0;
    }

	main[data-action='chat'] .main-area .left{
        display: none;
    }

	main[data-action="chat"] .dsb-chat-name.icon-p{
		width: calc(100% - 30px);
	}
}

@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
/* 
	main[data-action='index'] #form-area{
		background-image: url(./img/sm_input_name.webp); 
	}
	*/	
	
	main.dsb-full-page {
		background-image: url(./img/sm_bg.webp); /* デザイン部変更箇所 スマホの背景画像 */
		/* outline: 0px solid transparent; */ /* デザイン部変更箇所 SK002特殊のアウトライン設定 */
	}

	main[data-action='index'] #form-area{
		height: auto;
	}

	main[data-action='index'] #form-area .form-example, main[data-action="index"] #form-area .form-example .logo{
		width: 100%;
	}

}