body{
	background:url(../img/bg-mainbg.jpg);
}


#header-bg{
	background:url(../img/header-bg.png) repeat-x;
	position: fixed;
	width:100%;
	z-index:999;
}


#header{
	width:100%;
	max-width:960px;
	margin:0 auto;
	padding:10px 0;
	box-sizing:border-box;
}
#header-left{
	width:291px;
	float:left;
}
#header-right{
	width:371px;
	float:right;
}


#menu-bg{
    width:100%;
    background:#f5f5f5;
    border-bottom:2px solid #d80000;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

.contents-bgstart{
	background:url(../img/slide-bg.png) no-repeat left 200px;
	width:100%;
	max-width:960px;
	margin:0 auto;
	padding-top:200px;
	box-sizing:border-box;
}

.contents-bg{
	background:url(../img/slide-bg.png) no-repeat left 170px;
	width:100%;
	max-width:960px;
	margin:0 auto;
	padding-top:170px;
	box-sizing:border-box;
}

.contents-inbox{
	width:100%;
	max-width:680px;
	margin:0 auto;
	box-sizing:border-box;
	padding:0 16px;
	overflow-x:hidden;
}
.contents-inbox-in{
	width:100%;
	max-width:660px;
	margin:0 auto;
	box-sizing:border-box;
	padding:0 8px;
	overflow-x:hidden;
}
.contents-inbox-in2{
	width:100%;
	max-width:610px;
	margin:0 auto;
	box-sizing:border-box;
	padding:0 4px;
	overflow-x:hidden;
}

.content-header {
	padding: 1em;
    background-clip: border-box;
    background-color: #eee;
    border-left-style: solid;
    border-left-color: #c10000;
    border-left-width: thick;
    box-shadow: 0 0 1px 1px #00000017;
    color: #333;
}



.contact{
	background:url(../img/contact-bg.png);
	width:100%;
	max-width:650px;
	margin:0 auto;
	border:1px solid #FFF;
	padding:25px 0 25px 0;
}
.contact-left{
	width:330px;
	float:left;
	margin-left:25px;
}

.contact-info{
	display:flex;
	flex-direction:column;
	gap:15px;
}

.contact-item{
	display:flex;
	align-items:flex-start;
	gap:12px;
	padding:10px;
	background:#fff;
	border-radius:8px;
	box-shadow:0 2px 4px rgba(0,0,0,0.1);
	transition:box-shadow 0.3s ease;
}

.contact-item:hover{
	box-shadow:0 4px 8px rgba(0,0,0,0.15);
}

.contact-icon{
	width:40px;
	height:40px;
	min-width:40px;
	fill:#d80000;
	flex-shrink:0;
}

.contact-text{
	flex:1;
	display:flex;
	flex-direction:column;
	gap:4px;
}

.contact-label{
	font-size:12px;
	color:#666;
	font-weight:bold;
}

.contact-link{
	color:#333;
	text-decoration:none;
	font-size:16px;
	font-weight:bold;
	transition:color 0.3s ease;
}

.contact-link:hover{
	color:#d80000;
}

.contact-number{
	color:#333;
	font-size:16px;
	font-weight:bold;
}

.contact-note{
	margin-top:10px;
	padding:10px;
	background:#fff8e1;
	border-left:4px solid #ffb300;
	font-size:13px;
	color:#666;
	line-height:1.6;
}

.contact-right{
	width:250px;
	float:right;
	margin-right:25px;
	border:1px solid #FFF;
}


.contact-right.clearfix.map iframe {
    width: 100%;
    height: 170px;
}


.photo-bg01{
	width:212px;
	background:none; /* remove frame background for simpler style */
	float:left;
}
.photo-bg01 img{
	margin:0; /* reset margin to remove left blank space */
}
.photo-bg02{
	width:212px;
	background:none; /* remove frame background */
	float:left;
}
.photo-bg02 img{
	padding:0; /* reset padding */
}
.photo-bg03{
	width:398px;
	background:none; /* remove frame background */
	float:left;
}
.photo-bg03 iframe{
	padding:0; /* reset padding */
}


/*ichigogari*/


#gari-left{
	width:185px;
	float:left;
}
#gari-right{
	width:455px;
	float:right;
}

.gari-price-left{
	width:111px;
	float:left;
}
.gari-price-right{
	width:480px;
	float:right;
}

