@charset "UTF-8";
/*##########################################
#900px -site-top
###########################################*/
@media (max-width:900px) {


/*site-top*/
#pg_site-top #doc {
    background: rgba(0, 0, 0, 0) url("../img/bg_top.jpg") no-repeat scroll 70% 0;
}
#pg_site-top #pagehead {
	width:100%;
	text-align:center;
	left:auto;
	position:static;
}
#pg_site-top  #catch_copy {
	padding:0 20px;
}
#pg_site-top  #catch_copy img {
	width:100%;
	height:auto;
	max-width:500px;
}
#pg_site-top #logo {
	width:200px;
	positon:static;
	margin:0 auto 20px;
	height:auto;
}
#pg_site-top #top_main {
    height: 966px;
    margin: 0 auto;
    padding-top: 15px;
    position: relative;
    max-width: 980px;
    width:100%;
}
#sp_map_base {
	width:100%;
	max-width:500px;
	margin:20px auto;
	height:420px;
	position:relative;
	overflow:hidden;
	border:3px solid #edf5f2;
	box-sizing:border-box;
}
#sp_map {
	width:100%;
	height:420px;
	display:block;

}
#sp_map li {
	position:absolute;
}
#sp_map li:hover {
	cursor:pointer;
	opacity:0.8;
}
#sp_map li img{
	width:100%;
	height:auto;
}

/*北海道・東北*/
#spmap01 {
	top:45px;
	left:378px;
	width:109px;
}
/*関東*/
#spmap02 {
	top:241px;
	left:386px;
	width:101px;
}
/*甲信越*/
#spmap03 {
	top:195px;
	left:296px;
	width:119px;
}
/*近畿・東海*/
#spmap04 {
	top:246px;
	left:231px;
	width:152px;
}
/*中国・四国*/
#spmap05 {
	top:246px;
	left:139px;
	width:104px;
}
/*九州・沖縄*/
#spmap06 {
	top:241px;
	left:2px;
	width:137px;
}

#map_back {
	display:none;
	background-color:#fff;
	padding:10px;
	position:absolute;
	top:10px;
	left:10px;
	cursor:pointer;

}
#map_base {
	width:100%;
	display:none;
}
#pg_site-top #top_desc {
    top: auto;
    left: auto;
    padding: 25px;
    position: absolute;
    bottom:10px;
    width: 500px;
    left:50%;
	margin-left:-250px;
}
#top_bnr {
    margin: 0 auto;
    max-width: 980px;
    padding: 30px 0;
    width: 100%;
    box-sizing:border-box;
}
#top_bnr ul {
    display: block;
    justify-content: space-between;
    width: 100%;
    text-align:center;
}
#top_bnr li {
	display:inline-block;
	margin-bottom:20px;
}

}/*end*/



/*##########################################
#481px-1023px
###########################################*/
@media screen and (min-width: 481px) and (max-width: 1023px)  {


/*--------site-top--------*/

#map_base {
	margin:0 auto;
}
#pagehead {
    left: 45px;
}
#top_main {
    width:100%;
    max-width: 980px;
}



/*--------area--------*/
#logo {
	left:10px;
}
#d_content .chronology {
    display: block;
    vertical-align: top;
    width:100%;
    max-width: 500px;
    margin:0 auto;
}
#d_content .tb_keywors {
    width: 100%;
    margin-top:20px;
    display:table;
}
#d_content h1 {
	font-size:24px;
	font-weight:bold;
	text-align:center;
	padding: 10px;
	margin-bottom:20px;
}
#d_content h1 span {
	font-size:14px;
	display:block;
	float:none;
	font-weight:lighter;
}
#top_search .talk {
	font-size: 16px;
	text-align:left;
}
#top_search .talk span.sp1,
#top_search .talk span.sp2 {
	display:block;
	text-align:center;
	font-size:18px;
	font-weight:bold;
}
#top_about .box p {
    font-size: 16px;
    padding: 12px 0;
    min-height:60px;
}
#top_about .notice {
    font-size: 14px;
    margin: 30px auto 0;
    width: 80%;
}

#top_pictures h2.st1 {
	width:auto;
	display:block;
	margin:40px 0 15px;
	border-radius:0;
	box-sizing:border-box;
}

}/*end*/

