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

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

html{
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
*{
    margin:0;
    padding:0;
}

body{
    line-height: 1.3rem;
    letter-spacing: 0.1rem;
    font: 13px/1.5 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka ,"游ゴシック",YuGothic,"メイリオ", "meiryo","ＭＳ Ｐゴシック",sans-serif;
	color:#333;
}

header, article, footer, aside, time ,nav ,small ,section{
	 display: block;
}
a {
    color: #333;
    text-decoration: none;
}
ul li, ol li{
	list-style-type: none;
}
a img{
    border-style:none;
}
img{
    vertical-align:bottom;
	max-width:100%;
	height:auto;
}
.spnone{
    display: none;
}
table{
	border-collapse:collapse;
}
table th,table td{
	vertical-align:top;
}
input,textarea,select{
-webkit-appearance: none;
border-radius: 0;
}
.center{
    text-align: center;
}
.right{
    text-align: right;
}

.list-mv07{
	transition: .8s;
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

.h2_midashi1{
    font-size: 25px;
    font-weight: 900;
    text-align: center;
    margin: 0 0 20px;
}
.h2_midashi1 a{
    color: #ffb400;
}
.h2_midashi1 a:hover{
	opacity: 0.5;
}
.h2_midashi1 .koko{
    font-size: 8px;
    display: block;
}

.h2_midashi2{
    font-size: 25px;
    text-align: center;
    margin: 0 0 20px;
}
    
    #indexProducts .font80 {
        font-size: 70%;
        margin: 10px 0 0;
    }
/***************************************************************************

INDEX

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

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


cookie opt out


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

#name-ga-cookie-accept-bar{
    padding:45px 4% 0;
    font-size:12px;
}



/***************************************************************************
index-Slider
***************************************************************************/
header{
    width: 100%;
    height: 45px;
    background: #fff;
    box-shadow: 0px 0px 5px #666;
    position: fixed;
    z-index: 9999;
    top: 0;
}
header h1{
    padding: 0 0 0 10px;
    width: 130px;
}


.sp_header{
    	width: 100%;
    	padding-top: 41.6%;
    	background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        margin: 45px 0 0 0;
}
.sp_header .inner{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.3);
}

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

sp_nav

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

#wpadminbar{
    margin: -45px 0 0;
}
    
.menu-trigger,
.menu-trigger span{
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
  cursor :pointer;
}
.menu-trigger{
  position: relative;
  width: 45px;
  height: 40px;
  z-index: 9998;
    position: fixed;
    top:0;
    right:0;
      background:none;
}
.menu-trigger span{
  position: absolute;
  background: #000;
  width: 20px;
  height: 4px;
  left: 0;
  right: 0;
  margin: auto;
}
.menu-trigger span:nth-of-type(1){
  top: 15px;
    color:#fff;
}
.menu-trigger span:nth-of-type(2){
  top: 6px;
  bottom: 0;
}
.menu-trigger span:nth-of-type(3){
  bottom: 9px;
    color:#fff;
}
.menu-trigger.active span:nth-of-type(1){
  -webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2){
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3){
  -webkit-transform: translateY(-2px) rotate(45deg);
	transform: translateY(-2px) rotate(45deg);
}
.g-nav{
    display: none;
    position: fixed;
    top: 44px;
    background: rgba(0,0,0,0.9);
    width: 100%;
    height: 450px;
    z-index:8000;
    color:#fff;
    text-align: left;
}
.g-nav .list{
    padding: 90px 10px 10px 10px;
}
.g-nav .list li{
    font-size: 15px;
    margin: 0 10px 15px 10px;
    letter-spacing: 0.2em;
    text-align: center;
}
.g-nav .list li a{
    color:#fff;
    font-weight: 900;
    display: block;
}

header .g-nav .list li.bt-youtube{
    margin:0 auto;
    width: 100px;
}
header .bt-youtube a{
    background:#fff;
    text-align: center;
    padding: 4px 16px 10px;
}
header .bt-youtube img{
    max-width:100%;
    height:auto;
}
header .g-nav .list li.bt-insta{
    margin:0 auto;
    width: 100px;
}
header .bt-insta a{
    background:#fff;
    text-align: center;
    padding: 4px 16px 10px;
}
header .bt-insta img{
    max-width:100%;
    height:auto;
}


