@charset "UTF-8"; 

ul#list {
	margin: 30px 0 50px 0;
	padding: 0;
	list-style: none;
}

.doc h3 {
	border-bottom: 2px solid #c90a30;
}

/* smart phone */
@media screen and ( max-width: 1100px )
{
	#title {
		margin: 0 0 30px 0;
		padding: 30px 0 0px 0;
		background-repeat: no-repeat;
		background-size: cover;
		height: 120px;
	}
	
	#title h2 {
		margin: 0;
		padding: 5px 0 5px 0;
		
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		color: white;
	}
	
	#title p {
		margin: 0;
		padding: 5px;
		font-size: 12px;
		text-align: center;
		color: white;
	}
	
	ul#list li {
		display: inline-block;
		width: 100%;
	}
	
	ul#list li {
		margin: 0 0 20px 0;
		padding: 0;
		width: 100%;
	}
	
	ul#list li a {

	}

	ul#list li img {
		width: 100%;
	}


	ul#list li a:hover img {
		opacity: 0.8;
	}
	
	.doc h3 {
		margin: 0 10px 10px 10px;
		font-size: 16px;
	}
	
	.doc p {
		color: #555555;
	}
	
	.doc p.normal {
		margin: 0;
		padding: 10px;
	}
	
	.doc p.last {
		margin: 0 0 30px 0;
		padding: 10px;
	}

	img.ph {
		display: block;
		margin: 0 auto 30px auto;
		padding: 0;
		width: 90%;
	}
	
	p.ph_title {
		margin: 0 10px 10px 10px;
		font-weight: bold;
		color: black;
	}
	
	a span {
		font-size: 13px;
	}
	
	.youtube {
		display: block;
		margin: 0 auto 0 auto;
		width: 300px;
		height: 170px;
	}

	.site_exp {
		margin: 0 10px 30px 10px;
		padding: 0 0 0 10px;
		border-left: 3px solid #cccccc;
	}
}

/* pc */
@media screen and ( min-width: 1100px )
{
	#title {
		margin: 0 0 30px 0;
		padding: 100px 0 0 0;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		height: 200px;
	}
	
	#title h2 {
		margin: 0;
		padding: 5px 0 5px 0;
		
		font-size: 30px;
		font-weight: bold;
		text-align: center;
		color: white;
	}
	
	#title p {
		margin: 0;
		padding: 5px 0 5px 0;
		text-align: center;
		color: white;
	}
	
	ul#list li {
		display: inline-block;
		width: 540px;
	}
	
	ul#list li:nth-child(odd) {
		margin: 0 10px 20px 0;
		padding: 0;
	}
	
	ul#list li:nth-child(even) {
		margin: 0 0 20px 10px ;
		padding: 0;
	}
	
	ul#list li a {

	}

	ul#list li img {
		width: 540px;
	}

	ul#list li a:hover img {
		opacity: 0.8;
	}
	
	.doc h3 {
		margin: 0 0 30px 0;
		font-size: 30px;
	}

	.doc p {
		color: #555555;
	}
	
	.doc p.normal {
		margin: 0;
	}
	
	.doc p.last {
		margin: 0 0 50px 0;
	}

	img.ph {
		margin: 0 20px	 30px 0;
		padding: 0;
		float: left;
		clear: both;
		max-width: 300px;
	}
	
	p.ph_title {
		font-weight: bold;
		color: black;
	}
	
	a span {
		font-size: 13px;
	}

	.youtube {
		width: 560px;
		height: 315px;
	}
	
	.site_exp {
		margin: 0 0 50px 0;
		padding: 0 0 0 10px;
		border-left: 3px solid #cccccc;
	}
}