@charset "utf-8";


/*****************************************
　■PC
*****************************************/
@media screen and (min-width: 899px) {
	
img.title_img_top {
}

#top_designed_box {
	position: relative;
	height: 600px;
}

	#top_designed_box #note1 {
		position: absolute;
		top: 340px;
		left: 0px;
		width:285px;
		height:310px;
		
		background-color: #FFFFFF;
		background: rgba(255,255,255,0.75);
		/*以下は無視されても大丈夫なようにbackground-colorを入れた*/
		border-radius: 6px;
		box-shadow:2px 2px 2px #AAA;
	}
	
	#top_designed_box #note2 {
		position: absolute;
		top: 340px;
		left: 308px;
		width:285px;
		height:310px;
		
		background-color: #FFFFFF;
		background: rgba(255,255,255,0.75);
		/*以下は無視されても大丈夫なようにbackground-colorを入れた*/
		border-radius: 6px;
		box-shadow:2px 2px 2px #AAA;
	}
	
	#top_designed_box #note3 {
		position: absolute;
		top: 340px;
		right: 0px;
		width:285px;
		height:310px;
		
		background-color: #FFFFFF;
		background: rgba(255,255,255,0.75);
		/*以下は無視されても大丈夫なようにbackground-colorを入れた*/
		border-radius: 6px;
		box-shadow:2px 2px 2px #AAA;
	}

	#top_designed_box p.title {
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		margin-top: 1.8em;
	}
	#top_designed_box p.title .strong {
		font-size: 18px;
	}
	#top_designed_box p.note {
		font-size: 14px;
		text-align: left;
		margin: 1.2em 1.2em 0 1.2em;
	}
	#top_designed_box p.link {
		width: 200px;
		text-align: center;
		margin: 0;
		padding: 0;
		position: absolute;
		bottom: 0;
		left: 50px;
		margin-bottom: 25px;
	}
		#top_designed_box p.link a {
			padding: 5px 10px;
			background: url(../img/parts/back_readmore.png);
			color: #FFFFFF;
			text-shadow: 1px 1px 2px #555;
			text-decoration: none;
			font-size: 14px;
			box-shadow:  1px 1px 2px #555;
			border-radius: 4px;
		}

}

/*****************************************
　■タブレット・スマホ サイズ別の詳細設定
*****************************************/
@media screen and (max-width: 898px) and (min-width: 798px) {
	
img.title_img_top {
	width: 100%;
	height: auto;
	display: block;
}

#top_designed_box {
	position: relative;
	height: 600px;
}

	#top_designed_box #note1 {
		position: absolute;
		top: 310px;
		left: 10%;
		width:293px;
		height:260px;
		
		background-color: #FDFDFD;
		background: rgba(245,245,245,0.6);
		/*以下は無視されても大丈夫なようにbackground-colorを入れた*/
		border-radius: 6px;
		box-shadow:2px 2px 2px #AAA;
	}
	
	#top_designed_box #note2 {
		position: absolute;
		top: 310px;
		right: 10%;
		width:293px;
		height:260px;
		
		background-color: #FFFFFF;
		background: rgba(245,245,245,0.6);
		/*以下は無視されても大丈夫なようにbackground-colorを入れた*/
		border-radius: 6px;
		box-shadow:2px 2px 2px #AAA;
	}
	
	#top_designed_box #note3 {
		position: absolute;
		top: 610px;
		left: 10%;
		width:80%;
		height:250px;
		
		background-color: #FFFFFF;
		background: rgba(245,245,245,0.6);
		/*以下は無視されても大丈夫なようにbackground-colorを入れた*/
		border-radius: 6px;
		box-shadow:2px 2px 2px #AAA;
		
		margin-bottom: 2em;
	}

	#top_designed_box p.title {
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		margin-top: 1.8em;
	}
	#top_designed_box p.title .strong {
		font-size: 18px;
	}
	#top_designed_box p.note {
		font-size: 14px;
		text-align: left;
		margin: 1.2em 1.2em 0 1.2em;
	}
	#top_designed_box p.link {
		width: 250px;
		text-align: center;
		margin: auto;
		padding: 0;
		position: absolute;
		bottom: 22px;
		left: 0;
		right: 0;
	}
		#top_designed_box p.link a {
			padding: 5px 10px;
			background: url(../img/parts/back_readmore.png);
			color: #FFFFFF;
			text-shadow: 1px 1px 2px #555;
			text-decoration: none;
			font-size: 14px;
			box-shadow:  1px 1px 2px #555;
			border-radius: 4px;
		}
}


