@charset "utf-8";
/* CSS Document */

#container{
}

.notice{
	text-align: center;
	margin: 4% 0;
}

#container ol{
}

#container ol li{
	overflow: hidden;
	margin:0 0 6%;
}

#container ol li h3{
	background-color: #FFEBC8;
	color: #FF7F00;
	padding: 1% 4%;
	font-size: 1.33rem;
	letter-spacing: 0.15rem;
	font-weight: 700;
	margin: 0 0 2%;
}

#container ol li h3 span{
	font-size: 1rem;
	margin: 0 5px 0 0;
	color: #cc7c32;
}


#container ol li .thum{
	width: 42%;
	padding:2% 4%;
}

#container ol li .thum ol{
	margin:4% 0;
	overflow: inherit;
}

#container ol li .thum ol li{
	background-color: #FF7F00;
	color: #FFF;
	display: inline-block;
	padding: 5px 20px;
	position:relative;
	margin:0 10px;
	overflow: inherit;
}

#container ol li .thum ol li:first-child{
	margin-left:0;
}

#container ol li .thum ol li::after{
	content: '>';
	position: absolute;
	top: 5px;
	right: -17px;
	color: #FF7F00;
}

#container ol li .thum ol li:last-child::after{
	content: '';
}

#container ol li .thumr{
	width: 46%;
	padding:0 4% 0 0;
}

#container ol li .thumr img{
	width: 100%;
}


/* =============================================================================
   Caution
   ========================================================================== */

#caution{
	background-color: #F4F0EB;
	text-align: center;
	padding:4%;
}

#caution h3{
	color: #D81700;
	font-weight: 700;
	font-size: 1.33rem;
	letter-spacing: 0.15rem;
	padding: 0 0 4%;
	text-indent:-0.15rem;
}

#caution h3::before{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(/img/icon_caution.svg) no-repeat center top / contain;
	vertical-align: middle;
	padding: 0 20px 0 0;
	margin: -5px 0 0;
}

#caution ul{	
}

#caution li{
	background-color: #FFF;
	float: left;
	margin: 0 3%;
	width: 36%;
	padding: 4%;
	height:150px;
}

#caution h4{
	color: #D81700;
	font-weight: 700;
	margin: 0 0 4%;
	font-size: 1.13rem;
	letter-spacing: 0.15rem;
}

#caution p{
}


/* =============================================================================
   Device
   ========================================================================== */


@media screen and (max-width: 768px) {
	#container .container {
	    width: 100%;
	}
	.notice{
		text-align: justify;
		text-justify: inter-ideograph;
		margin-bottom: 10%;
		padding:0 4%;
	}
	#container ol li{
		margin-bottom: 10%;
	}
	#container ol li h3{
		font-size: 1rem;
		letter-spacing: 0.08rem;
		padding:2.5% 4%;
	}
	#container ol li h3 span{
		font-size: 0.78rem;
	}
	#container ol li .thum {
		width: auto;
		float: none;
	}
	#container ol li .thumr {
		width: auto;
		float: none;
		padding: 2% 4%;
		text-align: justify;
		text-justify: inter-ideograph;
	}
	#container ol li .thum ol li{
		padding: 0 3%;
		margin-bottom: 5px;
	}
	#container ol li .thum ol li::after{
		top: 0;
	}
	#caution {
    		padding: 6% 0;
	}
	#caution h3{
		font-size: 1rem;
	}
	#caution h3::before {
	    width: 16px;
	    height: 16px;
	    padding: 0 20px 0 0;
	}
	#caution li{
		width: auto;
		height: auto;
		float: none;
		text-align: justify;
		text-justify: inter-ideograph;
		font-size: 0.88rem;
		padding: 4% 8%;
	}
	#caution li:first-child{
		margin-bottom: 4%;
	}
	#caution h4 {
		font-size: 0.88rem;
		text-align: center;
	}
	#caution p {
    		letter-spacing: 0.05rem;
		font-size: 0.78rem;
	}
}