* {
	margin: 0px;
	padding: 0px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html{
	font-size: 62.5%;
	/*min-height: 100%;*/
}

body {
	background: -moz-radial-gradient(#ffffff, rgba(248, 190, 109, 0.7215686274509804));
	background: -webkit-radial-gradient(#ffffff, rgba(248, 190, 109, 0.7215686274509804));
	background: radial-gradient(#ffffff, rgba(248, 190, 109, 0.7215686274509804));
	font-size: 16px;
	font-size: 1.6rem;
	margin: 0px;
	padding: 0px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.container {
	width:auto;
	max-width: 100%;
	margin: 0 auto;
	text-align:center;
}

body,
#container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

footer {
	margin-top: auto;
	bottom:0;
}

.icon{
	margin: 0 auto;
	/* padding-top: 80px; */
	color: #044904;
	font-size: 1.9rem;
	padding-bottom: 3rem;
}

.account{
	margin-left: auto;
	border-collapse: collapse;
}
.account_box {
        padding-right: 6rem;
        margin-bottom: 5rem;
}
.account_design{
	/* border: solid 1px; */
	background: #5e84c1;
	/* border-radius: 10px; */
	padding: 7px;
}

.account_design2{
	background: #eaeef1;
	color: #484848;
	padding: 7px;
}
.q_now{
	margin-left: auto;
	padding: 0.5em 0.5em;
	/* margin: 2em 0; */
	background-color: #f6faee;
	border-left: solid 5px #6b8e23;
	color: #000000;
}

.f_center{
	margin: 0 auto;
}

.f_profile{
	text-align: left;
}

.n-form{
	display:none;
}
.b-form{
	display:block;
}

.back_w{
	background:rgba(244, 244, 244, 0.7411764705882353);
	padding: 10px;
}

.resultback_w{
	background:rgba(244, 244, 244, 0.7411764705882353);
	width: 100%;
}
.answer_back_w{
	background:rgba(244, 244, 244, 0.7411764705882353);
	padding: 40px 0;
}
.f_padding{
	padding: 10px 70px;
}
.answer_td{
	display: flex;
	/*padding-bottom: 20px;*/
}

.f_test input {
	appearance: none;
	outline: 0;
	border: 1px solid rgba(0, 0, 0, 0.39);
	background-color: rgba(26, 9, 9, 0.2);
	border-radius: 3px;
	padding: 10px 15px;
	margin: 0 auto 10px auto;
	display: block;
	text-align: center;
	font-size: 18px;
	color: #044904;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
	font-weight: 300;
	width: 17rem;
}
.f_test input:hover {
	background-color: rgba(255, 255, 255, 0.4);
	color:#000000
}
.f_test input:focus {
	background-color: white;
	width: 17rem;
	color: #3865a2;

}
.bb {
	animation: blinkAnime 1.5s infinite alternate;
}

@keyframes blinkAnime{
	0% { background-color: #ffffff }
	100% { background-color: rgba(255, 139, 139, 0.84) }
}

/* 3件法 */
.result_0{
	background: radial-gradient(#F2B9A1, #EA6264) fixed;
}
.result_1{
	background-color: rgb(188, 188, 188);
}
.result_2{
	background: radial-gradient(#a1c2f2, #6a62ea) fixed;
}

/* 5件法 */
.result_2_1{
	background: radial-gradient(#F2B9A1, #EA6264) fixed;
}
.result_2_2{
	background-color: #F2B9A1;
}
.result_2_3{
	background-color: rgb(188, 188, 188);
}
.result_2_4{
	background-color: #a1c2f2;
}
.result_2_5{
	background: radial-gradient(#a1c2f2, #6a62ea) fixed;
}

.white{
	color:#fff;
}


/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
	outline-offset: -2px;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/*====================
サイズ
====================*/
.p_6{
	padding: 6rem;
}

.pb-80{
	padding-bottom: 80px;
}

.pb_2{
	padding-bottom: 2rem;
}

.pt_2{
	padding-top: 2rem;
}

.pt_5{
	padding-top: 5rem;
}

.pt_7{
	padding-top: 7rem;
}

.pr_1{
	padding-right: 1rem;
}

.pr_6{
	padding-right: 6rem;
}

.mb_2{
	margin-bottom: 2rem;
}
.ptb_10{
	padding: 10px 0;
}

.ptb_20{
	padding: 20px 0;
}
.pl_16{
	padding-left: 1.6rem;
}
.w_100{
	width:100%
}

.w_70{
	width: 70%;
}

.w_50{
	width: 50%;
}

.w_40{
	width: 40%;
}

.w_30{
	width: 30%;
}

.w_25{
	width: 25%
}

.w_20{
	width: 20%
}
.f_size23{
	font-size: 2.3rem;
}

.f_size14{
	font-size: 1.4rem;
}

.f_width{
	width: 1024px;
	max-width: 100%;
	margin: 0 auto;
}
.size_width{
	width: 15rem;
}

.b_width{
	width: 20rem;
}

/*====================
背景アニメーション
====================*/
canvas{
	display:block;
	vertical-align:bottom;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -999;
	width: 100%;
	height: 100%;
	position: fixed;
	min-width: 100%;
	min-height: 100%;
}

/*====================
ログイン
====================*/
form {
	position: relative;
	z-index: 2;
}
form input {
	appearance: none;
	outline: 0;
	border: 1px solid rgba(0, 0, 0, 0.39);
	background-color: rgba(26, 9, 9, 0.2);
	width: 250px;
	border-radius: 3px;
	padding: 10px 15px;
	margin: 0 auto 10px auto;
	display: block;
	text-align: center;
	font-size: 18px;
	color: #044904;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
	font-weight: 300;
}
form input:hover {
	background-color: rgba(255, 255, 255, 0.4);
	color:#000000
}
form input:focus {
	background-color: white;
	width: 300px;
	color: #3865a2;
}
form button {
	appearance: none;
	outline: 0;
	background-color: white;
	border: 0;
	padding: 10px 15px;
	color: #53e3a6;
	border-radius: 3px;
	width: 250px;
	cursor: pointer;
	font-size: 18px;
	transition-duration: 0.25s;
}

form button:hover {
	background-color: #f5f7f9;
}

.login_icon {
	color: #044904;
	font-size: 1.9rem;
	margin: 0 auto;
}

.login_font{
	font-size: 2rem;
	letter-spacing: 1rem;
}
/*====================
ボタンデザイン
====================*/

.start {
	width: 17rem;
	height: 45px;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-weight: 500;
	color: #000;
	background-color: #d1ccff;
	border: none;
	border-radius: 45px !important;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease 0s;
	cursor: pointer;
	outline: none;
}

.start:hover {
	background-color: #b3b5ff;
	box-shadow: 0px 15px 20px rgba(46, 97, 229, 0.4);
	color: #fff;
	transform: translateY(-7px);
}
.start:focus {
	background-color: initial;
	width: 17rem;
	color: initial;
}

.view_answer {
	width: 17rem;
	height: 45px;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-weight: 500;
	color: #000;
	background-color: #ffec49;
	border: none;
	border-radius: 45px !important;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease 0s;
	cursor: pointer;
	outline: none;
	margin: initial;
	display: initial;
}

.view_answer:hover {
	background-color: rgb(255, 150, 74);
	box-shadow: 0px 15px 20px rgba(247, 145, 42, 0.4);
	color: #fff;
	transform: translateY(-7px);
}

.view_answer:focus {
	background-color: initial;
	width: 17rem;
	color: initial;
}

.result {
	width: 17rem;
	height: 45px;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-weight: 500;
	color: #000;
	background-color: #d1ccff;
	border: none;
	border-radius: 45px;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease 0s;
	cursor: pointer;
	outline: none;
}

.result:hover {
	background-color: #b3b5ff;
	box-shadow: 0px 15px 20px rgba(46, 97, 229, 0.4);
	color: #fff;
	transform: translateY(-7px);
}
.result:focus {
	background-color: initial;
	width: 17rem;
	color: initial;
}

button.end {
	outline: 0;
	background-color: rgba(255, 51, 51, 0.4117647058823529);
	border: 0;
	padding: 10px 15px;
	color: #fff;
	border-radius: 3px;
	width: 120px;
	cursor: pointer;
	font-size: 18px;
	transition-duration: 0.25s;
}

button.help {
	outline: 0;
	background-color: rgba(24, 146, 0, 0.4392156862745098);
	border: 0;
	padding: 10px 15px;
	color: #fff;
	border-radius: 3px;
	width: 120px;
	cursor: pointer;
	font-size: 18px;
	transition-duration: 0.25s;
}

button.end:hover {
	background-color: #ff8c91;
}

button.help:hover {
	background-color: #64c14e;
}

.small {
	display: inline-block;
	text-align: left;
	background-image: linear-gradient(#eaeaea 0%, #c6c6c6 100%);
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
	color: #787878;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
	padding: 12px 24px;
	border-radius: 4px;
	font-size: 18px;
}

.small:hover {
	opacity: 0.8;
}

.big {
	display: inline-block;
	text-align: left;
	background-image: linear-gradient(#eaeaea 0%, #c6c6c6 100%);
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
	color: #822501;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
	padding: 12px 24px;
	border-radius: 4px;
	font-size: 18px
}

.big:hover {
	opacity: 0.8;
}

.next{
	margin: initial !important;
	background-color: rgba(255, 255, 255, 0.2);
	color: #050449;
	animation: blinkAnimenext 1.5s infinite alternate;
}

@keyframes blinkAnimenext{
	0% { background-color: rgb(253, 253, 253) }
	100% { background-color: rgba(140, 151, 210, 0.62) }
}

/*====================
プロフィール
====================*/
.t_center{
	text-align: center;
	margin-bottom: 1em;
}

.t_left{
	text-align: left;
}

.w_20:focus{
	width: 20%;
}

.w_30:focus{
	width: 30%;
}

.w_40:focus{
	width: 40%;
}

.w_50:focus{
	width: 50%;
}

.f_focus:focus{
	width: initial;
}

.f_postion{
	display: inline-block;
}

.f_ridio{
	display: initial;
	width: initial;
}

.f_birth{
	outline: 0;
	border: 1px solid rgba(0, 0, 0, 0.39);
	background-color: rgba(26, 9, 9, 0.2);
	/* width: 250px; */
	border-radius: 3px;
	padding: 10px 15px;
	margin: 0 auto 10px auto;
	/* display: block; */
	text-align: center;
	/* font-size: 18px; */
	color: #002a00;
	-webkit-transition-duration: 0.25s;
	/* transition-duration: 0.25s; */
	/* font-weight: 300; */
}

.hissu{
	padding: 3px 9px;
	background: #ff3838;
	border-radius: 5px;
	color: #ffffff;
	margin-left: 7px;
	font-size: 1.2rem;
}
.t_border_brue{
	border: solid 1px #007275;
	border-collapse: collapse;
}

.back_p{
	background-color:rgba(244, 244, 244, 0.7411764705882353);
	padding: 10px;
}
/*====================
診断ステータス
====================*/
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pricecards{
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
}
.pricecard{
	width: 100%;
	flex: 0 0 24.999%;
	text-align: center;
	border: 1px solid rgba(56, 77, 158, 0.95);
	/* padding-bottom: 1rem; */
	box-sizing: border-box;
	/* margin: 0 auto 3em; */
	margin: 0 auto 0;
	height: 100px;
}
.pricecard h3{
	background: rgba(86, 122, 255, 0.95);
	color: #fff;
	padding: 10px;
	margin: 0;
}
.pricecard.premium{
	border: 3px solid #06c7ea;
	padding-bottom: 3rem
}
.pricecard.premium h3{
	background: #06c7ea;
	color: #fff;
	padding: 10px;
	margin: 0;
}
.pricecard h4{
	font-size: 300%;
	margin: 0 auto;
	padding: 1rem 0 0;
}
.pricecard.premium h4 {
	padding: 20px;
}
.pricecard p{
	margin: 0;
	padding: 1rem;
	text-align: left;
}
.pricecard a{
	padding: 10px 40px;
	background: #fb5859;
	color: #fff;
	text-decoration: none;
	border-radius: 3px;
	display: inline-block;
}
li:nth-child(4){
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(56, 77, 158, 0.95);
}

.li_4reset{
	display: block !important;
	align-items: normal !important;
	justify-content: flex-start !important;
	border: none !important;
}

/*====================
ラジオボタン
====================*/

.cp_ipradio {
	width: 90%;
	text-align: left;
}
.cp_ipradio input[type='radio'] {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.cp_ipradio label {
	position: relative;
	display: inline-block;
	margin-right: 10px;
	padding-right: 10px;
	padding-left: 35px;
	cursor: pointer;
}
.cp_ipradio label::before {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	display: block;
	width: 24px;
	height: 24px;
	content: ' ';
	border: 2px solid #da3c41;
	border-radius: 4px;
}
/* ラジオボタンにチェックが入った時 */
.cp_ipradio input[type='radio'] + label::before {
	border-radius: 18px;
}
.cp_ipradio input[type='radio']:checked + label {
	padding-left: 10px;
	color: #ffffff;
}
.cp_ipradio input[type='radio']:checked + label::before {
	top: 0;
	width: 100%;
	height: 100%;
	background: #da3c41;
}
/* Transition */
.cp_ipradio label, .cp_ipradio label::before {
	-webkit-transition: 0.25s all ease;
	transition: 0.25s all ease;
}

.cp_ipradio_p {
	text-align: center;
}
.cp_ipradio_p input[type='radio'] {
	position: static;
}

.wrap {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 新規デザイン時に追加 */
#language_box {
	position: absolute;
	top: 10px;
	right: 10px;
}
#language_button {
	text-align: center;
	padding: 3px 5px;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.39);
	background: rgba(0,0,0,0);
	/*
	background: -webkit-linear-gradient(left, #fad198 0%, #f8be6d 100%);
	background: -moz-linear-gradient(left, #fad198 0%, #f8be6d 100%);
	background: -o-linear-gradient(left, #fad198 0%, #f8be6d 100%);
	background: -ms-linear-gradient(left, #fad198 0%, #f8be6d 100%);
	background: linear-gradient(left, #fad198 0%, #f8be6d 100%);
	*/
}

.error_text {
	color: red;
}
#user_family {
	display: inline-block;
}
#user_name {
	display: inline-block;
}
.profile_checkbox {
	display: inline-block;
	width: auto;
}
.profile_checkbox:focus {
	background-color: initial;
	width: initial;
	width: auto;
	color: initial;
}
.checkbox_block {
	display: inline-block;
	margin-right: 1em;
	margin-bottom: 5px;
}
.checkbox_block:last-of-type {
	margin: none;
}

.multiple_msg {
	padding: 3px 9px;
	background: #38b7ff;
	border-radius: 5px;
	color: #ffffff;
	margin-left: 7px;
	font-size: 1.2rem;
}
.checkbox_error {
	display: none;
	font-size: 80%;
	color: red;
}
.display_step {
	display: inline-block;
}
#help_content {
	padding: 10px;
	height: 100vh;
}
#main_help {
	margin-bottom: 25px;
}
#button_help {
	margin-bottom: 25px;
}
#help_close_block {

}
.help_small {
	display: inline-block;
	text-align: left;
	background-image: linear-gradient(#eaeaea 0%, #c6c6c6 100%);
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
	color: #787878;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
	padding: 3px 6px;
	border-radius: 4px;
	font-size: 10px;
	width: 12rem;
	text-align: center;
}

.help_big {
	display: inline-block;
	text-align: left;
	background-image: linear-gradient(#eaeaea 0%, #c6c6c6 100%);
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
	color: #822501;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
	padding: 3px 6px;
	border-radius: 4px;
	font-size: 10px;
	width: 12rem;
	text-align: center;
}
.help_end {
	outline: 0;
	background-color: rgba(255, 51, 51, 0.4117647058823529);
	border: 0;
	padding: 2px 3px;
	color: #fff;
	border-radius: 3px;
	cursor: pointer;
	font-size: 10px;
	transition-duration: 0.25s;
	width: 12rem;
	text-align: center;
}
.help_start {
	width: 12rem;
	height: 25px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-weight: 500;
	color: #000;
	background-color: #d1ccff;
	border: none;
	border-radius: 45px !important;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease 0s;
	cursor: pointer;
	outline: none;
}
.help_view_answer {
	width: 12rem;
	height: 25px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-weight: 500;
	color: #000;
	background-color: #ffec49;
	border: none;
	border-radius: 45px !important;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease 0s;
	cursor: pointer;
	outline: none;
	margin: initial;
	display: initial;
}
.help_result {
	width: 12rem;
	height: 25px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-weight: 500;
	color: #000;
	background-color: #d1ccff;
	border: none;
	border-radius: 45px;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease 0s;
	cursor: pointer;
	outline: none;
}
.help_next{
	margin: initial !important;
	background-color: rgba(255, 255, 255, 0.2);
	color: #050449;
	animation: blinkAnimenext 1.5s infinite alternate;
	width: 12rem;
	text-align: center;
}
.account_box {
	padding-right: 6rem;
	margin-bottom: 5rem;
}
.button_box {
	margin: 5rem auto;
}
.button_box table {
	text-align: center;
}
.button_box tr:nth-of-type(2) td {
	padding-top: 5rem;
}
.start {
	margin: auto;
}
.button_uneven {
	padding: 0 1rem;
}
.question_step_table {
	padding-bottom: 2rem;
}
.font_size_button_table {
	padding-bottom: 2rem;
}
/* 新規デザイン時に追加 */

.prof_note {
	display: inline-block;
	font-size: 80%;
	color: red;
	margin-left: 1em;
}

/*====================
 IE11 にのみ適用。
====================*/
@media all and (-ms-high-contrast: none) {
	*::-ms-backdrop,

	.pricecards{
		flex-wrap: nowrap;
		-webkit-flex-wrap: nowrap;
	}
	.f_test input {
		margin: 0;
	}
	.ie_flex{
		display: block !important;
	}
}

@media only screen and (min-width:479px) and (max-width:768px) {
	.profile_card, .pricecards, .profile_cards {
		flex-direction: column;
		-webkit-flex-direction: column;
	}
}

/*====================
 - 〜479px：スマートフォン縦
 - 480px〜896px：スマートフォン横
====================*/

@media screen and (max-width: 896px) { }

@media screen and (max-width: 480px) {
	footer {
		margin-top: initial;
	}
	body,
	#container{
		min-height: initial;
	}
	.pb-80{
		padding-bottom: initial;
	}
	.pb_2{
		padding-bottom: 2rem;
	}
	.pt_3{
		padding-top: 3rem;
	}

	.pt_20r{
		padding-top: 20px;
	}
	.pr_6{
		padding-right: initial;
	}
	.mb_2{
		margin-bottom:  2rem;
	}
	.p_6{
		padding: initial;
	}

	.w_40r{
		width: 40%;
	}

	.w_40r:focus{
		width: 40%;
	}

	.w_60r{
		width: 60%;
	}

	.w_60r:focus{
		width: 60%;
	}
	.w_70r{
		width: 70%;
	}

	.w_70r:focus{
		width: 70%;
	}
	.pl_16r{
		padding-left: 1em;
		padding-right: 1em;
		width: 50%;
	}
	.pl_16r_2{
		padding-left: 1em;
		padding-right: 1em;
		/* width: 50%; */
	}
	.label_five{
		margin-left: 2rem;
	}
	.login_icon {
		padding-top: initial;
		margin-bottom: 0;
	}
	.login_font{
		letter-spacing: normal;
	}
	.account{
		margin: 0 auto;
	}

	.f_padding{
		padding: initial;
	}
	.profile_card, .pricecards, .profile_cards {
		flex-direction: column;
		-webkit-flex-direction: column;
	}
	.pricecard, .card_photo {
		flex: 0 0 auto;
		-webkit-flex: 0 0 auto;
	}
	.pricecard.premium {
		order: 1;
		-webkit-order: 1;
	}
	.answer_td{display: initial;}

	.cp_ipradio_p {text-align: initial;}

	.view_answer {width: 16rem;}

	.result {width: 16rem;}

	.back_p{
		/*
		padding: initial;
		padding-left: 9px;
		*/
	}
	.hissu_m{
		margin-left: initial;
	}

	.font_p{
		display: inline-block;
		text-align: left;
	}

        .account_box {
            padding-right: initial;
            margin-bottom: 3rem;
}
.button_box {
    margin: 3rem auto;
}

	.prof_note {
		margin: auto;
	}
}