@charset "utf-8";

#dammy {
	display: block;
	overflow: hidden;
	background: url('../images/') no-repeat;
	padding: 40px 0 0;
	width: 216px;
	height: 0!important;
}

/*
========================================================================== */
	.howto_area1 {
		margin:0 15px 40px;
		font-size:1.4rem;
	}

	.howto_area1 h2 {
		overflow: hidden;
		background: url('../images/howto/howto_mtitle.gif') no-repeat center top;
		background-size: 260px auto;
		margin:0 0 20px;
		padding: 22px 0 0;
		height: 0!important;
	}

	.moviebox {
		margin:0 0 20px;
	}

	.moviebox .movie {
		margin:0 0 20px;
		padding: 75% 0 0 0;
		position: relative;
	}

	.moviebox .movie iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.howto_area1 .caution {
		color:#b80016;
	}

	.howto_area2 {
		margin:0 0 20px;
		padding:20px 0 0;
		text-align: center;
	}

	.howto_area3 {
		padding:20px 0 0;
		text-align: center;
	}

	.howto_area2 h3,
	.howto_area3 h3 {
		margin:0 0 30px;
		color:#4b4b4b;
		font-size:3.0rem;
		font-weight: 100;
	}

	.box_block {
		margin:0 15px 50px;
	}

	.areabox {
		margin:0 0 50px;
	}

	.areabox:last-child {
		margin:0;
	}

	.areabox .image {
		margin:0 0 15px;
	}

	.areabox .image img {
		width:100%;
		height:auto;
	}

	.areabox .ex {
		text-align: left;
	}

	.areabox .ex b {
		display: block;
		font-weight: normal;
	}


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

	/*
	========================================================================== */
	.howto_area1 {
		margin:0 auto 40px;
		text-align: center;
	}

	.howto_area1 h2 {
		overflow: hidden;
		background: url('../images/howto/howto_mtitle.gif') no-repeat center top;
		background-size: 535px 44px;
		margin:0 0 80px;
		padding: 44px 0 0;
		height: 0!important;
	}

	.moviebox {
		margin:0 0 45px;
	}

	.moviebox .movie {
		margin:0 0 20px;
		padding:0;
	}

	.moviebox .movie iframe {
		position: static;
		width: 600px;
		height: 340px;
	}

	.howto_area2 {
		margin:0 0 20px;
		padding:60px 0 0;
		text-align: center;
	}

	.howto_area3 {
		padding:60px 0 0;
		text-align: center;
	}

	.howto_area2 h3,
	.howto_area3 h3 {
		margin:0 0 50px;
		color:#4b4b4b;
		font-size:3.0rem;
		font-weight: 100;
	}

	.box_block {
		margin:0;
		display: flex;
		justify-content: center;
	}

	.areabox {
		margin:0;
		width:300px;
	}

	.areabox .image {
		margin:0 35px 30px;
		width:230px;
	}

	.areabox .image img {
		width:100%;
		height:auto;
	}

	.areabox .ex {
		margin:0 0 0 30px;
		text-align: left;
	}

	.areabox .ex b {
		display: block;
		font-weight: normal;
	}
}