#form2{
    position:relative;
    color: #fff;
}
#form2 input{
    color: #fff;
    font-size: 15px;
}
#sbox2{
    height: 35px;
    padding: 0 5px;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    margin:0 auto;
    border-radius:2px;
    border:solid 2px #fff;
    outline: 0;
    width: 250px;
    background: none;
}
#sbtn2{
    height: 35px;
    position: absolute;
    top: 21px;
    right: 17%;
    background: none;
    color: #fff;
    border: none;
    font-size: 17px;
    outline: 0;
}
/***************************************************************************
index-PRODUCTS
***************************************************************************/

#indexProducts{
    margin: 0 0 30px;
}
#indexProducts ul{
    overflow: hidden;
    margin: 20px 0 0;
}
#indexProducts ul li{
    margin: 0 20px 15px;
    height: 35vh;
}
.bnpro1 button,
.bnpro2 button,
.bnpro3 button,
.bnpro7 button{
    display: block;
    background: none;
    border: none;
    color: #fff;
    font-size: 23px;
    font-weight: 700;
    width: 100%;
    height: 35vh;
    z-index: 2;
}
.bn span{
  display: block;
}

.bn{
    background-size: cover;
}
.bnpro1 {
    background-image: url(../images/index/pr_bn1.jpg);
}
.bnpro2 {
    background-image: url(../images/index/pr_bn2.jpg);
}
.bnpro3 {
    background-image: url(../images/index/pr_bn3.jpg);
}
.bnpro7 {
        background-image: url(https://csj-concierge.com/suzukimusic/uploads/classification_middle/7/5ea6354b68acd7_l.jpg);
}


/***************************************************************************
index-NEWS
***************************************************************************/

#indexNews{
    margin: 0 0 50px;
}
#indexNews section{
    margin: 0 0 30px;
}
#indexNews article,
#news article,
#results article{
    margin: 0 auto 30px;
    width: 310px;
}
#indexNews article .new,
#news article .new{
    position: absolute;
    top:10px;
    right: 10px;
    z-index: 2;
    width: 58px ;
	height: 58px ;
	text-align: center ;
}
#indexNews article .new .new_icon,
#news article .new .new_icon{
    color: #fff;
    background: #ffba00;
    font-weight: bold;

    font-size: 11px;
    width: 45px;
    height: 23px;
    padding: 14px 0 7px;

    display: block;
    text-align: center;


    border: 4px solid #fff;
    border-radius: 30px;
}
#indexNews article:first-child,
#news article:first-child{
    position: relative;
}
#indexNews .img figure,
#news .img figure,
#results .img figure{
    margin: 0 0 10px;
    width: 100%;
    height: 200px;
    overflow: hidden;	
}
#indexNews article .title,
#news article .title,
#results article .title{
    font-weight: bold;
    font-size: 15px;
    margin: 0 0 8px;
}
#indexNews article .txt,
#news article .txt,
#results article .txt{
    font-size: 12px;
}

#indexNews .btn{
    text-align: center;
}
#indexNews .btn a{
    color: #fff;
    background:#000;
    padding: 13px 0;
    width: 260px;
    text-align: center;
    display: inline-block;
    border-radius: 30px;
    border: 2px solid #fff;
}

/***************************************************************************
index-ARTISTS ＆ DISTRIBUTORS
***************************************************************************/

#indexAD{
    margin: 0 0 20px;
}
#indexAD ul{
    overflow: hidden;
}
#indexAD ul li{
    float: left;
    width: calc(100%/2);
    
}

