@charset "utf-8";

#main div.box {
width: 100%; /* 項目の幅 */
padding: 0 10px 20px; /* エリアのパディング（上、左右、下） */
border-bottom: 0px #e0e0e0 solid; /* トップエリアの下境界線 */
}
#main div.box p{
padding: 10px 30px 20px; /* エリアのパディング（上、左右、下） */
font-size: 160%; /* 文字サイズ */
line-height: 160%; /* 行の高さ */
color: #ffffff;
}
#main div.box p.box_title {
padding: 50px 15px 5px; /* エリアのパディング（上、左右、下） */
font-size: 180%; /* 文字サイズ */
line-height: 100%; /* 行の高さ */
text-align: center;
color: #ffffff;
}
#main div.box h2.box_title{
padding: 50px 15px 5px; /* エリアのパディング（上、左右、下） */
background: none;
color: #ffffff;
}
#main div.box a{
display: block;
position: relative; /* IE6用 */
text-decoration: none; /* テキストの下線（なし） */
font-weight: none; /* 文字の太さ（太字） */
color: #3a3a3a; /* 文字色 */
line-height: 100%; /* 行の高さ */
width: 100%;
height: 100%;
}

#main div.box_1 {
position: relative;
width: 300px; /* エリアの幅 */
height: 300px; /* エリアの最小高さ */
float: left;
background: #00a3fe; /* ポイント時の背景 */
border: 4px #ffffff solid; /* エリアの境界線 */
}
/* --- ポイント時の設定 --- */
#main div.box_1:hover {
border: 4px #FF6860 solid; /* エリアの境界線 */
}

#main div.box_2 {
position: relative;
width: 300px; /* エリアの幅 */
height: 300px; /* エリアの最小高さ */
float: left;
background: #ff3333;
border: 4px #ffffff solid; /* エリアの境界線 */
}
/* --- ポイント時の設定 --- */
#main div.box_2:hover {
background: #3a3a3a url(../image/next.png) no-repeat right bottom; /* ポイント時の背景 */
border: 4px #ff3333 solid; /* エリアの境界線 */
}

#main div.box_3 {
width: 300px; /* エリアの幅 */
height: 300px; /* エリアの最小高さ */
float: left;
background: #ffa500;
border: 4px #ffffff solid; /* エリアの境界線 */
}
/* --- ポイント時の設定 --- */
#main div.box_3:hover {
background: #FBA848 url(../image/next.png) no-repeat right bottom; /* ポイント時の背景 */
border: 4px #FF6860 solid; /* エリアの境界線 */
}
#main div.box_4 {
width: 300px; /* エリアの幅 */
height: 300px; /* エリアの最小高さ */
float: left;
background: #33cc33;
border: 4px #ffffff solid; /* エリアの境界線 */
}
/* --- ポイント時の設定 --- */
#main div.box_4:hover {
border: 4px #FF6860 solid; /* エリアの境界線 */
}