@charset "utf-8";

body {
	height: 100%; /* 画面全体の高さを確保 */
  margin: 0;
	display: flex;
  flex-direction: column; 
}
.container {
	margin: 0 auto 0 auto;
	padding: 0 30px 0 30px;
	max-width: 100%; /*940px motomoto */
}

/* 
各パートにパディング、背景、テキスト色などを指定する
<div class="container">の子要素に指定する
*/
.header-inner {
	padding: 10px auto 10px auto;
	background: #FFFFFF;
}
.nav-inner {
	padding: 10px 10px 0 10px;
	color: #fff;
	background: #FFFFFF;
}
.main-inner {
	padding: 20px 10px 20px 10px;
	background: #fffde3;

	/* 
	 レイアウトのイメージをしやすいように高さを設定。
	 通常のwebデザインではレイアウトで高さを指定しない
	*/
	height: 400px;
}
.sidebar-inner {
	padding: 20px 10px 20px 10px;
	background: #c0f5b9;
}
.footer-inner {
	padding: 10px 5px 2px 5px;
	background: #708090;
	color: aliceblue;
}

footer {
  overflow: hidden; /* これで内側のマージンが外に飛び出さなくなります */
	
}


/* わかりやすくするために適用しているCSS */
body {
	color: #444;
}
main p:last-child {
	margin-bottom: 0;
}
.main-title {
	margin: 0;
}
.copyright {
	margin: 0;
}

.overview{
    position:relative;
    max-width:1400px;
    margin:auto;
}

.main-image{
    width:100%;
    display:block;
	flex: 1;
}

.click-box{
    position:absolute;
    display:block;
}

/* 左上 PMT */
.pmt{
    left:1%;
    top:13%;
    width:28%;
    height:22%;
}

/* 左中央 Mirror */
.mirror{
    left:1%;
    top:40%;
    width:28%;
    height:22%;
}

/* 左下 Xe */
.xe{
    left:1%;
    top:67%;
    width:28%;
    height:22%;
}

/* 右上 Electronics */
.electronics{
    right:1%;
    top:13%;
    width:28%;
    height:22%;
}

/* 右中央 PEN */
.pen{
    right:1%;
    top:40%;
    width:28%;
    height:22%;
}

/* 右下 Tank */
.tank{
    right:1%;
    top:67%;
    width:28%;
    height:22%;
}

.click-box:hover{
    background:rgba(255,255,255,0.15);
    border:3px solid white;
}