@charset "UTF-8";
/* CSS Document */

@media screen and (min-width: 768px){
/* メディアクエリー */

/***************************************************************************


PRODUCTS


***************************************************************************/

/***************************************************************************
PRODUCTS　>　HARMONICAS
***************************************************************************/

#harmonicas,
#con_harmonicas{
    width: 1200px;
    margin: 78px auto 120px;
}
#harmonicas ul li,
#con_harmonicas ul li{
    width: 570px;
    display: inline-block;
    margin: 0 56px 70px 0;
    vertical-align: top;
}
#harmonicas ul li:nth-child(2n),
#con_harmonicas ul li:nth-child(2n){
    margin: 0;
}
#harmonicas ul li .img,
#con_harmonicas ul li .img{
    width: 570px;
    height: 300px;
    margin: 0 0 25px;
    overflow: hidden;
    text-align: center;
}
#harmonicas ul li .img img,
#con_harmonicas ul li .img img{
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
#harmonicas ul li a:hover img,
#con_harmonicas ul li a:hover img{
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
#harmonicas ul li a:hover,
#con_harmonicas ul li a:hover{
    color:#858180;
}
#harmonicas ul li .title,
#con_harmonicas ul li .title{
    font-size: 30px;
    text-align: center;
    margin: 0 0 15px;
}
#harmonicas ul li .txt,
#con_harmonicas ul li .txt{
    font-size: 14px;
    width: 470px;
    margin: 0 auto;
}

/*----- nav -----*/

.ph_nav1 ul,
.ph_nav2 ul,
.ph_nav3 ul{
    width: 520px;
}

/*
.ph_nav1 ul li:first-child a,
.ph_nav2 ul li:nth-child(2) a,
.ph_nav3 ul li:nth-child(3) a{
    color: #ffb400;
}
*/

.ph1{
    top:41px;
    left: 41px;
}
.ph2{
    top:41px;
    left: 164px;
}
.ph3{
    top:41px;
    right: 150px;
}

/***************************************************************************
PRODUCTS　>　HARMONICAS　>　CONTENTS
***************************************************************************/

/*----- nav -----*/
.ph_con_nav1 ul,
.ph_con_nav2 ul,
.ph_con_nav3 ul,
.ph_con_nav4 ul,
.ph_con_nav5 ul,
.ph_con_nav6 ul{
    width: 630px;
}

.selected_category a{
    color: #ffb400;
}
.phcon1{
    top:41px;
    left: 21px;
}
.phcon2{
    top:41px;
    left: 121px;
}
.phcon3{
    top:41px;
    left: 224px;
}

.phcon4{
    top:41px;
    right: 290px;
}
.phcon5{
    top:41px;
    right: 190px;
}
.phcon6{
    top:41px;
    right: 81px;
}

/***************************************************************************
PRODUCTS　>　HARMONICAS　>　CONTENTS・・・single
***************************************************************************/

/*----- slider -----*/

#pr_single{
    word-wrap: break-word;
}
/*
#pr_single .prSlider{
    background: #000;
}
*/
#pr_single .slid_inner2 {
    overflow:hidden;
    position:relative;
    max-width: 1200px;
    min-width: 1024px;
	padding: 0 0 0;
    margin: 0 auto;
}
#pr_single .slid_inner li{
	text-align: center;
}
#pr_single .slid_inner li img{
    display: inline;
}

#pr_single .prSlider .midashi{
    position: absolute;
    top:0;
    left:20px;
    z-index: 2;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    width: 100%;
	padding:0 20px;
	box-sizing: border-box;
}
#pr_single .prSlider h2{
    font-size: 40px;
    margin:40px 0 0;
}
#pr_single .prSlider .txt{
    font-size: 14px;
    display: block;
    margin: 10px 0 0;
}
#pr_single .prSlider .txt p{
    margin: 0 0 1.6em;
}
#pr_single .pr_white{
    color: #fff;
}
#pr_single .pr_black{
    color: #000;
}

