#app {
    padding: 3rem 0
}
.container {
    -webkit-transition: all .8s;
    -webkit-transition-delay: .3s;
    padding: 0;
    position: relative;
    transition: all .8s;
    transition-delay: .3s
}
.transition-container {
    position: absolute;
    width: 100vw
}
.advice-header, .question-header, .result-header, .title-header {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    padding: 0 .4rem
}
.title-description {
    padding: .4rem;
    width: 300px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
.advice-container, .result-container {
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    padding: .4rem
}
.advice-content, .result-content {
    background-color: #fefefe;
    border: 2px solid #000;
    border-radius: 16px;
    max-width: 600px;
    padding: 12px;
    width: 90%
}
.choices-container {
    -ms-flex-pack: distribute;
    -ms-flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: auto;
    max-width: 720px;
    width: 80%
}
.choice-wrapper {
    min-width: 120px;
    position: relative;
    width: 20%
}
.choice-wrapper:before {
    content: "";
    display: block;
    padding-top: 100%
}
.choice-bg {
    background-size: cover;
    border-radius: 50%;
    bottom: 0;
    left: 0;
    margin: .4rem;
    position: absolute;
    right: 0;
    top: 0
}
.choice:hover {
    -webkit-transition: all .2s;
    background-color: rgba(236,151,112,.75);
    border: 2px solid #ec9770;
    transition: all .2s
}
.choice {
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    align-items: center;
    background-color: hsla(0,0%,100%,.75);
    border: 2px solid #133046;
    border-radius: 50%;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%
}
.choices-text {
    font-size: 1.6rem
}
input {
    border-radius: 4px;
    font-size: 1.3em;
    width: 60%
}
textarea {
    -o-border-image: initial;
    -webkit-appearance: textfield;
    -webkit-rtl-ordering: logical;
    background-color: #fff;
    border: 2px inset;
    border-color: initial;
    border-image: initial;
    border-radius: 4px;
    cursor: text;
    padding: 1px;
    width: 60%
}
.form {
    padding-top: 1rem
}
.form-item {
    padding-top: .2rem
}
.form-item-label {
    display: inline-block;
    width: 30%
}
.form-caution {
    font-size: .7em
}
.posted {
    margin-top: .4rem
}
.back {
    cursor: pointer;
}
.square-btn {
	-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	box-shadow:inset 0px 1px 0px 0px #fce2c1;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25));
	background:-moz-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:-webkit-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:-o-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:-ms-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25',GradientType=0);
	background-color:#ffc477;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #eeb44f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:24px;
	padding:12px 44px;
	text-decoration:none;
	text-shadow:0px 1px 0px #cc9f52;
}
.square-btn:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477));
	background:-moz-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:-webkit-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:-o-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:-ms-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:linear-gradient(to bottom, #fb9e25 5%, #ffc477 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477',GradientType=0);
	background-color:#fb9e25;
}
.square-btn:active {
	position:relative;
	top:1px;
}
.show-next-enter-active, .show-next-leave-active, .show-prev-enter-active, .show-prev-leave-active {
    -webkit-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out
}
.show-next-enter, .show-prev-leave-to {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}
.show-next-leave-to, .show-prev-enter {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
}
.fade-enter-active, .fade-leave-active {
    -webkit-transition: all .55s;
    transition: all .55s
}
.fade-enter, .fade-leave-to {
    opacity: 0
}
body {
    background-color: #fff;
    margin: 0;
    padding: 0
}
#app {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #2c3e50;
    font-family: Noto Sans Japanese, Avenir, Helvetica, Arial, sans-serif;
    text-align: center
}