@charset "utf-8";
/* CSS Document */

/*============== position absolute =====================*/
*{box-sizing: border-box;}
html, body {height: 100%;box-sizing: border-box;}

/*==============Reset=====================*/
body{margin: 0;padding: 0;color:#333;font-size: 18px;font-weight: 400;
font-family:"M PLUS 1p", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;}

.clearfix:after {content: ".";display: block; clear: both; height: 0; visibility: hidden;}
.clearfix { min-height: 1px;}
* html .clearfix {height: 1px;/*\*//*/ height: auto;  overflow: hidden;  /**/}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	font-weight: normal;
    margin:0;
    padding:0;
    border:0;
}
img{max-width:100%;height: auto;}
ul li {list-style-type:none;list-style-position: outside;}
address{font-style: normal;}
table {border-collapse: collapse;}
p, li, dt, dd, th, td, label{transform: rotate(0.05deg);text-shadow: 0px 0px 1px #ccc}
/*===================common setting======================*/
.clear {clear: both;}
.center{text-align: center;}
.right{text-align: right;}
.left {text-align: left;}
.f20{font-size:20px;}
.f22{font-size:22px;}
.f24{font-size:24px;}
.f26{font-size:26px;}
.f28{font-size:28px;}
.f30{font-size:30px;}
.f32{font-size:32px;}
.f36{font-size:36px;}

@media screen and (min-width:1000px){
.f30pc{font-size:30px;}
}

.prymary{color: #27A8C8;}
.secondary{color: #A8C827;}
.third{color: #F9A5A2;}
.alert{color: #F6526B;}
.danger{color: #FCC931;}

.white{color:#fff;}
.red{color:#fff;}
.bgwhite{background-color:rgba(255,255,255,0.8);}

.paddinground{padding:5px 10px;border-radius: 5px;line-height: 45px;}

.bgprymary{background-color: #27A8C8;color: #fff;}
.bgprymary2{background-color: #AAE1EE;color: #333;}
.bgsecondary{background-color: #A8C827;color: #fff;}
.bgthird{background-color: #fbbbb9;}
.bgalert{background-color: #F6526B;color: #fff;}
.bgdisable{background:#ccc;color: #333;}
.bgdanger{background-color: #FCC931;}
.bgdanger2{background-color: #FFF0EF;}

section p{margin-bottom: 25px;}
/*====Link color setting====*/
a img {border: none;}
a img {transition: all 0.2s;}
a img:hover { opacity: 0.7;}
a img:active { opacity: 0.5;}
a:link {color: #27A8C8;text-decoration: none;transition: ease all .8s;}
a:visited {color: #27A8C8;text-decoration:none;}
a:hover {color: #73C827;}
a:active {color:#776BE2;}

/*======margin setting======*/
.marginb5{margin-bottom: 5px;}
.marginb10{margin-bottom: 10px;}
.marginb20{margin-bottom: 20px;}
.marginb30{	margin-bottom: 30px;}

/*====font setting====*/
.red{color: #F00;}
.bold{font-weight: 700;}
.small{font-size: 0.8em;}
.big{font-size: 2.0em;}
strong{color: #E86764;font-weight: 700;}

/*===Page top===*/
.backtotop {position: fixed;right: 10px;bottom: 20px;display: none;} 
.backtotop a {display: block;padding: 0px 11px;margin: 0;text-align: center;letter-spacing: 0;line-height: normal}


.moviewrap {position: relative;padding-bottom: 46.25%;padding-top: 30px;height: 0;overflow: hidden;}
.moviewrap iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}


/*ICON*/
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?9iwgbp');
  src:  url('../fonts/icomoon.eot?9iwgbp#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?9iwgbp') format('truetype'),
    url('../fonts/icomoon.woff?9iwgbp') format('woff'),
    url('../fonts/icomoon.svg?9iwgbp#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-stars2:before {content: "\e900";}
.icon-stars:before {content: "\e901";}
.icon-crown:before {content: "\e902";}

#chat-container {font-size: 0.8em;
    width: 85vw;
    height: auto;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
    position: fixed;
    bottom: 75px;
    right: 10px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 99;
    border-radius: 10px
}

#chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 5px;color: #fff;
    margin-bottom: 10px;
    background: #0056b3;
}
#close-chatbot {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    background: #0056b3;
}

#chat-box {
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #ddd;
    padding: 5px;
    background-color: #fff;
    flex-grow: 1;
    margin: 0 0 10px 0;
}
.headmessage{background: #c8e6c9}
#chat-box p {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#chat-box p.show {
    opacity: 1;
}

/* Custom Scrollbar Styles */
#chat-box::-webkit-scrollbar {
    width: 12px;
}

#chat-box::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#chat-box::-webkit-scrollbar-thumb {
    background-color: #007BFF;
    border-radius: 10px;
    border: 3px solid #f1f1f1;
}

#chat-box::-webkit-scrollbar-thumb:hover {
    background-color: #0056b3;
}

.input-container {
    display: flex;
   align-items: center;
}

#user-input {
    flex-grow: 1;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 0;font-size: 0.8em;
}

button {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#open-chatbot {z-index: 80;
    position: fixed;
    bottom: 75px;
    right: 10px;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

#open-chatbot:hover {
    background-color: #0056b3;
}

#sample-questions {
    margin-top: 10px;
}

.sample-question {
    display: block;
    margin-bottom: 5px;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #0056b3;
    cursor: pointer;
    border-radius: 5px;
    border-radius: 100px;
}

.sample-question:hover {
    background-color: #e1e1e1;
}

.bot-message,
.user-message {
    margin: 10px 0;
}

.bot-message p,
.user-message p {
    padding: 10px;
    border-radius: 10px;
}

.bot-message p {
    background-color: #e1f5fe;
    align-self: flex-start;
}

.user-message p {
    background-color: #c8e6c9;
    align-self: flex-end;
}
#send{    width: 20%;
    padding: 0;
    margin: 0;
    height: 50px;}
@media screen and (min-width:1000px) {
    #chat-container {
        width: 400px;
        height: 75vh;
        border: 1px solid #ccc;
        padding: 10px;
        background-color: #f9f9f9;
        position: fixed;
        background-color: white;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #chat-box {
        height: 50vh;
        overflow-y: scroll;
        border: 1px solid #ddd;
        padding: 5px;
        background-color: #fff;
        flex-grow: 1;
    }
}