/*----- tab -----*/
div {
*zoom: 1;
}
div:after {
    display: block;content: "";
    clear: both;
}
#pr_single #pr_bar{
    background: #000;
    font-size: 14px;
}
.js-tab {
    max-width: 1000px;
    min-width: 1000px;
    margin: 0 auto;
    background:#000;
    color: #fff;
}
.js-tab {
}
.js-tab > div {
    float:left;
    text-align: center;
    padding:20px 0;
    cursor:pointer;
    margin: 0 35px 0 0;
	font-size:16px;
}
.js-tab > div:last-child{
    margin: 0;
}
.js-tab > div.active {
    color: #ffb400;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
    position: relative;
}
.js-tab > div.active:before{
	content: "";
position: absolute;
top: 100%;
left: 70%;
margin-left: -15px;
border: 6px solid transparent;
border-top: 10px solid #000;
z-index: 3;
}

.js-tab > div.active p {
	margin: 0;
	padding: 0;
}

/*----- js-tab -----*/
#tab_contents{
    margin: 60px 0 0;
}

.js-tab_content {
    display:none;
    max-width: 1200px;
    min-width: 1024px;
    margin: 0 auto;
}

.js-tab_content.active {
    display:block;
}

/*----- box -----*/

.js-tab_content .box{
    margin: 0 0 100px;
}
.js-tab_content .box h3{
    font-size: 28px;
    margin: 0 0 38px;
}
.js-tab_content .box figure{
    max-width: 580px;
    max-height: 400px;
    margin: 0 auto 30px;
}
.js-tab_content .box .txt p{
    margin: 0 0 1.6em;
}

/*----- right -----*/
.js-tab_content .boxR figure{
    float: right;
    margin: 0 0 0 38px !important;
}
.js-tab_content .boxR .txt{
}

/*----- left -----*/
.js-tab_content .boxL figure{
    float: left;
    margin: 0 38px 0 0 !important;
}
.js-tab_content .boxL .txt{
}

/*----- ya -----*/

.tabcon1 .ya{
    background-position: top left 20px;
}
.tabcon2 .ya{
    background-position: top left 113px;
}
.tabcon3 .ya{
    background-position: top left 215px;
}
.tabcon4 .ya{
    background-position: top left 308px;
}
.tabcon5 .ya{
    background-position: top left 412px;
}
.tabcon6 .ya{
    background-position: top right 446px;
}
.tabcon7 .ya{
    background-position: top right 328px;
}
.tabcon8 .ya{
    background-position: top right 257px;
}
.tabcon9 .ya{
    background-position: top right 158px;
}





.txt table{
	width: 100%;
}
.txt table th,
.txt table td{
	padding:15px;
	border: 1px solid #dfdfdf;
}
.txt table th{
	background: #f0f0f0;
}




a[href$=".pdf"] {
	padding: 2px 0 0 26px;
	background: url(../images/contents/harmonicas/bg-pdf.png) no-repeat left center;
    background-size: contain;
}



#pr_single ul.relatedList{
	overflow: hidden;
}
#pr_single ul.relatedList li{
	border: 1px solid #ccc;
	margin-bottom:15px;
	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#pr_single ul.relatedList li a{
	display: block;
	overflow: hidden;
	padding: 20px;
}
#pr_single ul.relatedList li a:hover{
	background: #f3f3f3;
}
#pr_single ul.relatedList li a .imageArea{
	float:left;
	margin:0 30px 0 0;
	width:200px;
}
#pr_single ul.relatedList li a .imageArea img{
	max-width:100%;
	height:auto;
}
#pr_single ul.relatedList li a .textArea .prName{
	font-size:20px;
	margin-bottom:5px;
}
#pr_single ul.relatedList li a .textArea .prDesc{}


/***************************************************************************


ARTISTS


***************************************************************************/

/***************************************************************************
ARTISTS　>　HARMONICAS
***************************************************************************/

#a_harmonicas{
    width: 1200px;
    margin: 60px auto 120px;
}
#a_harmonicas ul{
    margin: 0 0 80px;
}
#a_harmonicas ul li{
    display: inline-block;
    margin: 0 25px 25px 0;
    width: 216px;
    vertical-align: top;
}
#a_harmonicas ul li:nth-child(5n){
    margin: 0;
}
#a_harmonicas ul li .img{
    width: 216px;
    height: 216px;
    margin: 0 0 15px;
    overflow: hidden;
}
#a_harmonicas ul li .img img{
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
#a_harmonicas ul li a:hover img{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}
#a_harmonicas ul li .name{
    font-size: 17px;
    font-weight: bold;
    text-align: center;
}
#a_harmonicas ul li a:hover{
    color:#858180;
}
/*----- nav -----*/