.ad1 {
    background-image: url(../images/index/a_bn.jpg);
}
.ad2 {
    background-image: url(../images/index/d_bn.jpg);
}
.ad1 button,
.ad2 button{
    display: block;
    background: none;
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    width: 100%;
    height: 200px;
    z-index: 2
}
.ad1 span,
.ad2 span{
    background: #000;
    display: inline-block;
    padding: 7px 15px;
}
#indexHammond{
    margin: 0 0 20px
}
#indexHammond ul li{
    margin: 0 30px 10px
}
/***************************************************************************

footer

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

#pagetop a{
    font-size: 23px;
    text-align: center;
    display: block;
    padding: 5px 0 3px;
    border-bottom: 1px solid #313131;
    margin: 0 0 20px;
}
footer{
    background: #000;
    color: #fff;
    padding: 0 0 20px;
    margin: 60px 0 0;
}
footer a{
    color: #fff;
}
footer .logo{
    text-align: center;
    margin: 0 auto 20px;
    width: 130px;
}

footer nav{
    margin: 0 auto 25px;
    width: 236px;
}
footer nav li{
    font-size: 10px;
    width: 115px;
    display: inline-block;
}

footer nav ul li a{
    padding: 0 0 5px;
    display: block;
}



footer small{
    text-align: center;
    display: block;
    font-size: 9px;
}

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

breadcrumb

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

.breadcrumb {
    background: #f3f3f3;
    font-weight: bold;
    margin: 45px 0 0 0;
}
.breadcrumb ul{
    padding: 5px 10px;
}
.breadcrumb li{
  display:inline;
  list-style: none;
    font-size: 10px;
}
.breadcrumb li:after{
font-family: 'Font Awesome 5 Free';
  content: '\f105';
  padding: 0 3px;

}
.breadcrumb li:last-child:after{
  content: '';
}

.breadcrumb li:first-child a:before{
font-family: 'Font Awesome 5 Free';
  content: '\f015';
    font-weight: 900;
  font-size: 1.3em;
}

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

Category nav

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

.sub_nav{
    background: #000;
    padding: 10px 0;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 25px;
}
.sub_nav a{
    color: #fff;
}
.sub_nav ul{
    margin: 0 auto;
    position: relative
}
.sub_nav ul li{
    display: inline-block;
    margin: 0 20px 0 0;
}
.triangle{
    border-top: 10px solid #000;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    width: 0px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}


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


PRODUCTS

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

#products{
    margin: 25px 0 40px;
}

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


ARTISTS

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

#artists{
    margin: 25px 0 40px;
}
#artists ul{
    overflow: hidden;
}
#artists ul li{
    height: 130px;
}
.a1{
    background-image: url(../images/index/a_bn.jpg);
}
.a2{
    background-image: url(../images/contents/a2.jpg);
}
.a1 button,
.a2 button{
    display: block;
    background: none;
    border: none;
    color: #fff;
    font-size: 23px;
    font-weight: 700;
    width: 100%;
    height: 130px;
    z-index: 2;
}

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


DISTRIBUTORS

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

#distributors{
    margin: 25px 0 40px;
}
#distributors .text{
    font-weight: bold;
    margin: 0 0 7px;
    font-size: 11px;
}
#distributors .map_box{
    margin: 0 0 20px;
}
#distributors iframe{
    width: 100%;
    height: 300px;
    margin: 0 0 20px;
}

#distributors .shopbox{
    width: 90%;
    margin: 0 auto;
}
#distributors article{
    padding: 10px;
    border-bottom: 1px solid #d7d7d7;
}
#distributors article .title{
    font-weight: bold;
    font-size: 13px;
    margin: 0 0 7px;
}
#distributors article ul{
    margin: 0 0 7px;
}
#distributors article ul li{
    display: inline-block;
}
#distributors article .txt{
    font-weight: inherit;
    font-size: 11px;
}
#distributors article .web a{
    font-weight: inherit;
    font-size: 11px;
    color:#e70000;
}

#distributors .iconbox ul{
    margin: 0 auto;
    width: 90%;
}
#distributors .iconbox ul li{
    font-size: 12px;
    display: inline-block;
    font-weight: bold;
    margin: 0 5px 7px 0;
    width: 117px;
}
#distributors .iconbox ul li img{
    margin: 0 5px 0 0;
}

/*----- form -----*/
#distributors .search_box{
    margin: 0 0 15px;
    padding: 0 10px;
}
#distributors #form01{
    height: 25px;
    font-size: 0;
}
#distributors #form01 input{
    vertical-align: top;
    margin: 0px;
    height: 100%;
    box-sizing: border-box;
}
#distributors #input01{
    width: 79%;
    font-size: 14px;
    padding: 5px 10px;
    border: 1px solid #cacaca;
}
#distributors #submit01{
    width: 20%;
    border: none;
    background: #000;
    color: #fff;
    font-size: 12px;
}


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

