@charset "utf-8";

/* login */

/*PC用*/
@media print, screen and (min-width:769px){

	/*お問い合わせ*/
	.contents { margin: 0 auto; padding: 50px 0 135px; width: 900px; }
	.contents a { text-decoration: underline; }
	.contents table.m_contact { margin-bottom: 50px; }
	.contents table.m_contact th, .contents table.m_contact td { padding: 20px 30px 15px; font-size: 16px; border: 1px solid #D3D3D3; }
	.contents table.m_contact th { width: 31.111%; font-weight: bold; vertical-align: middle; background: #F8F8F8; }
	.contents table.m_contact td span { font-weight: bold; }
	.contents table.m_contact td input, .contents textarea { padding: 5px; font-size: 16px; margin-bottom: 5px; }
	.contents table.m_contact td select {padding: 5px;font-size: 16px;margin-bottom: 5px;width: 200px;}
	.contents textarea { width: 100%; }
	.contents .aCENTER { text-align: center; }
	.contents input#check_btn { width: 50%; padding: 10px; font-size: 18px; font-weight: bold; margin: 0 auto; }
	.contents input#return_btn { width: 50%; padding: 10px; font-size: 18px; font-weight: bold; margin: 0 auto; }
}

/*SP用*/
@media only screen and (max-width: 768px){

	/*お問い合わせ*/
	.contents { margin: 0 auto; padding: 6.666vw 4vw 13.333vw; box-sizing: border-box; width: 100%; }
	.contents a { text-decoration: underline; }
	.contents .inner { padding: 0; }
	.contents table.m_contact { margin-bottom: 5.066vw; }
	.contents table.m_contact th, .contents table.m_contact td {line-height: 1.5;padding: 1.6vw 3vw 1.6vw;font-size: 3.733vw;border: 1px solid #000;}
	.contents table.m_contact th {width: 100%;font-weight: bold;vertical-align: middle;border: 1px solid #000;padding: 1vw 0 1vw 1.866vw;background: #dfeeff;}
	.contents table.m_contact td span { font-weight: bold; }
	.contents table.m_contact td input, .contents textarea { padding: 5px; font-size: 16px; margin-bottom: 5px; width: 100%; box-sizing: border-box; }
	.contents table.m_contact td input[type=radio] { width: inherit; }
	.contents table.m_contact td input[type=checkbox] { width: inherit; }
	.contents table.m_contact td select { width: 100%; box-sizing: border-box; padding: 5px; font-size: 16px; margin-bottom: 5px; }
	.contents textarea { width: 100%; }
	.contents .aCENTER { text-align: center; }
	.contents input#check_btn {width: 80%;padding: 10px;font-size: 18px;font-weight: bold;margin: 0 auto;}
	.contents input#return_btn {width: 80%;padding: 10px;font-size: 18px;font-weight: bold;margin: 0 auto;}
}

/* 「タイヤサイズが分かりません」FAQ用modal：モーダル起動前は非表示(#modal_bと同様の扱い) */
#modal_tiresize { display: none; }
/* modaal.jsは#modal_tiresizeの中身だけを検索してくるため、
   .tiresize_modal(コンテンツと一緒に移動するクラス)を起点にスタイルを当てる */
.tiresize_modal .img01 { width: 100% !important; }
/* PCではmodal.css既定の600px枠を広げ、画像を大きく見せる */
@media print, screen and (min-width:769px){
	.tiresize_modal, .tiresize_modal .modal_select_car_b { width: 800px; }
	.tiresize_modal .modal_header_b { width: 800px !important; }
	.tiresize_modal .modal_inner_b { width: 800px !important; }
}

.wage-link { color: #00479d; }

/* よくある質問(FAQ)：/kaitori/faq/ のデザインに準拠 */
.faq-section { padding-bottom: 10px; }
.faq-lead { text-align: center; }

.faq-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 40px; padding: 0; list-style: none; }
.faq-nav-item { margin-bottom: 0; }
.faq-nav-anchor { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border: 1px solid #000; border-radius: 4px; background: #fff; color: #000; font-weight: bold; text-decoration: none !important; }
.faq-nav-anchor::after { content: ''; flex-shrink: 0; width: 8px; height: 8px; margin-left: 10px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(45deg); margin-top: -4px; }
.faq-nav-anchor:hover { background: #f4f4f4; }

.faq-anchor { display: block; position: relative; top: -80px; visibility: hidden; }

.faq-group { margin-bottom: 40px; }
.faq-group-title { background: #000; color: #fff; font-style: italic; font-weight: bold; font-size: 20px; line-height: 1; padding: 10px 20px 12px; margin: 0 0 10px; }

.faq-item { border-bottom: 1px solid #000; padding: 25px 0; }
.faq-question { display: flex; align-items: center; width: 100%; background: none; border: none; padding: 0; text-align: left; cursor: pointer; position: relative; }
.faq-question .faq-label,
.faq-answer .faq-label { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; margin-right: 20px; font-style: italic; font-weight: bold; font-size: 20px; }
.faq-question .faq-label { background: #000; color: #fff; }
.faq-question .faq-text { flex-grow: 1; font-weight: bold; padding-right: 30px; }
.faq-question::after { content: ''; position: absolute; right: 0; top: 50%; width: 10px; height: 10px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: translateY(-70%) rotate(45deg); transition: transform 0.3s ease; }
.faq-question.is-active::after { transform: translateY(-30%) rotate(-135deg); }

.faq-answer { display: none; align-items: flex-start; margin-top: 20px; }
.faq-question.is-active + .faq-answer { display: flex; }
.faq-answer .faq-label { background: #00479d; color: #fff; }
.faq-answer p { margin: 0; line-height: 1.6; }

@media only screen and (max-width: 768px) {
	.faq-nav { grid-template-columns: repeat(2, 1fr); }
	.faq-question .faq-text { font-size: 3.733vw; }
	.faq-group-title { font-size: 16px; }
}

/* チャットボット(モック) */
#chatbot { position: fixed; right: 30px; bottom: 30px; z-index: 500; }
#chatbot * { box-sizing: border-box; }

#chatbot_toggle { position: relative; width: 60px; height: 60px; border-radius: 50%; border: none; background: #000; color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; padding: 0; transition: transform 0.2s ease, background 0.2s ease; }
#chatbot_toggle:hover { transform: scale(1.06); background: #00479d; }
#chatbot_toggle .chatbot_icon-close { display: none; }
#chatbot_toggle.is-open .chatbot_icon-chat { display: none; }
#chatbot_toggle.is-open .chatbot_icon-close { display: block; }

.chatbot_badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #d0021b; color: #fff; font-size: 12px; font-weight: bold; line-height: 20px; text-align: center; border: 2px solid #fff; }

#chatbot_window { position: absolute; right: 0; bottom: 76px; width: 360px; height: 480px; max-height: calc(100vh - 140px); background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.98); transform-origin: bottom right; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; }
#chatbot_window.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.chatbot_header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #000; color: #fff; flex-shrink: 0; }
.chatbot_header_info { display: flex; align-items: center; gap: 10px; }
.chatbot_avatar { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #00479d; color: #fff; flex-shrink: 0; }
.chatbot_header_text { display: flex; flex-direction: column; line-height: 1.4; }
.chatbot_name { font-weight: bold; font-size: 14px; }
.chatbot_status { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #ccc; }
.chatbot_status_dot { width: 7px; height: 7px; border-radius: 50%; background: #3ac569; display: inline-block; }
#chatbot_close { border: none; background: none; color: #fff; cursor: pointer; padding: 4px; display: flex; opacity: 0.8; }
#chatbot_close:hover { opacity: 1; }

.chatbot_body { flex: 1; overflow-y: auto; padding: 16px; background: #f2f3f5; display: flex; flex-direction: column; gap: 14px; }

.chatbot_msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.chatbot_msg-bot { justify-content: flex-start; }
.chatbot_msg-user { justify-content: flex-end; }
.chatbot_msg_avatar { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #000; color: #fff; flex-shrink: 0; }
.chatbot_msg_bubble { max-width: 75%; padding: 10px 14px; font-size: 14px; line-height: 1.6; word-break: break-word; }
.chatbot_msg-bot .chatbot_msg_bubble { background: #fff; color: #222; border-radius: 4px 16px 16px 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.chatbot_msg-user .chatbot_msg_bubble { background: #00479d; color: #fff; border-radius: 16px 4px 16px 16px; }

.chatbot_typing { display: flex; align-items: center; gap: 4px; padding: 12px 14px; }
.chatbot_typing span { width: 6px; height: 6px; border-radius: 50%; background: #aaa; display: inline-block; animation: chatbot_typing_blink 1.2s infinite ease-in-out; }
.chatbot_typing span:nth-child(2) { animation-delay: 0.2s; }
.chatbot_typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatbot_typing_blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

.chatbot_quick_replies { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 34px; }
.chatbot_quick_reply { border: 1px solid #00479d; background: #fff; color: #00479d; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: bold; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.chatbot_quick_reply:hover { background: #00479d; color: #fff; }

.chatbot_footer { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid #e5e5e5; flex-shrink: 0; background: #fff; }
#chatbot_input { flex: 1; border: 1px solid #d3d3d3; border-radius: 20px; padding: 9px 16px; font-size: 14px; outline: none; }
#chatbot_input:focus { border-color: #00479d; }
#chatbot_send { width: 38px; height: 38px; border-radius: 50%; border: none; background: #00479d; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; transition: background 0.15s ease; }
#chatbot_send:hover { background: #003570; }
#chatbot_send:disabled { background: #ccc; cursor: default; }

@media only screen and (max-width: 768px) {
	#chatbot { right: 4vw; bottom: calc(18.533vw + 4vw); }
	#chatbot_toggle { width: 14vw; height: 14vw; max-width: 54px; max-height: 54px; }
	#chatbot_window { width: calc(100vw - 8vw); right: 0; bottom: calc(14vw + 3vw); height: 70vh; max-height: 70vh; }
	.chatbot_name { font-size: 3.466vw; }
	.chatbot_status { font-size: 2.933vw; }
	.chatbot_msg_bubble { font-size: 3.466vw; }
	.chatbot_quick_reply { font-size: 3.2vw; }
	.chatbot_quick_replies { padding-left: 0; }
}