/* Minification failed. Returning unminified contents.
(1595,29): run-time error CSS1030: Expected identifier, found ' '
(1605,29): run-time error CSS1030: Expected identifier, found ' '
 */
/*@import url('../../../Font/css/font-awesome.min.css');*/

.info,.info-a,.info-b,.info-c,.info-d,.info-left,.info-right,.info-center {
  -webkit-animation: pulse 0.5s;
  -moz-animation: pulse 0.5s;
  animation: pulse 0.5s;
  height: 4rem;
  /*margin-top: 3rem;*/
  background: teal;
  border-radius: 0.5rem;
  box-shadow: 0.1rem 0.15rem 0.1rem #005a5a;
  cursor: pointer;
 /*float: left;*/
 display: block;
 margin-right: 2.35765%;
 width: 38.82117%;
 color:white;
 text-align:center;
 padding-top: 0.5rem;
}
.info-a {
	position: fixed;bottom: 1rem;left: 1rem;font-size: 3rem;line-height: 0;z-index: 50;
}
.info-b {
	position: fixed;bottom: 1rem;right: 1rem;font-size: 3rem;line-height: 0;z-index: 50;
}


.info-left {
	position: relative;/*bottom: 1rem;*/float:left;left: 0.5rem;font-size: 3rem;line-height: 0;z-index: 50;
}
.info-right {
	position: relative;/*bottom: 1rem;*/float:right;right: 0rem;font-size: 3rem;line-height: 0;z-index: 50;
}
.info-center {
	position: relative;/*bottom: 1rem;*/float:none;right: 0rem;font-size: 3rem;line-height: 0;z-index: 50;margin: 0 auto;
}
/*.menu-bottom-left {position: fixed;bottom: 10rem;left: 1.2rem;font-size: 0;line-height: 0;z-index: 50;} 
.menu-bottom-right {position: fixed;top: 1.2rem;right: 7rem;font-size: 0;line-height: 0;z-index: 50;}*/ 

.popinfo,.popinfo-a,.popinfo-b,.popinfo-c,.popinfo-d,.popinfo-left,.popinfo-right,.popinfo-center {
  -webkit-animation: pulse 0.5s;
  -moz-animation: pulse 0.5s;
  animation: pulse 0.5s;
  /*height: 3.3rem;*/
  /*margin-top: 3rem;*/
  background: teal;
  border-radius: 0.5rem;
  /*box-shadow: 0.3px 0.5px 0.2px #005a5a;*/
  cursor: pointer;
 /*float: left;*/
 display: block;
 margin-right: 2.35765%;
 width: 38.82117%;
 /*color:white;*/
 text-align:center;
 padding-top: 0.5rem;
}
.popinfo-a {
	position: fixed;bottom: 1rem;left: 1rem;font-size: 3rem;line-height: 0;z-index: 50;
}
.popinfo-b {
	position: fixed;bottom: 1rem;right: 1rem;font-size: 3rem;line-height: 0;z-index: 50;
}

.popinfo-left {
	position: relative; /*bottom: 1rem;*/
	float: left; /*left: 1rem;*/ /*font-size: 2.3rem!important;line-height: 0;*/
	z-index: 50;
}
.popinfo-right {
	position: relative; /*bottom: 1rem;*/
	float: right; /*right: 0rem;*/ /*font-size: 2.3rem!important;line-height: 0;*/
	z-index: 50;
}
.popinfo-center {
	position: relative; /*bottom: 1rem;*/
	float: none; /*right: 0rem;*/ /*font-size: 2.3rem!important;line-height: 0;*/
	z-index: 50;
	margin: 0.7rem auto 0.7rem;
}
/*電話ボタンのCSS*/
.phone-no {
	font-size:2rem;
	position:relative;
	top:0.6rem;
	text-align:left;
}
.phone-info {
	font-size:1.22rem;
	position:absolute;
	top:-0.7rem;
	width:18rem;
	text-align:left;
	left: -0.5rem;
}
/*電話ボタンのCSS*/
.phone-no-mini {
	font-size:2rem;
	position:relative;
	top:-0.8rem;
	/*text-align:right;
	right:2rem;*/
}
.phone-info-mini {
	font-size:1.2rem;
	position:relative;
	top:-1.5rem;
	/*width:13rem;*/
	/*text-align:right;*/
	left: 1rem;
	/*width:110%;*/
}
/*電話ボタンのCSS*/
.phone-link {
	display: inline!important;
	top: -1.1rem;
}


.toolbar,.toolbar-a,.toolbar-b,.toolbar-c,.toolbar-d,.toolbar-left,.toolbar-right,.toolbar-center {
  -webkit-animation: pulse 0.5s;
  -moz-animation: pulse 0.5s;
  animation: pulse 0.5s;
  height: 4rem;
  /*margin-top: 3rem;*/
  /*background: teal;*/
  border-radius: 0.5rem;
  /*box-shadow: 0.1rem 0.15rem 0.1rem #005a5a;*/
  cursor: pointer;
 /*float: left;*/
 display: block;
 margin-right: 2.35765%;
 width: 38.82117%;
 /*color:white;*/
 text-align:center;
 padding-top: 0.5rem;
}
.toolbar-a {
	position: absolute;
	bottom: 1rem;
	left: 0rem;
	font-size: 3rem;
	line-height: 0;
	z-index: 50;
}
.toolbar-b {
	position: absolute;
	bottom: 1rem;
	right: 0rem;
	font-size: 3rem;
	line-height: 0;
	z-index: 50;
}
.toolbar-c {
	position: absolute;
	bottom: 1rem;
	right: 0rem;
	font-size: 3rem;
	line-height: 0;
	z-index: 50;
}


.toolbar-left {
	position: relative;/*bottom: 1rem;*/float:left;left: 0.5rem;font-size: 3rem;line-height: 0;z-index: 50;
}
.toolbar-right {
	position: relative;/*bottom: 1rem;*/float:right;right: 0rem;font-size: 3rem;line-height: 0;z-index: 50;
}
.toolbar-center {
	position: relative;/*bottom: 1rem;*/float:none;right: 0rem;font-size: 3rem;line-height: 0;z-index: 50;margin: 0 auto;
}
.toolbar-bt{
  /*color: rgb(127, 191, 255)!important;*/
   font-size: 2.5rem!important;
}
.toolbar-bt-l {
	border-top-right-radius: 3.5rem !important;
}
.toolbar-bt-r {
	border-top-left-radius: 3.5rem !important;
}
.info-back {
	position: fixed!important;
	bottom: 0rem;
	z-index:10;
	white-space:nowrap;
}
.wait-bt {
	width: 68%;
	height: auto;
	float: right;
	position: fixed;
	right: -2rem;
	top: 3.5rem;
	z-index: 1;
	opacity: 0.9;
	box-shadow: 10px 10px 10px rgba(3, 0, 0, 0.6);
	padding-top: 0;
}

