@charset "utf-8";
.wrapper#rainbowModal {
    background: #e33933;
    background: -moz-linear-gradient(left, #e33933 0%, #e33933 42.5%, #d63131 42.5%, #d63131 100%);
    background: -webkit-linear-gradient(left, #e33933 0%, #e33933 42.5%, #d63131 42.5%, #d63131 100%);
    background: linear-gradient(to right, #e33933 0%, #e33933 42.5%, #d63131 42.5%, #d63131 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e33933', endColorstr='#d63131', GradientType=1 );
    margin: auto;
    padding: 30px;
    width: 1024px;
    height: 768px;
    border-radius: 10px;
	    -ms-border-radius: 10px;
	    -webkit-border-radius: 10px;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.45);
	    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.45);
	    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.45);
}
	.wrapper.beach { background:#e33933 url(../images/virtual-charpy/bg-beach.png) top right no-repeat; }
.wrapper2#rainbowModal {
    background: #e33933;
    margin: auto;
    padding: 30px;
    width: 1024px;
    height: 768px;
    border-radius: 10px;
	    -ms-border-radius: 10px;
	    -webkit-border-radius: 10px;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.45);
	    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.45);
	    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.45);
}

.left-box {
    float:left;
    width:404px;
    height:655px;
    position:relative;
}
.max-box {
    float:left;
    width:100%;
    height:655px;
    position:relative;
}
.right-box {
    float:right;
    width:560px;
    height: 708px;
    overflow:overlay;
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}
.text-area {
    overflow:overlay;
    list-style:none;
    padding:0 0 0 20px;
}
	.text-area img{
        vertical-align:middle;
    }

/*キャラクター吹き出し*/
.text-area li.charpy-sub-text,
.text-area li.user-text,
.text-area li.jennifer-text,
.text-area li.whitney-text{
    display:block;
    background:rgba(250,250,250,0.9);
    padding:10px;
    margin-bottom:40px;
    border-radius: 8px;
	    -ms-border-radius: 8px;
	    -webkite-border-radius: 8px;
    position:relative;
}
	.text-area li.charpy-sub-text,
	.text-area li.jennifer-text,
	.text-area li.whitney-text { 
	    margin-left:70px;
	    margin-right:30px;
	}
	.text-area li.user-text {
	    margin-right:70px;
	}

/* キャラクターアイコン
------------------------------------------------------*/
.charpy-sub-text:before,
.jennifer-text:before,
.whitney-text:before {
    right:105%;
    top:0;
    position: absolute;
    pointer-events: none;
}
    .charpy-sub-text:before{ content:url(../images/virtual-charpy/charpy-03.svg); }
    .jennifer-text:before { content:url(../images/virtual-charpy/icon-jellyfish.svg); }
    .whitney-text:before { content:url(../images/virtual-charpy/icon-whitney.svg); }
    
