@charset "UTF-8";

/**
 * オリジナルcss
 */

.plan_tab {
	margin-top: 60px;
	width: 100%;
}

.plan_tab li {
	display: inline-block;
	vertical-align: top;
	width: 50%;
	text-align: center;
	cursor: pointer;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	background: #A5A5A5;
	padding: 8px;
	position: relative;
}

.plan_tab li.plan_tab_acvive {
	color: #000;
	background: #9BC950;
}

.plan_tab li.plan_tab_transfer:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 21px solid #A5A5A5;
	border-bottom: 21px solid #9BC950;
	border-left: 8px solid #9BC950;
	border-right: 8px solid #A5A5A5;
	position: absolute;
	top: 0;
	left: -4px;
}

.plan_tab li.plan_tab_transfer.plan_tab_acvive:before {
	border-top: 21px solid #9BC950;
	border-bottom: 21px solid #A5A5A5;
	border-left: 8px solid #A5A5A5;
	border-right: 8px solid #9BC950;
}


.plan_content {
	display: none;
	margin-top: 40px;
}

.plan_content_active {
	display: block;
}


.plan_content .plan_content_elements li {
	display: inline-block;
	vertical-align: top;
}

.plan_content_option_title {
	font-size: 30px;
	margin-top: 18px;
	margin-bottom: 16px;
}

.plan_content_option_body li {
	padding: 12px 8px;
	text-align: center;
	font-size: 13px;
}

.plan_content_option_body li.plan_content_option_element_title {
	text-align: left;
}

.plan_content_subscription .plan_content_elements li:nth-child(4n+1) {
	width: 245px;
	margin-right: 20px;
}

.plan_content_subscription .plan_content_elements li:nth-child(4n+2) {
	width: calc((100% - 291px) / 3);
	margin-right: 13px;
}


.plan_content_subscription .plan_content_elements li:nth-child(4n+3) {
	width: calc((100% - 291px) / 3);
	margin-right: 13px;
}

.plan_content_subscription .plan_content_elements li:nth-child(4n) {
	width: calc((100% - 291px) / 3);
	margin-right: 0;
}

.plan_content_subscription .plan_content_option_body li:nth-child(8n+1), 
.plan_content_subscription .plan_content_option_body  li:nth-child(8n+2), 
.plan_content_subscription .plan_content_option_body  li:nth-child(8n+3), 
.plan_content_subscription .plan_content_option_body  li:nth-child(8n+4) {
	background: #F5F5F5;
}

.plan_content_subscription .plan_content_option_body  li:nth-child(8n+5), 
.plan_content_subscription .plan_content_option_body  li:nth-child(8n+6), 
.plan_content_subscription .plan_content_option_body  li:nth-child(8n+7), 
.plan_content_subscription .plan_content_option_body  li:nth-child(8n) {
	background: #E6E6E6;
}

.plan_content_transfer .plan_content_elements li:nth-child(5n+1) {
	width: 245px;
	margin-right: 20px;
}

.plan_content_transfer .plan_content_elements li:nth-child(5n+2) {
	width: calc((100% - 286px) / 4);
	margin-right: 7px;
}

.plan_content_transfer .plan_content_elements li:nth-child(5n+3) {
	width: calc((100% - 286px) / 4);
	margin-right: 7px;
}

.plan_content_transfer .plan_content_elements li:nth-child(5n+4) {
	width: calc((100% - 286px) / 4);
	margin-right: 7px;
}

.plan_content_transfer .plan_content_elements li:nth-child(5n) {
	width: calc((100% - 286px) / 4);
	margin-right: 0;
}

.plan_content_transfer .plan_content_option_body  li:nth-child(10n+1), 
.plan_content_transfer .plan_content_option_body  li:nth-child(10n+2), 
.plan_content_transfer .plan_content_option_body  li:nth-child(10n+3), 
.plan_content_transfer .plan_content_option_body  li:nth-child(10n+4), 
.plan_content_transfer .plan_content_option_body  li:nth-child(10n+5) {
	background: #F5F5F5;
}

.plan_content_transfer .plan_content_option_body  li:nth-child(10n+6), 
.plan_content_transfer .plan_content_option_body  li:nth-child(10n+7), 
.plan_content_transfer .plan_content_option_body  li:nth-child(10n+8), 
.plan_content_transfer .plan_content_option_body  li:nth-child(10n+9), 
.plan_content_transfer .plan_content_option_body  li:nth-child(10n) {
	background: #E6E6E6;
}

.plan_content_sp .plan_content_elements li:nth-child(2n+1) {
	width: 245px;
}

.plan_content_sp .plan_content_elements li:nth-child(2n) {
	width: calc(100% - 245px);
	text-align: left;
}


