@charset "utf-8";
/* CSS Document */

/* =============================================================================
	common
============================================================================= */
div.ArrowDown	{ text-align: center; margin-bottom:1em; }
.section-inner .Indent	{ margin:0 1em 2em; }
.bg_bl	{ background:#E8F3FC; margin-top: 1.5em;}
.icon-arrow::before {content: url(/images/common/images/support-parts-arrow.gif); display: inline-block; margin-right: 0.5em;}

/* ページタイトル (.hero-area-inforegister) ===================================== { */
.hero-area-inforegister { margin-top: 16px; min-height: 300px; background: linear-gradient(-45deg, #F4FFE8 25%, white 25%, white 50%, #F4FFE8 50%, #F4FFE8 75%, white 75%, white); background-size: 15px 15px; border-top: 5px solid #267952; }
.hero-area-inforegister .content { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; width: 100%; padding-top: 40px; padding-bottom: 20px; }
.hero-area-inforegister .content-inner { margin: 20px; max-width: 100%; }
.hero-area-inforegister .content-inner .main-txt>* { margin: 0 1em; font-size: 4rem; line-height: 1.3; text-align: center; text-shadow:0px 3px 1px #FFF,0px 2px 1px #FFF,1px 2px 1px #FFF,2px 2px 1px #FFF,2px 1px 1px #FFF,2px 0px 1px #FFF,3px 0px 1px #FFF,2px -1px 1px #FFF,2px -2px 1px #FFF,2px -3px 1px #FFF,1px -3px 1px #FFF,0px -3px 1px #FFF,-1px -3px 1px #FFF,-2px -3px 1px #FFF,-3px -3px 1px #FFF,-3px -2px 1px #FFF,-3px -1px 1px #FFF,-3px 0px 1px #FFF,-3px 1px 1px #FFF,-3px 2px 1px #FFF,-2px 2px 1px #FFF,-1px 2px 1px #FFF; }
.hero-area-inforegister .content-inner .sub-txt>* { font-size: 1.8rem; line-height: 1.3; margin: 32px 0 0; padding: 1em; background: #ffffff; border: 1px solid #F4FFE8; }
/* } ページタイトル (.hero-area-inforegister)  ===================================== */

/* 見出し (h2) ===================================== { */
.section-inner h2	{	margin:0 0 1em;	padding:0.5em 0.8em; font-size:2.6rem; color:#FFF; background: #267952; border:3px solid #267952; border-radius: 20px 20px 0 0;	}
/* } 見出し (h2)  ===================================== */

/* ユーザー登録ボタン枠 (.goRegister) ===================================== { */
.goRegister	{	margin-bottom:3em; padding:20px; border:2px solid #2390E5; text-align:center; }
.goRegister p.please	{ font-size:2.4rem; font-weight:bold; color:#2390E5; margin-bottom:0.3em;}
.goRegister p.please span.free	{ color:#2390E5; padding:0.05em 0.5em; border-radius: 5px; border:2px solid #2390E5; }
.goRegister p.entranceSupport	{ background: #E8F3FC; padding: 16px; margin:20px 0 0!important; text-align:left; }
p.goBtn 	{ margin-bottom:1em; }
p.goBtn a { display: inline-block; padding: 0.8em 2em; color: #FFF; font-size: 2.5rem; font-weight: bold; text-decoration: none; background: #bb0000; border-radius: 8px; }
p.goBtn a:hover	{ opacity: 0.75; 	filter: alpha(opacity=75); -ms-filter: "alpha(opacity=75)"; -khtml-opacity: 0.75; -moz-opacity: 0.75; position: relative; top: 1px; left: 1px; 	}
p.goBtn span 	{ /*display:block;*/ font-size:2.0rem }
/* } ユーザー登録ボタン枠 (.goRegister) ===================================== */

/* ユーザー登録番号とMy Cloud ID (.InfoRegistration) ===================================== { */
.InfoRegistration	{ display: flex; align-items: stretch; column-gap: 20px; margin-bottom:1em; }
.InfoRegistration [class^="item_"] { flex: 1;}
.InfoRegistration [class^="item_"] .tit { color:#ffffff; font-weight:700; font-size:2.0rem; text-align:center; padding:0.5em; margin:0; border-radius: 4px 4px 0 0; }
.InfoRegistration [class^="item_"] .cnt { padding:20px; margin: 0;	font-size: 1.8rem; }
.InfoRegistration .item_reg {	border: 2px solid #2390E5; border-radius: 8px;	}
.InfoRegistration .item_mc {	border: 2px solid #aaaaaa; border-radius: 8px;	}
.InfoRegistration .item_reg .tit {	background:#2390E5; }
.InfoRegistration .item_mc .tit {	background:#aaaaaa; }
@media only screen and (max-width:768px) {.InfoRegistration{display: block;}.InfoRegistration .item_mc {margin-top: 20px;}}
/* } ユーザー登録番号とMy Cloud ID .(InfoRegistration) ===================================== */

/* ユーザー登録番号でできること (.Ability) ===================================== { */
.Ability	{ margin-bottom:1em;}
.Ability ul	{ display: flex; flex-wrap: wrap; gap: 15px 15px; }
.Ability ul li	{ width:calc(95.0% / 3);}
.Ability ul li .menu	{ margin:0; padding:0; background:#FAFAFA; border:1px solid #ccc; border-radius: 3px; }
.Ability ul li .menu .inner	{ display: flex; align-items: center; margin:6px 10px 6px 5px; padding:0; }
.Ability ul li .menu .inner>p	{ padding:0; margin:0; }
.Ability ul li .menu .inner .icon	{	margin:0 15px 0 0; padding:5px 10px 5px 5px; border-right:2px dotted #ccc;	display: block;	}
.Ability ul li .menu .inner .icon>img {max-width: 70px; height: auto;}
.Ability ul li .menu .inner .text { color: #2390E5; font-weight:bold; font-size:1.6rem; }
.Ability ul li .menu .inner .text img.mark_login { vertical-align: middle; margin-left: 0.5em; margin-top: -4px;}
.icon-marklogin { margin: 0.5em;}
.icon-marklogin::before { content:url(/support/info/register/images/icon-login.png); display: inline-block; margin-right: 0.5em;}
@media only screen and (max-width:768px) {.Ability ul li	{ width:calc(96.0% / 2);}}
@media only screen and (max-width:480px) {.Ability ul li	{ width:calc(100% / 1);}}
/* } ユーザー登録番号でできること (.Ability) ===================================== */

/* ユーザー登録の流れ (.Beforehand) ===================================== { */
.Beforehand	{ border:1px solid #267952; margin-bottom:1em; }
.Beforehand .innerblock	{ border:2px solid #fff; background: #F4FFE8; padding:1em 1em 1em;}
.Beforehand .innerblock h3	{ font-size:2.4rem; color:#267952; padding-left:1.5em; position:relative; margin-bottom: 1.0em;}

.Beforehand .innerblock h3:after 	{
	display: block;
	content: '';
	position: absolute;
	top: 0.18em;
	left: 0;
	width: 1em;
	height: 1em;
	background-color: #267952;
	}

.Beforehand .innerblock dl	{ margin-left: 2em;}

.Beforehand .innerblock dl dt:first-child {margin-top: 0;}
.Beforehand .innerblock dl dt	{ font-weight:bold; font-size:2.0rem; margin-top: 1.5em; margin-bottom:0.8em;position: relative; padding-left:1.5em; }
	.Beforehand .innerblock dl dt:after,
	.Beforehand .innerblock dl dt:before	{
		display: block;
		content: '';
		position: absolute;
	}
	.Beforehand .innerblock dl dt:after	{
		top: 5px;
		left: 0;
		width: 1.2em;
		height: 1.2em;
		background-color: #008cc2;
		border-radius: 100%;
		}
	.Beforehand .innerblock dl dt:before	{
		z-index: 2;
		top: 13px;
		left: 0.4em;
		width: 4px;
		height: 4px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		-moz-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
.Beforehand .innerblock dl dd	{ margin-left: 2.0em;}
.Beforehand .innerblock dl dd span.noteTitle	{ display:block; font-weight:bold; color:#2390E5; margin-top:0.5em; }

	/* input Rule table */
	.Beforehand .innerblock dl dd table.inputRule{
		border-collapse: collapse;
		border:1px solid #2390E5;
		margin-top:5px;
		margin-bottom:10px;
	}
	
	.Beforehand .innerblock dl dd table.inputRule td{
		border-bottom:1px dotted #2390E5;
		border-left:1px dotted #2390E5;
		padding:5px 8px 5px 8px;
		background-color:#FFFFFF;
	}

.Beforehand .innerblock .img	{ text-align:center; }
.Beforehand .innerblock .text	{ margin:0 3em 1.5em; padding:1em 1em 0 1em; border:1px solid #CCC; background:#fff; }
.Beforehand .innerblock .text p	{ margin-bottom:1em; }
.Beforehand .innerblock .text ol.alpha 	{ margin-left: 20px;}
.Beforehand .innerblock .text ol.alpha li	{ list-style-type:upper-alpha; margin-bottom: 1em;}
.Beforehand .innerblock .text .mcp	{ border:1px solid #ddd; background:#fdfdfd; padding:0.5em 0.5em 0.5em 1.0em; font-size:90%; margin-bottom:1em;}
.Beforehand .innerblock .text .mcp ul	{ margin:0 0 0.3em 1.0em; padding:0; }
.Beforehand .innerblock .text .mcp ul li	{ margin:0; padding:0; }
@media only screen and (max-width:768px) {.Beforehand .innerblock dl	{ margin-left: 0;}.Beforehand .innerblock dl dd {margin-left:0;}.Beforehand .innerblock .text{margin-left: 0;margin-right: 0;}}

/* } ユーザー登録の流れ (.Beforehand) ===================================== */