@charset "UTF-8";
/* ======================================================================================
フロントページ
====================================================================================== */
#stepcalculate .horoscope-label, #return .horoscope-label {
		display: block;
		color: #FFF;
		font-size: 1.275rem;
		text-align: center;
		background: #3b375c;
		border: 1px solid #caaf67;
		border-radius: 5px;
		margin-top: 15px;
		position: relative;
		cursor: pointer;
}
#stepcalculate .horoscope-data, #return .horoscope-data {
		display: block;
}
		#stepcalculate .horoscope-label .accordion_hide, #return .horoscope-label .accordion_hide {
				width: 30px;
				height: 30px;
				background: #c6c3dc;
				-webkit-border-radius: 15px;
				-moz-border-radius: 15px;
				border-radius: 15px;
				display: inline-block;
				position: absolute;
				top: 0;
				right: 10px;
				bottom: 0;
				margin: auto;
				cursor: pointer;
		}
				#stepcalculate .horoscope-label .accordion_hide span, #return .horoscope-label .accordion_hide span  {
						left: 8px;
				}
				#stepcalculate .horoscope-label .accordion_hide span:nth-of-type(1), 
				#return .horoscope-label .accordion_hide span:nth-of-type(1) {
						top: 13px;
						transform: rotate(90deg);
						-webkit-transform: rotate(90deg);
						-moz-transform: rotate(90deg);
						-ms-transform: rotate(90deg);
						-o-transform: rotate(90deg);
				}
				#stepcalculate .horoscope-label .accordion_hide.active span:nth-of-type(1),
				#return .horoscope-label .accordion_hide.active span:nth-of-type(1) {
						top: 13px;
						transform: rotate(0deg);
						-webkit-transform: rotate(0deg);
						-moz-transform: rotate(0deg);
						-ms-transform: rotate(0deg);
						-o-transform: rotate(0deg);
				}
				#stepcalculate .horoscope-label .accordion_hide span:nth-of-type(2),
				#stepcalculate .horoscope-label .accordion_hide.active span:nth-of-type(2),
				#return .horoscope-label .accordion_hide span:nth-of-type(2),
				#return .horoscope-label .accordion_hide.active span:nth-of-type(2) {
						top: 13px;
						transform: rotate(180deg);
						-webkit-transform: rotate(180deg);
						-moz-transform: rotate(180deg);
						-ms-transform: rotate(180deg);
						-o-transform: rotate(180deg);
				}
/* ---------------------
くるくる機能
---------------------*/
.stepcalculate_time {
}
		.stepcalculate_time tr {
				display: flex;
				align-items: baseline;
				justify-content: flex-end;
		}
		.stepcalculate_time th.horoscope-label {
				color: #333 !important;
				background: none !important;
				border: none !important;
				box-shadow: none;
				margin: 0 !important;
				padding: 0 !important;
		}
		.stepcalculate_time td.horoscope-data {
				margin: 0 !important;
				padding: 0 !important;
		}
				.stepcalculate_time td.horoscope-data select {
						text-align: right;
						vertical-align: baseline;
						background: #FFF;
						border: none;
						margin: 0 !important;
						padding: 0 !important;
						-webkit-appearance: none;
						appearance: none; /* デフォルトのスタイルを無効 */
				}
				.stepcalculate_time td.horoscope-data select::-ms-expand {
						display: none; /* デフォルトのスタイルを無効(IE用) */
				}
#stepcalculate dl, #return  dl {
		display: flex !important;
		flex-wrap: wrap;
}
		#stepcalculate dt, #return dt {
				width: 20%;
		}
		#stepcalculate dd, #return dd {
				width: 80%;
				padding-bottom: 10px;
		}
		#stepcalculate dd:first-of-type {
				width: 100%;
		}
				#stepcalculate dd div {
						display: flex;
						justify-content: flex-end;
				}
				#year3 {
						width: 70px;
				}
				#month3, #day3, #hour3, #minute3 {
						width: 56px;
				}