.plan_content_sp .plan_content_option_body li:nth-child(4n+1), 
.plan_content_sp .plan_content_option_body  li:nth-child(4n+2) {
	background: #F5F5F5;
}

.plan_content_sp .plan_content_option_body  li:nth-child(4n+3), 
.plan_content_sp .plan_content_option_body  li:nth-child(4n+4) {
	background: #E6E6E6;
}

.plan_content_element_title dl dt {
	height: 46px;
}

.plan_content_element_body dl dt {
	font-size: 14px;
	text-align: center;
	padding: 12px 3px;
}

.plan_content_element dl dd {
	margin: 0;
	height: 180px;
	position: relative;
}

.plan_content_element_body_inner {
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

.plan_content_element_title dl dd h3 {
	font-size: 30px;
	margin-top: 0;
	margin-bottom: 28px;
}

.plan_content_element_title dl dd p {
	font-size: 12px;
	margin: 0;
}

.plan_content_element_body dl dd {
	text-align: center;
	color: #fff;
}

.plan_content_element_value_title {
	font-size: 14px;
}

.plan_content_element_value_body {
	font-size: 35px;
}

.plan_content_element_value_body span {
	font-size: 18px;
}

.plan_content_element_subscription_lite dt {
	border: 1px solid #0046A0;
	color: #0046A0;
}

.plan_content_element_subscription_lite dd {
	background: #0046A0;
}

.plan_content_element_subscription_standard dt {
	border: 1px solid #30871E;
	color: #30871E;
}

.plan_content_element_subscription_standard dd {
	background: #30871E;
}

.plan_content_element_subscription_premium dt {
	border: 1px solid #F59600;
	color: #F59600;
}

.plan_content_element_subscription_premium dd {
	background: #F59600;
}

.plan_content_element_transfer_trial dt {
	border: 1px solid #E64290;
	color: #E64290;
}

.plan_content_element_transfer_trial dd {
	background: #E64290;
}

.plan_content_element_transfer_lite dt {
	border: 1px solid #0068B6;
	color: #0068B6;
}

.plan_content_element_transfer_lite dd {
	background: #0068B6;
}

.plan_content_element_transfer_standard dt {
	border: 1px solid #30871E;
	color: #30871E;
}

.plan_content_element_transfer_standard dd {
	background: #30871E;
}

.plan_content_element_transfer_premium dt {
	border: 1px solid #F59600;
	color: #F59600;
}

.plan_content_element_transfer_premium dd {
	background: #F59600;
}

.plan_content_sp {
	display: none;
}


@media screen and (max-width: 1110px) {
}
@media screen and (max-width: 970px) {
	.top_content_plan {
		padding-left: 10px;
		padding-right: 10px;
	}
}
@media screen and (max-width: 880px) {
	.plan_tab {
		display: none;
	}
	
	.plan_content_pc {
		display: none;
	}
	
	.plan_content_sp {
		display: block;
		text-align: center;
	}
	
	.plan_content_sp_header {
		display: inline-block;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}
	
	.plan_content_sp_header h3 {
		font-size: 30px;
		margin-top: 0;
		margin-bottom: 20px;
	}
	.plan_content_sp_header p {
		margin: 0;
	}
	
	.plan_content_element {
	}
	
	.plan_content_element_body {
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 350px;
		margin-top: 42px;
	}
	
	.plan_content_sp .button_more {
		max-width: 350px;
		margin-left: auto;
		margin-right: auto;
		text-align: right;
	}
	
	.plan_content_sp .button_more a {
		text-align: center;
	}
	
	.button_more_subscription_lite a {
		background: #0046A0;
		border: 1px solid #0046A0;
	}
	
	.button_more_subscription_lite a:hover {
		color: #0046A0;
	}
	
	.button_more_subscription_standard a {
		background: #30871E;
		border: 1px solid #30871E;
	}
	
	.button_more_subscription_standard a:hover {
		color: #30871E;
	}
	
	.plan_content_element_subscription_premium dt {
		border: 1px solid #EB87DC;
		color: #EB87DC;
	}
	
	.plan_content_element_subscription_premium dd {
		background: #EB87DC;
	}
	
	.button_more_subscription_premium {
		margin-bottom: 62px;
	}
	
	.button_more_subscription_premium a {
		background: #EB87DC;
		border: 1px solid #EB87DC;
	}
	
	.button_more_subscription_premium a:hover {
		color: #EB87DC;
	}
	
	.plan_content_option_title {
		margin-top: 50px;
		margin-bottom: 34px;
	}
	
	.top_content_plan_note {
		text-align: center;
		margin-top: 56px;
	}
	
}
@media screen and (max-width:740px){
}
@media screen and (max-width:639px){
}
@media screen and (max-width:500px){
}