ABOUT US

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

#about{
    margin: 25px 0 40px;
}
#about .img{
    margin: 0 0 30px;
}
#about ul{
    overflow: hidden;
}
#about ul li{
    float: left;
    width: calc(100%/2);
}
#about .txt{
    padding: 0 10px;
}
#about .txt h3{
    font-size: 17px;
    margin: 0 0 20px;
}
#about .txt p{
    margin: 0 0 1.5em;
}

#about .company{
	margin-bottom:60px;
}
#about .company table,
#about .company .mapContainer{
	margin-bottom:40px;
}


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


FAQ

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

#faq,
#faq_single{
    margin: 25px 0 40px;
    word-wrap: break-word;
}
.displayNone {
    display: none;
}
.accordion {
    padding: 0 10px;
}
.accordion li {
    padding: 10px;
}
.accordion a {
    display: block;
}
.contentWrap {
    margin: 10px 10px 25px;
}
.switch{
    cursor:pointer;
    font-weight: bold;
    padding:10px 0 0 10px;
    font-size: 13px;
    position: relative;
    margin: -2px 0 0 0;
}
.switch .koko{
    margin: 0 0 0 8px;
}
.switch:before {
    position: absolute;
    top: 60%;
    left: 0;
    margin: -17px 0 0;
    font-family: 'Font Awesome 5 Free';
    content: '\f138';
    font-size: 14px;
    font-weight: bold;
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -moz-transition: all, 0.25s, linear;
    -o-transition: all, 0.25s, linear;
    -webkit-transition: all, 0.25s, linear;
    transition: all, 0.25s, linear;
}
.switch.open:before {
    -moz-transform: translate(0, 50%);
    -ms-transform: translate(0, 50%);
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.faq_a_q{
    font-weight: bold;
    padding:10px 0 0 10px;
    font-size: 13px;
    position: relative;
    margin: -2px 0 0 0;
}
.faq_a_q span{
    margin: 0 0 0 8px;
}
.faq_a_q:before {
    position: absolute;
    top: 60%;
    left: 0;
    margin: -17px 0 0;
    font-family: 'Font Awesome 5 Free';
    content: '\f138';
    font-size: 14px;
    font-weight: bold;
}

/*----- faq_single -----*/
.faq_q{
    font-size: 14px;
    padding: 0 10px;
    font-weight: bold;
    margin: 0 0 10px;
}
.faq_q span{
    font-size: 20px;
}
.faq_a{
    padding: 0 10px;
    font-size: 12px;
}

.faq_s{
    font-weight: bold;
    margin: 0 0 5px;
}
.faq_s a:hover{
    text-decoration: underline;
}

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


NEWS

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

#news,
#results{
    margin: 25px 0 40px;
    word-wrap: break-word;
}
#news section,
#results section{
    margin: 0 0 30px;
}


/***************************************************************************
NEWS_SINGLE
***************************************************************************/

#news_single{
    margin: 25px 0 40px;
    padding: 0 10px;
}
#news_single .titlebox{
    overflow: hidden;
    margin: 0 0 10px;
    font-weight: bold;
}
#news_single .titlebox .excerpt{
    font-size: 16px;
}
#news_single .titlebox time{
    margin: 10px 0 0;
    font-size: 12px;
}
#news_single figure{
    max-width: 100%;
    background: #000;
    text-align: center;
    margin: 0 0 20px;
}
#news_single .txt{
    font-size: 12px;
}
#news_single .txt p{
    margin: 0 0 1.3em;
}

.pager{
    text-align: center;
}
.pager div{
    font-size: 13px;
    font-weight: bold;
    display: inline-block;
}
.pager a{
    color: #fff;
    padding: 13px 0px 0;
    padding: 11px 0px 0;
    border-radius: 30px;
    width: 41px;
    height: 30px;
    background: #7b7b7b;
    display: block;
}
.pager .this{
    background: #000;
    color: #fff;
    padding: 13px 0px 0;
    padding: 11px 0px 0;
    border-radius: 30px;
    width: 41px;
    height: 30px;
}

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