/*##########################################
#-800px
###########################################*/
@media (max-width:800px) {
#logo {
    height: auto;
    left: 10px;
    top: 20px;
    width: 90px;
}
#logo img {
	width:100%;
	height:auto;
}
#headding h1 {
    color: #352233;
    font-size: 32px;
    font-weight: bold;
    line-height: 32px;
    padding-top: 30px;
    text-shadow: 0 0 3px #333;
}
#bg_book_h {
    padding-top: 80px;
}


}/*end*/

/*##########################################
#-500px
###########################################*/

@media (max-width:500px) {
#pg_site-top #logo {
	width:120px;
	margin-bottom:10px;
}
#pg_site-top #catch_copy {
    padding: 0 80px;
    margin-bottom:0;
}
#pg_site-top #top_desc {
    top: auto;
    left: auto;
    padding: 25px;
    position: absolute;
    bottom:40px;
    width: 320px;
    left:50%;
	margin-left:-160px;
}

#sp_map_base {
	height:440px;
	margin-top:15px;
	margin:15px 5px 0;
	width:auto;
}
#sp_map {
	width:320px;
	height:440px;
	margin:0 auto;
	position:relative;
}
/*北海道・東北*/
#spmap01 {

	top:45px;
	left:245px;
	width:70px;
}
/*関東*/
#spmap02 {
	top:172px;
	left:250px;
	width:69px;
}
/*甲信越*/
#spmap03 {
	top:142px;
	left:191px;
	width:78px;
}
/*近畿・東海*/
#spmap04 {
	top:176px;
	left:149px;
	width:98px;
}
/*中国・四国*/
#spmap05 {
	top:176px;
	left:90px;
	width:66px;
}
/*九州・沖縄*/
#spmap06 {
	top:171px;
	left:2px;
	width:86px;
}
}
/*##########################################
#-480px
###########################################*/
@media (max-width:480px) {

.img_rps {
	width:100%;
	height:auto;
}
.sp_block {
	display:block;
}
#container {
	width:100%;
	min-width:320px;
}

#main {
	width:auto;
	padding:40px 10px;
}
#pg_home #main {
	padding-top: 40px;
}
#content {
	width:100%;
	float:none;
}
#headding .inr {
	padding: 20px 10px 10px;
}
#headding p,
#headding p strong {
	font-size:12px;
	font-weight:lighter;
	line-height:1.4;
	color:#777;
	text-align:left;
	padding:0 15px;
}
#headding #logo p {
	padding:0;
}
#logo {
    height: auto;
    left: 10px;
    top: 10px;
    width:60px;
}
#logo img {
	width:100%;
	height:auto;
}
#headding {
    background-image: url("../img/bg_areahead.jpg");
    background-position: center -78px;
    background-repeat: repeat-x;
    border-bottom: 1px solid #b7c9e8;
    height: 60px;
    position: relative;
    text-align: center;
    width: 100%;
}
#headding .inr {
    padding: 15px 10px 0;
}
#headding h1 {
    font-size: 22px;
    line-height: 22px;
    padding-top: 0;
    text-shadow: 0 0 1px #333;
}
#pg_home #main {
    padding-top: 0px;
}
#top_search .inr {
    padding: 10px 5px;
}
#top_search #search_box {
    padding: 40px 10px;
}
#top_search {
    background-color: #333;
    box-sizing: border-box;
    height: 320px;
    text-align: center;
}
#top_about {
    margin-top: 40px;
    padding:0 15px;
}
#top_pictures h2 {
	margin-left:15px;
}
/*pagefoot*/
#pagefoot .inner {
	width:100%;
}

/*top*/
#top_search .talk {
	font-size: 12px;
	padding: 5px 10px;
	text-align:left;
}
#top_search .talk span.sp1,
#top_search .talk span.sp2 {
	display:block;
	text-align:center;
	font-size:16px;
	font-weight:bold;
}
#top_search select {
	border-radius:4px;
}
#top_search input {
	border-radius:4px;
	width: 282px;
	margin-top:15px;
}
#top_about .base_flex {
	display:block;
}
#top_about .box {
	width: 100%;
	margin-bottom:10px;
	padding:5px 0;
	background-color:#bdeaff;
}
#top_about figure {
	width:120px;
	height:100px;
	float:left;
}
#top_about .box p {
	text-align:left;
	box-sizing:border-box;
	margin:0;
	background-color:transparent;
}
#top_about .box p a {
	color:#6d9add;
}
#top_about .box:hover {
	background-color:#FFF;
}
#top_about .notice {
	width: auto;
}

