@charset "UTF-8";

/* Sass Document */
#main_visual {
	background-image: url("/img/corp/login/login_mv.jpg");
}

#login {
	padding: 4em 0 6em;
	background: #F2F2F2;
}

.login_content {
	margin-bottom: 3em;
	padding: 5em 0 4em;
	border-radius: 5px;
	background: #fff;
}

.login_area {
	text-align: center;
}

.login_area p {
	font-size: 1.5em;
	text-align: center;
}

.login_area p a {
	color: #0000FF;
	text-decoration: underline;
}

.login_area a.sign_in {
	display: inline-block;
	margin: 2.5em auto 0;
	padding: 1.5em 3em 1em;
	background: #5ec6c5;
	background: -moz-linear-gradient(45deg, #5ec6c5 0%, #80bb00 100%);
	background: -webkit-linear-gradient(45deg, #5ec6c5 0%, #80bb00 100%);
	background: linear-gradient(45deg, #5ec6c5 0%, #80bb00 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ec6c5', endColorstr='#80bb00',GradientType=1 );
	transition: .3s;
}

.login_area a.sign_in:hover {
	opacity: .7;
}

.login_area a.sign_in span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.3rem;
}

.login_area a.sign_in span::before {
	width: 22px;
	height: 22px;
	margin-right: 1em;
	background: url("/img/corp/login/icon_login.png") no-repeat top center;
	content: '';
}

.login_area a.sign_in span::after {
	right: -2em;
	width: 1.3em;
	height: .3em;
	margin-top: -.2em;
	margin-left: 1em;
	transform: skew(45deg);
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	content: '';
}

.ie11 .login_area a.sign_in {
	padding: 1.5em 3em 1.5em;
}

.beginner_inner {
	padding: 5em 0 2em;
	border-radius: 5px;
	background: #fff;
}

.beginner_wrap {
	width: 870px;
	margin: 0 auto;
}

.beginner_heading {
	padding-bottom: 6em;
}

.beginner_heading p {
	font-size: 1.5rem;
	text-align: center;
}

.beginner_heading p a {
	color: #0000FF;
	text-decoration: underline;
}

.heading_ttl {
	position: relative;
	margin-bottom: 2.5em;
}

.heading_ttl h2.ttl {
	margin-bottom: .5em;
	font-size: 2.4rem;
	font-weight: 400;
	text-align: center;
}

.heading_ttl p {
	font-size: 1.5rem;
}

.heading_ttl::after {
	position: absolute;
	right: 0;
	bottom: -2em;
	left: 0;
	width: 63px;
	height: 1px;
	margin: 0 auto;
	background: #81bf00;
	content: '';
}

.beginner_heading ul {
	display: flex;
	justify-content: center;
	padding: 3em 0;
}

.beginner_heading ul li {
	margin: 0 2em;
}

dl.item_block {
	padding-bottom: 2em;
}

dl.item_block dt {
	display: flex;
	align-items: center;
	min-height: 57px;
	padding-left: 1.5em;
	background: #F2F2F2;
	font-size: 1.5rem;
	font-weight: 600;
	cursor: pointer;
}

dl.item_block dt::before {
	margin-right: 1.2em;
}

dl.item_block dt::after {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	margin: 0 .5em 0 auto;
	transform-origin: center center;
	background: url("/img/corp/login/icon_arrow.png") no-repeat top center;
	content: '';
	transition: .3s;
}

dl.item_block dt.active::after {
	transform: rotate(180deg);
	transform-origin: center center;
	transition: .3s;
}

dl.item_block dd {
	display: none;
}

.ie11 dl.item_block dt {
	min-height: inherit;
	padding: .8em 1em;
}

.itme_group {
	width: 820px;
	margin: 4em auto;
}

.itme_group h4.ttl {
	margin-bottom: 1em;
	padding: 0 0 1em 0;
	border-bottom: 1px solid #D5D5D5;
	font-size: 1.5rem;
	font-weight: 600;
}

.itme_group p {
	margin: .8em 0;
	font-size: 1.5rem;
}

.itme_group p a {
	color: #0000FF;
	text-decoration: underline;
}

.environment.col2 {
	display: flex;
	justify-content: center;
	margin: 3em 0 4em;
}

.environment.col2 a {
	width: 270px;
	margin: 0 1em;
}

.environment {
	margin: 3em 0 3em;
}

.environment a {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 330px;
	min-height: 50px;
	border: 1px solid #323232;
	font-size: 1.3rem;
	font-weight: 600;
	transition: .3s;
}

.environment a.type1 {
	padding-right: 2em;
}

.environment a:hover {
	border: 1px solid #81bf00;
	color: #81bf00;
}

.environment a::after {
	position: absolute;
	top: 50%;
	right: 2em;
	width: 1.3em;
	height: .3em;
	transform: skew(45deg) translateY(-50%);
	border-right: 1px solid #81bf00;
	border-bottom: 1px solid #81bf00;
	content: '';
}

.ie11 .environment a {
	height: 50px;
	min-height: inherit;
}

#pc .item_block dt::before {
	width: 30px;
	height: 25px;
	background: url("/img/corp/login/icon_pc.png") no-repeat top center;
	content: '';
}

#pc .item_block ul {
	font-size: 1.5rem;
}