.stepcalculate-btn {
		display: inline-block;
		font-size: 0.85rem !important;
		background: #334c8f;
		padding: 6px 20px !important;
		color: #FFF !important;
}
.stepcalculate-btn:hover {
		opacity: 0.8;
}
#stop-btn {
    	background: #666;
}
.spOnly_year {
		display: none;
}

/* ---------------------
リターン図
---------------------*/
/*　一重円　*/
#return .labeltit {
		width: 56px;
		display: inline-block;
}
#return #geotimezone {
		width: 70px;
}
.return-btn {
		display: inline-block;
		font-size: 0.85rem !important;
		background: #e9702f;
		padding: 8px 15px !important;
		color: #FFF !important;
}
.return-btn:hover {
		opacity: 0.8;
}
		#return div {
				display: flex;
				justify-content: flex-end;
				margin-top: 15px;
		}
.return-btn_natalchart {
	display: block;
	color: #FFF;
	font-size: 1.275rem;
	text-align: center;
	background: #334c8f;
	border: 1px solid #caaf67;
	border-radius: 5px;
	margin-top: 20px;
	cursor: pointer;
}
		.return-btn_natalchart a {
				display: block;
				color: #FFF;
				text-decoration: none;
				text-align: center;
				padding: 15px 0;
		}
/*　一重円結果画面（return_result.php）　*/
#return_result {
		display: flex;
		justify-content: space-between;
}
#return_result .horoscope-image {
	top: 15px;
	left: -5px;
	height: 460px;
	width: 460px;
	position: relative;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
}
	#return_result .horoscope-image img {
		max-width: 100%;
	}
		span.before_message::before {
			content: "・ ";
		}
#return_result .horoscope-text {
}
#return_result .horoscope-userInfo {
    	width: 500px;
		position: relative;
}
		#return_result .horoscope-userInfo::before {
				content: '';
				background: url(../images/basis/bg_dots_p.png) repeat-x 0 0;
				height: 7px;
				display: block;
				margin: 0 auto 10px;
		}
		#return_result .horoscope-userInfo::after {
				content: '';
				background: url(../images/basis/bg_dots_gray.png) repeat-x 0 0;
				height: 7px;
				display: block;
				margin: 10px auto 0;
		}
		#return_result .horoscope-userInfo tbody {
				border-top: none;
				border-bottom: none;
		}
				#return_result .horoscope-userInfo tr:not(:last-child) {
						border-bottom: 1px solid #eee;
				}
						#return_result .horoscope-userInfo .horoscope-data .labeltit {
								display: inline-block;
								width: 30px;
						}
#return-submitBox {
		width: 300px;
		margin: 0 0 0 100px;
}
		#return-submitBox div {
				display: flex;
				justify-content: space-between;
				margin: 15px auto 10px;
		}
#return-submitBox input {
		color: #FFF;
		font-size: 0.875rem;
		font-weight: normal;
		vertical-align: middle;
		border: 1px solid #c9c9c9;
		border-radius: 5px;
		margin-right: 5px;
		margin-bottom: 5px;
}
#return-submitBox input:last-of-type {
		margin-right: 0;
}
#return-submitBox #back-btn, #back-btn, #rename-btn {
		background: #334c8f;
}
		 .horoscope-data.transit_place_address label {
			 	display: inline-block;
				width: 58px;
			 	font-size: 0.75rem;
				cursor: text;
		}
				.horoscope-data.transit_place_address #geolon2:focus,
				.horoscope-data.transit_place_address #geolat2:focus {
						outline:none;
				}
		.horoscope-data.transit_place_address #geotimezone2 {
				max-width: 50px !important;
		}
/* ホロスコープの情報 */
.return_view {
	text-align: center;
	border-top: 1px solid #bfbfbf;
	border-bottom: 1px solid #bfbfbf;
	margin: 35px 0 0;
	padding: 20px 0;
}