.base_notein {
	padding: 60px 10px 20px 25px;
	left:-2px;
}
#top_msg {
	padding: 40px 15px 30px;
}
#top_usage {
	padding: 40px 15px 30px;
}
#top_usage .box {
	margin-top:0px;
	margin-bottom:40px;
}
.st3,
.st5 {
	font-size: 18px;
	line-height: 18px;
	padding: 12px 0;
	width: 280px;
}
.st3 span,
.st5 span {
	display:none;
}
.st4 {
	font-size:18px;
}
#top_msg .st3, #top_usage .st3 {
	margin-left: -140px;
	top: -20px;
}

a.btn_see {
	background-color: #5e95b2;
	border-radius: 4px;
	box-shadow: 0 6px 0 #457e9c;
	color: #fff;
	display: block;
	font-size: 16px;
	font-weight: bold;
	margin-left: auto;
	margin-right: auto;
	padding: 18px 0;
	text-align: center;
	text-decoration: none;
	transition: color 0.3s ease 0s, box-shadow 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
	width: 100%;
}
#top_others .box {
	display: inline-block;
	height: auto;
	margin-right: 0;
	margin-top: 25px;
	overflow: hidden;
	padding-top: 12px;
	width: auto;
}
#top_others .box figure{
	width:300px;
	height:auto;
}
#top_others .box figure img {
	width:100%;
	height:auto;	
}
#top_usage .pics figure {
	display: block;
	width:100%;
	max-width:360px;
	margin:0 auto 20px;
}
#top_usage .pics figure img {
	width:100%;
	height:auto;
}

#pagetop {
	right:10px;
	bottom:10px;
}
#pg_datail .base_notein {
	padding-top:20px;
}
#d_content {
	padding-left:15px;
	padding-right:12%;
}

#d_content h1 {
	font-size:18px;
	font-weight:bold;
	text-align:center;
	padding: 10px;
	margin-bottom:20px;
}

#d_content h1 span {
	font-size:14px;
	display:block;
	float:none;
	font-weight:lighter;
}
#d_content .chronology {
	display: block;
	width: 100%;
	max-width:700px;
	margin-bottom:20px;
}
#d_content .tb_keywors {
	border: 3px solid #362006;
	display: block;
	width: 100%;
	max-width:500px;
	margin: 0 auto;
}
#d_content .tb_keywors th{
	width:140px;
}
.cboxPhoto {
	max-width:600px;
}
.year_list {
	padding: 40px 30px 30px 20px;
}
#pg_list .year_list h1  {
	margin-bottom: 20px;
}
#pg_list .base_notein {
	padding-top:20px;
}
#pg_list .area_back_top {
	text-align:center;
}
.birth_year_label span {
	font-size:14px;
}
#d_content .tb_keywors thead th {
    width: 125px;
}
#d_content .tb_keywors tbody th {
    width: 125px;
}
.year_list .dot {
	display:none;
}
.year_list .age {
	display:block;
	font-size:16px;
	color:#333;
}






/*list*/
#bg_book_h {
    background: rgba(0, 0, 0, 0) url("../img/bg_book_h_sp.png") no-repeat scroll -128px 0;
    padding-top: 43px;
}
#bg_book_b {
    background: rgba(0, 0, 0, 0) url("../img/bg_book_b_sp.png") repeat-y scroll -128px 0;
}
#top_pictures h2.st1 {
	width:auto;
	display:block;
	margin:40px 0 15px;
	border-radius:0;
	box-sizing:border-box;
}




}/*-end*/

/*
* {
	border:1px solid #0000ff !important;
}
*/


/*##########################################
#-300px
###########################################*/
@media (max-width:300px) {

#top_search select {
    width: 240px;
}

}/*-end*/