.gari-price-right table{
	width:480px;
	border:1px solid #CCC;
	border-collapse:collapse;
}
.gari-price-right table th{
	width:25%;
	padding:7px 0 7px 0;
	border:1px dotted #CCC;
	border-bottom:1px solid #ccc;
	background:#EFEFEF;
}
.gari-price-right table td{
	padding:7px 0 7px 0;
	border:1px dotted #CCC;
	border-bottom:1px solid #ccc;
	text-align:center;
}




/*sell*/


.sell-photo01{
	width:286px;
	float:left;
}
.sell-photo02{
	width:286px;
	float:right;
}
.sell-photo01 img,.sell-photo02 img{
	border:1px solid #CCC;
	padding:2px;
}

.sell-table{
    width:100%;
    border:1px solid #CCC;
    border-collapse:collapse;
}
.sell-table th{
	width:80px;
	padding:7px 0 7px 0;
	border:1px solid #CCC;
}
.sell-table td{
	padding:7px 0 7px 0;
	text-align:center;
	background:#fefefe;
	border:1px solid #CCC;
}


/*map*/

#mapCanvas {
	height: 300px;
	width: 100%;
	border:1px solid #CCC;
}




/*footer*/

#footer{
	background:url(../img/footer-line.png) repeat-x top left;
	width:100%;
	padding:30px 0 30px 0;
	margin-top:30px;
}

#footer-in{
		width:100%;
		max-width:960px;
		margin:0 auto;
		font-size:75%;
		color:#666;
		box-sizing:border-box;
		padding:0 16px;
}

/* 画像はコンテナ幅に合わせて縮小 */
img{max-width:100%;height:auto;display:block;}

/* テーブル横スクロールラッパ */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:15px;}

/* テーブルのスマホ対応 */
@media (max-width:560px){
	table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
	.sell-table,.gari-price-right table{font-size:0.85em;}
	#kome-table{font-size:0.8em;}
}

/* メニューを小画面で縦積みテキスト化 */
@media (max-width:780px){
	#mainmenu ul{justify-content:stretch;}
	#mainmenu li{flex:1 1 calc(50% - 8px);min-width:140px;}
	#mainmenu a{margin:6px 4px;padding:14px 8px;font-size:0.9rem;}
	#menu-bg{border-bottom-width:1px;}
	#header-bg{position:static;} /* fixed解除 */
	.contents-bgstart,.contents-bg{padding-top:60px;background:none;}
}

@media (max-width:560px){
	#mainmenu li{flex:1 1 100%;min-width:100%;}
	#mainmenu a{margin:4px 8px;padding:12px 8px;}
	.photo-bg01,.photo-bg02,.photo-bg03,#gari-left,#gari-right,.sell-photo01,.sell-photo02,#footer-left,#footer-right{float:none;width:100% !important;text-align:center;}
	.photo-bg01 img,.photo-bg02 img,.photo-bg03 img{width:100%;height:auto;}
	.gari-price-right table{width:100%;}
	.gari-price-left,.gari-price-right{float:none !important;width:100% !important;max-width:100% !important;margin:0 auto 15px !important;}
	.gari-price-left img{max-width:150px;margin:0 auto;}
	.contact{width:100%;padding:15px;}
	#header-right{width:100%;float:none;text-align:center;}
	#header-left{float:none;text-align:center;width:100%;}
	.contact-left,.contact-right{float:none;width:100%;margin:0 0 15px 0;}
	.contents-bgstart,.contents-bg{padding-top:40px;}
	.contents-inbox,.contents-inbox-in,.contents-inbox-in2{padding:0 12px;}
	table{font-size:0.9em;}
	.flex-gallery > div > p{width:100%;flex:1 1 100%;}
}
#footer-left{
	width:350px;
	float:left;
}
#footer-right{
	width:450px;
	float:right;
	text-align:right;
}



/*contact*/

#contact-table{
	width:100%;
	border-collapse: collapse;
	margin-bottom:15px;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
}
#contact-table th{
	width:200px;
	border-collapse: collapse;
	padding:7px 0 7px 0;
	border-bottom:1px dotted #CCC;
}
#contact-table td{
	width:410px;
	border-collapse: collapse;
	padding:7px 0 7px 0;
	border-bottom:1px dotted #CCC;
}



/*kome*/