/* ---------------------
入力欄
---------------------*/
.horoscope-userInfo {
		font-size: 0.875rem;
		position: relative;
}
		.horoscope-userInfo tbody {
		}
						.horoscope-userInfo .horoscope-label {
								border-right: 1px solid #b5b5b5 !important;
								position: relative;
						}
								#return_result .horoscope-userInfo tr:first-child .horoscope-label::after,
								#return_result .horoscope-userInfo tr:last-child .horoscope-label::after {
									content: '';
									display: block;
									position: absolute;
									background: #b5b5b5;
									width: 6px;
									height: 6px;
									border-radius: 100%;
									right: -3px;
								}
								#return_result .horoscope-userInfo tr:first-child .horoscope-label::after {
										top: 0;
								}
								#return_result .horoscope-userInfo tr:last-child .horoscope-label::after {
										bottom: 0;
								}
						.horoscope-userInfo .horoscope-data {
								padding: 10px 0 !important;
						}

/* サマータイムの意味表示 */
.horoscope-userInfo .horoscope-data i  {
　　cursor: pointer;
}
		.horoscope-userInfo .horoscope-data i::after  {
				content: "?";
				font-size: 12px;
				font-style: normal;
				text-align: center;
				color: #333;
				background: #eee;
				-webkit-border-radius: 9px;
				-moz-border-radius: 9px;
				border-radius: 9px;
				padding: 0 6px;
		}
.horoscope-userInfo .horoscope-data.birth_place_address #geolon3, 
.horoscope-userInfo .horoscope-data.birth_place_address #geolat3 {
		background: none;
		border: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
}
.horoscope-userInfo .horoscope-aside {
		font-size: 0.75rem;
}
.attention {
		color: red !important;
		display: block;
		font-size: 0.75rem;
	    text-align: left;
		text-indent: -1em;
		margin-left: 1.4em;
}
		.attention::before {
				content: '※';
		}
.horoscope-userInfo input, .horoscope-userInfo select {
		color: #333;
		font-size: 0.875rem;
		font-weight: normal;
		vertical-align: middle;
		border: 1px solid #c9c9c9;
		border-radius: 5px;
		margin-bottom: 5px;
		margin-right: 5px;
		padding: 5px;
}
.horoscope-userInfo input[type="radio"] {
		margin-right: 1px;
}
		.horoscope-userInfo .horoscope-data.birth_place_address label {
			width: 60px;
			display: inline-block;
			cursor: text;
		}
			.horoscope-userInfo .horoscope-data.birth_place_address input[type=button] {
				font-size: 0.875rem;
				background: #334c8f;
				margin: 0 auto;
				color: #FFFFFF;
				width: 40%;
			}
			.horoscope-userInfo .horoscope-data.birth_place_address #geotimezone {
				max-width: 50px !important;
			}
			.horoscope-userInfo .horoscope-data.birth_place_address #geosubmit  {
				width: 60px;
				font-size: 0.875rem;
			}