/*仕様１*/
.progressbar {
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.progressbar li {
  list-style-type: none;
  width: 25%;
  float: left;
  font-size: 0.67rem;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;
}
.progressbar li:before {
  width: 1.7rem;
  height: 1.7rem;
  content: counter(step);
  counter-increment: step;
  line-height: 1.7rem;
  border: 0.12rem solid #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 0.56rem auto;
  border-radius: 50%;
  background-color: white;
}
.progressbar li:after {
  width: 100%;
  height: 0.12rem;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 10.28rem;
  left: -50%;
  z-index: -1;
}
.progressbar li:first-child:after {
  content: none;
}
.progressbar li.active {
  color: green;
}
.progressbar li.active:before {
  border-color: #55b776;
}
.progressbar li.active + li:after {
  background-color: #55b776;
}
/*仕様２*/
*, *:after, *:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Form Progress */
.progress {
  /*width: auto;*/
  /*margin: 0.1rem auto;*/
  text-align: center;
}
.progress .circle,
.progress .bar {
  display: inline-block;
  background: #fff;
  width: 2.3rem; height: 2.3rem;
  border-radius: 2.3rem;
  border: 0.1rem solid #d5d5da;
}
.progress .bar {
  position: relative;
  width: 28%;
  height: 0.34rem;
  top: -1.84rem;
  margin-left: -0.28rem;
  margin-right: -0.28rem;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.progress .circle .label {
  display: inline-block;
  width: 1.78rem;
  height: 1.78rem;
  line-height: 1.78rem;
  border-radius: 1.78rem;
  margin-top: 0.17rem;
  color: #b5b5ba;
  font-size: 0.95rem;
}
.progress .circle .title {
  color: #b5b5ba;
  font-size: 0.56rem;
  text-align: center;
  line-height: 1.7rem;
  margin-left: -0.28rem;
  width: 4.5rem;
}

/* Done / Active */
.progress .bar.done,
.progress .circle.done {
  background: #eee;
}
.progress .bar.active {
  background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}
.progress .circle.done .label {
  color: #FFF;
  background: #8bc435;
  box-shadow: inset 0 0 0.12rem rgba(0,0,0,.2);
}
.progress .circle.done .title {
  color: #444;
}
.progress .circle.active .label {
  color: #FFF;
  background: #0c95be;
  box-shadow: inset 0 0 0.12rem rgba(0,0,0,.2);
}
.progress .circle.active .title {
  color: #0c95be;
}


.progress0 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
  color: #849397;
}
.progress0 > li {
  position: relative;
  display: table-cell;
  text-align: center;
  font-size: 1.4rem;
}
.progress0 > li:before {
  content: attr(data-step);
  display: block;
  margin: 0 auto;
  background: #DFE3E4;
  width: 3rem;
  height: 3rem;
  text-align: center;
  margin-bottom: 0.25rem;
  line-height: 3rem;
  border-radius: 100%;
  position: relative;
  z-index: 1000;
}
.progress0 > li:after {
  content: '';
  position: absolute;
  display: block;
  background: #DFE3E4!important;
  width: 100%;
  height: 0.5rem;
  top: 1.25rem;
  left: 50%;
  margin-left: 1.5rem;
  /*z-index: -1;*/
}
.progress0 > li:last-child:after {
  display: none;
}
.progress0 > li.is-complete {
  color: rgba(51, 204, 204, 0.9)!important;
}
.progress0 > li.is-complete:before, .progress0 > li.is-complete:after {
  color: #FFF!important;
  background: rgba(51, 204, 204, 0.9)!important;
}
.progress0 > li.is-active {
  color: #3498DB;
}
.progress0 > li.is-active:before {
  color: #FFF;
  background: #3498DB;
}

/**
 * Needed for IE8
 */
.progress0__last:after {
  display: none !important;
}

/**
 * Size Extensions
 */
.progress0--medium {
  font-size: 1.5rem;
}

.progress0--large {
  font-size: 2rem;
}


.progress0 {
  margin-bottom: 0.5rem;
  margin-top:0.5rem;
}
/*サイズ*/
/*@media (width > height) {
    body, html {
        width = height*4/3!important;
        height: 100%!important;
        font-size: 18px !important;
    }
}*/
/*横の場合、bodyのサイズを設定 ->IEも対応するために、複雑になった*/


@media all and (orientation : portrait) and  (max-width: 350px) {
    body, html {
        font-size: 8px !important;
        min-width: 380px !important;
    }
}

@media all and (orientation : portrait) and  (min-width: 351px) and (max-width: 400px) {
	body, html {
		font-size: 10px !important;
	}
}

@media all and (orientation : portrait) and  (min-width: 401px) and (max-width: 450px) {
	body, html {
		font-size: 11px !important;
	}
}

@media all and (orientation : portrait) and (min-width: 451px) and (max-width: 490px) {
	body, html {
		font-size: 13px !important;
	}
}

@media all and (orientation : portrait) and (min-width: 491px) and (max-width: 540px) {
	body, html {
		font-size: 14px !important;
	}
}

@media all and (orientation : portrait) and (min-width: 541px) and (max-width: 560px) {
	body, html {
		font-size: 15px !important;
	}
}

@media all and (orientation : portrait) and (min-width: 561px) and (max-width: 600px) {
	body, html {
		font-size: 16px !important;
	}
}

@media all and (orientation : portrait) and (min-width: 601px) and (max-width: 640px) {
	body, html {
		font-size: 17px !important;
	}
}

@media all and (orientation : portrait) and (min-width: 641px) and (max-width: 660px) {
	body, html {
		font-size: 18px !important;
	}
}

@media all and (orientation : portrait) and (min-width: 661px) and (max-width: 700px) {
	body, html {
		font-size: 19px !important;
	}
}

@media all and (orientation : portrait) and (min-width: 701px) and (max-width: 750px) {
	body, html {
		font-size: 20px !important;
	}
}

@media all and (orientation : portrait) and (min-width: 751px) and (max-width: 775px) {
	body, html {
		font-size: 21px !important;
	}
}

@media all and (orientation : portrait) and (min-width: 776px) and (max-width: 800px) {
	body, html {
		font-size: 22px !important;
	}
}

@media all and (orientation : portrait) and (min-width: 801px) and (max-width: 850px) {
	body, html {
		font-size: 23px !important;
	}
}

@media all and (orientation : portrait) and (min-width: 851px) and (max-width: 880px) {
	body, html {
		font-size: 24px !important;
	}
}

@media all and (orientation : portrait) and (min-width: 881px) and (max-width: 910px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 911px) and (max-width: 950px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 951px) and (max-width: 980px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 981px) and (max-width: 1010px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1011px) and (max-width: 1050px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1051px) and (max-width: 1075px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1076px) and (max-width: 1100px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1101px) and (max-width: 1125px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1126px) and (max-width: 1150px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1151px) and (max-width: 1180px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1181px) and (max-width: 1210px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1211px) and (max-width: 1250px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1251px) and (max-width: 1280px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1281px) and (max-width: 1310px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1311px) and (max-width: 1350px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1351px) and (max-width: 1380px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1381px) and (max-width: 1410px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1411px) and (max-width: 1450px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1451px) and (max-width: 1480px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1481px) and (max-width: 1510px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1511px) and (max-width: 1550px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1551px) and (max-width: 1650px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1651px) and (max-width: 1750px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1751px) and (max-width: 1850px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1851px) and (max-width: 1950px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 1951px) and (max-width: 2050px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 2051px) and (max-width: 2150px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 2151px) and (max-width: 2250px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 2251px) and (max-width: 2350px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 2351px) and (max-width: 2450px) {
    body, html {
        font-size: 24px !important;
    }
}

@media all and (orientation : portrait) and (min-width: 2451px) {
    body, html {
        font-size: 24px !important;
    }
}
@media all and (orientation : portrait) {
	/*Pop位置調整*/
	.popflg {
		position: relative;
		top: -4rem;
	}
}
/*横の場合*/
@media all and (orientation : landscape) {
	#loader {
		left: 50% !important;
	}
}