#kome-table{
	width:100%;
	border-collapse:collapse;
	border:1px solid #ccc;
	margin-bottom:20px;
}
#kome-table th{
	width:150px;
	border-collapse:collapse;
	border:1px solid #ccc;
	padding:5px;
}
#kome-table th.title{
	width:255px;
}
#kome-table th.sub{
	background:#E6E6E6;
}
#kome-table th.tsuru{
	background:#F90;
	border:2px solid #F00;
}
#kome-table td{
	border-collapse:collapse;
	border:1px solid #ccc;
	padding:5px;
	text-align:center;
}
#kome-table td.tsuru{
	font-weight:bold;
	border:2px solid #F00;
}

#kome-info{
	margin:0 0 10px 20px;
}
#kome-info li{
	margin-bottom:5px;
}

#kome-price01{
	width:100%;
	border-collapse:collapse;
	border:1px solid #ccc;
}
#kome-price01 th{
	border-collapse:collapse;
	border:1px solid #ccc;
	padding:5px;
	background:#E6E6E6;
}
#kome-price01 td{
	border-collapse:collapse;
	border:1px solid #ccc;
	padding:5px;
	text-align:center;
}

/* ==== Responsive gallery flex layout ==== */
.flex-gallery{
	display:flex;
	flex-wrap:wrap;
	gap:16px;
	justify-content:center;
}
.flex-gallery > div{
	flex:0 1 180px;
	margin:0;
}
.flex-gallery iframe{flex:0 1 380px;}
.flex-gallery img{width:100%;height:auto;display:block;}
.flex-gallery .photo-bg01,.flex-gallery .photo-bg02,.flex-gallery .photo-bg03,
.flex-gallery .sell-photo01,.flex-gallery .sell-photo02{float:none;width:auto !important;padding:0;background:none;}
/* two-column sections converted from floats */
.flex-row{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	gap:24px;
}
.flex-row > #gari-left,
.flex-row > #gari-right,
.flex-row > .gari-price-left,
.flex-row > .gari-price-right,
.flex-row > .contact-left,
.flex-row > .contact-right{
	float:none !important;
	margin:0 !important;
	flex:1 1 280px;
}
.flex-row > #gari-left img{width:100%;height:auto;}
@media (min-width:781px){
	.flex-row > #gari-left{max-width:185px;flex:0 0 185px;}
	.flex-row > #gari-right{flex:1 1 420px;}
	.flex-row > .gari-price-left{max-width:111px;flex:0 0 111px;}
	.flex-row > .gari-price-right{flex:1 1 480px;}
	.flex-row > .contact-left{max-width:320px;flex:0 0 330px;}
	.flex-row > .contact-right{max-width:250px;flex:0 0 250px;}
	
	/* PC画面での連絡先表示 */
	.contact{box-sizing: border-box; padding:15px;}
	.contact-icon{width:36px;height:36px;min-width:36px;}
	.contact-label{font-size:11px;}
	.contact-link,.contact-number{font-size:15px;}
}
@media (max-width:560px){
	.flex-row{gap:16px;}
	.flex-row > *{flex:1 1 100%;text-align:center;}
	.flex-row > #gari-left{max-width:100%;}
	.flex-row > #gari-left img{max-width:200px;margin:0 auto;}
	.flex-row > .gari-price-left{max-width:100%;text-align:center;}
	.flex-row > .gari-price-left img{max-width:150px;margin:0 auto;}
	.flex-row > .contact-left,.flex-row > .contact-right{max-width:100%;margin:0 0 15px 0 !important;}
	
	/* スマホ画面での連絡先最適化 */
	.contact{box-sizing: border-box; padding:15px;}
	.contact-title{margin-bottom:15px;}
	.contact-icon{width:32px;height:32px;min-width:32px;}
	.contact-item{gap:10px;padding:8px;}
	.contact-label{font-size:10px;}
	.contact-link,.contact-number{font-size:14px;}
	.contact-note{font-size:12px;padding:8px;}
	.contact-right.clearfix.map iframe{height:200px;}
}
@media (min-width:781px){
	.flex-gallery img{padding:4px;background:#fff;box-shadow:0 0 4px rgba(0,0,0,.1);border-radius:4px;}
}
@media (max-width:560px){
	.flex-gallery{gap:12px;}
	.flex-gallery > div{flex:0 1 calc(50% - 12px);}
	.flex-gallery iframe{flex:1 1 100%;}
}