/*-------------------------------------------------------------------------
 スマホ
-------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
.pcOnly {
		display: none !important;
}
.spOnly {
		display: inherit !important;
}
.open {
		display: block !important;
}
#stepcalculate .horoscope-label, #return .horoscope-label {
		font-size: 1rem;
		box-shadow: none;
		margin-top: 10px;
}
		#stepcalculate .horoscope-label .accordion_hide, #return .horoscope-label .accordion_hide {
				width: 30px;
				height: 30px;
				background: #c6c3dc;
				-webkit-border-radius: 15px;
				-moz-border-radius: 15px;
				border-radius: 15px;
				display: inline-block;
				position: absolute;
				top: 0;
				right: 10px;
				bottom: 0;
				margin: auto;
				cursor: pointer;
		}
				#stepcalculate .horoscope-label .accordion_hide span, #return .horoscope-label .accordion_hide span  {
						left: 8px;
				}
				#stepcalculate .horoscope-label .accordion_hide span:nth-of-type(1), 
				#return .horoscope-label .accordion_hide span:nth-of-type(1) {
						top: 13px;
						transform: rotate(90deg);
						-webkit-transform: rotate(90deg);
						-moz-transform: rotate(90deg);
						-ms-transform: rotate(90deg);
						-o-transform: rotate(90deg);
				}
				#stepcalculate .horoscope-label .accordion_hide.active span:nth-of-type(1),
				#return .horoscope-label .accordion_hide.active span:nth-of-type(1) {
						top: 13px;
						transform: rotate(0deg);
						-webkit-transform: rotate(0deg);
						-moz-transform: rotate(0deg);
						-ms-transform: rotate(0deg);
						-o-transform: rotate(0deg);
				}
				#stepcalculate .horoscope-label .accordion_hide span:nth-of-type(2),
				#stepcalculate .horoscope-label .accordion_hide.active span:nth-of-type(2),
				#return .horoscope-label .accordion_hide span:nth-of-type(2),
				#return .horoscope-label .accordion_hide.active span:nth-of-type(2) {
						top: 13px;
						transform: rotate(180deg);
						-webkit-transform: rotate(180deg);
						-moz-transform: rotate(180deg);
						-ms-transform: rotate(180deg);
						-o-transform: rotate(180deg);
				}

/* ---------------------
くるくる機能（スマホ）
---------------------*/
#stepcalculate td {
		display: none;
}
#stepcalculate dl {
		display: flex;
		flex-wrap: wrap;
}
		#stepcalculate dt {
				width: 20%;
		}
		#stepcalculate dd {
				width: 80%;
				padding-bottom: 15px;
		}
				#stepcalculate dd div {
						display: flex;
						justify-content: space-between;
				}
.stepcalculate-btn {
		padding: 10px 20px !important;
}
#stop-btn {
   	 background: #666;
}
.spOnly_year {
		display: block;
}

/* ---------------------
リターン図（スマホ）
---------------------*/
#return td {
		display: none;
}
/*　一重円　*/
.return-btn {
		padding: 12px 20px !important;
}
		#return div {
				display: flex;
				justify-content: space-around;
				margin-top: 15px;
		}
.return-btn_natalchart {
		font-size: 1rem;
}
/*　一重円結果画面（return_result.php）*/
#return_result {
		display: flex;
		flex-flow: column;
		justify-content: space-between;
}
#return_result .horoscope-image {
	width: auto;
	height: auto;
	top: -10px;
    left: 0;
}
		#return_result .horoscope-image img {
				padding-right: 0;
		}
#return_result .horoscope-text {
	display: flex;
    flex-flow: column-reverse;
}
#return_result .horoscope-userInfo {
    	width: auto;
		overflow: hidden;
}
		#return_result .horoscope-userInfo::before, 
		#return_result .horoscope-userInfo::after {
				display: none;
		}
#return-submitBox {
		width: 90%;
		margin: 30px auto 0;
}
		#return-submitBox div {
				margin: 15px auto 25px;
		}
#return-submitBox input {
		margin-right: 0;
}
/* ホロスコープの情報 */
#horoscope-inputData [data-titletype="lv2"] {
    margin: 30px 0 0;
}
.return_view {
	border-top: none;
	margin: 0;
	padding: 0 0 30px;
}
.return_view table th {
	background-color: #cbc9d4 !important;
}

/* ---------------------
入力欄（スマホ）
---------------------*/
.horoscope-userInfo .horoscope-data {
    	padding: 0 0 10px !important;
}
		.horoscope-userInfo tbody {
				border-top: none;
				border-bottom: none;
		}
				.horoscope-userInfo .horoscope-label {
						background: #3b375c !important;
						box-shadow: 0px 0px 0px 2px #373356;
						border: 1px solid #7f7d93 !important;
						color: #FFF;
						margin-bottom: 15px !important;
						position: relative;
				}
				.horoscope-userInfo .horoscope-data {
						padding: 5px 10px;
				}
						.horoscope-userInfo input[type="radio"] {
								margin-right: 5px;
						}
								#return_result .horoscope-userInfo tr:first-child .horoscope-label::after,
								#return_result .horoscope-userInfo tr:last-child .horoscope-label::after {
									display: none;
								}
/* ---------------------
印刷ボタン（スマホ）
---------------------*/
.return-pagePrint {
		margin-top: 25px !important;
}
	
	}