﻿@charset "utf-8";


@media screen and (max-width:1024px){
/*==================
header
====================*/

#header #memu{
	width: 787px;
	margin: 0 auto;
	text-align: center;
}
/*==================
main
====================*/
#main{
	width: 900px;
	margin: 67px auto 0;
	padding-bottom: 100px;
}

/*#inner_l*/

#main #inner_l{
	float: left;
	width: 200px;
}

/*#inner_r*/

#main #inner_r{
	float: left;
	width: 480px;
}
#main #border{
	width: 500px;
	height: 250px;
	background: #fff;
	border: #ccc 1px solid;
}
#main #border p{
	display: block;
	margin: 80px auto 0;
	text-align: center;
}
#main #inner_r img{
	width: 400px;
}
#main #inner_r img#wide1{
	width: 500px;
}	
#main #inner_r #imaginary_r{
	float: right;
	width: 189px;
	margin-left: 1em;
}	
	
	
}


@media screen and (max-width:767px){
	
/*	＝＝＝＝＝
header
	＝＝＝＝＝*/
#header{
	background: none;
	height: 5em;
}
#header #memu{
	width: 90%;
}
#header #memu #top-logo{
	display: block;
	float: none;
	margin: 1em auto;
	text-align: center;
}
#header #memu #m-over-pro,#m-over-con{
	float: none;
	display: none;
}
#header #memu a:hover#m-over-pro{
	display: none;
}
#header #memu a:hover#m-over-con{
	display: none;
}
	
/*	＝＝＝＝＝
main
	＝＝＝＝＝*/
#main{
	width: 90%;
	margin: 5em auto 0;
	padding-bottom: 5em;
}

/*#inner_l*/

#main #inner_l{
	float: none;
	width: 100%;
	text-align: center;
	border-top: #99cc33 0.1em solid;
	padding-top: 1em;
}
#main #inner_l ul{
	margin: 0.5em 0 0 0;
}
#main ul li{
	display: none;
	line-height: 1.2em;
}
#main #inner_l ul li#select{
	display: block;
	text-align: center;
	color: #666;
	margin-bottom: 2em;
	font-size: 1.2em;
}
#main #inner_l .next{
	float: right;
	display: block;
	font-size: 1.5em;
	color: #ff6699;
	border: #ff6699 0.1em solid;
	padding: 0.2em 0.5em;
}
#main #inner_l .back{
	float: left;
	display: inline-block;
	font-size: 1.5em;
	color: #ff6699;
	border: #ff6699 0.1em solid;
	padding: 0.2em 0.5em;
}	

/*#inner_r*/

#main #inner_r{
	float: none;
	width: auto;
}
#main #inner_r img{
	max-width: 100%;
}	
#main p{
	margin-top: 1.2em;
}
#main p.cap{
	font-size: 1.5em;
}
#main #border{
	width: 100%;
	height: 50%;
	border: #ccc 0.1em solid;
}
#main #border p{
	margin: 3em 1em;
}
#main #inner_r #imaginary_r{
	float: none;
	display: none;
}
#main #inner_r ul{
	width: 100%;
}
#main #inner_r ul li{
	float: none;
	display: block;
	border: #ccc 0.1em solid;
	padding: 1em 3em;
	margin: 1em 0 0 0;
}
#main #inner_r ul li.list{
	font-size: 1.2em;
	line-height: 1.2;
	border: none;
	padding: 0.5em 1em;
	margin: 0.1em 0 0 0;
}

	
/*	＝＝＝＝＝
contact form
	＝＝＝＝＝*/	
#form_box {
	width: 100%;
	border-top: #99cc33 0.1em solid;
	padding-top: 1em;
}
#form_box #title{
	margin: 2em 0;
}
table.form { 
	width: 100%;
}
table.form th,td { 
	padding: 1em;
	width: 90%;
}
table.form th { 
	width: 90%;
}
table.form td { 
	margin-bottom: 2em;
	width: 90%;
}
input.style{
	font-size: 1.2em;
	padding: 0.5em 2em;
	margin-bottom: 2.5em;
}
table.form td input[type="text"]:focus {
    border: solid 0.1em #99cc33;
	outline: 0;
}
table.form td textarea:focus {
    border: solid 0.1em #99cc33;
	outline: 0;
}
	
.scroll{
overflow: auto;　　　　/*tableをスクロールさせる*/
white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 1em;
}
.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #f1f1f1;
}
.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #bcbcbc;
}	
		
	
	
	
	
	
	
｝