contact


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

#contact{
    margin: 25px 0 40px;
    padding: 0 10px;
}
input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select,
textarea,
input {
    border: 1px #000 double;
    font-size: 13px;
}
button, input, select, textarea {
  font-family : inherit;
  font-size   : 100%;
}

div.contactbox table{
	width:100%;
	border:none;

/*tableスクロールを解除*/
	display:table;
	overflow: hidden;
	white-space: normal;
}

div.contactbox table,
div.contactbox table tbody,
div.contactbox table tr,
div.contactbox table th,
div.contactbox table td{
	display:block;
}

div.contactbox table th,
div.contactbox table td{
	border:none;
	background:none;
	color: #000;
    margin: 0 0 10px;
}
div.s_contactbox table td{
	padding:0px 0 10px;
}

div.contactbox table td input,
div.contactbox table td text{
    height: 30px;
}
div.contactbox table td input,
div.contactbox table td textarea,
div.contactbox table td text{
    padding: 10px;
	width:100%;
    
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
div.contactbox table td input#zip,
div.contactbox table td input[type="checkbox"]{
	width:auto;
}

span.required,
span.red{
	color: #ea4800;
	margin:0 3px;
}
span.required2,
.note{
	color: #ea4800;
	margin:0 3px;
    font-weight: bold;
}
div.contactbox .button{
	color:#fff;
	background: #000;
	text-align:center;

    border:2px solid #000;
    margin: 0 0 20px;

	line-height:30px;
	font-size:11px;
	font-weight:bold;

	letter-spacing: 0.3em;
	padding: 5px 38px;
    cursor:pointer;


	-webkit-appearance: none;
}

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 68%;
    padding: 0;
    margin: 0;
    height: 30px;
    background: transparent;
    position: relative;
    z-index: 1;
    padding: 0 40px 0 10px;
    font-size: 11px;
      cursor:pointer
}
select::-ms-expand {
    display: none;
}
.selectWrap{
    position: relative;
    display: inline-block;
}
.selectWrap::before{
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    right: 95px;
    background: #000;
    height: 100%;
    width: 30px;
}
.selectWrap::after{
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 105px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: #fff transparent transparent transparent; 
}


.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-dialog-buttons,
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front{
	width:80% !important;
	left:50% !important;
	margin-left:-40% !important;
}
#dialog{
	height:auto !important;
}

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


PRIVACY

***************************************************************************/
#privacy{
    margin: 25px 10px 40px;
}
button#name-ga-cookie-reset-btn {
    background: #000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
}
/***************************************************************************


results

***************************************************************************/
#results .hit_word{
    font-weight: bold;
    padding: 0 5px;
}
/***************************************************************************


PRODUCTS


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

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

#harmonicas,
#con_harmonicas{
    margin: 25px 0 40px;
    padding: 0 10px;
}
#harmonicas ul,
#con_harmonicas ul{
    margin: 40px 0 0 0;
}
#harmonicas ul li,
#con_harmonicas ul li{
    margin: 0 0 40px;
}
#harmonicas ul li .img,
#con_harmonicas ul li .img{
    margin: 0 0 10px;
    text-align: center;
}
#harmonicas ul li .title,
#con_harmonicas ul li .title{
    font-size: 16px;
    text-align: center;
    margin: 0 0 8px;
}
#harmonicas ul li .txt,
#con_harmonicas ul li .txt{
    font-size: 12px;
    margin: 0 auto;
}

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

.ph_nav1 ul,
.ph_nav2 ul,
.ph_nav3 ul{
}

.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,
.ph2,
.ph3{
    top:40px;
}


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

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

.selected_category a{
    color: #ffb400;
}
.phcon1,
.phcon2,
.phcon3,
.phcon4,
.phcon5,
.phcon6{
    top:40px;
}


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

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

#pr_single{
    word-wrap: break-word;
}
/*
#pr_single .prSlider{
    background: #000;
}
*/
#pr_single .slid_inner2{
    overflow:hidden;
    position:relative;
	padding: 0 0 0;
    margin: 0 auto;
}
#pr_single .slid_inner li{
    width: 100%;
}
#pr_single .slid_inner li img{
	max-height:300px;
	width:auto;
	margin:0 auto;
}
#pr_single .prSlider .midashi{
    z-index: 2;
    color:#000;
}
#pr_single .prSlider h2{
    font-size: 18px;
    margin:10px 0 10px 10px;
}
#pr_single .prSlider .txt{
    font-size: 10px;
    display: block;
    font-weight: bold;
    margin: 10px 0 20px 10px;
}
#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: 8px;
}
.js-tab {
    margin: 0 auto;
    background:#000;
    color: #fff;
    border-top: 1px solid #2b2b2b;
}
.js-tab {
}
.js-tab > div {
    float: left;
    font-weight: bold;
    text-align: center;
    padding: 14px 0;
    cursor: pointer;
    width: calc(100%/3);
    height: 40px;
    border-right: 1px solid #2b2b2b;
    border-bottom: 1px solid #2b2b2b;
    box-sizing: border-box;
}
.js-tab > div:nth-child(3n){
    border-right: none;
}
.js-tab > div:nth-child(8){
    position: relative;
}
.js-tab > div:nth-child(8):before{
content: "";
position: absolute;
top: 100%;
left: 33%;
border: 16px solid transparent;
border-top: 10px solid #000;
z-index: 3;
}

