@charset "UTF-8";
/****************************************
	main
****************************************/
main {
	margin-top:70px;
}

section.page-back {
	font-size:0;
}

section.page-back img {
	width:100%;
}

section.page-title {
	position:relative;
	width:100%;
	padding:20px 10% 20px;
	background:#fdf5f5;
	font-weight:600;
	font-size:22px;
	text-align:center;
	letter-spacing:0.1em;
}

section.page-title small {
	display:block;
	font-size:12px;
}

@media screen and (max-width:768px){
}

@media screen and (max-width:480px){
}

/****************************************
	exchange
****************************************/
section#exchange {
	position:relative;
	width:100%;
	padding:70px 10% 70px;
	background:#fff;
}

section#exchange #howto {
	padding:0px 0 40px;
}

section#exchange #howto .flex {
	align-items:center;
}

section#exchange #howto .h-area {
	position:relative;
	margin:0px 0.5%;
	width:31.3333%;
	background:#101010;
	color:#b59658;
	font-weight:600;
	text-align:center;
	cursor:pointer;
	height:5em;
	transition:.4s;
}

section#exchange #howto .h-area:hover {
	background:#f3f3f3;
	border:1px solid #808080;
}

section#exchange #howto .h-area ::after{
	content:"";
	margin:auto;
	position:absolute;
	top:0;
	bottom:0;
	right:12px;
	width:11px;
	height:11px;
	border-top:1px solid #b59658;
	border-right:1px solid #b59658;
	transform:rotate(45deg);
	transition:.4s;
}

section#exchange #howto .h-area .h-box {
	position:absolute;
	top:50%;
	left:50%;
	width:100%;
	height:auto;
	transform:translate(-50%,-50%);
	padding:0px 25px 0px 20px;
}

section#exchange #shop,
section#exchange #mail {
	padding:40px 0 0px;
	margin:0px auto;
	max-width:780px;
}

section#exchange #shop .s-step,
section#exchange #mail .m-step {
	background:#2979fd;
	color:#fff;
	padding:15px 20px;
	font-size:20px;
}

section#exchange #shop .s-title,
section#exchange #mail .m-title{
	font-size:22px;
	padding:10px 5px;
	color:#2979fd;
}

section#exchange #shop .s-dtl,
section#exchange #mail .m-dtl {
	line-height:2.0em;
	margin-bottom:40px;
}

section#exchange #shop .s-dtl .s-attention,
section#exchange #mail .m-dtl .m-attention {
	color:#f00;
	font-size:12px;
}


section#access {
	position:relative;
	width:100%;
	padding:70px 0px 10px;
	background:#fdf5f5;
}

section#access .access-area {
	position:relative;
	width:100%;
	padding:30px 0px 0px;
}

section#access .access-area .access-main-office {
	position:relative;
	width:70%;
	margin:0px auto;
	padding:0px 5px;
	font-weight:300;
}

section#access .access-area .access-main-office iframe {
	width:100%;
	height:500px;
}

section#access .access-area .access-branch {
	position:relative;
	width:50%;
	padding:0px 5px;
}

section#access .access-area .access-branch iframe {
	width:100%;
	height:500px;
}

section#access .access-area .access-title {
	display:block;
	margin:10px 15px 0px;
	padding:3px 3px 3px 10px;
	border-left:3px solid #333;
}

section#access .access-area .access-address {
	display:block;
	margin:10px 15px 20px;
	padding:3px 6px 3px 10px;
}

@media screen and (max-width:768px){

	section#exchange #howto .h-area {
		margin:5px 0px;
		width:100%;
	}


	section#access .access-area .access-main-office {
		width:100%;
		padding:0px 5px 30px;
	}

	section#access .access-area .access-main-office iframe {
		height:300px;
	}

	section#access .access-area .access-branch {
		width:100%;
	}

	section#access .access-area .access-branch iframe {
		height:300px;
	}


}

@media screen and (max-width:480px){
}




/****************************************
	store
****************************************/
section#store {
	position:relative;
	width:100%;
	padding:70px 10% 70px;
	background:#fff;
}

section#store p {
	text-align:center;
}

section#store p span {
	display:inline-block;
}

section#store .s-img {
	padding:40px 0 40px;
}

section#store .s-img .img-area {
	width:50%;
	text-align:center;
}

section#store .s-img .img-area img {
	width:95%;
}


@media screen and (max-width:768px){

	section#store .s-img .img-area {
		width:100%;
		padding-bottom:10px;
	}

}