@media screen and (max-width: 797px) and (min-width: 641px) {
	
/*特別に一つ細かいブラウザ幅設定を追加　トップのablsoluteを綺麗に収めるため*/

img.title_img_top {
	width: 100%;
	height: auto;
	display: block;
}

#top_designed_box {
	position: relative;
	height: 600px;
}

	#top_designed_box #note1 {
		position: absolute;
		top: 310px;
		left: 2%;
		width:46%;
		height:260px;
		
		background-color: #FDFDFD;
		background: rgba(245,245,245,0.6);
		/*以下は無視されても大丈夫なようにbackground-colorを入れた*/
		border-radius: 6px;
		box-shadow:2px 2px 2px #AAA;
	}
	
	#top_designed_box #note2 {
		position: absolute;
		top: 310px;
		right: 2%;
		width:46%;
		height:260px;
		
		background-color: #FFFFFF;
		background: rgba(245,245,245,0.6);
		/*以下は無視されても大丈夫なようにbackground-colorを入れた*/
		border-radius: 6px;
		box-shadow:2px 2px 2px #AAA;
	}
	
	#top_designed_box #note3 {
		position: absolute;
		top: 590px;
		left: 10%;
		width:80%;
		height:250px;
		
		background-color: #FFFFFF;
		background: rgba(245,245,245,0.6);
		/*以下は無視されても大丈夫なようにbackground-colorを入れた*/
		border-radius: 6px;
		box-shadow:2px 2px 2px #AAA;
		
		margin-bottom: 2em;
	}

	#top_designed_box p.title {
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		margin-top: 1.8em;
	}
	#top_designed_box p.title .strong {
		font-size: 18px;
	}
	#top_designed_box p.note {
		font-size: 14px;
		text-align: left;
		margin: 1.2em 1.2em 0 1.2em;
	}
	#top_designed_box p.link {
		width: 250px;
		text-align: center;
		margin: auto;
		padding: 0;
		position: absolute;
		bottom: 22px;
		left: 0;
		right: 0;
	}
		#top_designed_box p.link a {
			padding: 5px 10px;
			background: url(../img/parts/back_readmore.png);
			color: #FFFFFF;
			text-shadow: 1px 1px 2px #555;
			text-decoration: none;
			font-size: 14px;
			box-shadow:  1px 1px 2px #555;
			border-radius: 4px;
		}
}


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

img.title_img_top {
	display: none;
}

#top_designed_box {
	background: url(../img/top/title_img.jpg) no-repeat top center;
	background-size: contain;
	padding-top: 40%;
}

	#top_designed_box #note1 {
		margin: 0 10px 20px 10px;
		padding: 1em 0;
		
		background-color: #FDFDFD;
		background: rgba(245,245,245,0.6);
		/*以下は無視されても大丈夫なようにbackground-colorを入れた*/
		border-radius: 6px;
		box-shadow:2px 2px 2px #AAA;
	}
	
	#top_designed_box #note2 {
		margin: 0 10px 20px 10px;
		padding: 1em 0;
		
		background-color: #FDFDFD;
		background: rgba(245,245,245,0.6);
		/*以下は無視されても大丈夫なようにbackground-colorを入れた*/
		border-radius: 6px;
		box-shadow:2px 2px 2px #AAA;
	}
	
	#top_designed_box #note3 {
		margin: 0 10px 20px 10px;
		padding: 1em 0;
		
		background-color: #FDFDFD;
		background: rgba(245,245,245,0.6);
		/*以下は無視されても大丈夫なようにbackground-colorを入れた*/
		border-radius: 6px;
		box-shadow:2px 2px 2px #AAA;
	}

	#top_designed_box p.title {
		font-size: 15px;
		font-weight: bold;
		text-align: center;
	}
	#top_designed_box p.title .strong {
		font-size: 18px;
	}
	#top_designed_box p.note {
		font-size: 14px;
		text-align: left;
		margin: 1.2em 1.2em 0 1.2em;
	}
	#top_designed_box p.link {
		width: 250px;
		text-align: center;
		margin: 1em auto 0.1em auto;
		padding: 0;
	}
		#top_designed_box p.link a {
			padding: 5px 10px;
			background: url(../img/parts/back_readmore.png);
			color: #FFFFFF;
			text-shadow: 1px 1px 2px #555;
			text-decoration: none;
			font-size: 14px;
			box-shadow:  1px 1px 2px #555;
			border-radius: 4px;
		}
}