@media all and (orientation : landscape) and (max-device-height: 350px) {
    body, html {
        font-size: 6px !important;
    }

    .info-back, .ui-page, body {
        max-width: 230px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 220px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 351px) and (max-device-height: 400px) {
    body, html {
        font-size: 7px !important;
    }

    .info-back, .ui-page, body {
        max-width: 260px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 250px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 401px) and (max-device-height: 450px) {
    body, html {
        font-size: 8px !important;
    }

    .info-back, .ui-page, body {
        max-width: 300px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 290px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 451px) and (max-device-height: 490px) {
    body, html {
        font-size: 9px !important;
    }

    .info-back, .ui-page, body {
        max-width: 337px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 327px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 491px) and (max-device-height: 540px) {
    body, html {
        font-size: 10px !important;
    }

    .info-back, .ui-page, body {
        max-width: 368px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 358px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 541px) and (max-device-height: 560px) {
    body, html {
        font-size: 11px !important;
    }

    .info-back, .ui-page, body {
        max-width: 405px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 395px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 561px) and (max-device-height: 600px) {
    body, html {
        font-size: 11px !important;
    }

    .info-back, .ui-page, body {
        max-width: 420px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 410px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 601px) and (max-device-height: 640px) {
    body, html {
        font-size: 12px !important;
    }

    .info-back, .ui-page, body {
        max-width: 450px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 440px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 641px) and (max-device-height: 660px) {
    body, html {
        font-size: 13px !important;
    }

    .info-back, .ui-page, body {
        max-width: 480px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 470px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 661px) and (max-device-height: 700px) {
    body, html {
        font-size: 13px !important;
    }

    .info-back, .ui-page, body {
        max-width: 495px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 485px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 701px) and (max-device-height: 750px) {
    body, html {
        font-size: 14px !important;
    }

    .info-back, .ui-page, body {
        max-width: 525px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 515px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 751px) and (max-device-height: 775px) {
    body, html {
        font-size: 15px !important;
    }

    .info-back, .ui-page, body {
        max-width: 563px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 553px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 776px) and (max-device-height: 800px) {
    body, html {
        font-size: 16px !important;
    }

    .info-back, .ui-page, body {
        max-width: 582px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 572px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 801px) and (max-device-height: 850px) {
    body, html {
        font-size: 16px !important;
    }

    .info-back, .ui-page, body {
        max-width: 600px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 590px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 851px) and (max-device-height: 880px) {
    body, html {
        font-size: 17px !important;
    }

    .info-back, .ui-page, body {
        max-width: 638px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 628px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 881px) and (max-device-height: 910px) {
    body, html {
        font-size: 18px !important;
    }

    .info-back, .ui-page, body {
        max-width: 660px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 650px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 911px) and (max-device-height: 950px) {
    body, html {
        font-size: 19px !important;
    }

    .info-back, .ui-page, body {
        max-width: 683px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 673px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 951px) and (max-device-height: 980px) {
    body, html {
        font-size: 20px !important;
    }

    .info-back, .ui-page, body {
        max-width: 713px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 703px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 981px) and (max-device-height: 1010px) {
    body, html {
        font-size: 21px !important;
    }

    .info-back, .ui-page, body {
        max-width: 735px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 725px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1011px) and (max-device-height: 1050px) {
    body, html {
        font-size: 21px !important;
    }

    .info-back, .ui-page, body {
        max-width: 758px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 748px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1051px) and (max-device-height: 1075px) {
    body, html {
        font-size: 22px !important;
    }

    .info-back, .ui-page, body {
        max-width: 788px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 778px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1076px) and (max-device-height: 1100px) {
    body, html {
        font-size: 22px !important;
    }

    .info-back, .ui-page, body {
        max-width: 757px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 747px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1101px) and (max-device-height: 1125px) {
    body, html {
        font-size: 23px !important;
    }

    .info-back, .ui-page, body {
        max-width: 775px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 765px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1126px) and (max-device-height: 1150px) {
    body, html {
        font-size: 24px !important;
    }

    .info-back, .ui-page, body {
        max-width: 794px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 784px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1151px) and (max-device-height: 1180px) {
    body, html {
        font-size: 24px !important;
    }

    .info-back, .ui-page, body {
        max-width: 813px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 803px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1181px) and (max-device-height: 1210px) {
    body, html {
        font-size: 24px !important;
    }

    .info-back, .ui-page, body {
        max-width: 836px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 826px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1211px) and (max-device-height: 1250px) {
    body, html {
        font-size: 25px !important;
    }

    .info-back, .ui-page, body {
        max-width: 858px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 848px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1251px) and (max-device-height: 1280px) {
    body, html {
        font-size: 26px !important;
    }

    .info-back, .ui-page, body {
        max-width: 888px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 878px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1281px) and (max-device-height: 1310px) {
    body, html {
        font-size: 26px !important;
    }

    .info-back, .ui-page, body {
        max-width: 960px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 950px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1311px) and (max-device-height: 1350px) {
    body, html {
        font-size: 27px !important;
    }

    .info-back, .ui-page, body {
        max-width: 983px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 973px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1351px) and (max-device-height: 1380px) {
    body, html {
        font-size: 27px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1013px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1003px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1381px) and (max-device-height: 1410px) {
    body, html {
        font-size: 28px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1035px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1025px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1411px) and (max-device-height: 1450px) {
    body, html {
        font-size: 28px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1058px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1048px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1451px) and (max-device-height: 1480px) {
    body, html {
        font-size: 29px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1088px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1078px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1481px) and (max-device-height: 1510px) {
    body, html {
        font-size: 30px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1110px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1100px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1511px) and (max-device-height: 1550px) {
    body, html {
        font-size: 30px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1133px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1123px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1551px) and (max-device-height: 1650px) {
    body, html {
        font-size: 31px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1163px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1153px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1651px) and (max-device-height: 1750px) {
    body, html {
        font-size: 32px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1238px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1228px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1751px) and (max-device-height: 1850px) {
    body, html {
        font-size: 33px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1313px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1303px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1851px) and (max-device-height: 1950px) {
    body, html {
        font-size: 33px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1388px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1378px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 1951px) and (max-device-height: 2050px) {
    body, html {
        font-size: 34px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1463px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1453px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 2051px) and (max-device-height: 2150px) {
    body, html {
        font-size: 35px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1538px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1528px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 2151px) and (max-device-height: 2250px) {
    body, html {
        font-size: 35px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1613px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1603px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 2251px) and (max-device-height: 2350px) {
    body, html {
        font-size: 36px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1688px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1678px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 2351px) and (max-device-height: 2450px) {
    body, html {
        font-size: 37px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1765px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1755px !important;
        left: 5px !important;
    }
}

@media all and (orientation : landscape) and (min-device-height: 2451px) {
    body, html {
        font-size: 38px !important;
    }

    .info-back, .ui-page, body {
        max-width: 1837px !important;
        margin: 0 auto !important;
        position: relative;
    }

    .ui-popup-active {
        max-width: 1827px !important;
        left: 5px !important;
    }
}
@media all and (orientation : landscape) {
	/*Pop位置調整*/
	.popflg {
		position: relative;
		top: -2rem;
	}
}

/*横のoverflow*/
.ui-mobile .ui-page-active{
	overflow:visible!important;
	overflow-x:visible!important;
}
/*titleの文字表示修正 */
.ui-header .ui-title,
.ui-footer .ui-title {
	font-size: 2rem;
	min-height: 1.1em;
	text-align: center;
	display: block;
	margin: 0 1%;
	padding: .2rem 0!important;
	text-overflow: ellipsis;
	overflow: visible;
	white-space: nowrap;
	outline: 0 !important;
}
/*症状選択するときの文字サイズ */
.ui-select ,.ui-selectmenu ,.ui-icon-delete
{
	font-size: 1.5rem!important;
}
body, html {
        /*background-color: rgb(127, 195, 255)!important;*/
	-webkit-font-smoothing: antialiased;/*文字表示 */
	-moz-osx-font-smoothing: grayscale;/*文字表示 */
}
/*四角線を表示しないように*/
a {
	border:0!important;
 }
/*阴影效果 <div class="box11 shadow"></div> */

.shadow {
	position: relative;
	max-width: 270px;
	box-shadow: 0px 1px 4px rgba(0,0,0,0.3),
				0px 0px 20px rgba(0,0,0,0.1) inset;
}

.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
}

.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
}

.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   transform:rotate(-3deg);
}

.shadow::after{
   right:10px;
   left:auto;
   transform:rotate(3deg);
 }


/*診療時間*/

.th-groups th {
	background-color: rgba(0,0,0,0.07);
	border-right: 1px solid #fff;
	text-align: center;
}
.th-groups td {
	text-align: center;
}
@media screen and (max-width: 10em) {
	/* Style the first cell in a row in a dark bar */
	.financial-table-reflow th: first-child {
		color: #fff;
		background-color: #555;
		font-size: 1.2em;
		padding: .3em .6em .3em .6em;
		-webkit-text-shadow: none;
		-moz-text-shadow: none;
		text-shadow: none;
	}
	/* Hide the label in the first cell */
	.financial-table-reflow th: first-child .ui-table-cell-label {
		display: none;
	}
	/* Make the grouped header labels green */
	.ui-table-reflow th .ui-table-cell-label-top,
	.ui-table-reflow td .ui-table-cell-label-top {
		font-weight: bold;
		color: #319B47;
		font-size: 1.1em;
	}
}
/* Media query to show as a standard table at wider widths, must be very wide for this table */
@media screen and (min-width: 10em) {
	/* Show the table header rows */
	.financial-table-reflow td,
	.financial-table-reflow th,
	.financial-table-reflow tbody th,
	.financial-table-reflow tbody td,
	.financial-table-reflow thead td,
	.financial-table-reflow thead th {
		display: table-cell;
		margin: 0;
	}
	/* Hide the labels in each cell */
	.financial-table-reflow td .ui-table-cell-label,
	.financial-table-reflow th .ui-table-cell-label {
		display: none;
	}
}
/* Hack to make IE9 and WP7.5 treat cells like block level elements */
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/
@media (max-width: 10em) {
	.financial-table-reflow td,
	.financial-table-reflow th {
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		float: left;
		clear: left;
	}
}
/*上のツールボタン*/
/*.side-rightbar a,.chat-tips i {background: url(right_bg.png) no-repeat;}*/ 
.side-rightbar {position: fixed;top: 20px;right: 20px;font-size: 2rem;line-height: 2rem;z-index: 50;} 
.side-rightbar a {display: inline-block;background-color: #e7e7e7;margin-bottom: 2px;} 

/*.side-leftbar a,.chat-tips i {background: url(right_bg.png) no-repeat;}*/ 
.side-leftbar {position: fixed;top: 20px;left: 20px;font-size: 0;line-height: 0;z-index: 50;} 
.side-leftbar a {display: inline-block;margin-bottom: 2px;} 

/*.side-centerbar a,.chat-tips i {background: url(right_bg.png) no-repeat;}*/ 
.side-centerbar {position: fixed;top: 20px;text-align: center;font-size: 0;line-height: 0;z-index: 50;} 
.side-centerbar a {display: inline-block;margin-bottom: 2px;} 


.menu-top-left {position:absolute;top: 0rem;left: 1.2rem;font-size: 0;line-height: 0;z-index: 50;} 
.menu-top-right {position: absolute;top: 0rem;right: 7rem;font-size: 0;line-height: 0;z-index: 50;} 
.menu-bottom-left {position: fixed;bottom: 10rem;left: 1.2rem;font-size: 0;line-height: 0;z-index: 50;} 
.menu-bottom-right {position: fixed;top: 1.2rem;right: 7rem;font-size: 0;line-height: 0;z-index: 50;} 
/*背景画像*/
html,body {
    /*background: url("/img/bg.png") repeat fixed 0 0 !important;*/
}

/*頭部分の医院名*/
.text {
  fill: url(#gr-radial);
}

body {
  background: #222 -webkit-linear-gradient(0deg, #222 50%, #272727 50%);
  background: #222 linear-gradient(90deg, #222 50%, #272727 50%);
  background-size: .2em 100%;
  /*font: 14.5em/1 Open Sans, Impact;*/
  /*text-transform: uppercase; 全部大文字になった*/
  margin: 0;
}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

/*文字*/
/*
h2 {
  font-family:inherit;
  font-size: 7em;
  text-align: center;
}
h5 {
  font-family:inherit;
  font-size: 2em;
  text-align: center;
}*/
body {
  background: #c9f9c9;
}
.text10{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 1rem;
  text-shadow: #666699 1px 1px 1px,
               #003366 1px 1px 1px;
}
.text12{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 1.2rem;
  text-shadow: #666699 1px 1px 1px,
               #003366 1px 1px 1px;
}
.text14{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 1.4rem;
  text-shadow: #666699 1px 1px 1px,
               #003366 1px 1px 1px;
}
.text16{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 1.6rem;
  text-shadow: #666699 1px 1px 1px,
               #003366 1px 1px 1px;
}
.text18{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 1.8rem;
  text-shadow: #666699 1px 1px 1px,
               #003366 1px 1px 1px;
}
.text20{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 2.0rem;
  text-shadow: #666699 1px 1px 1px,
               #003366 1px 1px 1px;
}
.text22{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 2.2rem;
  text-shadow: #666699 1px 1px 1px,
               #003366 1px 1px 1px;
}
.text24{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 2.4rem;
  text-shadow: #666699 1px 1px 1px,
               #003366 1px 1px 1px;
}
.text26{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 2.6rem;
  text-shadow: #666699 2px 2px 1px,
               #003366 4px 7px 6px;
}
.text28{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 2.8rem;
  text-shadow: #666699 1px 1px 1px,
               #003366 1px 1px 1px;
}
.text30{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  font-size: 3rem;
  text-shadow: #666699 2px 2px 2px,
               #003366 2px 2px 2px;
}
/*
.text10{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 1rem;
  text-shadow: #6699cc 1px 1px 0,
               #666699 1px 2px 1px,
               #003366 2px 3px 2px;
}
.text12{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 1.2rem;
  text-shadow: #6699cc 1px 1px 0,
               #666699 1px 2px 1px,
               #003366 2px 3px 2px;
}
.text14{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 1.4rem;
  text-shadow: #6699cc 1px 2px 0,
               #666699 2px 2px 1px,
               #003366 3px 4px 3px;
}
.text16{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 1.6rem;
  text-shadow: #6699cc 1px 2px 0,
               #666699 2px 2px 1px,
               #003366 4px 7px 6px;
}
.text18{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 1.8rem;
  text-shadow: #6699cc 1px 2px 0,
               #666699 2px 2px 1px,
               #003366 4px 7px 6px;
}
.text20{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 2.0rem;
  text-shadow: #6699cc 1px 2px 0,
               #666699 2px 2px 1px,
               #003366 4px 7px 6px;
}
.text22{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 2.2rem;
  text-shadow: #6699cc 1px 2px 0,
               #666699 2px 2px 1px,
               #003366 4px 7px 6px;
}
.text24{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 2.4rem;
  text-shadow: #6699cc 1px 2px 0,
               #666699 2px 2px 1px,
               #003366 4px 7px 6px;
}
.text26{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 2.6rem;
  text-shadow: #6699cc 1px 2px 0,
               #666699 2px 2px 1px,
               #003366 4px 7px 6px;
}
.text28{
  font-family:inherit;
  text-transform: uppercase;
  text-align: center;
  color: #003366;
  font-size: 2.8rem;
  text-shadow: #6699cc 1px 2px 0,
               #666699 2px 2px 1px,
               #003366 4px 7px 6px;
}
*/
/*進捗欄*/
.nav_block {
	margin-top: 40px;
	float: left;
	border-width: 1px;
	border-style: solid;
	border-color: #dedede transparent #b5b4b0 #c6c6c5;
}
.nav_block li {
	float: left;
	text-shadow: 0 1px 0 #fff;
	background-color: #e6e6e6;
}
.nav_block li a {
	position: relative;
	display: block;
	color: #7d7c7c;
	padding: 0 25px;
	height: 40px;
	line-height: 40px;
} 
.nav_block li a:before {
	position: absolute;
	/*font-family: 'entypo';*/
	font-style: normal;
	speak: none;
	font-weight: normal;
	font-smoothing: antialiased;
	font-size: 22px;
	margin-right: 8px;
	text-indent: 8px;
	z-index: 3;
	transform: translateY(-60px);
}
.nav_block li a:after {
	position: absolute;
	top: 5px;
	right: -14px;
	content: "";
	width: 32px;
	height: 35px;
	box-shadow: 0 1px 0 #c6c6c5 inset,-1px 0 0 #c6c6c5 inset, 1px 0 0 #fff,0 -1px 0 #fff;
	background-color: #e6e6e6;
 	clip: rect(-1px 31px 29px 1px);
	transform: rotate(45deg);
	z-index: 2;
}
.nav_block li a:hover,
	.nav_block li .active {	
	text-decoration: none;
	margin: -1px;
}
.item1 li a:hover,
	.item1 li .active {
	color: #aa1010;
	text-shadow: 0 1px 0 #f28383;
	border:1px solid #e00e0e;
	box-shadow: 0 1px 0 #f17a7a inset;
	background-color: #eb4141;
}
.item2 li a:hover,
	.item2 li .active {
	color: #825812;
	text-shadow: 0 1px 0 #fff9ee;
	border:1px solid #edb524;
	box-shadow: 0 1px 0 #ffd692 inset;
	background-color: #ffc15b;
}
.nav_block li a i {
	display: inline-block;
	font-style: normal;
}
.nav_block li a:not(.active):hover i {
	animation: moveText 300ms ease;
	padding-left: 45px;
	font-size: 18px;
}
.item1 li a:not(.active):hover:after,
	.item1 li .active:after {
	background-color: #eb4141;
	box-shadow: 0 1px 0 #e00e0e inset,-1px 0 0 #e00e0e inset, 1px 0 0 #d4aead,0 -1px 0 #d4aead;
}
.item2 li a:not(.active):hover:after,
	.item2 li .active:after {
	background-color: #ffbd51;
	box-shadow: 0 1px 0 #e6b42e inset,-1px 0 0 #e6b42e inset, 1px 0 0 #d4aead,0 -1px 0 #d4aead;
}
.nav_block li a:not(.active):hover:before {
	transform: translateY(0px);
	animation: moveIcon 300ms ease;
	font-size: 30px;
}
.nav_block li .active:before {
	text-indent: -8px;
	transform: translateY(0px);
}
.nav_block li .active:after {
	right: -15px;
}
.nav_block li .active:hover:before,
	.nav_block li .active:hover i {
	animation: none;
}
@keyframes moveText {
    from {
        transform: translateY(80px);
        opacity: 0.1;
    }
    to {
        transform: translate(0);
        opacity: 1;
    }
}
@keyframes moveIcon {
    from {
        transform: translateY(-80px);
        opacity: 0.1;
    }
    to {
        transform: translate(0);
        opacity: 1;
    }
}
/*3D文字*/
.svgTxt text{
	/*text-anchor:middle;*/
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
	cursor: pointer;
}
.deepIndentStyle10{
	font-family:inherit;
	font-size: 1rem;
}
.deepIndentStyle12{
	font-family:inherit;
	font-size: 1.2rem;
}
.deepIndentStyle14{
	font-family:inherit;
	font-size: 1.4rem;
}
.deepIndentStyle16{
	font-family:inherit;
	font-size: 1.6rem;
}
.deepIndentStyle18{
	font-family:inherit;
	font-size: 1.8rem;
}
.deepIndentStyle20{
	font-family:inherit;
	font-size: 2rem;
}
.deepIndentStyle22{
	font-family:inherit;
	font-size: 2.2rem;
}
.deepIndentStyle24{
	font-family:inherit;
	font-size: 2.4rem;
}
.deepIndentStyle26{
	font-family:inherit;
	font-size: 2.6rem;
}
.deepIndentStyle28{
	font-family:inherit;
	font-size: 2.8rem;
}
.deepIndentStyle30{
	font-family:inherit;
	font-size: 3rem;
}

/*全体的な背景色*/
.bg-1 {
    background: #283048!important; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #283048 , #859398)!important; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #283048 , #859398)!important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-2 {
    background: #67B26F!important; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #67B26F , #4ca2cd)!important; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #67B26F , #4ca2cd)!important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-3 {
    background: #ff7e5f; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #ff7e5f , #feb47b); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ff7e5f , #feb47b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
}
.bg-4 {
    
background: #4ECDC4; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #4ECDC4 , #556270); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #4ECDC4 , #556270); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
}
.bg-5 {
    background: #bdc3c7; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #bdc3c7 , #2c3e50); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #bdc3c7 , #2c3e50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
}
.bg-6 {
    background: #ffd89b; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #ffd89b , #19547b); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ffd89b , #19547b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
}
.bg-7 {
    background: #808080; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #808080 , #3fada8); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #808080 , #3fada8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
}
.bg-8 {
    background: #2C3E50; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #2C3E50 , #FD746C); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #2C3E50 , #FD746C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     
}
.bg-9 {
    background: #2C3E50; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #2C3E50 , #4CA1AF); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #2C3E50 , #4CA1AF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
}
.bg-10 {
    background: #4CA1AF; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #4CA1AF , #C4E0E5); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #4CA1AF , #C4E0E5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
}
.bg-11 {
    background: #8e9eab; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #8e9eab , #eef2f3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #8e9eab , #eef2f3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.bg-12 {
    background: #abbaab; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #abbaab , #ffffff); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #abbaab , #ffffff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
}
.bg-13 {
   background: #83a4d4; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #83a4d4 , #b6fbff); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #83a4d4 , #b6fbff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
       
}
.bg-14 {
    background: #B993D6; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #B993D6 , #8CA6DB); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #B993D6 , #8CA6DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.bg-15 {
    background: #DAD299; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #DAD299 , #B0DAB9); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #DAD299 , #B0DAB9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     
}
.bg-16 {
   background: #616161; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #616161 , #9bc5c3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #616161 , #9bc5c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
}
.bg-17 {
    background: #EFEFBB; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #EFEFBB , #D4D3DD); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #EFEFBB , #D4D3DD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
}
.bg-18 {
    background: #085078; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #085078 , #85D8CE); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #085078 , #85D8CE); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
}
.bg-19 {
   background: #003973; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #003973 , #E5E5BE); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #003973 , #E5E5BE); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
}
/*.bg-20 {
}
.bg-21 {
}
.bg-22 {
}
.bg-23 {
}
.bg-24 {
}
.bg-25 {
}
.bg-26 {
}
.bg-27 {
}
.bg-28 {
}
.bg-29 {
}
.bg-30 {
}

.bg-31 {
}

.bg-32 {
}

.bg-33 {
}
.bg-34 {
}
.bg-35 {
}
.bg-36 {
}
.bg-37 {
}
.bg-38 {
}
.bg-39 {
}*/




.bt-1 {
    
background: #f85032!important; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #f85032 , #e73827)!important; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #f85032 , #e73827)!important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
}
.bt-2 {
   background: #56ab2f!important;/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #56ab2f , #a8e063)!important; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #56ab2f , #a8e063)!important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bt-3 {
   background: #42275a!important; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #42275a , #734b6d)!important; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #42275a , #734b6d)!important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
}
.bt-4 {
    background: #e96443!important; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #e96443 , #904e95)!important; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #e96443 , #904e95)!important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     
}
.bt-5 {
    background: #00d2ff!important; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #00d2ff , #928DAB)!important; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #00d2ff , #928DAB)!important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   
}
.bt-6 {
    background: #FF5F6D!important; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #FF5F6D , #FFC371)!important; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #FF5F6D , #FFC371)!important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
}
.bt-7 {
    background: #ff4b1f!important; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #ff4b1f , #ff9068)!important; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ff4b1f , #ff9068)!important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
}
.bt-8 {
   background: #fd746c!important; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #fd746c , #ff9068)!important; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #fd746c , #ff9068)!important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.bt-9 {
    background: rgb(51, 73, 95) none repeat scroll 0 0 !important;
}
.headfont {
    -webkit-text-stroke: 1px rgb(200, 120, 200);
    color: rgb(255, 183, 183);
    filter: drop-shadow(0.1rem 0.1rem 1rem rgb(127, 255, 255));
    font-family:inherit;
    font-size: 4rem;    
	transform: rotate(-10deg);
    /*z-index: 20;*/
    top: -2.5rem;
    position: relative;
    text-align: right;
}
.windows .headfont {
    -webkit-text-stroke: 0.2rem rgb(240, 8, 183);
}
.headfont1 {
    /*z-index: 20;*/
    position: relative;
    text-align: left;
	left:2rem;
}
/*Popのボタンを高さ（下に空白をほしい）*/
.ui-grid-a{
	padding:0rem 1rem 1rem!important;
}

.errorinfo {
    color: red;
    /*display: inline list-item;*/
    padding: 0.5rem 1.5rem;
    font-size: 1.2rem;
}

.yyk-batu{
     margin-left: auto;
     margin-right: auto;
     text-align:center!important;
     color: rgb(153, 153, 153)!important;
	font-size:1.3em;
	width:100%;
 }
.yyk-sankaku {
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
    color: #F06060 !important;
    font-size: 1.3em;
    width: 100%;
}
.yyk-maru {
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
    color: #F06060 !important;
    border-radius: 3px;
    font-size: 1.3em;
    width: 100%;
}
.KyuFont {
	font-weight: bold;

	background: rgba(255, 171, 61, 0.7) none repeat scroll 0 0;
	color: #fff;
	text-align: center!important;
	/*padding: 4px;*/
	font-size: 1.35rem;
	border-radius: 4px;
    margin-top: 0.2rem;
}
.KyusinFont {
	font-weight: bold;
	background: rgba(255, 171, 61, 0.8) none repeat scroll 0 0;
	color: #fff;
	text-align: center!important;
	/*padding: 4px;*/
	font-size: 1.65rem;
	border-radius: 4px;
    margin-top: 5%;
}
/*.KyuFont{
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    padding:3px;
    border-radius:3px;
}*/

.yyk-kyukei {
    font-size: 1.15rem;
    height: 70%;
	background: #FFAB3D;
	width:100%;
}
.yyk-bunrui {
	color: 				hsl(208, 50%, 40%) !important;
	background-color: 	hsl(208, 100%, 75%);
	
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3rem .3rem, inset rgba(0,0,0,0.15) 0 -0.1rem .1rem, /* inner shadow */ 
							hsl(208, 50%, 55%) 0 0rem 3px, hsl(208, 50%, 40%) 0 .1rem 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5rem 5px;	/* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3rem .3rem, inset rgba(0,0,0,0.15) 0 -0.1rem .1rem, /* inner shadow */ 
							hsl(208, 50%, 55%) 0 0rem 3px, hsl(208, 50%, 40%) 0 .1rem 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5rem 5px;	/* drop shadow */
	box-shadow: 		inset rgba(255,254,255,0.6) 0 0.3rem .3rem, inset rgba(0,0,0,0.15) 0 -0.1rem .1rem, /* inner shadow */ 
							hsl(208, 10%, 55%) 0 0rem 3px, hsl(208, 10%, 40%) 0 .1rem 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5rem 5px;	/* drop shadow */
}

p, h1, h2, h3, h4, h5 {
	color:rgba(12, 54, 88,0.9);
}

.BigFont {
	text-align: center;
	float:left;
}
.BigFont-Top {
	margin-top:2rem;
}
/*@import "http://weloveiconfonts.com/api/?family=fontawesome";*/
@font-face {
    font-family: 'FontAwesome';
    /*src: url('/Font/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('/Font/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/Font/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('/Font/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/Font/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/Font/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');*/
    font-weight: normal;
    font-style: normal;
}
/*body {
  background: #3498db;
  text-align: center;
}

* {
  box-sizing: border-box;
}

section {
  width: 30rem;
  margin: auto;
  padding-bottom: 10rem;
}*/

h1 {
  color: #fff;
  /*font-size: 5rem;*/
  font-weight: bold;
  margin: 0 0 1rem 0;
  text-shadow: 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.4);
}

h2 {
  color: #fff;
  /*font-size: 2rem;*/
  font-weight: bold;
  margin: 0;
  text-shadow: 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.4);
}

h4 {
  color: #fff;
  margin: -2rem 0 2rem 0;
  text-shadow: 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.4);
}

/*==============================================
Base Form Styles 
All form elements need these styles
The rest are modular
================================================ */
[class*="fontawesome-"]:before {
  /*font-family: 'FontAwesome', sans-serif;*/
  font-size: 1.5rem;
  line-height: 2;
}

.ui-innai {
  border-radius: 2rem!important;
  box-shadow: inset 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.1), 0.2rem 0.2rem 0 rgba(255, 255, 255, 0.1)!important;
  background: rgba(0, 0, 0, 0.25)!important;
  display: inline-block!important;
  font-size: 1rem!important;
  margin: 0 0 1rem 0!important;
  padding: 1rem!important;
  text-align: center!important;
  width: 90%!important;
}
.ui-innai:after {
  content: "."!important;
  display: block!important;
  clear: both!important;
  visibility: hidden!important;
  line-height: 0!important;
  height: 0!important;
}
.yyk-input{
  background: rgba(0, 0, 0, 0.25)!important;
  border: 0!important;
  border-radius: 0!important;
  height: 3rem!important;
  width: 58%!important;
  color: #fff!important;
  float: left!important;
  padding-left: 0.5rem!important;
}
.ui-innai input[type="yykcd"], .ui-innai input[type="password"], .ui-innai input[type="search"] , .ui-innai input[type="number"]{
  background: rgba(0, 0, 0, 0.25);
  border: 0;
  border-radius: 0;
  height: 3rem;
  width: 58%;
  color: #fff;
  float: left;
  padding-left: 0.5rem;
}
.ui-innai input[type="yykcd"]:focus, .ui-innai input[type="password"]:focus, .ui-innai input[type="search"]:focus, .ui-innai input[type="number"]:focus {
  background: rgba(0, 0, 0, 0.5);
  transition: background 1s ease;
}
.ui-innai input[type="submit"] {
  background: rgba(0, 0, 0, 0.4);
  border: 0;
  border-radius: 0 1rem 1rem 0;
  color: #fff;
  float: left;
  height: 3rem;
  width: 20%;
  z-index: 3;
}
.ui-innai input[type="submit"]:hover {
  background: rgba(0, 0, 0, 0.6);
  transition: all 1s ease;
}
.ui-innai label {
  background: rgba(0, 0, 0, 0.4);
  border: 0;
  border-radius: 0 1rem 1rem 0;
  color: #fff;
  float: left;
  height: 3rem;
  width: 20%;
  z-index: 3;
  border-radius: 1rem 0 0 1rem;
  line-height: 3;
}



.ui-mypage {
  border-radius: 2em!important;
  box-shadow: inset 0.1em 0.1em 0 rgba(0, 0, 0, 0.1), 0.2em 0.2em 0 rgba(255, 255, 255, 0.1)!important;
  background: rgba(240, 240, 240, 0.95)!important;
  display: inline-block;
  font-size: 1em!important;
  /*margin: 0 0 1em 0!important;*/
  padding: 0.8em!important;
  text-align: center!important;
  /*width: 90%!important;*/
  /*position:relative;*/
}
.ui-mypage3 {
  border-radius: 2em!important;
  box-shadow: inset 0.1em 0.1em 0 rgba(0, 0, 0, 0.1), 0.2em 0.2em 0 rgba(255, 255, 255, 0.1)!important;
  background: rgba(240, 240, 240, 0.95)!important;
  display: inline-block!important;
  font-size: 1em!important;
  /*margin: 0 0 1em 0!important;*/
  padding: 0.5em!important;
  text-align: center!important;
  /*width: 90%!important;*/
  /*position:relative;*/
}
.ui-mypage4 {
  border-radius: 1em;
  box-shadow: inset 0.1em 0.1em 0 rgba(0, 0, 0, 0.1), 0.2em 0.2em 0 rgba(255, 255, 255, 0.1)!important;
  background: rgba(240, 240, 240, 0.95)!important;
  display: inline-block;
  font-size: 1em;
  /*margin: 0 0 1em 0!important;*/
  padding: 0.3em;
  text-align: center;
  /*width: 90%!important;*/
  /*position:relative;*/
}
.ui-mypage:after {
  content: "."!important;
  display: block!important;
  clear: both!important;
  visibility: hidden!important;
  line-height: 0!important;
  height: 0!important;
}

.ui-mypage input[type="yykcd"], .ui-mypage input[type="password"], .ui-mypage input[type="search"] , .ui-mypage input[type="number"]{
  background: rgba(0, 0, 0, 0.25);
  border: 0;
  border-radius: 0;
  height: 2em;
  width: 58%;
  color: #fff;
  float: left;
  padding-left: 0.5em;
  font-size:2.2em;
}
.ui-mypage input[type="yykcd"]:focus, .ui-mypage input[type="password"]:focus, .ui-mypage input[type="search"]:focus, .ui-mypage input[type="number"]:focus {
  background: rgba(0, 0, 0, 0.5);
  transition: background 1s ease;
}

.ui-mypage3 input[type="yykcd"], .ui-mypage input[type="password"], .ui-mypage input[type="search"], .ui-mypage input[type="number"] {
    background: rgba(0, 0, 0, 0.25);
    border: 0;
    border-radius: 0;
    height: 2em;
    width: 58%;
    color: #fff;
    float: left;
    padding-left: 0.5em;
    font-size: 2.2em;
}

.ui-mypage3 input[type="yykcd"]:focus, .ui-mypage input[type="password"]:focus, .ui-mypage input[type="search"]:focus, .ui-mypage input[type="number"]:focus {
    background: rgba(0, 0, 0, 0.5);
    transition: background 1s ease;
}

.ui-mypage .input{
  background: rgba(0, 0, 0, 0.25);
  border: 0;
  border-radius: 0;
  /*height: 2.5em;*/
  width: 58%;
  color: #fff;
  float: left;
  padding-left: 0.5em;
}
.ui-mypage .input:focus{
  background: rgba(0, 0, 0, 0.5);
  transition: background 1s ease;
}

.ui-mypage input[type="submit"] {
  background: rgba(0, 0, 0, 0.4);
  border: 0;
  border-radius: 0 1em 1em 0;
  color: #fff;
  float: left;
  height: 3em;
  width: 20%;
  z-index: 3;
}
.ui-mypage input[type="submit"]:hover {
  background: rgba(0, 0, 0, 0.6);
  transition: all 1s ease;
}




.ui-mypage5 {
  border-radius: 2em!important;
  box-shadow: inset 0.1em 0.1em 0 rgba(0, 0, 0, 0.1), 0.2em 0.2em 0 rgba(255, 255, 255, 0.1)!important;
  background: #ACDCFF!important;
  display: inline-block!important;
  font-size: 1em!important;
  /*margin: 0 0 1em 0!important;*/
  padding: 0.8em!important;
  text-align: center!important;
  /*width: 90%!important;*/
  /*position:relative;*/
}
.ui-mypage5:after {
  content: "."!important;
  display: block!important;
  clear: both!important;
  visibility: hidden!important;
  line-height: 0!important;
  height: 0!important;
}

.ui-mypage5 input[type="yykcd"], .ui-mypage5 input[type="password"], .ui-mypage5 input[type="search"] , .ui-mypage5 input[type="number"]{
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  border-radius: 0;
  height: 2em;
  width: 58%;
  color: rgba(0, 0, 0, 0.7);
  float: left;
  padding-left: 0.5em;
  font-size:2.2em;
}
.ui-mypage5 input[type="yykcd"]:focus, .ui-mypage5 input[type="password"]:focus, .ui-mypage5 input[type="search"]:focus, .ui-mypage5 input[type="number"]:focus {
  background: rgba(0, 0, 0, 0.5);
  transition: background 1s ease;
}

.ui-mypage5 .input{
  background: rgba(0, 0, 0, 0.25);
  border: 0;
  border-radius: 0;
  /*height: 2.5em;*/
  width: 58%;
  color: rgba(0, 0, 0, 0.7);
  float: left;
  padding-left: 0.5em;
}
.ui-mypage5 .input:focus{
  background: rgba(0, 0, 0, 0.5);
  transition: background 1s ease;
}
/*.ui-mypage label {
  background: rgba(0, 0, 0, 0.4);
  border: 0;
  border-radius: 0 1rem 1em 0;
  float: left;
  width: 20%;
  z-index: 3;
  border-radius: 1em 0 0 1em;
  line-height: 3;
}*/
/*==============================================
Color Picker
================================================ */
.colors ul {
  padding: 0;
  margin: 0;
}
.colors ul li {
  background: red;
  border-radius: 1rem;
  box-shadow: 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  float: left;
  height: 3rem;
  list-style: none;
  margin: 0 0.5rem;
  transition: border 0.5s ease;
  width: 3rem;
}
.colors ul li:first-child {
  background: #3498db;
}
.colors ul li:nth-child(2) {
  background: #9b59b6;
}
.colors ul li:nth-child(3) {
  background: #1abc9c;
}
.colors ul li:nth-child(4) {
  background: #f39c12;
}
.colors ul li:nth-child(5) {
  background: #e74c3c;
}
.colors ul li:nth-child(6) {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBmM2U1MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2QyY2FiZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, #0f3e50), color-stop(100%, #d2cabd));
  background-image: -moz-linear-gradient(left bottom, #0f3e50 0%, #d2cabd 100%);
  background-image: -webkit-linear-gradient(left bottom, #0f3e50 0%, #d2cabd 100%);
  background-image: linear-gradient(to right top, #0f3e50 0%, #d2cabd 100%);
}
.colors ul li:nth-child(7) {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I3ZGVlZCIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjNzFjZWVmIi8+PHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiMyMWI0ZTIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiN2RlZWQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, #b7deed), color-stop(40%, #71ceef), color-stop(70%, #21b4e2), color-stop(100%, #b7deed));
  background-image: -moz-linear-gradient(left bottom, #b7deed 0%, #71ceef 40%, #21b4e2 70%, #b7deed 100%);
  background-image: -webkit-linear-gradient(left bottom, #b7deed 0%, #71ceef 40%, #21b4e2 70%, #b7deed 100%);
  background-image: linear-gradient(to right top, #b7deed 0%, #71ceef 40%, #21b4e2 70%, #b7deed 100%);
}

/*==============================================
Drop Down menu-innais
================================================ */
.menu-innai ul {
  list-style: none;
  display: none;
  width: 100%!important;
  background: rgba(0, 0, 0, 0.5)!important;
  float: left;
  margin: 1rem 0 0 0;
  padding: 0;
  border-radius: 1rem;
  overflow: hidden;
}
.menu-innai ul li {
  display: block!important;
  color: #fff!important;
  padding: 10px 10px 10px 18px!important;
  cursor: pointer!important;
}
.menu-innai ul-innai li:hover {
  background: rgba(0, 0, 0, 0.5)!important;
  cursor: pointer!important;
}
.menu-innai div {
  float: left;
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 1rem;
  color: #fff;
  cursor: pointer;
  line-height: 3;
  padding-left: 3rem;
}
.menu-innai div span {
  float: right!important;
  background: rgba(0, 0, 0, 0.2)!important;
  border-radius: 0 1rem 1rem 0!important;
  cursor: pointer!important;
  padding: 0 1rem!important;
}
.menu-innai div span:hover {
  background: rgba(0, 0, 0, 0.5)!important;
}

/*==============================================
Slider
================================================ */
input[type='range'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.5);
  height: 1rem;
  width: 100%;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 1rem;
  background: white;
  height: 2rem;
  width: 2rem;
}

/*==============================================
Progress Bar
=============================================== */
.progress > span {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 1rem;
  display: block;
  height: 2rem;
  overflow: hidden;
  position: relative;
}
.progress > span:after {
  background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  background-size: 5rem 5rem;
  border-radius: 1rem;
  content: "";
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}

/*==============================================
Notifications
=============================================== */
/*.notifications ul {
  margin: 0;
  padding: 0;
}
.notifications ul li {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 1rem;
  color: #fff;
  cursor: pointer;
  float: left;
  height: 5rem;
  list-style: none;
  margin: 0 0.5rem;
  width: 6rem;
}
.notifications ul li [class*="fontawesome-"]:before {
  font-size: 3rem;
  line-height: 1.7;
}

.notification:after {
  background: #e50000;
  border-radius: 1rem 1rem 1rem 0;
  box-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.6);
  content: '3';
  font-size: 1.3rem;
  font-weight: bold;
  height: 2rem;
  position: absolute;
  margin-top: -0.5rem;
  width: 2rem;
}*/

/*==============================================
Login Form
================================================ */
.login input[type="yykcd"], .login input[type="password"] {
  border-radius: 0 1rem 1rem 0;
  margin: 0.5rem 0;
  width: 75%;
}
.login label {
  margin: 0.5rem 0;
  width: 25%;
}
.login input[type="submit"] {
  border-radius: 1rem;
  margin: 1rem 0;
  width: 100%;
}

input[type="yykcd"]:valid ~ .input-validation:after {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 1rem;
  content: "?";
  color: #fff;
  font-size: 2rem;
  height: 3rem;
  line-height: 1.5;
  margin-left: 2rem;
  position: absolute;
  width: 3rem;
}

input[type="yykcd"]:invalid ~ .input-validation:before {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 1rem;
  content: "X";
  color: #fff;
  font-family:inherit;
  font-size: 2rem;
  font-weight: bold;
  height: 3rem;
  line-height: 1.5;
  margin-left: 2rem;
  position: absolute;
  width: 3rem;
}

input[type="yykcd"]:invalid ~ .input-validation2:after {
  border-radius: 1rem;
  content: "This is an invalid yykcd address";
  color: #fff;
  top: 0.5rem;
  position: relative;
}

/*==============================================
Search Inputs
================================================ */
.search2 input[type="yykcd"] {
  border-radius: 0 1rem 1rem 0;
  width: 80%;
}
.search3 input[type="yykcd"] {
  border-radius: 0.6em 0.6em 0.6em 0.6em;
  width: 80%;
}
.search2 .input {
  border-radius: 0 1rem 1rem 0;
  width: 80%;
}
.search3 .input {
  border-radius: 0.6em 0.6em 0.6em 0.6em;
  width: 80%;
}
.search4 input[type="yykcd"] {
  border-radius: 0.5em;
  width: 80%;
}
.search4 .input {
  border-radius: 0.5em;
  width: 80%;
}
/*==============================================
Twitter Widget
================================================ */
.twitter .fontawesome-twitter:before {
  color: #fff;
  float: left;
  font-size: 4rem;
  line-height: 2;
  margin: -1rem 0 -2rem 0.5rem;
}
.twitter div {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 1rem;
  color: #fff;
  float: right;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  padding: 1rem;
  position: relative;
  width: 100%;
  word-wrap: break-word;
}
.twitter div:after {
  content: "";
  display: block;
  /* reduce the damage in FF3.0 */
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.4) transparent;
}
.twitter a {
  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;
}
.twitter h3 {
  color: #fff;
  font-size: 2rem;
  margin: 0;
  padding: 0;
}


.listbt {
    /*background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
    background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
    background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
    background-image: -o-linear-gradient(top, #0088cc, #0044cc);
    background-image: linear-gradient(to bottom, #0088cc, #0044cc);*/
}
.wrap {
  position: relative;
  margin: 0 auto;
  top:50%;
  left:50%;
}

.loader {
  position: absolute;
  top: -4rem;
  left:-2rem;
  z-index: 10;
  width: 3.3rem;
  height: 3.3rem;
  border: 1rem solid;
  border-radius: 50%;
  border-top-color: rgba(44,44,44,0);
  border-right-color: rgba(55,55,55,0);
  border-bottom-color: rgba(66,66,66,0);
  border-left-color: rgba(33,33,33,0);
  animation: loadEr 3s infinite;
}

@keyframes loadEr {
  0% {
    border-top-color: rgba(44,44,44,0);
    border-right-color: rgba(55,55,55,0);
    border-bottom-color: rgba(66,66,66,0);
    border-left-color: rgba(33,33,33,0);
    
  }
  10.4% {
    border-top-color: rgba(44,44,44,0.5);
    border-right-color: rgba(55,55,55,0);
    border-bottom-color: rgba(66,66,66,0);
    border-left-color: rgba(33,33,33,0);
  }
  20.8% {
    border-top-color: rgba(44,44,44,0);
    border-right-color: rgba(55,55,55,0);
    border-bottom-color: rgba(66,66,66,0);
    border-left-color: rgba(33,33,33,0);
  }
31.2% {
  border-top-color: rgba(44,44,44,0);
    border-right-color: rgba(55,55,55,0.5);
    border-bottom-color: rgba(66,66,66,0);
    border-left-color: rgba(33,33,33,0);
}
41.6% {
  border-top-color: rgba(44,44,44,0);
    border-right-color: rgba(55,55,55,0);
    border-bottom-color: rgba(66,66,66,0);
    border-left-color: rgba(33,33,33,0);
  transform: rotate(40deg);
}
52% {
  border-top-color: rgba(44,44,44,0);
    border-right-color: rgba(55,55,55,0);
    border-bottom-color: rgba(66,66,66,0.5);
    border-left-color: rgba(33,33,33,0);
}
62.4% {
  border-top-color: rgba(44,44,44,0);
    border-right-color: rgba(55,55,55,0);
    border-bottom-color: rgba(66,66,66,0);
    border-left-color: rgba(33,33,33,0);
}
72.8% {
  border-top-color: rgba(44,44,44,0);
    border-right-color: rgba(55,55,55,0);
    border-bottom-color: rgba(66,66,66,0);
    border-left-color: rgba(33,33,33,0.5);
}
}

.loaderbefore {
  width: 3.3rem;
  height:3.3rem;
  border: 1rem solid #ddd;
  border-radius: 50%;
  position: absolute;
  top: -4rem;
  left:-2rem;
  z-index: 9;
}

.circular {
  position: absolute;
  top: -4.75rem;
  left: -2.75rem;
  width: 4.66rem;
  height: 4.66rem;
  border: 1.33rem solid;
  border-radius: 50%;
  border-top-color: #333;
  border-left-color: #fff;
  border-bottom-color: #333;
  border-right-color: #fff;
  opacity: 0.3;
  animation: poof 5s infinite;
}
@keyframes poof {
  0% {transform: scale(1,1) rotate(0deg); opacity: 0.2;}
  50% {transform: scale(4,4) rotate(360deg); opacity: 0;}
}
.another {
  opacity: 0.1;
  transform: rotate(90deg);
  animation: poofity 5s infinite;
  animation-delay: 1s;
}
@keyframes poofity {
  0% {transform: scale(1,1) rotate(90deg); opacity: 0.1;}
  50% {transform: scale(4,4) rotate(-360deg); opacity: 0;}
}

.text {
  position: absolute;
  top: 1rem;
  left: -2.9rem;
font-family:inherit;
  text-transform: uppercase;
  color: #888;
  animation: opaa 10s infinite;
  width:5rem;
}
@keyframes opaa {
  0% {opacity: 1;}
10% {opacity: 0.5}
15% {opacity: 1;}
30% {opacity: 1;}
65% {opacity: 0.3;}
90% {opacity: 0.8;}
}
@-webkit-keyframes openTopLine {
  0% {
    width: 0;
    -webkit-transform: translateY(5em);
            transform: translateY(5em);
  }
  50% {
    width: 27em;
    -webkit-transform: translateY(5em);
            transform: translateY(5em);
  }
  100% {
    width: 27em;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes openTopLine {
  0% {
    width: 0;
    -webkit-transform: translateY(5em);
            transform: translateY(5em);
  }
  50% {
    width: 27em;
    -webkit-transform: translateY(5em);
            transform: translateY(5em);
  }
  100% {
    width: 27em;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes openBottomLine {
  0% {
    width: 0;
    -webkit-transform: translateY(-5em);
            transform: translateY(-5em);
  }
  50% {
    width: 27em;
    -webkit-transform: translateY(-5em);
            transform: translateY(-5em);
  }
  100% {
    width: 27em;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes openBottomLine {
  0% {
    width: 0;
    -webkit-transform: translateY(-5em);
            transform: translateY(-5em);
  }
  50% {
    width: 27em;
    -webkit-transform: translateY(-5em);
            transform: translateY(-5em);
  }
  100% {
    width: 27em;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes slideContent {
  0%, 30% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideContent {
  0%, 30% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
.logo {
  font-size: 1.1em;
  font-family:inherit;
  text-align: center;
  color: #bdbdbd;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  overflow: hidden;
}
.logo .line {
  height: 1px;
  background: #bdbdbd;
  display: inline-block;
  width: 27em;
}
.logo .line.topLine {
  -webkit-animation: openTopLine 1.5s;
          animation: openTopLine 1.5s;
}
.logo .line.bottomLine {
  -webkit-animation: openBottomLine 1.5s;
          animation: openBottomLine 1.5s;
}
.logo .content {
  -webkit-animation: slideContent 1s;
          animation: slideContent 1s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: 1.25s;
          animation-delay: 1.25s;
}
.logo .content .vintage {
  font-weight: 400;
  font-size: 2em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0px #212121, 2px 2px 0px #bdbdbd;
  letter-spacing: 4px;
}
.logo .content .since {
  font-weight: 100;
  margin: 0.25em auto 0.5em;
}
.logo .content .desc {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-style: italic;
}
.logo .content .skillz {
  font-size: 1.2em;
  margin-top: 0.25em;
  font-weight: 400;
  letter-spacing: 1px;
}
.logo .content .links a {
  display: inline-block;
  color: #bdbdbd;
  font-size: 1.25em;
  margin: 0.25em 0.2em 0;
  -webkit-transition: color 0.1s;
  transition: color 0.1s;
  cursor: pointer;
  -webkit-transition: color 0.15s;
  transition: color 0.15s;
  -webkit-animation: slideContent 1s;
          animation: slideContent 1s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
.logo .content .links a:nth-of-type(1n) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.logo .content .links a:nth-of-type(2n) {
  -webkit-animation-delay: 2.25s;
          animation-delay: 2.25s;
}
.logo .content .links a:nth-of-type(3n) {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
.logo .content .links a:nth-of-type(4n) {
  -webkit-animation-delay: 2.75s;
          animation-delay: 2.75s;
}
.logo .content .links a:nth-of-type(5n) {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.logo .content .links a:hover {
  color: white;
}




.stage {
  height: 300px;
  width: 500px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  perspective: 9999px;
  transform-style: preserve-3d;
}

.layer {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  opacity: 0;
  animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s, o_O 0.1s 1;
  animation-fill-mode: forwards;
  transform: rotateY(20deg) rotateX(13deg) translateZ(0);
}

.layer:after {
  font: 4rem metabold;
  content: 'クリニック';
  white-space: pre;
  text-align: center;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50px;
  color: whitesmoke;
  letter-spacing: -5px;
  text-shadow: 0.2rem 0 10px rgba(0, 0, 0, 0.13);
}

.layer:nth-child(1):after {
  transform: translateZ(0px);
}

.layer:nth-child(2):after {
  transform: translateZ(-2px);
}

.layer:nth-child(3):after {
  transform: translateZ(-4px);
}

.layer:nth-child(4):after {
  transform: translateZ(-6px);
}

.layer:nth-child(5):after {
  transform: translateZ(-8px);
}

.layer:nth-child(6):after {
  transform: translateZ(-10px);
}

.layer:nth-child(7):after {
  transform: translateZ(-12px);
}

.layer:nth-child(8):after {
  transform: translateZ(-14px);
}

.layer:nth-child(9):after {
  transform: translateZ(-16px);
}

.layer:nth-child(10):after {
  transform: translateZ(-18px);
}

.layer:nth-child(11):after {
  transform: translateZ(-20px);
}

.layer:nth-child(12):after {
  transform: translateZ(-22px);
}

.layer:nth-child(13):after {
  transform: translateZ(-24px);
}

.layer:nth-child(14):after {
  transform: translateZ(-26px);
}

.layer:nth-child(15):after {
  transform: translateZ(-28px);
}

.layer:nth-child(16):after {
  transform: translateZ(-30px);
}

.layer:nth-child(17):after {
  transform: translateZ(-32px);
}

.layer:nth-child(18):after {
  transform: translateZ(-34px);
}

.layer:nth-child(19):after {
  transform: translateZ(-36px);
}

.layer:nth-child(20):after {
  transform: translateZ(-38px);
}

.layer:nth-child(n+10):after {
  -webkit-text-stroke: 3px #fe642e;
}

.layer:nth-child(n+11):after {
  -webkit-text-stroke: 15px dodgerorange;
  text-shadow: 3px 0 3px #ff4000, 2px 2px 2px #ff4000, 0 3px 3px #ff4000;
}

.layer:nth-child(n+12):after {
  -webkit-text-stroke: 15px dodger;
  text-shadow:3px 0 3px #ff4000,2px 2px 2px #ff4000, 0 3px 3px #ff4000,
}

.layer:last-child:after {
  -webkit-text-stroke: 5px #ff4000 ;
}

.layer:first-child:after {
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.5);
}

@keyframes ಠ_ಠ {
  100% {
    /*transform: rotateY(-40deg) rotateX(-43deg);*/
  }
}
@keyframes o_O {
  100% {
    opacity: 1;
  }
}
.layer {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  opacity: 0;
  animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s, o_O 0.1s 1;
  animation-fill-mode: forwards;
  /*transform: rotateY(40deg) rotateX(33deg) translateZ(0);*/
}

.l {
  /*display: inline-block;*/
  /*margin-left: -12px;*/
  font: 800 3rem 'Open Sans', sans-serif;
  color: #333;
  text-shadow: 1px 1px 1px #fff, 0 2px 0.3rem #fff, 0 -1px 0 #fff, 0 -2px 0 #fff, 1px 0 0 #fff, 2px 0 0 #fff, -1px 0 0 #fff, -2px 0 0 #fff, -3px 0 3px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
}
.g {
  color: #4a4;
}