.ar_nav1 ul,
.ar_nav2 ul{
    width: 252px;
}
.ar_nav1 ul li:first-child a,
.ar_nav2 ul li:nth-child(2) a{
    color: #ffb400;
}
.ar1{
    top:41px;
    left: 41px;
}
.ar2{
    top:41px;
    left: 164px;
}

/***************************************************************************
ARTISTS　>　HARMONICAS　>　CONTENTS
***************************************************************************/
/***************************************************************************
ARTISTS　>　HARMONICAS　>　CONTENTS・・・single
***************************************************************************/

#ar_single{
    margin: 0 0  -20px;
    word-wrap: break-word;
}
#ar_single .arSlider{
    background: #000;
}
#ar_single .slid_inner2{
    max-width: 1200px;
    min-width: 1024px;
    position: relative;
}
#ar_single .slid_inner2 {
    overflow:hidden;
    position:relative;
    max-width: 1200px;
    min-width: 1024px;
	padding: 0 0 0;
    margin: 0 auto;
}
#ar_single .slid_inner li,
#ar_single .slid_inner li img{
    width: 100%;
}
#ar_single .arSlider h2{
    font-size: 40px;
    position: absolute;
    top:0;
    left:0;
    z-index: 2;
    margin:40px 0 0;
}
#ar_single .arSlider h2 .koko{
    font-size: 16px;
    display: block;
    margin: 10px 0 0;
}
#ar_single .ar_white h2{
    color: #fff;
}
#ar_single .ar_black h2{
    color: #000;
}



#ar_single .bar{
    background: #000;
    margin: 0 0 64px;
}
#ar_single .bar .inner{
    max-width: 1200px;
    margin: 0 auto;
    color: #fff;
    overflow: hidden;
    padding: 0 10px;
}
#ar_single .bar .product_txt{
    float: left;
    padding: 20px 0;
}
#ar_single .bar .info{
    float: right;
    padding: 20px 0;
}
#ar_single .bar .info ul li{
    display: inline-block;
    margin: 0 17px 0 0;
}
#ar_single .bar .info ul li:last-child{
    margin: 0;
}
#ar_single .bar .info ul li a:hover{
    opacity: 0.5;
}


#ar_single .intro{
    max-width: 1200px;
    min-width: 1024px;
    margin: 0 auto;
    font-weight: bold;
    overflow: hidden;
}
#ar_single .intro .txt{
    padding: 0 10px;
}
#ar_single .intro p{
    margin: 0 0 1.6em;
}
/*----- right -----*/

#ar_single .introductionR .img{
    float: right;
    margin: 0 0 0 3vw;
}
#ar_single .introductionR .img figure{
    max-width: 580px;
    max-height: 400px;
}
/*----- left -----*/

#ar_single .introductionL .img{
    float: left;
    margin: 0 3vw 0 0;
    max-width: 580px;
    height: 400px;
}
#ar_single .introductionL .img figure{
    max-width: 580px;
    max-height: 400px;
}
/*----- center -----*/
#ar_single .introduction .img{
    margin: 0 auto 20px;
    max-width: 100%;
}
#ar_single .introduction .img figure{
    max-width: 100%;
}

#ar_single .other_box{
    max-width: 1200px;
    margin: 30px auto 0;
}
#ar_single .other_box .box{
    position: relative;
   padding-bottom: 56.25%;
   padding-top: 25px;
   height: 0;
   overflow: hidden;
    margin: 30px 0 0;
}
#ar_single .other_box img{
    max-width: 100%;
    max-height: auto;
    margin: 15px auto;
}
#ar_single .other_box iframe{
/*    position: absolute; */
/*   top: 0; */
/*   left: 0; */
   width: 100%;
/*   height: 100%; */
   height: 675px;
}
#ar_single .other_box p{
    margin: 0 0 1.6em;
}


/***************************************************************************


PRIVACY POLICY


***************************************************************************/

button#name-ga-cookie-reset-btn{
    background:#000;
    color:#fff;
    border:none;
    padding:10px 20px;
    border-radius: 6px;
    cursor:pointer;
}
button#name-ga-cookie-reset-btn:hover{
    background:#333;
}
button#name-ga-cookie-reset-btn:after{
    display: none;
}

/*******
/* メディアクエリー閉じタグ */
}