@charset "utf-8";

/*=======================================================

	third hands CSS
	ATHR : Assiette Ltd.
	DATE : 2016/07
	FILE : common.css
    ----------------------------
	LINK COLOR  : #		()

=========================================================

/*-------------------------------------
	#UserTop
-------------------------------------*/

#UserTop article ul { font-size: 0; text-align: left; }
#UserTop article ul li { display: inline-block; margin: 40px 40px 0 0; width: 33.3%; width: calc(33.3% - 80px / 3); background: #FFF; border: 1px solid #BFC7CE; vertical-align: top; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#UserTop article ul li:nth-child(3n) { margin-right: 0; }
#UserTop article ul li:hover { box-shadow: 0 0 15px 0 rgba(55,67,76,0.1); }
#UserTop article ul li a { display: block; padding: 20px; height: 100%; color: #545454; text-decoration: none; }
#UserTop article ul li a figure { text-align: center; }
#UserTop article ul li a h2 { margin: 20px 0 15px; font-size: 15px; font-weight: bold; text-align: center; }
#UserTop article ul li a p { margin: 0 auto; max-width: 240px; color: #545454; }

#UserTop article ul li.tile a figure img { width: 55%; max-width: 90px; }

#UserTop article ul li.mini a { font-size: 0; text-align: center; }
#UserTop article ul li.mini a figure,
#UserTop article ul li.mini a h2 { display: inline-block;; text-align: left; vertical-align: middle; }
#UserTop article ul li.mini a figure { width: 45%; max-width: 76px; }
#UserTop article ul li.mini a figure img { max-width: 100%; }
#UserTop article ul li.mini a h2 { margin: 0; padding-left: 20px; width: 55%; }

#UserTop article ul li:hover #scope { animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; }

/*
@keyframes tossing {	0% { transform: rotate(0deg); } 50% { transform: rotate(15deg); } 100% { transform: rotate(0deg); }}
@-webkit-keyframes tossing { 0% { -webkit-transform: rotate(0deg);	} 50% { -webkit-transform: rotate(15deg); } 100% { -webkit-transform: rotate(0deg);	}}
*/

/*-------------------------------------
	#SearchTop
-------------------------------------*/

/* SearchMenu */
#SearchMenu,
#SearchMenu .trigger,
#SearchMenu .trigger span:before,
#SearchTop .acd,
#SearchTop .acd:before,
#SelectArea .selectDiv h2 span,
#SelectArea .selectDiv h3 span,
#SelectArea .selectDiv.area #AreaTabBtn li:first-child:before,
#SelectArea .selectDiv.area .pref,
#SelectArea .selectDiv.area div.cell:nth-child(2) .pref:before { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

#SearchTop article h2,
#SearchTop article h3 { padding: 13px 10px 11px; font-size: 17px; background: #FFF; border: 1px solid #D5DADF; white-space: nowrap; }
#SearchTop article h3 { font-size: 15px; }
#SearchTop article .acd { padding-right: 35px; background: #FBFCFD; }
#SearchTop article .acd:hover { border: 1px solid #BFC7CE; box-shadow: 0 0 10px rgba(139,158,173,0.2); }

#SearchMenu { display: table; position: relative; margin: 40px auto 40px 0; width: 100%; border-left: 1px solid #BFC7CE; z-index: 150; }
#SearchMenu .trigger:hover { box-shadow: 0 0 10px rgba(139,158,173,0.2); z-index: 300; }

#SearchMenu .trigger {
	position: relative;
	display: table-cell;
	height: 60px;
	color: #111;
	font-size: 14px;
	line-height: 1;
	background: #FFF;
	border: 1px solid #BFC7CE;
	border-left: none;
	cursor: pointer;
	vertical-align: middle;
	}
#SearchMenu .trigger span { display: block; position: relative; padding: 22px 30px 18px 12px; height: 100%; }
#SearchMenu .trigger span:before,
#SearchTop .acd:before {
	content: "";
	position: absolute;
	display: block;
	top: 50%;
	right: 12px;
	margin-top: -8px;
	width: 10px;
	height: 10px;
	background: none;
	border-left: 1px solid #A5B0BA;
	border-bottom: 1px solid #A5B0BA;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	}
#SearchMenu .trigger span:hover:before { border-color: #1DA7FA; }
#SearchTop .acd:hover:before { border-color: #929292; }

#SearchMenu .trigger.select { border-bottom: 3px solid #1DA7FA; }
#SearchMenu .trigger.select:before,
#SearchMenu .trigger.select:after {
	content: "";
	position: absolute;
	display: block;
    bottom: -18px;
    left: 50%;
    margin-left: -8px;
	border: 8px solid transparent;
	border-bottom: 9px solid #BFC7CE;
	z-index: 200;
	}
#SearchMenu .trigger.select:after { bottom: -20px; border-bottom-color: #FFF; }
#SearchMenu .trigger.select span:before,
#SearchTop .acd.open:before { margin-top: -3px; -webkit-transform: rotate(-225deg); -ms-transform: rotate(-225deg); transform: rotate(-225deg); }
#SearchMenu .trigger.select span:before { border-color: #1DA7FA; }

