@charset "UTF-8";
/*Created by Rubato*/

#top_img {
	background: url(../top/top.jpg) center center / cover no-repeat !important;
	width: 100%;
	height: 0;
	padding-top: calc(600 / 1500 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	margin: 0.5em auto;
	text-indent: -10000px;
}

/*for Retina*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
#top_img {
	background: url(../top/top@2x.jpg) center center / cover no-repeat;
}
}

#top_work {
	clear: both;
	max-width: 100%;
    margin: 3em auto 6em auto;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: -ms-flexbox;
    box-pack: justify;
    -moz-box-pack: justify;
    -webkit-box-pack: justify;
    -o-box-pack: justify;
	-ms-flex-pack:justify;
	font-size: 1.7rem;
}
@-moz-document url-prefix() {
	#top_work {
    clear: both;
	width: 100%;
    margin: 3em auto 6em auto;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: -ms-flexbox;
    box-pack: justify;
    -moz-box-pack: justify;
    -webkit-box-pack: justify;
    -o-box-pack: justify;
	-ms-flex-pack:justify;
	font-size: 1.7rem;
}
}

/*-----↓.top_workボックス要素----------*/
.top_work_elements {
    width: 33.3%;
    display: block;
	text-align: center;
	border-left: 1px solid #EEE;
}
.top_work_elements:first-child {
	border-left: none;
}

.top_work_title {
	font-size: 2rem;
	font-family: 'VLGothic';
	width: auto;
	text-align: center;
	margin-bottom: 1em;
}
/*for win chrome/ css_browser_selector.js*/
.win.chrome .top_work_title {
	font-family: Arial, Roboto, “Droid Sans”, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
	font-size: 2rem;
	width: auto;
	text-align: center;
	margin-bottom: 1em;
	text-shadow: 0px 0px 1px rgba(0, 0, 0, .2);
}
/* for win Firefox/ css_browser_selector.js */
.win.gecko .top_work_title {
	font-family: Arial, Roboto, “Droid Sans”, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
	font-size: 2rem;
	width: auto;
	text-align: center;
	margin-bottom: 1em;
	text-shadow: 0px 0px 1px rgba(0, 0, 0, .2);
}

.top_work_elements img {
	margin-bottom: 0.5em;
}
.top_work_elements p,#top_kind article p {
	text-align: left;
}
.top_work_elements a {
	padding: 1em;
	display: block;
	overflow: hidden;
}
.top_work_elements a:hover {
	background: #F8F8F8;
	color: #515151;
	text-decoration: none !important;
}

.top_work_detai {
	text-align: center;
	color: #EA8631;
	display: inline-block;
	margin: 0.5em auto;
	z-index:100;
}
.top_work_detai i {
	margin-left: 0.3em;
}

/* PC用 */
@media only screen and (min-width:1200px){

}
@media only screen and (max-width:1024px){
#top_work {
	width: 98%;
	margin: auto;
}
.top_work_elements {
	padding: 0em !important;
	width: 33.2%;
}
.top_work_elements img {
	width: 80%;
	height: auto;
}
.top_work_detai {
	clear: both;
	float: none !important;
	width: auto;
}

}
@media only screen and (max-width:800px){
#to_column {
	clear: both;
	background: none;
	border-bottom: 1px solid #E1E1E1;
    display: block;
	font-size: 1.4rem;
	text-align: left;
	width: 100%;
	margin-bottom: 1em;
}
#footer_right ul li span {
	display: block;/*display: none;の反対 PCタブレットではdisplay: none;*/
	float: right;
}
#to_column a {
	padding: 0em 0 0.3em 3.2em;
	display: block;
	 color: #515151;
}
#to_column a:hover {
	text-decoration: none;
}
}

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

}

@media only screen and (max-width:480px){
#top_work {
	clear: both;
	float: none;
	display: block !important;
}
.top_work_elements {
	display: block !important;
	width: 98%;
	margin: auto auto 1em auto;
	border-bottom: 1px solid #E1E1E1;
	border-left: none !important;
}
.top_work_elements:last-child {
	margin-bottom: 3em;
}
.top_work_elements img {
	width: 50% !important;
	height: auto;
}

}
@media only screen and (max-width:360px){

}