/* CSS */

body {
	background: url('screens/container_bg.png');
	font: 100% "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
}

#contents {
	width: 100%;
	max-width: 1024px;
	height: 218px;
}

#contents .left {
	width: 40%;
}

#contents .left p {
	width: 100%;
	height: 218px;
	float: left;
	text-indent: -9999px;
}

#contents .right {
	width: 55%;
	height: 218px;
	margin: 10px 3% 0 0;
	float: right;
	line-height: 32px;
}

#contents .right .text1 {
	font-size: 26px;
}

#contents .right .text2 {
	margin-top: 10px;
	font-size: 1.0em;
	line-height: 140%;
}


#contents .left p.slider1 { background: url('screens/slider1.png') no-repeat center; background-size: 70%; }
#contents .left p.slider2 { background: url('screens/slider2.png') no-repeat center; background-size: 70%; }
#contents .left p.slider3 { background: url('screens/slider3.png') no-repeat center; background-size: 70%; }

/* ie8 */
#contents .left p.slider1 { background: url('screens/slider1_ie8.png') no-repeat center\9; }
#contents .left p.slider2 { background: url('screens/slider2_ie8.png') no-repeat center\9; }
#contents .left p.slider3 { background: url('screens/slider3_ie8.png') no-repeat center\9; }

#contents .right.cl { color: #67B2D9; }
#contents .right.dl { color: #52BA97; }
#contents .right.dummy { color: #754CC6; }


/* ==========================================================================
   max-width:800px
   ========================================================================== */

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

    #contents .right {
	line-height: 30px;
}

    #contents .right .text1 {
	font-size: 24px;
	}


/* ==========================================================================
   max-width:480px
   ========================================================================== */

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

    #header {
	width: 100%;
	height: 40px;
	}

    #header h2 {
	width: 300px;
	margin: 0 auto;
	font-size: 20px;
	line-height: 1.5em;
	}

    #contents {
	width: 100%;
	height: 200px;
	}
	
    #contents .left {
	width: 40%;
	float: left;
	}

    #contents .left p {
	width: 100%;
	height: 150px;
	text-indent: -9999px;
	}
	
    #contents .left p.slider1 { background: url('screens/slider1.png') no-repeat center; background-size: 85%; }
    #contents .left p.slider2 { background: url('screens/slider2.png') no-repeat center; background-size: 85%; }
    #contents .left p.slider3 { background: url('screens/slider3.png') no-repeat center; background-size: 85%; }

    #contents .right {
	width: 56%;
	height: 150px;
	float: right;
	line-height: 25px;
	}

    #contents .right .text1 {
	font-size: 20px;
	}

	#contents .right .text2 {
	margin-top: 7px;
	font-size: 0.9em;
	}

}