#SearchMenu .searchBtn { margin: 0; padding-left: 10px; }
#SearchMenu .searchBtn button { display: block; width: 100%; min-width: 180px; height: 60px; }

/* SelectArea */
#SelectArea { position: relative; }
#SelectArea .selectDiv {
	display: none;
	position: absolute;
	top: -25px;
	left: 0;
	padding: 30px;
	width: 100%;
	height: suto;
	max-height: calc(100vh - 220px);
	background: #FFF;
	border: 1px solid #BFC7CE;
	box-shadow: 0 0 10px rgba(139,158,173,0.2);
	overflow: auto;
	z-index: 100;
	}
#SelectArea .selectDiv input[type=checkbox] + label:before { top: 1px; margin: 0; }
#SelectArea .selectDiv input[type=checkbox]:checked + label:after { top: 4px; margin: 0; }

/* site */
#SelectArea .selectDiv.site { padding-bottom: 10px; }
#SelectArea .selectDiv.site input + label { margin-left: 52px; padding: 0; }
#SelectArea .selectDiv.site input + label:before { left: -52px; }
#SelectArea .selectDiv.site input:checked + label:after { left: -49px; }

#SelectArea .selectDiv.site input.exclude + label { position: absolute; display: block; top: 1px; left: 26px; margin: 0; width: 16px; height: 16px; }
#SelectArea .selectDiv.site input.exclude + label:before { left: 0; }
#SelectArea .selectDiv.site input.exclude + label:after { top: 4px; left: 3px; }

#SelectArea .selectDiv.site h2 input + label,
#SelectArea .selectDiv.site h3 input + label { margin-left: 72px; }
#SelectArea .selectDiv.site h3 input + label:before { top: 0; left: -72px; }
#SelectArea .selectDiv.site h3 input:checked + label:after { top: 3px; left: -69px; }
#SelectArea .selectDiv.site h3 input.exclude + label { top: 13px; left: 46px; }
#SelectArea .selectDiv.site h3 input.exclude:checked + label:after { left: 3px; }

#SelectArea .selectDiv.site h2 span,
#SelectArea .selectDiv.site h3 span { position: absolute; display: block; top: -15px; left: 1px; padding: 5px 6px 4px; color: #FFF; font-size: 11px; line-height: 1; text-align: center; background: #1DA7FA; border-radius: 3px; opacity: 0; }
#SelectArea .selectDiv.site h3 span.exclude { left: 37px; background: #EF8F00; }
#SelectArea .selectDiv.site h2 span:before,
#SelectArea .selectDiv.site h3 span:before { content: ""; position: absolute; display: block; top: 18px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top: 7px solid #1DA7FA; }
#SelectArea .selectDiv.site h3 span.exclude:before  { border-top-color: #EF8F00; }
#SelectArea .selectDiv.site h2:hover span,
#SelectArea .selectDiv.site h3:hover span { opacity: 1; }

#SelectArea .selectDiv.site h2 label,
#SelectArea .selectDiv.site h3 label { max-width: calc(100% - 77px); line-height: 1.2; cursor: pointer; white-space: normal; }
#SelectArea .selectDiv.site h2 input + label { margin-left: 36px; }
#SelectArea .selectDiv.site h2 input + label:before { left: -36px; }
#SelectArea .selectDiv.site h2 input:checked + label:after { left: -33px; }

#SelectArea .selectDiv.site > div { display: table; width: 100%; }
#SelectArea .selectDiv.site div section { display: table-cell; padding: 0 15px 0 0; width: 50%; }
#SelectArea .selectDiv.site div section + section { padding: 0 0 0 15px; }

#SelectArea .selectDiv.site ul { margin: 0 0 10px; padding: 0 0 0 10px; font-size: 0; }
#SelectArea .selectDiv.site ul li { display: inline-block; margin: 0 0 10px; padding-right: 10px; width: 50%; font-size: 14px; vertical-align: top; }

/* area */
#SelectArea .selectDiv.area { padding-bottom: 0; }
#SelectArea .selectDiv.area #AreaTabBtn { display: table; margin: 0 0 30px; width: 100%; border: 1px solid #D5DADF; }
#SelectArea .selectDiv.area #AreaTabBtn li { display: table-cell; width: 50%; }
#SelectArea .selectDiv.area #AreaTabBtn li a { display: block; position: relative; padding: 12px 10px 10px; height: 48px; color: #111 !important; font-size: 18px; text-align: center; text-decoration: none; cursor: pointer; }
#SelectArea .selectDiv.area #AreaTabBtn li.active a { background: #D5DADF; }
#SelectArea .selectDiv.area #AreaTabBtn li:first-child a:before { content: ""; position: absolute; display: block; top: 0; right: -46px; border: 24px solid transparent; border-left: 23px solid #FFF; z-index: 10; }
#SelectArea .selectDiv.area #AreaTabBtn li.active:first-child a:before { border-left-color: #D5DADF; }
#SelectArea .selectDiv.area #AreaTabBtn li:not(.active) a:hover { background: #EAEFF3; }
#SelectArea .selectDiv.area #AreaTabBtn li:not(.active) a:hover:before { border-left-color: #EAEFF3; }

