// ==================================================
// General Style Setting
// ==================================================
.general_frame {
	padding-top: 20px;
	padding-bottom: 40px;
	// base
	// ----------------------------------------
	h3 {
		@include fs(20);
		border-left: 1rem solid $lightgrey;
		border-bottom: 1px solid $lightgrey;
		padding-left: 1rem;
		margin-bottom: 10px;
	}
	h4 {
		@include fs(18);
		font-weight: bold;
		color: $midgrey;
		margin-bottom: 5px;
		@include fontAwesome('\f00c',LightSeaGreen,30px);
	}
	p {
		@include fs(14);
		margin-bottom: 1em;
	}
	table {
		margin-bottom: 10px;
		border: 4px solid $lightgrey;
		width: 100%;
		&.label_table {
			border: none;
			border-radius: 10px;
			th,td {
				background: $white;
				padding: 0;
				&:first-child {
					background: $silver;
				}
			}
			label {
				display: block;
				padding: 0.5em;
				&:hover {
					cursor: pointer;
					background: $silver;
				}
			}
		}
	}
	th {
		background: $silver;
	}
	td {
		strong {
			color: LightSeaGreen;
			@include fontAwesome('\f07a',inherit,30px);
			&:before {
				@include opacity(0.5);
			}
		}
	}
	a {
		font-weight: bold;
	}
	a,input[type=submit] {
		&:hover {
			@include hoverAction;
		}
	}
	textarea {
		width: 100%;
		border-color: $lightgrey;
	}
	// module
	// ----------------------------------------
	.title {
		@include fs(24);
		color: $midgrey;
		@include fontAwesome('\f07a',LightSeaGreen,2.4rem);
		border-bottom: 2px solid LightSeaGreen;
		margin-top: 1em;
		margin-bottom: 1em;
		&_mypage {
			&::before {
				content: '\f023';
			}
		}
	}
	.price {
		color: #F00;
		font-weight: bold;
	}
	.btn_area {
		text-align: center;
		a, input[type=submit] {
			display: inline-block;
			background: $lightgrey;
			color: $white;
			@include fs(20);
			border: none;
			border-radius: 4px;
			padding: .1em 2em;
			font-weight: bold;
		}
		a.btn_submit, input[type=submit] {
			background: LightSeaGreen;
			@include fontAwesome('\f002',rgba($white,0.5),1.8rem);
		}
		a.btn_choice01 {
			background: Coral;
		}
		a.btn_choice02 {
			background: LightSeaGreen;
		}
	}
	.quantity_level {
		a {
			display: inline-block;
			border-radius: 4px;
			color: $white;
			padding: 0 .2em;
		}
	}
	.attentionSt,.attention,.error,.message {
		border: 4px solid #fcc;
		padding: 10px 20px;
		color: Red;
		font-weight: bold;
		.btn {
			border: none;
			display: inline-block;
			// background: Coral;
			background: Red;
			border-radius: 4px;
			padding: 0.2em 1em;
			color: $white;
			font-weight: bold;
		}
	}
	.scrl_box250 {
		max-height: 250px;
		overflow-y: scroll;
	}
	form .attention {
		margin-bottom: 0.5em;
	}
	span.attentionSt,span.attention,span.error {
		border: none;
		padding: 0;
	}
	.inputtext {}
	.empty {
		margin-bottom: 40px;
	}
	.inputbox {
		background: $silver;
		padding: 10px 20px;
		margin-bottom: 10px;
	}
	.formlist {
		@include clearfix;
		dt {
			width: 15%;
			float: left;
			clear: both;
			text-align: right;
			font-weight: bold;
			color: $darkgrey;
		}
		dd {
			float: left;
			input[type=text],
			input[type=password] {
				width: 100%;
			}
		}
	}
	// mynavi_list
	// ----------------------------------------
	.mynavi_list {
		@include clearfix;
		border: 1px solid $silver;
		margin-bottom: 1em;
		li {
			float: left;
			width: 16.6666%;
			width: calc(100%/6);
			text-align: center;
			padding: 0.4em;
			a {
				display: block;
				padding: 0.4em 0 0.3em;
				background: LightSeaGreen;
				color: $white;
				@include fs(16);
				@include opacity(0.8);
			}
		}
	}
	// flow area
	// ----------------------------------------
	.flow_area {
		text-align: center;
	}
}
@include ltMD {};
@include ltSM {};
@include ltXS {};
@include ltXXS {};

