@charset "utf-8";
/* ネットショップなんかんとは css */
/* 共通 */
.line { 
	display: block;
	margin: 2rem 0;
}
#about_wrap .ttl_wrap { width: 100%; }
#about_wrap #block-2 .ttl_wrap { 
	margin-bottom: 7.038%;
	padding: 0 !important;
}

#about_wrap .ttl_wrap h3 {
	background: url(../img/about/bg-ye.png) repeat;
	padding: 10px !important;
}
#about_wrap .ttl_wrap span { background: url(../img/about/bg-gra.png) repeat-y; }
#about_wrap #block-1 .img_wrap, #about_wrap #block-3 .inner .img_wrap { text-align: right; }

/* 1ブロック */
#about_wrap #block-1 { position: relative; }
#about_wrap #block-1 .img_wrap img {
	    width: 85.286%;
    max-width: 1023px;
}
#about_wrap #block-1 .copy p img {
	height: 100%;
	width: auto;
}

/* うまかもん */
#about_wrap #block-2 .img_wrap img {
	width: 48.98%;
	max-width: 587px;
}

/* よかもん */
#about_wrap #block-3 .inner .img_wrap img {
	width: 48.98%;
	max-width: 587px;
}
#about_wrap #block-3 { position: relative; }	

/* ネットショップなんかんの想い */
#about_wrap #block-4 .img_wrap img {
    width: 48.98%;
    max-width: 587px;
}
#about_wrap #block-4 .ttl_wrap { margin-bottom: 3.754%; }

/* 南関町とは */
#about_wrap .img19_wrap { 
	margin-top: 3rem;
	width: 100%;
}
#about_wrap .img19_wrap img {
	width: 100%;
	height: auto;
}
#about_wrap #block-5 .img-list {
	width: 100%;
	height: auto;
}

@media screen and (min-width: 1000px) {
	/* よかもん */
	#about_wrap #block-3 { padding-bottom: 21.43%; }	

	/* ネットショップなんかんの想い */
	#about_wrap #block-4 .img-list {
		margin-top: 4.083%;
		padding-bottom: 33.266%;
	}
	#about_wrap #block-4 .img10_wrap { bottom: 36.658%; }
	
	/* 南関町とは */
	#about_wrap #block-5 { background-size: 62.567% auto !important; }
	#about_wrap #block-5 .p-block p { margin: 6.024% 13.794% 0 10px !important; }
	#about_wrap .img17_wrap { right: 17.654%; }
}

@media screen and (max-width: 999px) {
	#about_wrap #block-2 .ttl_wrap { 
		margin-bottom: 1rem;
		padding: 0 !important;
	}
	
	/* よかもん */
	#about_wrap #block-3 .p-block p { margin-top: 1rem; }
	
	/* ネットショップなんかんの想い */
	#about_wrap #block-4 .ttl_wrap { margin-bottom: 1rem; }
	#about_wrap #block-4 .p-block { top: 0 !important; }		
	#about_wrap #block-4 .img10_wrap { top: 43%; }
	
	/* 南関町とは */
	#about_wrap #block-5 { background-size: 70% !important; }
}

