/*------------------------Style*/
a:link,a:visited{ text-decoration: none; color:#7fbe25;}
a:hover{ text-decoration: none; opacity:0.8; transition: 0.4s;}

.mainColor{ color:#7fbe25;}

.th02{ color:#fff; background:#7fbe25;}


main{}
article{}
p{ line-height:1.7em; margin-bottom:1em;}



#footer{ background:#7fbe25; height:auto;}
#footer p{ color:#fff; font-size:1em; text-align:right; padding:40px 0 20px;}

/*--MainBox--*/
.MainBox{ width:100%; background: url('../img/back.png') ;position: relative;}
.titleBox{ width:320px; height:340px; position: absolute; top:0; right:10%;}
.titleBox img{ padding-bottom:10px;}
.titleBox h1{ background:#fff; width:300px; height:300px; padding-top:70px; border-radius:50%; font-size:12px; text-align:center;}
.titleBox p{ color:#fff; font-size:14px; padding-top:10px;}

.MainBox figure{ text-align:center;}

/*--stageBox info--*/
.stageBox{ margin:-200px auto 20px; padding-top:300px; overflow:hidden;}
.stageBox .infoBox{ width:110%; margin:-300px auto 0; padding-top:100px; margin-left:-5%; border-radius:50% 50% 0 0; background:#fff;}

.stageBox .infoTitle img{ float:left; margin-right:20px;}
.stageBox .infoTitle span{ display:table-cell; vertical-align:middle; width:100px; height:100px; padding:20px;border-radius:50%; background:#7fbe25; margin-left:20px; font-size:14px; color:#fff;}
.tri{width: 0;height: 0;border-style: solid;border-width: 20px 20px 20px 0;border-color: transparent #007bff transparent transparent;}

.stageBox .infoBox div{ margin:20px 0; padding:10px; background:#fff;}
.stageBox .infoBox div img{ float:left;}
.stageBox .infoBox div p{ font-size:18px; padding-left:120px;}
.stageBox article{ background:#e5f1d4;}


/*--balloonBox--*/
.balloonBox { position:relative; background: #ffffff; border: 16px solid #7fbe25; padding:20px; width:60%; border-radius:8px;}
.balloonBox:after, .balloonBox:before { left: 100%; top: 25%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.balloonBox:after { border-color: rgba(255, 255, 255, 0); border-left-color: #ffffff; border-width: 20px; margin-top: -20px; }
.balloonBox:before { border-color: rgba(127, 190, 37, 0); border-left-color: #7fbe25; border-width: 39px; margin-top: -39px; }
.balloonBox h2{ margin-bottom:1em;}
.balloonBox p{ text-align:left;}

.dream{ float:right; width:35%; height:auto;}

/*--characterBox--*/
.characterBox{}
.characterBox nav{ text-align:right; position: relative; z-index:1000;}
.characterBox nav img{cursor: pointer;}

#carousel{ margin-top:-100px; position: relative; z-index:1;}
.item figure{ top:-120px; left:40%; position:relative; z-index:1200; width:80px; margin-right:10px; float:left;}
.item figure figcaption{ text-align:center;}



/*--utauBox--*/
.utauBox{ background: url('../img/utauBack.png') ;}
.utauBox header{ color:#fff; background:#7fbe25; padding:30px 0;}
.utauBox header .title{display: table-cell;}
.utauBox header p{ font-size:18px;}
.utauBox header .glyphicon-chevron-right{ display:block; font-size:20px; padding:0; display:table-cell; vertical-align:middle;}
.glyphicon-chevron-right{ width:20px;}
.glyphicon{ width:20px;}
.utauBox a{ display:block;}


/*------------------------otherStyle*/
.tC{ text-align:center;}

.fL{ float:left;}
.fR{ float:right;}

/*--clearFix--*/
main:after, .cf:after{/*for modern browser*/
    content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden;}
main, .cf {zoom:1;/*for IE 5.5-7*/}

@media only screen and (max-width:1080px) {
.titleBox{ position:static; width:100%; height:auto; padding:10px; text-align:center;}
.titleBox h1{ margin:auto; width:200px; height:200px; padding-top:40px;}
.titleBox h1 img{ width:70%; height:auto;}
.titleBox p{ color:#000;}

.stageBox .infoBox{ width:100%; margin:-300px auto 0; margin-left:0; padding-left:0; padding-top:180px; border-radius:0;}

#carousel{ margin-top:-40px;}

.fL, .fR, .dream{ float:none; text-align:center; margin:20px auto;}
.dream{ width:50%;}

.balloonBox{ width:100%;}
.balloonBox:after, .balloonBox:before{ border:none;}
}
@media only screen and (max-width:768px) {
.item figure{ top:0; left:0;}
.utauBox header p{ font-size:14px;}
}
@media only screen and (max-width:340px) {
.characterBox nav img{ width:30%; height:auto; margin-bottom:10px;}
}