@charset "utf-8";
/* CSS Document */
/* メールTOP用CSS add 2016/02/19 */
/* RWD.css for TOP from https://u.xgoo.jp/css/1.3.css */

@media screen and (max-device-width: 599px) {
	body {
		-webkit-text-size-adjust: none; /* for iPhone */
	}
}

@media (min-width: 1px) {
/* PC・タブレット */

	/* PC非表示 */
	.sp_only {
		display: none;
	}

	/* ログイン・新規申込みラッパー */
	#mail_top_main_area {
		display: block;
		width: 100%;
	}

	/* ログイン */
	#area_mail_login {
		background-color: #f2f2f2;
		float: left;
		margin: 0 9px 10px 0;
		width: 212px;
		height: 237px;
	}

	#area_mail_login h2 {
		background-color: #0099ff;
		color: #fff;
		font-size: 140%;
		line-height: 120%;
		margin: 0;
		padding: 5px;
		width: 202px;
	}

	.inner_mail_login {
		background-color: #f2f2f2;
		padding: 20px 10px 15px 10px;
		text-align: center;
		width: 192px;
	}

	.inner_mail_login span {
		display: block;
		font-size: 75%;
		margin: 5px 0 8px;
	}

	/* 新規申し込み（3ブロック） */
	#incontents .area_subscription_3_block {
		float: left;
		margin-bottom: 10px;
		width: 434px;
	}

	#incontents .area_subscription_3_block h2 {
		background-color: #9dd07d;
		color: #fff;
		font-size: 140%;
		line-height: 120%;
		margin: 0;
		padding: 5px;
	}

	#incontents .area_subscription_3_block .inner_mailadv h3,
	#incontents .area_subscription_3_block .inner_adpkg h3 {
		border-bottom: 0;
		color: #5ea133;
		font-size: 110%;
		margin: 0;
		padding: 0;
	}

	#incontents .area_subscription_3_block .inner_mailadv,
	#incontents .area_subscription_3_block .inner_adpkg {
		background-color: #eafae0;
		float: left;
		padding: 20px 0 15px;
		text-align: center;
		width: 212px;
	}

	#incontents .area_subscription_3_block .inner_mailadv {
		margin-right: 10px;
	}

	#incontents .area_subscription_3_block .inner_mailadv span,
	#incontents .area_subscription_3_block .inner_adpkg span {
		display: block;
		font-size: 75%;
		margin: 10px 0;
	}

	/* 新規申し込み（2ブロック） */
	#incontents .area_subscription_2_block {
		margin-bottom: 20px;
		overflow: hidden;
	}

	#incontents .area_subscription_2_block h2 {
		background-color: #9dd07d;
		color: #fff;
		font-size: 140%;
		line-height: 120%;
		margin: 0;
		padding: 5px;
	}

	#incontents .area_subscription_2_block .inner_mailadv h3,
	#incontents .area_subscription_2_block .inner_adpkg h3 {
		border-bottom: 0;
		color: #5ea133;
		margin: 0;
		padding: 0;
	}

	#incontents .area_subscription_2_block .inner_mailadv,
	#incontents .area_subscription_2_block .inner_adpkg {
		background-color: #eafae0;
		float: left;
		padding: 20px 10px 15px 10px;
		text-align: center;
		width: 302px;
	}

	#incontents .area_subscription_2_block .inner_mailadv span,
	#incontents .area_subscription_2_block .inner_adpkg span {
		display: block;
		margin: 10px 0;
	}

	#incontents .area_subscription_2_block .inner_mailadv {
		margin-right: 10px;
	}

	/* フキダシデザイン */
	#area_voice {
		margin-top: 20px;
		clear: both;
	}

	#area_voice h2 {
		background-color: #fff;
		color: #5ea133;
		padding: 0 0 0 16px;
		position: relative;
		margin-bottom: 20px;
	}

	#area_voice h2::after {
		background-color: #9dd07d;
		border-radius: 4px;
		content: '';
		height: -webkit-calc(100% - 0.1em);
		height: calc(100% - 0.1em);
		left: 0;
		position: absolute;
		width: 6px;
	}

	.question_box {
		margin-bottom: 25px;
		overflow: hidden;
	}

	.arrow_answer,
	.arrow_question {
		background: #fff;
		border: 2px solid #c8c8c8;
		border-radius: 10px;
		line-height: 175%;
		padding: 20px;
		position: relative;
		width: 76%;
	}

	.arrow_question {
		float: right;
	}

	.arrow_answer:after,
	.arrow_answer:before,
	.arrow_question:after,
	.arrow_question:before {
		border: solid transparent;
		content: " ";
		height: 0;
		pointer-events: none;
		position: absolute;
		top: 50%;
		width: 0;
	}

	.arrow_question:after,
	.arrow_question:before { right: 100%; }
	.arrow_answer:after,
	.arrow_answer:before { left: 100%; }
	.arrow_answer:after,
	.arrow_question:after {
		border-color: rgba(255, 255, 255, 0);
		border-width: 13px;
		margin-top: -13px;
	}

	.arrow_answer:after { border-left-color: #fff ; }
	.arrow_question:after { border-right-color: #fff ; }
	.arrow_answer:before,
	.arrow_question:before {
		border-color: rgba(200, 200, 200, 0);
		border-width: 16px;
		margin-top: -16px;
	}

	.arrow_answer:before { border-left-color: #c8c8c8; }
	.arrow_question:before { border-right-color: #c8c8c8; }

	.question_image {
		display: block;
		float: left;
		text-align: center;
		width: 95px;
	}

	.answer_image {
		display: block;
		float: right;
		text-align: center;
		width: 95px;
	}

	.question_image img,
	.answer_image img {
		border-radius: 50px;
		height: 90px;
		width: 90px;
	}

	.arrow_answer strong,.arrow_question strong {
		font-size: 16px;
	}

	.question_image span,
	.answer_image span {
		font-size: 11px;
	}

	.arrow_question h3,
	.arrow_answer h3 {
		font-weight: normal;
		margin-top:0 !important;
	}

	/* FAQ */
	#area_faq-top {
		margin-bottom: 20px;
	}

	#area_faq-top ul{
		list-style: none;
	}

	#area_faq-top ul li.gold {
		background: url(/img/top/icon-gold.png) no-repeat 5px;
	}

	#area_faq-top ul li.silver {
		background: url(/img/top/icon-silver.png) no-repeat 5px;
	}

	#area_faq-top ul li.bronze {
		background: url(/img/top/icon-bronze.png) no-repeat 5px;
	}

	#area_faq-top ul li.rank4 {
		background: url(/img/top/icon-4.png) no-repeat 5px;
	}

	#area_faq-top ul li.rank5 {
		background: url(/img/top/icon-5.png) no-repeat 5px;
	}

	#area_faq-top ul li {
		font-size: 1em;
		padding: 10px 1em 10px 36px;
		line-height: 1.5em;
	}

	#area_faq-top ul li:nth-child(even){
		background-color: #f5f5f5;
	}

	#area_faq-top ul li img {
		vertical-align: middle;
	}

	/* RWD sample */
	#subscription {
		float: relative;
		min-width: 300px;
	}

	/* alert */
	#area_mail_login .alerttop {
		font-weight: bold;
	}

	#area_mail_login .alerttop a {
		color: #ff0000;
	}

}