#pc .item_block ul li {
	margin-bottom: .8em;
}

#cb dt::before {
	width: 34px;
	height: 23px;
	background: url("/img/corp/login/icon_cb.png") no-repeat top center;
	content: '';
}

#cb p.caution {
	color: red;
	font-size: 1.2rem;
}

#ipad dt::before {
	width: 23px;
	height: 29px;
	background: url("/img/corp/login/icon_ipad.png") no-repeat top center;
	content: '';
}

#android dt::before {
	width: 18px;
	height: 28px;
	background: url("/img/corp/login/icon_android.png") no-repeat top center;
	content: '';
}

#android p.caution {
	color: red;
	font-size: 1.2rem;
}

#support dt::before {
	width: 27px;
	height: 35px;
	background: url("/img/corp/login/icon_support.png") no-repeat top center;
	content: '';
}

#support p span.caution {
	color: red;
	font-size: 1.2rem;
}
#support .wrap{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#support ul {
	display: flex;
	justify-content: center;
	margin: 3em auto 2.5em;
}

#support ul li {
	margin: 0 1.8em;
}

#support .environment {
	margin: 1.5em 0 3em;
}

@media screen and (max-width: 767px) {
	#main_visual {
		background-image: url("/img/corp/login/sp_login_mv.jpg");
	}
	.login_area {
		width: 90%;
		margin: 0 auto;
	}
	.login_area p {
		font-size: 2.6rem;
	}
	.login_area a.sign_in span {
		padding: .5em 0;
		font-size: 2.6rem;
	}
	.login_area a.sign_in span::before {
		width: 1.5em;
		height: 1.5em;
		background-size: contain;
	}
	.login_area a.sign_in span::after {
		width: 1em;
	}
	.beginner_wrap {
		width: 90%;
	}
	.beginner_heading p {
		font-size: 3.0rem;
	}
	.heading_ttl h2.ttl {
		font-size: 3.8rem;
	}
	.heading_ttl p {
		font-size: 3.0rem;
	}
	.beginner_heading ul {
		flex-wrap: wrap;
		width: 100%;
	}
	.beginner_heading ul li {
		width: 40%;
		margin-bottom: 2em;
		text-align: center;
	}
	.beginner_heading ul li a {
		display: block;
		width: 100%;
	}
	.beginner_heading ul li a img {
		width: 100%;
		height: auto;
	}
	dl.item_block dt {
		padding: 1em 0 1em .5em;
		font-size: 3.0rem;
		line-height: 1.4;
	}
	dl.item_block dt::before {
		width: 1.5em;
		height: 1.5em;
		margin-right: .5em;
		background-size: contain;
	}
	dl.item_block dt::after {
		width: 1.5em;
		height: 1.5em;
		background-size: contain;
	}
	.itme_group {
		width: 100%;
	}
	.itme_group h4.ttl {
		font-size: 3.0rem;
	}
	.itme_group p {
		font-size: 3.0rem;
	}
	.environment.col2 {
		display: block;
	}
	.environment.col2 a {
		width: 100%;
		margin: 0 auto 1em;
	}
	.environment a {
		width: 100%;
		font-size: 2.6rem;
	}
	.environment a::after {
		right: 1em;
		width: 1em;
	}
	#pc .item_block dt::before {
		width: 2em;
		background-size: contain;
	}
	#pc .item_block ul {
		padding-left: 1em;
		font-size: 3.0rem;
		text-indent: -1em;
	}
	#pc .item_block ul li {
		line-height: 1.2;
	}
	#cb dt::before {
		width: 2.5em;
		background-size: contain;
	}
	#cb p.caution {
		font-size: 2.4rem;
		word-break: break-all;
	}
	#ipad dt::before {
		width: 2em;
		background-size: contain;
	}
	#android dt::before {
		width: 3em;
		background-size: contain;
	}
	#android p.caution {
		font-size: 2.4rem;
	}
	#support dt::before {
		width: 2.2em;
		background-size: contain;
	}
	#support p span.caution {
		font-size: 2.4rem;
	}
	#support .wrap{
		display: block;
	}
	#support ul {
		flex-wrap: wrap;
		width: 100%;
	}
	#support ul li {
		width: 40%;
		margin-bottom: 2em;
		text-align: center;
	}
	#support ul li a {
		display: block;
		width: 100%;
	}
	#support ul li a img {
		width: 100%;
		height: auto;
	}
}

/*# sourceMappingURL=sourcemaps/login.css.map */