#SelectArea .selectDiv.area #tab01 { display: table; margin: 0 auto; width: 100%; max-width: 1200px; }
#SelectArea .selectDiv.area #tab01 div.cell { display: table-cell; padding-bottom: 10px; width: 33.3%; vertical-align: top; }
#SelectArea .selectDiv.area #tab01 div.cell:nth-child(2) { padding: 0 30px 30px; }

#SelectArea .selectDiv.area .pref { position: relative; margin-bottom: 20px; border: 2px solid #D5DADF; border-bottom-width: 4px; }
#SelectArea .selectDiv.area .pref:before,
#SelectArea .selectDiv.area .pref:after { content: ""; position: absolute; display: block; top: 50%; right: -17px; margin-top: -6px; border: 7px solid transparent; border-left: 8px solid #D5DADF; z-index: 10; }
#SelectArea .selectDiv.area .pref:after { right: -14px; border-left-color: #FFF; }
#SelectArea .selectDiv.area .pref { position: relative; margin-bottom: 20px; border: 2px solid #D5DADF; border-bottom-width: 4px; }
#SelectArea .selectDiv.area div.cell:nth-child(2) .pref { margin: 0 auto 30px; max-width: 260px; }
#SelectArea .selectDiv.area div.cell:nth-child(2) .pref:before,
#SelectArea .selectDiv.area div.cell:nth-child(2) .pref:after { top: auto; bottom: -19px; right: 50%; margin-right: -7px; border: 7px solid transparent; border-top: 8px solid #D5DADF; }
#SelectArea .selectDiv.area div.cell:nth-child(2) .pref:after { bottom: -14px; border-top-color: #FFF; }
#SelectArea .selectDiv.area div.cell:last-child .pref:before,
#SelectArea .selectDiv.area div.cell:last-child .pref:after { right: auto; left: -17px; border: 7px solid transparent; border-right: 8px solid #D5DADF; }
#SelectArea .selectDiv.area div.cell:last-child .pref:after { left: -14px; border-right-color: #FFF; }
#SelectArea .selectDiv.area div.cell:nth-child(2) .pref:before { border-top-color: #D5DADF; }
#SelectArea .selectDiv.area div.cell:last-child .pref:before { border-right-color: #D5DADF; }
#SelectArea .selectDiv.area .pref:hover { border-color: #BFC7CE; box-shadow: 0 0 10px rgba(139,158,173,0.2); }
#SelectArea .selectDiv.area .pref:hover:before { border-left-color: #BFC7CE; }
#SelectArea .selectDiv.area div.cell:nth-child(2) .pref:hover:before { border-top-color: #BFC7CE; }
#SelectArea .selectDiv.area div.cell:last-child .pref:hover:before { border-right-color: #BFC7CE; }

#SelectArea .selectDiv.area .pref input[type=checkbox] + label { display: table; margin: 0; padding: 10px 0 10px 35px; width: 100%; }
#SelectArea .selectDiv.area .pref input[type=checkbox] + label:before { top: 50%; left: 10px; margin-top: -8px; }
#SelectArea .selectDiv.area .pref input[type=checkbox]:checked + label:after { top: 50%; left: 13px; margin-top: -5px; }
#SelectArea .selectDiv.area .pref label strong { display: table-cell; width: 50px; font-size: 17px; vertical-align: middle; }
#SelectArea .selectDiv.area .pref.hokkaido label strong,
#SelectArea .selectDiv.area .pref.koushin label strong { width: 70px; }
#SelectArea .selectDiv.area .pref.kyushu label strong { width: 60px; }
#SelectArea .selectDiv.area .pref label span { display: table-cell; vertical-align: middle; }
#SelectArea .selectDiv.area .pref label span i { display: inline-block; margin-right: 8px; padding-right: 8px; line-height: 1; border-right: 1px solid #D5DADF; }
#SelectArea .selectDiv.area .pref label span i:last-child { padding: 0; border: none; }

#SelectArea .selectDiv.area #MapImage { position: relative; width: 420px; height: 340px; background: url("/images/search/select-map.png") 0px 0px no-repeat; }
#SelectArea .selectDiv.area #MapImage.zenkoku  { background-position: -430px 0px; }
#SelectArea .selectDiv.area #MapImage.hokkaido { background-position: -860px 0px; }
#SelectArea .selectDiv.area #MapImage.tohoku   { background-position: -1290px 0px; }
#SelectArea .selectDiv.area #MapImage.koushin  { background-position: -1720px 0px; }
#SelectArea .selectDiv.area #MapImage.kanto    { background-position: -2150px 0px; }
#SelectArea .selectDiv.area #MapImage.tokai    { background-position: 0px -350px; }
#SelectArea .selectDiv.area #MapImage.kansai   { background-position: -430px -350px; }
#SelectArea .selectDiv.area #MapImage.chugoku  { background-position: -860px -350px; }
#SelectArea .selectDiv.area #MapImage.shikoku  { background-position: -1290px -350px; }
#SelectArea .selectDiv.area #MapImage.kyushu   { background-position: -1720px -350px; }
#SelectArea .selectDiv.area #MapImage img { position: absolute; top: 0; left: 0; }