// ==================================================
// Standard Style Setting
// ==================================================
.standard_frame {
	padding: 0 10px;
	h1,h2,h3,h4,h5,h6 {
		font-weight: bold;
		margin-bottom: 1em;
	}
	.ml2 {
		margin-left: 2em;
	}
	.ttl {
		@include fs(24);
		border-bottom: 2px solid $sub;
		padding: 0.4em 0;
		small {
			display: block;
			color: $midgrey;
			@include fs(12);
		}
	}
	article {
		margin-bottom: 10px;
		border-bottom: 1px solid $lightgrey;
		a {
			color: LightSeaGreen;
			font-weight: bold;
			&:hover {
				text-decoration: underline;
			}
		}
		h3 {
			@include fs(16);
			&.subttl {
				clear: both;
				background: $silver;
				padding: 0.5em 1em;
				border-radius: 4px;
			}
		}
		h4 {
			@include fs(15);
		}
		h3 {
			@include fs(14);
		}
		p {
			@include fs(14);
			margin-bottom: 1em;
			margin-left: 2em;
			&.noml {
				margin-left: 0;
				&.ihai_flow {
					position: relative;
					.btn {
						position: absolute;
						bottom: 0;
						left: 0;
						font-size: 12px;
						font-size: 1rem;
						padding: 0 1em;
						@include fs(12);
					}
				}
				&.chart05 {
					position: relative;
					.overimg_link {
						position: absolute;
						bottom: 3.2em;
						left: 6.2em;
						display: inline-block;
						width: 19.6em;
						text-align: center;
						@include fs(12);
						color: #FFEFE3;
						background: #FFEFE3;
						@include opacity(0);
						&:hover {
							@include opacity(0.3);
						}
					}
				}
			}
		}
		ul {
			margin-bottom: 1em;
			list-style: circle;
			margin-left: 4em;
		}
	}
	blockquote {
		background: $silver;
		padding: 0.5em 1em;
		border-radius: 4px;
		margin: 0;
		margin-bottom: 1em;
	}
	.sidebar {
		margin-bottom: 1em;
		.ttl {
			@include fs(18);
			margin-bottom: 0;
		}
		ul {
			@include fs(14);
			margin-bottom: 1em;
			list-style: none;
			margin-left: 0;
		}
		li {
		}
		a {
			display: block;
			color: $midgrey;
			border-bottom: 1px solid $midsilver;
			padding: 10px 0;
			position: relative;
			@include fontAwesomeAfter('\f054',$grey,80%);

			&::after {
				position: absolute;
				top: 50%;
				right: 0;
				margin-top: -.4em;
			}
		}
	}
	.faq_nav {
		border: 4px solid $silver;
		border-radius: 4px;
		list-style: none;
		padding: 1em 2em;
		margin-left: 0;
		a {
			@include caretR;
		}
	}
	.faq_list {
		@include fs(14);
		margin-bottom: 2em;
		dt {
			border-bottom: 1px solid $lightgrey;
			padding: 0.8em 0 0.8em 2em;
			position: relative;
			&:before {
				content: "Q";
				@include fs(30);
				color: Orchid;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}
		dd {
			margin-bottom: 1em;
			padding: 0.8em 0 0.8em 2em;
			position: relative;
			&:before {
				content: "A";
				@include fs(30);
				color: LightSeaGreen;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
	}
	.guide_list {
		@include fs(14);
		margin-bottom: 0;
		dt {
			border-bottom: 1px solid $lightgrey;
			padding: 0.8em 0;
			@include fontAwesome("\f10c",Orchid,2rem);
			font-weight: bold;
		}
		dd {
			margin-bottom: 1em;
			padding: 0.8em 0;
		}
		ol {
			margin-left: 2em;
			li {
				border: 2px solid #90D9D5;
				padding: 0.8em 1.6em;
				margin-bottom: 1em;
				position: relative;
				&:after {
					content: "";
					display: block;
					position: absolute;
					width: 0;
					height: 0;
					bottom: -10px;
					left: 50%;
					margin-left: -20px;
					border-top: 10px solid #90D9D5;
					border-right: 20px solid transparent;
					border-bottom: none;
					border-left: 20px solid transparent;
				}
				&:last-child:after {
					content: none;
				}
			}
		}
		.attention {
			background: $silver;
			padding: 0.8em 1.6em;
		}
	}
	.btn {
		display: inline-block;
		margin-bottom: 0.4em;
		background: LightSeaGreen;
		border: none;
		color: $white;
		border-radius: 4px;
		padding: 0.4em 0.8em;
		&:hover {
			text-decoration: none;
			@include opacity(0.8);
		}
	}
	table {
		background: $white;
		color: $midgrey;
		width: 100%;
		@include fs(14);
		th {
			font-weight: bold;
		}
		td {
			text-align: center;
		}
		&.transaction {
			display: block;
			th,td {
				width: 100%;
				text-align: left;
				display: block;
				border: none;
			}
			tr {
				padding: 10px;
				display: block;
				border-bottom: 1px solid $lightgrey;
				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
}
@include ltMD {};
@include ltSM {};
@include ltXS {};
@include ltXXS {};