@charset "utf-8";


/*-------------------------------------*/
/* メインイメージ */
/*-------------------------------------*/

div#mainImgBox{
	margin: 0 auto;
	text-align: left;
	width: 100%;
	/*background: url(../img/mainimg.jpg) no-repeat top right;*/
	max-width: 960px;
}

div#mainImgBox2{
	margin: 0 auto;
	text-align: left;
	width: 100%;
	/*background: url(../img/mainimg.jpg) no-repeat top right;*/
	max-width: 960px;
}

/*-------------------------------------*/

/*-------------------------------------*/

/* 写真掲載 */
div#photoContents{
	background: #fff;
	width: 100%;
	padding: 30px 20px;
	margin: 0 auto;
	text-align: left;
	max-width: 880px;
}

div#mainContents{
	background: #fff;
	width: 100%;
	padding: 30px 20px;
	margin: 0 auto;
	text-align: left;
	max-width: 880px;
}

/* ３つのトピックス */
div#mainContents div.topicsBox{
	margin-left: 33px;
	margin-bottom: 60px;
    max-width: 265px; /* 最大幅を設定 */
    margin-bottom: 60px; /* 下部の余白 */
    width: 100%; /* 親要素に対して100%の幅 */
}

div#mainContents div.firstItem{
	margin-left: 0;
}

div#mainContents div.topicsBox strong{
	margin-bottom: 15px;
	font-weight: bold;
	display: block;
	font-size: 14px;
}

div#mainContents div.topicsBox span{
	line-height: 1.8;
	display: block;
	text-align: left;
	margin-bottom: 8px;
}


/* 新着情報 */
div#newTopics{
	float: left;
}

	div#newTopics strong{
		font-weight: bold;
		font-size: 13px;
		margin-bottom: 8px;
		display: block;
		font-size: 14px;
	}

	div#newTopics dl{
		width: 265px;
	max-width: 100%;
	}

	div#newTopics dl dt,
	div#newTopics dl dd{
		padding: 10px 0;
		border-bottom: 1px solid #ddd;
	}

	div#newTopics dl dt{
		float:left;
		width:75px;
		clear:both;
		color: #c00;
		background: url(https://koudai.right-road.net/index/img/bg_boder.gif) repeat 0 0 ;
	}

	div#newTopics dl dd{
		width:165px;
		margin-left:75px;
		padding-left: 20px;
	}


/* 会社概要 */
div#outlineBox{
	margin-left: 33px;
	float: left;
}

	div#outlineBox strong{
		font-weight: bold;
		font-size: 13px;
		margin-bottom: 8px;
		display: block;
		font-size: 14px;
	}

	div#outlineBox dl{
		width: 265px;
	max-width: 100%;
	}

	div#outlineBox dl dt,
	div#outlineBox dl dd{
		padding-top: 10px;
	}

	div#outlineBox dl dt{
		float:left;
		width:55px;
		clear:both;
		font-weight: bold;
	}

	div#outlineBox dl dd{
		width:180px;
		margin-left:55px;
		padding-left: 20px;
		color: #666;
	}

div#bannerBox{
	float: left;
	margin-left: 33px;
}
div#bannerBox ul{}
div#bannerBox ul li{
	display: block;
	margin-bottom: 10px;
}

@media screen and (max-width: 600px) {
    /* モバイルデバイス用のスタイル */
    div#header, div#mainImgBox, div#mainImgBox2, div#photoContents, div#mainContents {
        width: 100%;
        max-width: none; /* 最大幅の制限を解除 */
        padding: 3px; /* パディングの調整 */
    }

    /* フロートレイアウトの解除 */
    div#newTopics, div#outlineBox, div#bannerBox {
        float: none;
        width: 100%;
    }

    /* dl要素のスタイル調整 */
    div#newTopics dl dt, div#newTopics dl dd, div#outlineBox dl dt, div#outlineBox dl dd {
        float: none;
        width: auto;
        margin-left: 0;
        padding-left: 0;
    }

    /* その他モバイル向けのスタイル調整 */


div#mainImgBox, div#mainImgBox2 {
    background-size: cover; /* 背景画像をカバーするように調整 */
    background-position: center; /* 中央に配置 */
}

}