/*----------------------------------------------------------------------------------*/
/*                                                                                  */
/*  MYPAGE HOWTO STYLE                                                              */
/*                                                                                  */
/*----------------------------------------------------------------------------------*/
/* ================================================================================ */
/*  1.COMMON                                                                        */  
/* ================================================================================ */


.mypage--howto--bg{
	padding-top:50px;
	background:url(/common/img/bg.gif);
	}

@media screen and (max-width: 640px) {
	.mypage--howto--bg{
		padding-top:15px;
		}
}

.copyright{
	text-align:center;
	font-size:1.4rem;
	font-size:14px;
	margin-bottom:80px;
	}


/* -------------------------------------------------------------------------------- */
/*  1-1.COLLUMN                                                                     */  
/* -------------------------------------------------------------------------------- */

.howto--container{
	width:860px;
	margin:0 auto 80px auto;
	box-sizing: border-box;
	padding:80px 60px 60px 60px;
	background-color:#fff;
	position:relative;
	}

.howto--container > .close{
	position:absolute;
	top:30px;
	right:60px;
	text-align:right;
	width:150px;
	}

.howto--container > .close a{
	color:#aaaaaa;
	text-decoration:none;
	background:url(/common/img/icon_arrow_01.gif) no-repeat 0 5px;
	padding-left:10px;
	}

.howto--container h1{
	font-size:2.4rem;
	font-size:24px;
	text-align:center;
	margin-bottom:60px;
	}

@media screen and (max-width: 640px) {
	.howto--container{
		width:100%;
		padding:60px 3% 60px 3%;
		}

	.howto--container > .close{
		top:15px;
		right:15px;
		font-size:1.4rem;
		font-size:14px;
		}

	.howto--container h1{
		font-size:2rem;
		font-size:20px;
		margin-bottom:40px;
		}
	}


/* -------------------------------------------------------------------------------- */
/*  1-2.HOWTO DISCRIPTION                                                           */  
/* -------------------------------------------------------------------------------- */

.howto--discription{
	margin-bottom:80px;
	}

.howto--discription > div{
	border:solid 1px #d9dce0;
	margin-top:15px;
	padding:20px 20px 20px 130px;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position:40px 30px;
	}

.howto--discription > div:first-child{
	margin-top:0;
	}

.howto--discription > div.mypage{background-image:url(/mypage_howto/img/ico_howto_01.gif);}
.howto--discription > div.tejyun{background-image:url(/mypage_howto/img/ico_howto_02.gif);}
.howto--discription > div.login{background-image:url(/mypage_howto/img/ico_howto_03.gif);}

.howto--discription h2{
	font-size:1.8rem;
	font-size:18px;
	margin-bottom:5px;
	color:#353794;
	}

.howto--discription li{
	text-indent:-1.5em;
	padding-left:1.5em;
	}


@media screen and (max-width: 640px) {
	.howto--discription{
		margin-bottom:50px;
		}
	
	.howto--discription > div{
		padding:20px 20px 20px 20px;
		}
	
	.howto--discription > div.mypage{background-image:none;}
	.howto--discription > div.tejyun{background-image:none;}
	.howto--discription > div.login{background-image:none;}
	
	}



/* -------------------------------------------------------------------------------- */
/*  1-3.HOWTO LUST                                                                  */  
/* -------------------------------------------------------------------------------- */

.howto--list{
	border-top:solid 3px #353794; 
	margin-bottom:60px;
	}

.howto--list h3{
	text-align:center;
	font-size:2rem;
	font-size:20px;
	background-color:#353794;
	color:#fff;
	margin-bottom:30px;
	}

.howto--list dl{
	border-bottom:dotted 1px #a0a0a0;
	padding:30px 0;
	}

.howto--list dl::after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}

.howto--list dl dt{
	float:left;
	width:340px;
	}

.howto--list dl dd{
	float:right;
	width:375px;
	text-align:center;
	}

.howto--list li{
	text-indent:-1.5em;
	padding-left:1.5em;
	}


@media screen and (max-width: 640px) {
	.howto--list h3{
		margin-bottom:0;
		}
	
	.howto--list dl dt{
		float:none;
		width:80%;
		min-width:275px;
		margin-bottom:20px;
		margin-left:auto;
		margin-right:auto;
		}

	.howto--list dl dd{
		float:none;
		width:100%;
		}
	
	.howto--list dl dd img{
		max-width:275px;
		height:auto;
		}
}


/* -------------------------------------------------------------------------------- */
/*  1-4.HOWTOATTENTION                                                              */  
/* -------------------------------------------------------------------------------- */

.howto--att{
	/*border:solid 1px #d9dce0;
	padding:20px;
	box-sizing: border-box;*/
	}

.howto--att h2{
	margin-bottom:15px;
	display:inline-block;
	border-radius:20px;
	background-color:#b4281e;
	color:#fff;
	font-size:2rem;
	font-size:20px;
	padding:0 15px;
	}

.howto--att p.text--red{
	color:#b4281e;
	}

@media screen and (max-width: 640px) {
	.howto--att h2{
		font-size:1.6rem;
		font-size:16px;
		}
	}