@media screen and (min-width: 481px) {
	/* 共通 */
	#about_wrap .he-center {
		position: absolute;
		top: 50%;
		-webkit-transform: translatYe(-50%); /* Safari用 */
		transform: translateY(-50%);
	}
	#about_wrap #block-2 .inner, #about_wrap #block-3 .inner, #about_wrap #block-4 .inner, #about_wrap #block-5 .inner { position: relative; }
	#about_wrap .ttl_wrap span { width: 80px; }	
	
	/* 1ブロック */		
	#about_wrap #block-1 .copy p {
		height: 5.3rem;
		margin-top: 0.7rem;
	}
	#about_wrap #block-1 .copy p:first-of-type { margin-top: 0; }	
	
	/* うまかもん */
	#about_wrap #block-2 .p-block { 
		right: 0;
		width: 55.103%;
	}
	#about_wrap #block-2 .p-block p { margin-left: 11.112%; }
	#about_wrap #block-2 .table {
		padding: 2rem 10px 0 10px;
		width: 100%;
	}
	#about_wrap #block-2 .table .td { 
		padding: 0 10px;
		vertical-align: middle;
	}
	#about_wrap #block-2 .table .td img { width: 100%; }
	
	/* よかもん */
	#about_wrap #block-3 .img-list {
		position: absolute;
		padding-bottom: 32.347%;
		width: 100%;
		margin-top: 21.837%;
	}
	#about_wrap #block-3 .img7_wrap {
		top: 0;
		width: 33.368%;
		max-width: 400px;
	}
	#about_wrap #block-3 .img8_wrap {
		bottom: 0;
		left: 50%;
		width: 29.286%;
		-webkit-transform: translatX(-50%);
		transform: translateX(-50%);
	}
	#about_wrap #block-3 .img7_wrap img,
	#about_wrap #block-3 .img8_wrap img {
		width: 100% !important;
		height: auto;
	}
	#about_wrap #block-3 .p-block { 
		left: 0;
		width: 59.184%;
		position: absolute;
		top: 6.215%;
	}	
	#about_wrap #block-3 .p-block p { margin: 3.515% 16.38% 0 10px; }

	
	/* ネットショップなんかんの想い */
	#about_wrap #block-4 {
		position: relative;
	}		
	#about_wrap #block-4 .p-block { 
		right: 0;
		position: absolute;
		width: 55.103%;
		top: 6.215%;
	}
	#about_wrap #block-4 .p-block p { margin-left: 11.112%; }	
	#about_wrap #block-4 .img-list .img_wrap { 
		position: absolute;
		width: 26.531%;
	}
	#about_wrap #block-4 .img-list .img_wrap img {
		width: 100%;
		height: auto;		
	}
	#about_wrap #block-4 .img-list .img11_wrap { z-index: 5; }
	#about_wrap #block-4 .img-list .img12_wrap { bottom: 6.25%; left: 17.347%; z-index: 4; }
	#about_wrap #block-4 .img-list .img13_wrap {
		left: 50%;
		-webkit-transform: translatX(-50%);
		transform: translateX(-50%);
		z-index: 3;
	}
	#about_wrap #block-4 .img-list .img14_wrap { bottom: 0; right: 18.368%; z-index: 2; }
	#about_wrap #block-4 .img-list .img15_wrap { 
		right: 0; bottom: 26.25%;
		width: 20.613%;
		z-index: 1;
	}
	#about_wrap #block-4 .img10_wrap img {
		width: 100%;
		height: auto;
	}
	#about_wrap #block-4 .img10_wrap {
		position: absolute;
		right: 0;
		width: 29.286%;
	}
	#about_wrap #block-4 .img-list {
		position: relative;
		height: 0;
	}
	
	/* 南関町とは */
	#about_wrap #block-5 {
		background: url(../img/about/map.png) no-repeat top 2rem right;
		position: relative;
	}
	#about_wrap #block-5 .p-block {
		left: 0;
		width: 59.184%;
		position: absolute;
		top: 0;
	}
	#about_wrap .img-list li { position: absolute; }
	#about_wrap .img-list img {
		width: 100%;
		height: auto;
	}
	#about_wrap .img16_wrap {
		width: 48.98%;
		left: 0;
		bottom: 4.4%;
	}
	#about_wrap .img17_wrap {
		width: 29.286%;
		bottom: 32%; 
	}
	#about_wrap .img18_wrap {
		width: 33.368%;
		right: 0;
		bottom: 0;
	}	
	#about_wrap #block-5 .p-block p { margin: 1rem 13.794% 0 10px; }	
	#about_wrap #block-5 .img-list {
		position: relative;
		height: 0;
		padding-top: 30.205%;
		padding-bottom: 46.327%;
	}
}

