@charset 'UTF-8';

        
/* common - base
===================================*/
body {
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 20px;
	line-height: 2rem;
}
p,a {
	font-size: inherit;
	line-height: inherit;
}
.mainContainer a:not(:hover) { color: inherit; }

/* common - layout
===================================*/
.mainContainer {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 10px;
	box-shadow: 0 5px 10px rgba(0,0,0,.3);
}
        
/* common - title
===================================*/
h2.title {
	font-size: 16px;
	font-size: 1.6rem;
	font-family: "Rounded Mplus 1c";
	letter-spacing: 2px;
	margin: 15px 0;
	padding: 5px;
	color: #da2648;
	text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
	padding: 5px;
	background: -moz-linear-gradient(-45deg, #fdd3da 45%,#fcc4ce 45%, #fcc4ce 55%, #fdd3da 55%);
	background: -webkit-linear-gradient(-45deg, #fdd3da 45%,#fcc4ce 45%, #fcc4ce 55%, #fdd3da 55%);
	background-image: linear-gradient(135deg, #fdd3da 45%,#fcc4ce 45%, #fcc4ce 55%, #fdd3da 55%);
	background-size: 6px 6px;
	border-radius: 3px;
}
h2.title:before {
	content: "\f005";
	font-family: FontAwesome;
	margin: 0 2px;
}

/* common - parts
===================================*/
.red { color: #ff0000; }
.note {
	padding: 15px;
	background-color: #fff;
	background: -moz-linear-gradient(-45deg, #fff 45%,#eee 45%, #eee 55%, #fff 55%);
	background: -webkit-linear-gradient(-45deg, #fff 45%,#eee 45%, #eee 55%, #fff 55%);
	background-image: linear-gradient(135deg, #fff 45%,#eee 45%, #eee 55%, #fff 55%);
	background-size: 6px 6px;
	border-radius: 5px;
}

/* caution area
===================================*/
.mast_attention {
	font-size: 16px;
	font-size: 1.6rem;
	background-color: #ffe0d8;
	padding: 20px;
	border-radius: 10px;
}
.mast_attention .red { color: #b00020; }

/* howto area
===================================*/
.howto_section {
	border: 1px solid #ddd;
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(0,0,0,.05);
	display : -ms-flexbox;
	display : -webkit-flex;
	display : flex;
	align-items: center;
	margin: 0 0 20px;
	padding : 20px;
}
.howto_section .red {
	color: #dd4040;
}
.howto_section .image {
    width: 300px;
    padding: 10px;
}
.howto_section .text {
	padding: 10px;
}

.step02 .image { order: 2; } 
.step02 .text { order: 1; } 

/* osusume item area
===================================*/
.item_list img {
	max-width: 100%;
	height: auto;
}
.item_list a:hover {
	text-decoration: none;
}
.item_list ul {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.item_list li {
	width: 20%;
	width: -webkit-calc( 100% / 5 );
	width: calc( 100% / 5 );
	padding: 8px;
}
.item_list .image {
	padding: 1px;
	border: 3px solid #eee;
}
.item_list a:hover .image {
	border: 3px solid #a6dfe4;
}
.item_list .image img {
	display: block;
}