.js-tab > div:nth-child(8) p {
	margin: 0;
	padding: 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;
}
/*----- js-tab -----*/
#tab_contents{
    margin: 40px 0 0;
    padding: 0 10px;
}

.js-tab_content {
    display:none;
    margin: 0 auto;
}

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

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

.js-tab_content .box{
    margin: 0 0 50px;
    font-size: 12px;
}
.js-tab_content .box h3{
    font-size: 16px;
    margin: 0 0 15px;
}
.js-tab_content .box .txt p{
    margin: 0 0 1.3em;
}

/*----- right -----*/
.js-tab_content .boxR figure,
.js-tab_content .boxL figure{
    margin: 0 auto 15px;
    text-align: center;
}

/*----- left -----*/

.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%;

   table-layout: fixed;
   word-break: break-all;
   word-wrap: break-all;
}
.txt table th,
.txt table td{
    padding:10px;
    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{
	margin:0 0 20px;
}
#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{
    margin: 25px 0 40px;
}
#a_harmonicas ul{
    overflow: hidden;
    margin: 40px 0 0;
}
#a_harmonicas ul li{
    float: left;
    width: calc(100%/3);
    height: 200px;
    margin: 0 0 15px;
    word-break: break-all;
}
#a_harmonicas ul li .img{
    width: 100%;
    margin: 0 0 10px;
    overflow: hidden;
}

#a_harmonicas ul li .name{
    font-size: 11px;
    font-weight: bold;
    text-align: center;
}
/*----- nav -----*/
.ar1,
.ar2{
    top:25px;
}
.ar_nav1 ul li:first-child a,
.ar_nav2 ul li:nth-child(2) a{
    color: #ffb400;
}

/***************************************************************************
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{
    overflow:hidden;
	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: 18px;
    z-index: 2;
    margin:10px 0 0 10px;
}
#ar_single .arSlider h2 .koko{
    font-size: 11px;
    display: block;
    margin: 10px 0;
}
#ar_single .ar_white h2{
    color: #fff;
}
#ar_single .ar_black h2{
    color: #000;
}



#ar_single .bar{
    background: #000;
    margin: 0 0 30px;
}
#ar_single .bar .inner{
    margin: 0 auto;
    color: #fff;
    overflow: hidden;
    padding: 0 10px;
}
#ar_single .bar .product_txt{
    padding: 15px 0;
    font-size: 10px;
}
#ar_single .bar .info{
    position: fixed;
    bottom: 0;
    right: 0;
    border-top: 1px solid #ccc;
    padding:10px;
    text-align: right;
    width: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 9990;
}
#ar_single .bar .info ul li{
    display: inline-block;
    margin: 0 10px 0 0;
}

#ar_single .contents{
    padding: 0 10px;
    font-size: 12px;
}
#ar_single .intro{
    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{
}
#ar_single .introductionR .img figure,
#ar_single .introductionL .img figure,
#ar_single .introduction .img figure{
    margin: 0 0 20px;
}

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


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