@media screen and (max-width: 599px) {
/* スマホ */

	/* スマホ非表示 */
	.pc_only {
		display: none !important;
	}

	/* スマホのみ表示 */
	#topinmain .sp_only {
		display: block;
		float: none;
		padding: 0 0 10px;
		text-align: center;
	}

	#topinmain .sp_only img {
		width: 100%;
		height: auto;
	}

	/* スマホ版ログイン */
	#area_mail_login {
		display: block;
		margin-bottom: 10px;
		width: 100%;
		height: auto;
	}

	#area_mail_login h2 {
		font-size: 140%;
		line-height: 120%;
		margin: 0;
		padding: 5px;
		width: 100%;
	}

	.inner_mail_login {
		padding: 20px 0 15px;
		width: 100%;
	}

	.inner_mail_login span {
		display: block;
		font-size: 75%;
		margin: 5px 0 8px;
	}

	/* スマホ版新規申し込み（3ブロック） */
	#incontents .area_subscription_3_block {
		float: left;
		margin-bottom: 5px;
		width: 100%;
	}

	#incontents .area_subscription_3_block h2 {
		font-size: 140%;
		line-height: 120%;
		margin: 0;
		padding: 5px;
		width: 100%;
	}

	#incontents .area_subscription_3_block .inner_mailadv h3,
	#incontents .area_subscription_3_block .inner_adpkg h3 {
		border-bottom: 0;
		font-size: 110%;
		margin: 0;
		padding: 0;
	}

	#incontents .area_subscription_3_block .inner_mailadv {
		float: none;
		padding: 12px 0 8px;
		width: 100%;
	}

	#incontents .area_subscription_3_block .inner_adpkg {
		float: none;
		padding: 8px 0 12px;
		width: 100%;
	}

	#incontents .area_subscription_3_block .inner_mailadv span,
	#incontents .area_subscription_3_block .inner_adpkg span {
		display: block;
		font-size: 75%;
		margin: 5px 0;
	}

	/* スマホ版新規申し込み（2ブロック） */
	#incontents .area_subscription_2_block {
		margin-bottom: 20px;
		overflow: hidden;
	}

	#incontents .area_subscription_2_block h2 {
		font-size: 140%;
		line-height: 120%;
		margin: 0;
		padding: 5px;
	}

	#incontents .area_subscription_2_block .inner_mailadv h3,
	#incontents .area_subscription_2_block .inner_adpkg h3 {
		border-bottom: 0;
		margin: 0;
		padding: 0;
	}

	#incontents .area_subscription_2_block .inner_mailadv,
	#incontents .area_subscription_2_block .inner_adpkg {
		float: none;
		padding: 20px 0 15px;
		text-align: center;
		width: 100%;
	}

	#incontents .area_subscription_2_block .inner_mailadv span,
	#incontents .area_subscription_2_block .inner_adpkg span {
		display: block;
		margin: 10px 0;
	}

	#incontents .area_subscription_2_block .inner_mailadv {
		margin-right: 0;
	}

	/* スマホ版フキダシデザイン */
	#area_voice {
		margin-top: 20px;
		clear: both;
	}

	#area_voice h2 {
		padding: 0 0 0 16px;
		position: relative;
		margin-bottom: 20px;
	}

	#area_voice h2::after {
		border-radius: 4px;
		content: '';
		height: -webkit-calc(100% - 0.1em);
		height: calc(100% - 0.1em);
		left: 0;
		position: absolute;
		width: 6px;
	}

	.arrow_answer,
	.arrow_question {
		border-radius: 10px;
		margin: 0 7px 0 0;
		padding: 10px;
		position: relative;
		width: 76%;
	}


	.arrow_answer,
	.arrow_question {
		float: right;
	}

	.arrow_answer:after,
	.arrow_answer:before,
	.arrow_question:after,
	.arrow_question:before {
		border: solid transparent;
		content: " ";
		height: 0;
		pointer-events: none;
		position: absolute;
		top: 50%;
		width: 0;
	}

	.arrow_question:after,
	.arrow_question:before { right: 100%; }
	.arrow_answer:after,
	.arrow_answer:before { left: 100%; }

	.arrow_answer:after,
	.arrow_question:after {
		border-width: 13px;
		margin-top: -13px;
	}

	.arrow_answer:before,
	.arrow_question:before {
		border-width: 16px;
		margin-top: -16px;
	}

	.question_box {
		margin-bottom: 15px;
		overflow: hidden;
	}

	.answer_image,
	.question_image {
		float: left;
		text-align: left;
		width: 100%;
	}

	.answer_image img,
	.question_image img {
		border-radius: 50px;
		height: 50px;
		margin: 0 10px 0 7px;
		vertical-align: middle;
		width: 50px;
	}

	.arrow_answer strong, .arrow_question strong {
		font-size: 16px;
	}

	.answer_image span,
	.question_image span {
		font-size: 13px;
	}

	.arrow_answer h3,
	.arrow_question h3 {
		font-weight: normal;
		margin-top:0 !important;
	}

}