/* 吹き出し口
------------------------------------------------------*/
.charpy-sub-text:after,
.user-text:after,
.jennifer-text:after,
.whitney-text:after {
    border-color: rgba(244, 244, 244, 0);
    border: transparent solid 6px;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
	.charpy-sub-text:after,
	.jennifer-text:after,
	.whitney-text:after { 
	    right: 100%;
	    top: 20px;
	    border-right-color: #f4f4f4;
	    margin-left: -6px;
	}
	.user-text:after { 
	    left: 100%;
	    top: 20px;
	    border-left-color: #f4f4f4;
	    margin-top: -6px;
	}

/* 選択肢
------------------------------------------------------*/
.select-area {
    overflow:overlay;
    list-style:none;
    margin-bottom:40px;
    margin-right:30px;
}
	.select-area li {
	    background: rgba(0,188,211,0.9);
	    border-bottom: 1px solid #a0eef7;
	}
    	/*選択肢無効*/
	    .select-area li.invalid{
	        background:rgba(101, 102, 102, 0.9);
	        border-bottom:1px solid #666;
	        color:#9E9E9E;
	        display:block;
	    	padding:10px;
	    }
        /*選択済*/
	    .select-area li.selected{
		    background:rgba(35, 222, 245,0.9);
	        border-bottom:1px solid #666;
	    	color:#F4F4F4;
		    display:block;
		    padding:10px;
		}
	.select-area li:first-child {
	    background: rgba(244, 244, 244, 0.9);
	    border-top:none;
	    border-bottom:none;
	    border-radius: 8px 8px 0 0;
		    -ms-border-radius: 8px 8px 0 0;
		    -webkite-border-radius: 8px 8px 0 0;
	    font-size:14px;
	    width:30%;
	    text-align:center;
	    padding:10px;
	}
	.select-area li:nth-child(2) {
	    border-radius: 0 8px 0 0;
		    -ms-border-radius: 0 8px 0 0;
		    -webkite-border-radius: 0 8px 0 0;
	}
	.select-area li:last-child {
	    border-bottom:none;
	    border-radius: 0 0 8px 8px;
		    -ms-border-radius: 0 0 8px 8px;
		    -webkite-border-radius: 0 0 8px 8px;
	}
	.select-area li:hover {
	    background:rgba(35, 222, 245,0.9);
	    color:#F4F4F4;
	}
		.select-area li.invalid:hover {
	    	background:rgba(101, 102, 102, 0.9);
	    	color:#9E9E9E;
		}
	    .select-area li.selected:hover{
	        background:rgba(35, 222, 245,0.9);
	    	color:#F4F4F4;
	    }
	.select-area li:hover:first-child {
	    background:rgba(244, 244, 244, 0.9);
	    color:#000;
	}
	.select-area li a {
	    color: #fff;
	    display:block;
	    padding:10px;
	    text-decoration:none;
	}

/* 大きい吹き出し
------------------------------------------------------*/
.fukidashi {
    position: relative;
    background: #f4f4f4;
    border-radius: 10px;
	    -ms-border-radius: 10px;
	    -webkite-border-radius: 10px;
    margin: 40px auto;
    padding: 10px 10px 30px;
    width: 90%;
    height: 300px;
    position:relative;
}
	.fukidashi:after {
	    top: 100%;
	    left: 50%;
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	    border-color: rgba(244, 244, 244, 0);
	    border-top-color: #f4f4f4;
	    border-width: 20px;
	    margin-left: -20px;
	}
.fukidashi h2{
    color:#fe908c;
    font-weight:800;
    font-size:16px;
    display:block;
    text-align:center;
    position:absolute;
    top:-30px;
    left:0;
    right:0;
}

/*マイクアイコン*/
.fukidashi .icon-mike,
.fukidashi .icon-mike-active,
.fukidashi .icon-mike-active,
.fukidashi .icon-mike-wait {
    display:none;
    height: 50px;
    width: 50px;
    text-indent:-9999px;
}
    .fukidashi .icon-mike {
        background:transparent url(../images/virtual-charpy/btn/btn-mike-01.png) center top no-repeat;
        background-size:50px;
    }
    .fukidashi .icon-mike-active {
        background:transparent url(../images/virtual-charpy/btn/btn-mike-03.gif) center top no-repeat;
        background-size:50px;
    }
    .fukidashi .icon-mike-wait {
        background: transparent url(../images/virtual-charpy/btn/btn-mike-02.png) center top no-repeat;
        background-size:50px;
    }
.fukidashi .charpy-text {
    color: #333;
    font-size: 1.3em;
    text-align: center;
    margin-top: 3%;
    line-height: 1.3em;
}

/*初回選択肢*/
.fukidashi .start-select{
    list-style:none;
    text-align:center;
    margin-top:20px;
}
	.fukidashi .start-select li{
    	display:inline-block;
        text-align:center;
    }
    .fukidashi .start-select li a{
        display:block;
        background: rgb(0,188,211);
        border-radius: 8px;
		    -ms-border-radius: 8px;
		    -webkite-border-radius: 8px;
        color:#F4F4F4;
        font-size:20px;
        font-weight:800;
        padding:15px;
        margin-bottom:4px;
        text-decoration:none;
        width:240px;
    }
    .fukidashi .start-select li a:hover {
    	background:rgb(35,222,245);
    	color:#F4F4F4;
	}
    .fukidashi .start-select li a hr{
        border: none;
    	height: 1px;
    	background: #9becf5;
    }
    .fukidashi .start-select li a small{
        font-size:14px;
        font-weight:normal;
    }
.fukidashi .new-select{
    list-style:none;
    text-align:center;
    margin-top:20px;
}
	.fukidashi .new-select li{
    	display:inline-block;
        text-align:center;
    }
    .fukidashi .new-select li a{
        display:block;
        background: rgb(0,188,211);
        border-radius: 8px;
		    -ms-border-radius: 8px;
		    -webkite-border-radius: 8px;
        color:#F4F4F4;
        font-size:20px;
        font-weight:800;
        padding:15px;
        margin-left:5px;
        margin-bottom:4px;
        text-decoration:none;
        width:240px;
    }
    .fukidashi .new-select li a:hover {
    	background:rgb(35,222,245);
    	color:#F4F4F4;
	}
.fukidashi .rec-info {
    color: #999;
    font-size: 1em;
    font-weight: normal;
    text-align: center;
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
	display:none;
}
.big-charpy {
    display:noee;
    background:transparent url(../images/virtual-charpy/charpy-01.png) center top no-repeat;
    width: 330px;
    height: 260px;
    position: absolute;
	    bottom: -24px;
	    left: 0;
	    right: 0;
    margin: auto;
}

/* Charpyアニメーション
------------------------------------------------------*/
.charpy-anime {
	width: 360px;
	height: 260px;
	position: absolute;
	    bottom: -24px;
	    left: 0;
	    right: 0;
	margin: auto;
}
	/*待ち状態*/
    .charpy-anime.wait{
	    background: url(../images/virtual-charpy/charpy-anime-wait.svg) left top no-repeat;
		animation: wait 1s steps(2) infinite;
	}
	    @keyframes wait {
		  0% { background-position: 0 0 ; }
		  100% { background-position: -720px 0; }
		}
    /*話し中*/
	.charpy-anime.talk{
	    background: url(../images/virtual-charpy/charpy-anime-talk.svg) left top no-repeat;
		animation: wait 1s steps(2) infinite;
	}
	    @keyframes talk {
		  0% { background-position: 0 0 ; }
		  100% { background-position: -720px 0; }
		}
    /*認識中*/
	.charpy-anime.think {
		background: url(../images/virtual-charpy/charpy-anime-think.svg) left top no-repeat;
		animation: think 2s steps(4) infinite;
	}
	    @keyframes think {
		  0% { background-position: 0 0 ; }
		  100% { background-position: -1440px 0 ; }
		}

/* ボタン関連
------------------------------------------------------*/
/*レイアウト切換*/
.bt-layout,
.bt-layout2 {
    display: none;
    background-color:#F4F4F4;
    border-radius: 10px;
	    -ms-border-radius: 10px;
	    -webkite-border-radius: 10px;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.45);
	    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.45);
	    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.45);
    position: absolute;
	    bottom: -10px;
	    right: -10px;
    width: 60px;
    height: 60px;
}
	.bt-layout a {
	    display: block;
	    background:transparent url(../images/virtual-charpy/btn/btn-layout-01-01.png) center top no-repeat;
	    width: 60px;
	    height: 60px;
	    text-indent:-9999px;
	}
	.bt-layout a:hover {
	    display: block;
	    background:transparent url(../images/virtual-charpy/btn/btn-layout-01-02.png) center top no-repeat;
	}
	.bt-layout2 a {
	    display: block;
	    background:transparent url(../images/virtual-charpy/btn/btn-layout-02-01.png) center top no-repeat;
	    width: 60px;
	    height: 60px;
	    text-indent:-9999px;
	}
	.bt-layout2 a:hover {
	    display: block;
	    background:transparent url(../images/virtual-charpy/btn/btn-layout-02-02.png) center top no-repeat;
	}

/*日本語訳切換*/
.bt-lang,
.bt-lang2 {
    float: right;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 10px;
	    -ms-border-radius: 10px;
	    -webkite-border-radius: 10px;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.45);
	    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.45);
	    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.45);
    position: absolute;
    right: -10px;
    top: -10px;
    z-index: 5;
    background-color:#F4F4F4 ;
}
	.bt-lang a {
	    display: block;
	    background:transparent url(../images/virtual-charpy/btn/btn-lang-01-01.png) center top no-repeat;
	    width: 60px;
	    height: 60px;
	    text-indent:-9999px;
	}
	.bt-lang a:hover {
	    display: block;
	    background:transparent url(../images/virtual-charpy/btn/btn-lang-01-02.png) center top no-repeat;
	}
	.bt-lang2 a {
	    display: block;
	    background:transparent url(../images/virtual-charpy/btn/btn-lang-02-01.png) center top no-repeat;
	    width: 60px;
	    height: 60px;
	    text-indent:-9999px;
	}
	.bt-lang2 a:hover {
	    display: block;
	}
	.jtext{
		disply:none;!important
	}