#SelectArea .selectDiv.area #tab02 div.cell { display: table-cell; padding: 0 15px 0 10px; width: 50%; vertical-align: top; }
#SelectArea .selectDiv.area #tab02 div.cell:nth-child(2) { padding: 0 10px 0 15px; }

#SelectArea .selectDiv.area #tab02 h2,
#SelectArea .selectDiv.area #tab02 h3 { margin-bottom: 30px; }
#SelectArea .selectDiv.area #tab02 h2 input + label:before,
#SelectArea .selectDiv.area #tab02 h2 input:checked + label:after { margin-top: -1px; }
#SelectArea .selectDiv.area #tab02 h3 input + label:before,
#SelectArea .selectDiv.area #tab02 h3 input:checked + label:after { margin-top: -2px; }
#SelectArea .selectDiv.area #tab02 h3 + div.acd-content { margin-top: -10px; }
#SelectArea .selectDiv.area #tab02 h4 { margin: 0 0 20px; padding: 0 0 12px; font-size: 16px; border-bottom: 1px solid #D5DADF; }
#SelectArea .selectDiv.area #tab02 ul { margin: 0; padding: 0 0 15px; font-size: 0; text-align: left; }
#SelectArea .selectDiv.area #tab02 ul li { display: inline-block; margin: 0 0 15px; padding-right: 10px; width: 33.3%; font-size: 14px; vertical-align: top; }
#SelectArea .selectDiv.area #tab02 .acd-content > ul { padding-left: 10px; }
#SelectArea .selectDiv.area #tab02 .acd-content > ul li { width: 16.6%; }

/* industry */
#SelectArea .selectDiv.industry #CheckAll li { margin: 0; }
#SelectArea .selectDiv.industry #CheckAll li + li { margin: 15px 0; padding: 15px 0 0; border-top: 1px solid #D5DADF; }
#SelectArea .selectDiv.industry input[type=radio] + label:before { top: 3px; margin: 0; }
#SelectArea .selectDiv.industry input[type=radio]:checked + label:after { top: 7px; margin: 0; }

#SelectArea .selectDiv.industry .caution { margin: 10px 0 20px; color: #F33; }
#SelectArea .selectDiv.industry  h4 { margin: 0 0 10px; font-size: 14px; font-weight: bold; }

#SelectArea .selectDiv.industry div.table { display: table; margin: 0 0 20px; width: 100%; }
#SelectArea .selectDiv.industry div.cell { display: table-cell; padding: 0 15px 0 0; width: 33.3%; vertical-align: top; }
#SelectArea .selectDiv.industry div.cell:nth-child(2) { padding: 0 15px; }
#SelectArea .selectDiv.industry div.cell:last-child { padding: 0 0 0 15px; }
#SelectArea .selectDiv.industry div.cell ul { padding: 5px 0; height: 300px; border: 1px solid #D5DADF; overflow: auto; }
#SelectArea .selectDiv.industry div.cell ul li { margin: 0; padding: 5px 10px; font-size: 14px; }
#SelectArea .selectDiv.industry div.cell ul li:hover { background: #a7deff; }
#SelectArea .selectDiv.industry div.cell ul li.active { color: #FFF !important; background: #1DA7FA; }
#SelectArea .selectDiv.industry div.cell ul li.active input[type=checkbox] + label { color: #FFF !important; }
#SelectArea .selectDiv.industry div.cell ul li.active input[type=checkbox]:checked + label::before { box-shadow: 0 0 0 1px #FFF; }
#SelectArea .selectDiv.industry div.cell ul.likeSelect li { cursor: pointer; }

#SelectArea .selectDiv.industry div#Selected { position: relative; padding: 20px; background: #FBFCFD; border: 1px solid #D5DADF; }
#SelectArea .selectDiv.industry div#Selected h4 { margin: 0 0 15px; padding: 0 0 15px; font-size: 18px; font-weight: normal; border-bottom: 1px dashed #BFC7CE; }
#SelectArea .selectDiv.industry div#Selected h5 { margin: 0 0 5px; font-size: 16px; }
#SelectArea .selectDiv.industry div#Selected .checkAll { position: absolute; top: 20px; right: 20px; line-height: 20px; }
#SelectArea .selectDiv.industry div#Selected ul { margin: 0 0 15px; padding: 0 0 15px; font-size: 0; text-align: left; border-bottom: 1px dashed #BFC7CE; }
#SelectArea .selectDiv.industry div#Selected ul:last-of-type { margin: 0; padding: 0; border: none; }
#SelectArea .selectDiv.industry div#Selected li { display: inline-block; margin: 0 15px 0 0; font-size: 14px; }

