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

.mainVisual {
	background:url(/marking/images/marking-mv.png) no-repeat;
	padding-top:38%;
}

.mainVisual p {
	display:none;
}

.mainVisual h2 {
	font-size:130%;
	font-weight:bold;
	line-height:1.3;
	color:#FFF;
	text-shadow:
		-1px -1px 3px #000,
		1px -1px 3px #000,
		-1px 1px 3px #000,
		1px 1px 3px #000;
	position:absolute;
	top:2%;
	left:60%;
	right:2%;
}

@media screen and (max-width:768px){
	.mainVisual h2 {
		font-size:100%;
	}
}

/* メイン */

#main .inner img {
	max-width:100%;
	height:auto;
}

#main .correspondingUniform {
	margin:0 -8px 0 0;
}

#main .correspondingUniform:after {
	content:'';
	display:block;
	clear:both;
}

#main .correspondingUniform li {
	width:88px;
	display:inline-block;
	line-height: 1.2;
	text-align:center;
}

#main .correspondingUniform li a {
	display:block;
	background:#f44336;
	margin:0 5px 8px 0;
	font-size:83.4%;
	color:#FFF;
	border-radius:10px;
	padding: 2px 0 2px 0;
}

#main .correspondingUniform li a:hover {
	background:#167cbc;
	opacity:1;
	transition:0.3s;
}

@media screen and (max-width:480px){
	#main .correspondingUniform {
		text-align:center;
	}
}
#main .point {
	color:#FFF;
	background:#E9609E;
	margin:60px 0 70px 120px;
	padding:10px 20px 10px 100px;
	border-radius:15px;
	font-size:130%;
	font-weight:bold;
	line-height:1.5;
	position:relative;
}

#main .point:before {
	content:url(/marking/images/marking02.png);
	position:absolute;
	left:-120px;
	top:-40px;
}

@media screen and (max-width:768px){
	#main .point,
	#main .point.point-margin {
		margin:160px 0 40px;
		padding:10px 20px;
	}
	
	#main .point:before {
		left:0;
		top:-137px;
	}
}

/* シルクスクリーンとカッティング */

#main .comparisonArea {
	background:url(/marking/images/marking01.png) no-repeat 50% 25px;
}

#main .comparisonArea:after {
	content:'';
	display:block;
	clear:both;
}

#main .comparisonArea .floatL,
#main .comparisonArea .floatR {
	width:280px;
	margin:0 0 20px;
}

@media screen and (max-width:768px){
	#main .comparisonArea {
		background:none;
	}
	
	#main .comparisonArea .floatL,
	#main .comparisonArea .floatR {
		width:45%;
	}
}

@media screen and (max-width:480px){
	#main .comparisonArea .floatL,
	#main .comparisonArea .floatR {
		width:100%;
		float:none;
		margin-bottom:30px;
	}
}

/* ロゴ */
#main .logoArea:after {
	content:'';
	display:block;
	clear:both;
}

#main .logoArea .floatL {
	width:360px;
	margin:0 0 20px;
}

#main .logoArea .floatR {
	width:280px;
	margin:0 0 20px;
}

@media screen and (max-width:768px){
	#main .logoArea .floatL,
	#main .logoArea .floatR {
		float:none;
		width:auto;
	}
}

.buttonLogo {
	background:url(/marking/images/btn_logoSample.png) no-repeat right top;
	width:541px;
	height:62px;
	display:block;
	color:#FFF!important;
	font-size:140%;
	font-weight:bold;
	line-height:1.3;
	padding:10px;
	margin:0 auto 20px;
}

.buttonLogo:hover {
	text-decoration:none;
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}

@media screen and (max-width:768px){
	.buttonLogo {
		width:100%;
		max-width:541px;
		border-left:2px #B8DA9D solid;
	}
}

@media screen and (max-width:480px){
	.buttonLogo {
		font-size:100%;
	}
}


.buttonBanner {
	padding-top:45px;
}

@media screen and (max-width:480px){
	.buttonBanner {
		padding-top:120px ;
	}
}



/* サイド */

#side h6 {
	color:#888;
	border-bottom:#888 2px solid;
	margin:0 0 15px;
}

#side .first-cell {
	width:42%;
}

#side .colorList {
	margin:0 -12px 0 0;
}

#side .colorList li {
	margin:0 12px 12px 0;
}

#side .fontTable {
	width:100%;
}

#side .fontTable.tr-border tr {
	border-bottom:#888 2px solid;
	
}

#side .fontTable th {
	width:35%;
	vertical-align:middle;
	font-size:90%;
	text-align:center;
	padding:10px 10px 10px 0;
	font-weight:normal;
}

#side .fontTable td {
	width:65%;
	vertical-align:middle;
	padding:10px 0;
}

#side .fontTable td img {
	width:100%;
	height:auto;
}

#side .display {
	text-align:right;
	margin:20px 0;
}

#side .display span {
	display:inline-block;
	background:#7AC1EB;
	color:#FFF;
	cursor:pointer;
	padding:5px;
}

#side .slideContents {
	display:none;
	margin:0 0 20px;
}

@media screen and (max-width:480px){
	#side .fontTable,
	#side .fontTable thead,
	#side .fontTable tbody,
	#side .fontTable tr,
	#side .fontTable td,
	#side .fontTable th {
		display:block;
		width:100%;
	}
}