@media screen and (max-width: 999px) and (min-width: 481px) {
	/* 共通 */
	#about_wrap .sp { display: none; }
	
	/* よかもん */
	#about_wrap #block-3 .img-list { margin-top: 25.837%; }
	#about_wrap #block-3 { padding-bottom: 26.43%; }

	/* なんかんの想い */
	#about_wrap #block-4 .img-list {
		margin-top: 13.083%;
		padding-bottom: 29.266%;
	}

	/* 南関町とは */
	#about_wrap #block-5 .img-list { padding-bottom: 62.327% ; }	
	#about_wrap .img17_wrap { right: 15.654%; }
}

@media screen and (max-width: 480px) {
	/* 共通 */
	.td.img_wrap { display: inline-block; }
	.pad { display: none; }
	
	/* 1ブロック */
	#about_wrap #block-1 .img_wrap img { width: 100%; }
	#about_wrap #block-1 .copy {
		position: absolute;
		top: 50%;
		-webkit-transform: translatYe(-50%);
		transform: translateY(-50%);
	}
	#about_wrap #block-1 .copy p { height: 3rem; }
	#about_wrap #block-1 .copy p img {
		width: auto;
		height: 100%;
	}
	
	/* うまかもん */
	#about_wrap #block-2 ul {
		clear: both;
		overflow: hidden;
	}
	#about_wrap #block-2 ul li{
		width: 50%;
		float: left;
		margin-top: 1rem;
	}
	#about_wrap #block-2 ul li:nth-of-type(odd) { padding-right: 5px; }
	#about_wrap #block-2 ul li:nth-of-type(even) { padding-left: 5px; }
	#about_wrap #block-2 ul li img {
		width: 100% !important;
		height: auto;
	}
	
	/* よかもん */
	#about_wrap #block-3 ul { 
		margin-bottom: 1rem;
		clear: both;
		overflow: hidden;
	}
	#about_wrap #block-3 ul li{
		width: 50%;
		float: left;
		margin-top: 1rem;
	}
	#about_wrap #block-3 ul li:nth-of-type(odd) { padding-right: 5px; }
	#about_wrap #block-3 ul li:nth-of-type(even) { padding-left: 5px; }
	#about_wrap #block-3 .inner .img_wrap img {
		width: 100% !important;
		height: auto;
	}
	#about_wrap #block-3 .img6_wrap { margin-top: 1rem; }
	
	/* ネットショップなんかんの想い */
	#about_wrap #block-4 .img9_wrap {
		width: 100%;
		margin: 1rem 0 0;
	}
	#about_wrap #block-4 .img_wrap img { width: 100% !important; }
	#about_wrap #block-4 ul { 
		margin-bottom: 1rem;
		clear: both;
		overflow: hidden;
	}
	#about_wrap #block-4 ul li{
		width: 50%;
		float: left;
		margin-top: 1rem;
	}
	#about_wrap #block-4 ul li:nth-of-type(odd) { padding-right: 5px; }
	#about_wrap #block-4 ul li:nth-of-type(even) { padding-left: 5px; }
	
	/* 南関町とは */
	#about_wrap #block-5 .p-block p { margin-top: 1rem; }
	#about_wrap #block-5 .map_wrap { margin: 1rem 0; }
	#about_wrap #block-5 .map_wrap,
	#about_wrap #block-5 .map_wrap img,
	#about_wrap #block-5 .img_wrap img{
		width: 100%;
		height: auto;
	}
	#about_wrap #block-5 .img16_wrap {
		width: 100%;
	}
	#about_wrap #block-5 .img17_wrap,
	#about_wrap #block-5 .img18_wrap{
		width: 50%;
		float: left;
		margin: 1rem 0;
	}
	#about_wrap #block-5 .img17_wrap { padding-right: 5px; }
	#about_wrap #block-5 .img18_wrap { padding-left: 5px; }
}