#SelectArea .selectDiv.others { padding-bottom: 0; font-size: 0; text-align: left; }
#SelectArea .selectDiv.others section { margin: 0 0 30px; font-size: 14px; }
#SelectArea .selectDiv.others section.half { display: inline-block; padding-right: 15px; width: 50%; }
#SelectArea .selectDiv.others section.half.odd { padding: 0 0 0 15px; }
#SelectArea .selectDiv.others h3 { margin: 0 0 15px; padding: 0 0 8px; font-weight: bold; border: none; border-bottom: 1px solid #D5DADF; }
#SelectArea .selectDiv.others h3 input[type=checkbox] + label:before { top: -1px; }
#SelectArea .selectDiv.others h3 input[type=checkbox] + label:after { top: 2px; }
#SelectArea .selectDiv.others p { margin: 0 0 15px; }
#SelectArea .selectDiv.others strong { display: inline-block; margin-right: 10px; min-width: 60px; font-weight: normal; }
#SelectArea .selectDiv.others input[type=text] { margin-left: 10px; width: calc(100% - 320px); max-width: 400px; }
#SelectArea .selectDiv.others ul { margin: 0; padding: 0; font-size: 0; text-align: left; }
#SelectArea .selectDiv.others ul li { display: inline-block; margin: 0 0 15px; padding-right: 10px; width: 20%; font-size: 14px; vertical-align: top; }
#SelectArea .selectDiv.others ul li:nth-child(5n) { padding-right: 0; }
#SelectArea .selectDiv.others input[type=number] { margin: 0 10px; max-width: 120px; }
#SelectArea .selectDiv.others input[type=number]:first-child { margin-left: 0; }
#SelectArea .selectDiv.others input[type=radio] + label { margin-right: 15px; }
#SelectArea .selectDiv.others section:last-of-type strong { margin-right: 15px; min-width: 100px; }

/* Result */
#SearchTop #Result h2 { display: table-cell; padding: 30px; font-size: 16px; font-weight: bold; border: none; vertical-align: middle; }
#SearchTop #Result h2 strong { color: #EE8E00; font-size: 30px; }
#SearchTop #Result h2 + p { display: table-cell; padding: 0 30px 0 0; vertical-align: middle; }
#SearchTop #Result h2 + p span { display: inline-block; margin-right: 15px; }
#SearchTop #Result h2 + p span strong { margin: 0 5px; color: #111; }

#SearchTop #Result h3.acd { margin: 0; padding: 18px 30px 16px; font-size: 16px; font-weight: bold; border-left: none !important; border-right: none !important; cursor: pointer; }
#SearchTop #Result h3.acd.open { border-bottom-style: dashed; }

#Result .acd-content { padding: 15px 30px 5px; text-align: left; background: #FBFCFD; border-bottom: 1px solid #D5DADF; }
#Result .acd-content h4 { display: inline-block; margin: 0 10px 10px 0; padding: 5px 8px 3px; width: 60px; font-size: 14px; line-height: 1; text-align: center; border: 1px solid #111; vertical-align: top; }
#Result .acd-content ul { display: inline-block; margin: 0 0 10px; width: calc(100% - 85px); font-size: 14px; vertical-align: top; }
#Result .acd-content ul li { margin: 3px 0 5px; }
#Result .acd-content ul li strong { margin-right: 5px; color: #111; }

#Result .center { margin: 30px 0; }
#Result .center button { margin: 0 8px; min-width: 240px; }

#SampleData table th,
#SampleData table td { text-align: left; }
#SampleData table th { color: #111; font-weight: bold; }
#SampleData table tr:nth-child(2n-1) th,
#SampleData table tr:nth-child(2n-1) td { border-bottom-style: dashed; }
#SampleData table tr:last-child th,
#SampleData table tr:last-child td { border-bottom: none; }


/*-------------------------------------
	#Download
-------------------------------------*/

/* #DownloadTop */
#DownloadTop article h2 { margin: 30px 0; padding: 0 30px; }

#DownloadTop #AnotherList { padding: 30px 30px 10px; }
#DownloadTop #AnotherList p { display: table; margin: 0 0 20px; }
#DownloadTop #AnotherList p a { display: table-cell; width: 230px; font-size: 15px; vertical-align: middle; }
#DownloadTop #AnotherList p span { display: table-cell; padding-left: 20px; vertical-align: middle; }


/* #Upload */
#Upload section h2,
#UploadSet h2 { margin: 30px; text-align: left; }

#Upload #DragDrop { margin: 30px; padding: 50px; background: #FBFCFD; border: 1px dashed #D5DADF; }
#Upload #DragDrop h3 { color: #545454; font-size: 24px; }
#Upload #DragDrop h4 { margin: 30px auto 15px; padding-top: 30px; width: 50%; color: #545454; font-size: 16px; font-weight: bold; border-top: 1px dashed #D5DADF; }

#Upload section > p:last-child { margin: 20px 0 30px; }

/* UploadSet */
#UploadSet article p { margin: 30px 0; }
#UploadSet article p.right { margin: 30px; padding: 30px 0 0; border-top: 1px dashed #BFC7CE; }
#UploadSet article p button { min-width: 240px; font-size: 20px; }

#UploadSet article table th,
#UploadSet article table td { text-align: left; }

