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

/*共通*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:middle;
}

body {
	width:100%;
	color:#797979;
	font-size:12px;
	font-family: 'Quicksand','Open Sans','Questrial',"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: normal;
	margin:0 auto;
}
a{
    color: #797979;
	text-decoration: none;
}

.normal_font{
	font-family:Arial, Helvetica, sans-serif !important;
}
		/* clear fix */
		.clearfix:after{
			content:".";
			display: block;
			clear: both;
			height: 0;
			visibility: hidden;
		}
		.clearfix{
			display: inline-block;
		}
		* html .clearfix{
			height: 1%;
		}
		.clearfix{
			display: block;
		}
		
	
	
	@media screen and (min-width:769px){
		.sp_only{
			display: none;
		}

		.main_contents{
        	width: 100%;
        	margin: 100px auto 0;
        	max-width: 1500px;
		
	    }
		
		.title_box{
			font-size: 20px;
			margin: 20px 0;
			text-align: center;
		}
	

		
		.goto_top_bt{
			margin: 5% auto 10%;
			border: 1px solid #ABABAB;
			border-radius: 5px;
			padding: 1%;
			width: 60%;
			text-align: center;
		}
		
		.gotop_bt{
			position: fixed;
			right: 10px;
			bottom: 10px;
			z-index: 1000;
			width: 60px;
			opacity: 0;
			transition: .5s all ease;
		}
		.gotop_bt img{
			width: 100%;
		}
		.gotop_bt.active{
			opacity: 1;
			transition: .5s all ease;
		}
		
		.instaco_box{
			width: 20%;
			float: left;
			display: block;
			position: relative;
			cursor: pointer;
		}
		
		.instaco_box:after{
			content: url(https://www.improves.jp/coordinate/click.png);
			width: 20%;
			float: left;
			display: block;
			position: absolute;
			left: 0;
			bottom: 0;
		}
		
		.instaco_box img{
			width: 100%;
			max-width: 300px;
		}
		
		.iteminfo_box{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			transition: 1s all ease;
			z-index: 90;
			max-width: 300px;
		}
		
		
		
		.iteminfo_black{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #000000;
			z-index: 90;
			opacity: .7;
		}
		
		.co_item_box{
			position: relative;
			z-index: 200;
			color: #FFFFFF;
			border-bottom: 1px solid #AAAAAA;
			height: 15%;
			display: flex;
			align-items: flex-start;
			padding: 4%;
            flex-direction: column;
            justify-content: center;
		}
        .item_name{
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .item_brand{
            font-size: 10px;
        }
        .item_price{
            font-size: 12px;
        }
        .title_box img{
			width: 5%;
			max-width: 100px;
			vertical-align: middle;
		}
	.title_text {
		transform: translate(0%,25%);
		display: inline-block;
	}
	}

	@media screen and (max-width:768px){
		.pc_only{
			display: none;
		}
		
		.main_contents{
        	width: 100%;
        	margin: 25% auto 0;
        	max-width: 600px;
			/*padding: 60px 0 0 0;*/
	    }

		.goto_top_bt{
			margin: 5% auto 10%;
			border: 1px solid #ABABAB;
			border-radius: 5px;
			padding: 1%;
			width: 80%;
			text-align: center;
			font-size: 10px;
		}
		
		.gotop_bt{
			position: fixed;
			right: 10px;
			bottom: 16%;
			z-index: 1000;
			width: 15%;
			opacity: 0;
			transition: .5s all ease;
		}
		.gotop_bt img{
			width: 100%;
		}
		.gotop_bt.active{
			opacity: 1;
			transition: .5s all ease;
		}
		
		.title_box{
			font-size: 20px;
			margin: 20px 0;
			text-align: center;
		}
	
		.instaco_box{
			width: 50%;
			float: left;
			display: block;
			position: relative;
		}
		
		.instaco_box:after{
			content: url(https://www.improves.jp/coordinate/tap.png);
			width: 20%;
			float: left;
			display: block;
			position: absolute;
			left: 0;
			bottom: 0;
		}
		

		
		.instaco_box img{
			width: 100%;
			max-width: 300px;
		}
		
		.iteminfo_box{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			transition: 1s all ease;
			z-index: 90;
		}
		
		
		
		.iteminfo_black{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #000000;
			z-index: 90;
			opacity: .7;
		}
		
		.co_item_box{
			position: relative;
			z-index: 200;
			color: #FFFFFF;
			border-bottom: 1px solid #AAAAAA;
			height: 18%;
			display: flex;
			align-items: flex-start;
			padding: 3%;
            flex-direction: column;
            justify-content: center;
		}
        .item_name{
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .item_brand{
            font-size: 10px;
        }
        .item_price{
            font-size: 12px;
        }
        .title_box img{
			width: 5%;
			max-width: 100px;
			vertical-align: middle;
		}
		.title_box img{
			width: 8%;
			max-width: 100px;
			vertical-align: middle;
		}
	.title_text {
		transform: translate(0%,25%);
		display: inline-block;
	}
	}