@charset "utf-8";

/* --------------------- common --------------------- */
body {
	color: #333;
	background-color: #f7f6f0;}

section {margin-top: 9.53325rem;}
section + section {}

section > * {
	width: 90.625%;
	margin-left: auto;
	margin-right: auto;}

section h2 {
	font-size: 1.867em;
	letter-spacing: 0.1072em;}
section h3 {}


a:hover {}

.back-deco0 {
	background-image: url("../img/share/deco_bg00.png");
	background-repeat: no-repeat;
	background-size: 41.667% auto;
	background-position: -3.125% -150px;}


.mds_maru {margin-top: 1.5em;}
.mds_maru li {
	position: relative;
	padding-left: 1em;}
.mds_maru li::before {
	position: absolute;
	top: 0.4165em; left: 0;
	content: '';
	display: block;
	width: 0.667em; height: 0.667em;
	background: #96def6;
	border-radius: 50%;}


/* --------- header --------- */

/* --------- footer --------- */

@media (min-width:641px) {}
@media (max-width:640px) {
	.back-deco0 {
		background-size: 480px auto;
		background-position: -50% -170px;}
}

/* ---------------------------------------------------------

		body：page / contents：alltop

------------------------------------------------------------ */

.alltop h2 small {
	display: block;
	font-size: 0.7142em;}

.alltop h2 + p {
	line-height: 1.75;
	text-align: center;
	margin-top: 1.825em;}

.alltop h2 + p ~ div {
	display: flex; flex-wrap: wrap; justify-content: space-around;}

.icon_btn {
	display: block;
	margin: 90px 5.173% 0;
	transition: all 0.3s 0s ease-out;}

.icon_btn span {
	display: block;
	width: 8em; height: 8em;
	text-align: center;
	margin: 0 auto;}
.icon_btn img {
	width: 100%;
	transition: all 0.3s 0s ease-out;}
.icon_btn [src$="icon_login.png"] {width: 85%;}
.icon_btn [src$="icon_sinsei02.png"] {width: 75%;}
.icon_btn p {
	text-align: center;
	transition: all 0.3s 0s ease-out;}

.icon_btn:hover {opacity: 0.7;}
.icon_btn:hover img {transform: scale(1.1);}
.icon_btn:hover p {color: #e44379;}

@media (min-width:641px) {
	.alltop h2 + p ~ div {justify-content: center;}
}
@media (max-width:640px) {}


/* ---------------------------------------------------------

		body：page / contents：tokuteisho → tktish

------------------------------------------------------------ */

.tktish h2 {
	text-align: left;
	color: #114aa8;}
.tktish h2 + dl {margin-top: 4.199rem;}


@media (min-width:641px) {
	.tktish section {max-width: 800px;}
}
@media (max-width:640px) {
	.tktish section {padding-top: 0;}
}

/* ---------------------------------------------------------

		body：page　/　contents：howto

------------------------------------------------------------ */

.howto section {}

.howto h2 + h3 {margin-top: 3.703em;}
.howto h2 + dl {margin-top: 4.199rem;}

.howto h2 + ul {margin-top: 3.703em;}

.howto ul + h3,
.howto dl + h3,
.howto div + h3 {
	text-align: center;
	padding-top: 5.873em;}

.howto dd h3 {
	font-size: 1.2em;
	font-weight: bold;}
.howto dd h3 + p small {
	display: block;
	font-weight: bold;
	margin: 1.3542em 0 0 0;
	color: #e63925;}

.howto dd h3 {margin-top: 1.209em;}

.howto .link_wk {width: 100%;}
.howto .link_wk li {margin: 0.667em 1.5em;}
.howto .link_wk a {
	display: block;
	padding: 0.45em 1em;
	color: #fff;
	background: #114aa8;
	border-radius: 3em;}

.howto .link_wk a:hover {background: #4cd2ff;}


.rule_wk + dl {margin-top: 2.334em;}
.rule_wk {
	margin-top: 1.334em;
	padding: 2.317em 2rem 4em;
	background: #fff;}
.rule_wk h3 {text-align: center;}
.rule_wk h4 {
	font-size: 1.2em;
	color: #114aa8;}
.rule_wk p {}
.rule_wk img {width: 100%;}

.rule_wk h3 + h4 {margin-top: 1.125em;}
.rule_wk h4 + p {margin-top: 0.117em;}
.rule_wk p + img {margin-top: 1.084em;}
.rule_wk img + img {margin-top: 1em;}
.rule_wk img + h4 {margin-top: 2.528em;}
.rule_wk img + p {margin-top: 3.084em;}

/* --- flow --- */
.flow {
	display: flex; flex-wrap: wrap; justify-content: flex-start;
	align-items: flex-start;}
.flow > * {
	width: 100%;
	margin-top: 2.0832em;}

.flow dt {letter-spacing: 0;}

	.nmb span {
		display: block;
		font-size: 1.2em;
		font-weight: bold;
		line-height: 1;
		text-align: center;
		margin-top: 0.292em;
		color: #114aa8;}
	.nmb span b {
		display: block;
		font-size: 1.6em;
		font-weight: 700;
		margin-top: 5px;}

.flow dd {}
.flow h3 {
	font-size: 1.334em;
	color: #114aa8;}
.flow h4 {font-size: 1.2em;}
.flow h3 + p {margin-top: 0.4165em;}
.flow h4 + p {margin-top: 0.117em;}
.flow p + h4 {margin-top: 0.653em;}
.flow h3 + p + h4 {margin-top: 1.45em;}

.flow h4,
.flow h4 + p span {color: #e44379;}

.flow .mds_maru li + li {margin-top: 0.5em;}
.flow .mds_maru li span {display: block;}

@media (min-width:641px) {
	
	.howto section {max-width: 800px;}

	.howto ul + h3,
	.howto dl + h3 {padding-top: 3.8572em;}
	
	.howto .limit + dd h3 {margin-top: 0;}
	
	.flow dt {width: 8em;}
	.flow dd {width: calc(100% - 8em);}
	
	.flow .mds_maru li span {
		display: inline-block;
		margin-left: 0.667em;}
}
@media (max-width:640px) {
	.howto dd h3 {text-align: center;}
}



/* ---------------------------------------------------------

		body：●●●　/　contents：●●●

------------------------------------------------------------ */

/* --------------- ●●● --------------- */

/* --------- ●●● --------- */

@media (min-width:641px) {}
@media (max-width:640px) {}