@charset "UTF-8";
/*
	CSS Document
	stylePage.css 独立ページまとめて
*/

body {
    background: #fff;
    color: #181818;
}
.main_header.menuOpen{
	background: #fff;
    color: #181818;
}
.pageNavArea{
	background: #fff;
    color: #181818;
}
.pageNav {
	border-top: 1px solid #181818;
}
.pageNav2 {
    border-top: 1px solid #181818;
}
a{ color: #000;}
.navBtn span{
	background: #000;
}
.navBtn span:before, .navBtn span:after {
    background: #000;
}
.blackParts{
	display: none;
}
.whoiteParts{
	display: block;
}


.main_contents div .inner {
    max-width: 1100px;
    margin: 0 auto;
	padding: 0;
}

.main_contents div .inner > h1{
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 40px;
    font-weight: 400;
}


.back_issue .inner >  h1 {
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 40px;
    font-weight: 400;
}

.back_issue {
    padding: 20px 2.07% 20px;
    box-sizing: border-box;
}

.back_issue_inner{
    display: flex;
    flex-wrap: wrap;
}

.back_issue article {
    width: 50%;
    margin: 0 0 8%;
	padding: 0 2.07%;
	box-sizing: border-box;
	display: inline-block;
    vertical-align: top;
}
.back_issue article h1{
	color: #000;
	text-align: center;
	line-height: 1.3;
}
/*.back_issue article h1 span{
	display: block;
}*/

@media only screen and (min-width: 480px){
	.back_issue article {
		width: 33.3%;
		margin: 0 0 6%;
	}
}
@media only screen and (min-width: 769px){
	.back_issue article {
		width: 20%;
		padding: 0 1.2%;
		margin: 0 0 3%;
	}	
}
@media only screen and (min-width: 1024px){
	.main_header:hover {
		background: #fff;
	}
}



.about, .company, .info, .contact,
.works, .locator, .featuredartists {
    padding: 20px 20px 20px;
    box-sizing: border-box;
}
.visial_box {
    padding: 0px 20px 20px;
    box-sizing: border-box;
}
.about p {
    max-width: 800px;
    margin: 0 auto 30px;
    text-align: center;
    font-size: 16px;
}

.contact p {
    font-size: 16px;
}

.contact h1,
.info h1,
.works h1 {
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 40px;
    font-weight: 400;
}

@media only screen and (min-width: 769px){
	.company, .info, .contact, .works{
		max-width: 840px;
		margin: 0 auto;
	}
}




/*//////locator///////*/



.locator_list{ font-size: 16px; padding: 0 0px; margin-top: 0px;}
.locator_list > ul{border-top: 1px solid #aaa; }
.locator_list > ul > li{ text-decoration: none; display: block; border-bottom: 1px solid #aaa;}

.locator_list_btn{  padding: 12px 8px; position: relative; cursor: pointer; transition: 0.2s; text-align: center;}
.locator_list_btn:hover{ background: #efefef; }
.locator_list_btn.active:hover{ background: none; }

.locator_list_btn:after,
.locator_list_btn:before{ content: ""; display: block; height: 1px; width: 16px; background: #aaa; position: absolute; top: 25px; right: 10px; }
.locator_list_btn:after{ transform: rotate(-90deg); transition: 0.2s;}
.locator_list_btn.active:after{ transform: rotate(0deg);}
.locator_list > ul > li{}

.locator_listinner_area{ margin-top: 0px; font-size: 14px; transition: 0.3s; height: 0; display: block; overflow: hidden; }
.locator_list_btn.active + .locator_listinner_area{ margin-top: 0px; height: auto; display: block;}
.locator_listinner_area nav ul li{  display: inline-block; padding: 3px 6px 1px; border-right: 1px solid #000; line-height: 1; vertical-align: middle; padding-top: 1px; color: #666;}
.locator_listinner_area nav ul li.active{ color: #000; }
.area_btn{ cursor: pointer; }

.area_tub{ margin-top: 12px; display: none; border-bottom: 2px solid #aaa;}
.area_tub.active{ display: block;}

.shopname,
.shopadd,
.shoptel{ display: inline-block; font-size: 12px; padding: 16px 8px; box-sizing: border-box; vertical-align: middle; line-height: 1.4;}

.locator_detail th.shopname{ font-weight: bold;}
.shopname{ width: 100%; padding: 14px 8px 0;  font-size: 14px; font-weight: bold;}
.shopname a{ font-weight: bold;}
.shopadd{ width: 70%; }
.shoptel{ width: 30%; padding: 14px 2px;}

.locator_detail{ width: 100%; }

.locator_detail th{ font-weight: 100; }
.locator_detail tr{ /*border-bottom: 1px solid #aaa;*/}
.locator_detail tr:last-child{ border: none; }
.locator_detail tr:nth-child(2n){ background: #efefef; }


@media only screen and (max-width:768px){
	@media only screen and (orientation:landscape) {
		.shopname{ width: 30%; }
		.shopadd{ width: 50%; }
		.shoptel{ width: 20%; }
	}
}


@media only screen and (min-width:769px){
	.shopname,
	.shopadd,
	.shoptel{ display: inline-block; font-size: 12px; padding: 16px 12px; box-sizing: border-box; vertical-align: middle; line-height: 1.4;}

	.shopname{ width: 30%; }
	.shopadd{ width: 50%; }
	.shoptel{ width: 20%; }
}


.shopmap{
  text-align: center;
}

.shopmap a{
  display: inline-block;
  background: #000;
  color: #fff;
  text-decoration: none;
  padding: 0.25em 1em;
  font-size: 11px;
}
.contentsSection{
  margin-top: 5em;
}
@media only screen and (min-width:769px){
  .contentsSection{
    margin-top: 12em;
  }
}