#UploadSet p.selectClm { display: inline-block; margin: 30px 20px 0; }
#UploadSet p.selectClm strong { margin-right: 10px; }
#UploadSet p.selectClm select { min-width: 120px; }


/*-------------------------------------
	#Login
-------------------------------------*/

.logins #Main,
.logins footer { padding: 0; min-width: 960px; }

.logins article h1 { margin: 0; padding: 50px 0 0; text-align: center; }

.logins article div { display: inline-block; margin: 40px auto 0; padding: 40px 40px 20px; width: 500px; background: #FFF; border: 1px solid #BFC7CE; }
.logins article div h2 { margin-bottom: 30px; text-align: center; }
.logins article div p { margin-bottom: 20px; }
.logins article div .dashed { padding-top: 20px; font-size: 12px; text-align: center; border-top: 1px dashed #BFC7CE; }


/*-------------------------------------
	/regist/
-------------------------------------*/

#Process { display: table; margin: 40px 0; padding: 0; width: 100%; background: #FFF; border: 1px solid #BFC7CE; list-style: none; }
#Process li { display: table-cell; position: relative; padding: 17px 10px 15px 25px; width: 33.3%; height: 80px; font-size: 14px; text-align: center; }
#Process li.current { background: #D5DADF; }
#Process li:not(:last-child):before,
#Process li:not(:last-child):after { content: ""; position: absolute; display: block; top: -1px; right: -63px; border: 41px solid transparent; border-left: 23px solid #BFC7CE; z-index: 10; }
#Process li:not(:last-child):after { top: 0; right: -61px; border: 40px solid transparent; border-left: 22px solid #FFF; }
#Process li.current:after { border-left-color: #D5DADF; }
#Process li strong { display: block; margin: 0 0 10px; color: #111; font-size: 21px; font-weight: normal; }

#Plan:not(.logins) article,
#Payment:not(.logins) article,
#Personal:not(.logins) article { margin: 0 auto; max-width: 1100px; }

.logins #Main { margin: 0 auto; max-width: 1100px; }
.logins article section .back { margin: -50px 0 0; text-align: left !important; }
.logins article section .back .btn { padding: 17px 30px 15px; min-width: 200px; font-size: 18px; }

/* Plan */
#Plan article h2 { margin: 30px 30px 20px; }
#Plan article section p { margin: 20px 30px; }

#Plan #Plans { margin: 50px auto 0; background: #FFF; border: 1px solid #BFC7CE; border-bottom: none; }
#Plan #Plans th,
#Plan #Plans td { padding: 18px 15px 16px; line-height: 1.6; }
#Plan #Plans tr:nth-child(2n-1) th,
#Plan #Plans tr:nth-child(2n-1) td { background:  none; }
#Plan #Plans tr:nth-child(2n) th,
#Plan #Plans tr:nth-child(2n) td { background: #FBFCFD; }
#Plan #Plans td span.note { display: block; color: #a2a2a2; font-size: 14px; font-weight: normal; }
#Plan #Plans td strong { display: block; color: #111; font-size: 15px; }
#Plan #Plans td strong span { color: #545454; font-size: 14px; font-weight: normal; }
#Plan #Plans td h2 { margin: 0 0 10px; font-size: 14px; font-weight: bold; text-align: center; }
#Plan #Plans td .btn { min-width: 140px; }
#Plan #Plans td .btn.dark,
#Plan #Plans td .btn.light { pointer-events: none; }

#Plan #Plans td .additional { margin: 8px 0 0; white-space: nowrap; }
#Plan #Plans td .additional button { margin: 0 0 0 3px; min-width: 0; padding: 9px 20px 7px; font-size: 14px; }

#Plan #Plans .title {
	font-size: 30px;
	font-family:Futura, STHeitiK-Medium,"Avenir-Medium","Avenir", Century Gothic, Arial, Helvetica, "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
	font-weight:100;
	letter-spacing: 1px;
	line-height: 1;
	border-right: 1px solid #BFC7CE;
	}
#Plan #Plans .title span { display: block; margin: 10px 0 0; font-size: 14px; font-weight: normal; }

#Plan #Plans .price { color: #111; font-size: 18px; font-weight: bold; border-right: 1px solid #BFC7CE; }
#Plan #Plans .price p { font-weight: bold; text-align: center; }
#Plan #Plans .price strong { display: block; color: #00DB62; font-size: 15px; }
#Plan #Plans .price span { font-size: 14px; font-weight: normal; }
#Plan #Plans .price span.note { color: #00DB62; }

#Plan #Plans .pre th,
#Plan #Plans .pre td { border-bottom: none; }

#Plan #Plans .pro th,
#Plan #Plans .pro td { border-top: 3px solid #1DA7FA; border-bottom: 3px solid #1DA7FA; }
#Plan #Plans .pro .title { position: relative; left: -15px; padding: 18px 0 16px 15px; width: calc(100% + 20px); color: #FFF; text-shadow: 0 0 12px #FFF; background: #1DA7FA; border-right: none; box-shadow: 15px 0 0 #1DA7FA; }
#Plan #Plans .pro .price { font-size: 20px; }
#Plan #Plans .pro .price strong { color: #1DA7FA; }
#Plan #Plans .pro td:last-child { box-shadow: 3px 0 0 #1DA7FA; }

#Plan #Plans .disabled th,
#Plan #Plans .disabled td,
#Plan #Plans .disabled td * { color: #a2a2a2; }
#Plan #Plans .disabled td .btn { opacity: .4; pointer-events: none; }

/* Payment */
#Payment section.center { padding: 30px 30px 0; }
#Payment section.center .right { margin: 30px 0; }

#Payment form section { padding: 40px; text-align: center; }
#Payment form section * { text-align: center; }
#Payment form section h2 { margin: 0 0 30px; }
#Payment form  section h2 ~ h2 { margin-top: 20px; padding-top: 20px; border-top: 1px dashed #BFC7CE; }
#Payment form  section h2 + p { margin: 0; font-size: 0; }

#Payment input[type=radio] + label::before,
#Payment input[type=radio] + label::after { display: none; }
#Payment input[type=radio] + label { margin: 0 25px 0 0; padding: 20px; max-width: 40%; font-size: 14px; background: #FBFCFD; border: 1px solid #D5DADF; vertical-align: top; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#Payment input[type=radio] + label:last-child { margin-right: 0; }
#Payment input[type=radio]:checked + label { font-weight: normal; background: #FFF; border: 1px solid #BFC7CE; box-shadow: 0 0 5px 0 rgba(55,67,76,0.1); }
#Payment input[type=radio]:checked + label strong:after {
	content: "";
	position: absolute;
	display: block;
	top: 0;
    left: 50%;
    margin-left: -11px;
    width: 20px;
    height: 12px;
    border-left: 4px solid #0193FF;
    border-bottom: 4px solid #0193FF;
    -webkit-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    transform: rotate(-40deg);
	}
#Payment input[type=radio]:checked + label span { color: #0193FF; }
#Payment input[type=radio] + label:hover { box-shadow: 0 0 15px 0 rgba(55,67,76,0.1); }

#Payment label strong,
#Payment label span { display: block; margin: 0 0 15px;  }
#Payment label strong { position: relative; margin: 10px 0; padding-top: 25px; font-size: 16px; }
#Payment label strong + span { margin: -10px 0 15px; }
#Payment label span { font-size: 12px; }

#Payment article section { margin-top: 40px; background: #FFF; border: 1px solid #BFC7CE; }
#Payment article section .center,
#Payment article section .right { margin: 40px 0 0; }

#Payment #Type input[type=radio] + label { max-width: 31.5%; max-width: calc((100% - 50px)/3); }

/* Personal */
#Personal article section { margin-top: 40px; padding: 40px 40px 10px; background: #FFF; border: 1px solid #BFC7CE; }

#Personal article section h2 { margin-bottom: 30px; }
#Personal article section p { margin: 0 0 30px; }
#Personal article section p.errorMsg { margin: -25px 0 30px 110px !important; }
#Personal article section strong { display: inline-block; margin: 0 10px 0 0; min-width: 100px; font-weight: normal; }
#Personal article section span { display: inline-block; margin: 0 10px 0 0; padding: 6px 9px; color: #FFF; font-size: 12px; line-height: 1; background: #0193FF; border-radius: 3px; vertical-align: middle; }
#Personal article section select { margin: 0 10px 0 -5px; min-width: 120px; }
#Personal article section p.back { margin: -50px 0 0 !important; }

#Personal article .errorTop { display: block; position: relative; margin: 40px 0; padding: 32px 30px 28px 80px; width: 100%; color: #F33; font-size: 18px; text-align: left; background: #fffbfb; border: 1px solid #FAA; }
#Personal article .errorTop:before {
	content: "!";
	position: absolute;
	display: block;
	top: 50%;
	left: 20px;
	margin-top: -20px;
	width: 40px;
	height: 40px;
	color: #FFF;
	font-size: 30px;
	font-weight: bold;
	line-height: 44px;
	text-align: center;
	text-indent: 1px;
	background: #FCC;
	border-radius: 40px;
	}

#Personal #Agreement { padding: 40px 0; }
#Personal #Agreement h2 { padding: 0 40px; }
#Personal #Agreement div { margin: 0 0 30px; padding: 40px; width: 100%; height: 300px; background: #FBFCFD; border: 1px solid #BFC7CE; border-left: none; border-right: none; overflow: auto; }
#Personal #Agreement div ol { padding: 0; list-style: none; }
#Personal #Agreement div ~ p { margin: 0; padding: 0 40px; }
#Personal #Agreement div h3 { margin: 0 0 10px; font-size: 22px; }

#Personal.conf article section { padding: 40px 0 20px; }
#Personal.conf article section h2 { padding: 0 40px; }
#Personal.conf article section table { border-top: 1px solid #BFC7CE; }
#Personal.conf article section table th,
#Personal.conf article section table td { text-align: left; }
#Personal.conf article section table th { padding-left: 40px; width: 200px; font-weight: bold; }
#Personal.conf article section p.right { margin: 30px 40px 0; }
#Personal.conf article section p.back { margin: -50px 40px 20px !important; }

/* laterPayment */
#Personal article section strong ~ strong { margin: 0 10px 0 52px; min-width: 0; font-weight: bold; }
#Personal article section strong ~ span ~ strong { margin: 0; }
#Personal article section label { margin: 0 10px 0 0; }
#Personal article section label:first-of-type { margin-left: 52px; }
#Personal article section span ~ label:first-of-type { margin-left: 0; }
#Personal article section select:first-of-type { margin: 0 10px 0 47px; }
#Personal article section span ~ select:first-of-type { margin: 0 10px 0 -5px; }
#Personal article section input[type="tel"],
#Personal article section input[type="text"],
#Personal article section textarea { margin: 0 0 0 52px; }
#Personal article section span ~ input[type="tel"],
#Personal article section span ~ input[type="text"],
#Personal article section span ~ textarea { margin: 0; }
#Personal article section br + input[type="text"] { margin: 10px 0 0 162px; }
#Personal article section .short input[type="text"],
#Personal article section .short input[type="tel"] { max-width: 240px; }
#Personal article section textarea { max-width: 600px; }

#Personal.laterPayment #Agreement h2 { margin: 0 0 15px; }
#Personal.laterPayment #Agreement p { padding: 0 40px; }
#Personal.laterPayment #Agreement ul { padding: 0 40px; }
#Personal.laterPayment #Agreement ul li { margin: 0 0 10px 20px; font-size: 14px; list-style-type: disc; list-style-position: outside; }
#Personal.laterPayment #Agreement .note { margin: 15px 0 30px; color: #999; }
#Personal.laterPayment #Agreement .right { margin: 0; }
#Personal.laterPayment #Agreement .right .reset { margin: 0 30px 0 0; cursor: pointer; }
#Personal.laterPayment #Agreement .center { margin: 0; }

/* User */
#User article h2 { margin: 30px; text-align: left; }

#User article table th,
#User article table td { text-align: left; }
#User article table tbody th { font-weight: bold; }


/*-------------------------------------
	/news/
-------------------------------------*/

#NewsList,
#NewsDetail { margin: 0 auto; max-width: 1100px; }
#NewsList h2 { margin: 30px 30px 20px; }

#NewsList li { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; padding: 15px 30px; font-size: 15px; border-top: 1px solid #BFC7CE; }
#NewsList li:nth-child(2n-1) { background: #FBFCFD; }
#NewsList li span { padding: 0 30px 0 0; min-width: 120px; }
#NewsList li a { text-decoration: none; }
#NewsList li a:hover { text-decoration: underline; }

#NewsDetail h2 { margin: 30px 0; padding: 0 30px 20px; font-size: 24px; border-bottom: 1px solid #BFC7CE; }

#NewsDetail p { margin: 15px 0; padding: 0 30px; font-size: 15px; line-height: 1.8; }
#NewsDetail p.date { text-align: right; }
#NewsDetail p.right { margin: 30px 0; padding: 20px 30px 0; border-top: 1px dashed #BFC7CE; }


/*-------------------------------------
	/faq/
-------------------------------------*/

#FaqList,
#FaqDetail { margin: 0 auto; max-width: 1100px; }
#FaqList h2 { margin: 30px 30px 20px; padding: 0 0 20px; text-align: center; border-bottom: 1px dashed #BFC7CE; }
#FaqList h3 { margin: 25px 30px 20px; font-size: 16px; font-weight: bold; }

#FaqList ul:not(:last-of-type) { border-bottom: 1px solid #BFC7CE; }
#FaqList li { margin: 0; padding: 15px 30px; font-size: 15px; border-top: 1px solid #BFC7CE; }
#FaqList li:nth-child(2n-1) { background: #FBFCFD; }
#FaqList li a { display: inline-block; position: relative; padding-left: 30px; text-decoration: none; }
#FaqList li a:before,
#FaqDetail h2:before,
#FaqDetail p:not(.right):before { content: "Q."; position: absolute; display: block; top: 0; left: 0; color: #8699A9; font-size: 20px; font-weight: bold; opacity: .6; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
#FaqList li a:hover { text-decoration: underline; }
#FaqList li a:hover:before { opacity: 1; }

#FaqDetail h2 { margin: 30px 0; padding: 0 30px 20px 60px; font-size: 22px; border-bottom: 1px solid #BFC7CE; }
#FaqDetail h2:before { top: -3px; left: 26px; font-size: 24px; line-height: 1.2; opacity: .8; }

#FaqDetail p { position: relative; margin: 15px 0; padding: 0 30px 0 60px; font-size: 15px; line-height: 1.8; }
#FaqDetail p:not(.right):before { content: "A."; top: -4px; left: 30px; }
#FaqDetail p.right { margin: 30px 0; padding: 20px 30px 0; border-top: 1px dashed #BFC7CE; }


/*-------------------------------------
	#Invoice
-------------------------------------*/

#Invoice article h2 { margin: 30px 0; padding: 0 30px; }

#Invoice table th,
#Invoice table td { white-space: nowrap; }
#Invoice table td:nth-child(2) { white-space: normal; }