@charset "UTF-8";

/* contents
--------------------------------------------------------------------------
01. Content area (div#contentArea)
02. Header area (div#header)
03. Page Title area (div#pageTitle)
04. Column area (div#columnArea)
05. Footer area (div#footer)
06. Element localNavi
07. Element relatedLink
--------------------------------------------------------------------------
*/

/* 01. Content area (div#contentArea)
----------------------------------------------------------------------- */
@media screen and (max-width:767px) {
  div#contentArea{
    width:100%;
    max-width:100%;
  }
}

/* 02. Header area (div#header)
----------------------------------------------------------------------- */
div#headerArea div#header div#searchButton,
div#headerArea div#header div#menuButton{
  display:none;
  float:right;
  position:relative;
  width:60px;
  height:30px;
  top:0;
  right:8px;
  margin:8px 2px 7px;
  border:1px #ccc solid;
  border-radius:6px;
  background:#fff;
  background:-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(0.3,#fff),to(#f0f0f0));
  background:-moz-linear-gradient(top,#fff,#fff 30%,#f0f0f0);
  background:linear-gradient(to bottom,#fff,#f0f0f0);
  color:rgba(0,0,0,0);
  overflow:hidden;
  cursor:pointer;
  -moz-user-select:none ;
  -webkit-user-select:none ;
  -ms-user-select:none ;
  user-select:none ;
}
div#headerArea div#header div#searchButton:hover,
div#headerArea div#header div#menuButton:hover{
  background:#ededed;
  background:-webkit-gradient(linear,left top,left bottom,from(#ededed),to(#dadada));
  background:-moz-linear-gradient(top,#ededed,#dadada);
  background:linear-gradient(to bottom,#ededed,#dadada);
}
div#headerArea div#header div#searchButton i.icon{
  position:absolute;
  width:9px;
  height:9px;
  left:22px;
  top:7px;
  border:2px solid #777;
  background:#fff;
  border-radius:50%;
}
div#headerArea div#header div#searchButton i.icon::after{
  position:absolute;
  right:-2px;
  bottom:-5px;
  width:2px;
  height:5px;
  background:#777;
  content:"";
  -webkit-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  transform:rotate(-45deg);
}
div#headerArea div#header div#menuButton a{
  display:table-cell;
  width:60px;
  height:30px;
  color:#777;
  text-decoration:none;
  vertical-align: middle;
  text-align: center;
}
@media screen and (max-width:767px) {
  div#headerArea{
    width:100%;
  }
  div#headerArea div#header{
    width:100%;
    height:auto;
    margin:0;
    border:none;
    overflow:hidden;
  }
  div#headerArea div#header.none{
    height:47px;
  }
  div#headerArea div#header p#logoYamaha a{
    display:block;
  }
  div#headerArea div#header p#logoYamaha img{
    top:8px;
    left:12px;
  }
  div#headerArea div#header div#searchButton,
  div#headerArea div#header div#menuButton{
    display:block;
  }
  div#headerArea div#header div#subNavi{
    display:none;
    clear:both;
    float:none;
    width:100%;
    margin:0 0 8px;
    padding:0;
    border-top:1px #fff solid;
    background:#f1f1f1;
    text-align:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
  }
  div#headerArea div#header div#subNavi::before{
    position:absolute;
    width:1px;
    left:17px;
    top:17px;
    padding:9px;
    background:#ccc;
    border-radius:50%;
    content:"";
    z-index:123;
  }
  div#headerArea div#header div#subNavi form{
    position:relative;
    overflow:hidden;
  }
  div#headerArea div#header div#subNavi p.siteSerch{
    display:table;
    position:relative;
    width:100%;
    padding:0;
  }
  div#headerArea div#header div#subNavi p.siteSerch::before{
    position:absolute;
    width:5px;
    height:5px;
    left:21px;
    top:21px;
    border:2px solid #fff;
    border-radius:50%;
    content:"";
    z-index:456;
  }
  div#headerArea div#header div#subNavi p.siteSerch::after{
    position:absolute;
    left:29px;
    top:26px;
    width:2px;
    height:5px;
    background:#fff;
    content:"";
    -webkit-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
    z-index:789;
  }
  div#headerArea div#header div#subNavi p.siteSerch input{
    display:table-cell;
    height:32px;
    margin:10px;
    line-height:32px;
  }
  div#headerArea div#header div#subNavi p.siteSerch input[type="text"]{
    float:left;
    width:70%;
    padding:4px 30px;
    border:1px solid #bbb;
    border-radius:14px;
    color:#333;
    outline:0;
    font-size:16px;
    text-shadow:0 1px 0 #fff;
    -webkit-box-shadow:inset 0 1px 4px rgba(0,0,0,.2);
    box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
  }
  div#headerArea div#header div#subNavi p.siteSerch input[type="submit"]{
    float:right;
    width:15%;
    border:1px #ccc solid;
    border-radius:14px;
    background:#fff;
    background:-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(0.3,#fff),to(#f0f0f0));
    background:-moz-linear-gradient(top,#fff,#fff 30%,#f0f0f0);
    background:linear-gradient(to bottom,#fff,#f0f0f0);
    color:#222;
    font-size:12.5px;
    font-weight:bold;
    vertical-align:middle;
    white-space:nowrap;
    text-overflow:ellipsis;
    text-shadow:0 1px 0 #fff;
    outline:0;
    cursor:pointer;
    -webkit-box-shadow:0 1px 4px rgba(0,0,0,.3);
    box-shadow:0 1px 4px rgba(0,0,0,.3);
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    zoom:1;
  }
  div#headerArea div#header div#subNavi p.siteSerch input[type="submit"]:hover{
    background:#f6f6f6;
    background:-webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#e0e0e0));
    background:-moz-linear-gradient(top,#f6f6f6,#e0e0e0);
    background:linear-gradient(to bottom,#f6f6f6,#e0e0e0);
  }
  div#headerArea div#header div#subNavi p.siteSerch input:focus{
    -webkit-box-shadow:inset 0 0 3px #387bbe,0px 0 9px #387bbe;
    box-shadow:inset 0 0 3px #387bbe,0px 0 9px #387bbe;
  }
  div#headerArea div#header div#subNavi p#localInfo,
  div#headerArea div#header div#subNavi ul,
  div#headerArea div#header ul#gNavi{
    display:none;
  }
}

/* 03. Page Title area (div#pageTitle)
----------------------------------------------------------------------- */
@media screen and (max-width:767px) {
  div#pageTitle{
    clear:both;
    width:100%;
    margin:0 0 30px;
    border-top:1px solid #a48fc1;
  }
  div#pageHeading{
    padding:0 0 35px;
  }
  div#pageHeading h1{
    float:none;
    min-height:1.1em;
    margin:10px;
    padding:0;
    font-size:18px;
    text-overflow: ellipsis;
    outline:0;
  }
  div#pageTitle p#breadcrumbs{
    display:none;
  }
  div.toolBoxArea01{
    position:absolute;
    left:10px;
    bottom:0;
  }
  div.toolBox01{
    margin:6px 0;
    text-align:left;
  }
}

/* 04. Column area (div#columnArea)
----------------------------------------------------------------------- */
@media screen and (max-width:767px) {
  div#columnArea{
    width:100%;
    margin:0;
    padding:0;
  }
  div#columnArea div#mainColumn{
    width:100%;
  }
  div#columnArea div#mainColumn div#mainArea,
  div#columnArea div#mainColumn div#localArea01{
    float:none;
    width:100%;
  }
}

/* 05. Footer area (div#footer)
----------------------------------------------------------------------- */
div#footerArea div#footer ul li.home{
  display:none;
}
@media screen and (max-width:767px) {
  div#footerArea{
    width:100%;
    padding-bottom:5px;
    background:#d1d1d1;
  }
  div#footerArea div#footer{
    padding:0;
  }
  div#footerArea div#footer address{
    float:none;
    padding:5px;
    color:#333;
    text-align:center;
    font-size:11px;
    text-shadow:0 1px 0 #fff;
  }
  div#footerArea div#footer ul{
    float:none;
  }
  div#footerArea div#footer ul li{
    position:relative;
    display:block;
    margin:0;
    padding:0;
    border-top:1px solid #a2a2a2;
    background:#d9d9d9;
    font-size:12.5px;
    line-height:1.35;
    font-weight:bold;
    text-shadow:0 1px 0 #fff;
  }
  div#footerArea div#footer ul li a::before{
    position:absolute;
    width:1px;
    right:11px;
    top:9px;
    padding:9px;
    background:#949494;
    border-radius:50%;
    content:"";
  }
  div#footerArea div#footer ul li a::after{
    position:absolute;
    width:5px;
    height:5px;
    right:17px;
    top:14px;
    margin:0 0 0 10px;
    border-right:3px solid #fff;
    border-top:3px solid #fff;
    border-radius:2px;
    content:"";
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
  }
  div#footerArea div#footer ul li.home{
    display:block;
  }
  div#footerArea div#footer ul li.last{
    background:#d9d9d9;
    border-top-color:#b4b4b4;
    border-bottom:1px solid #a2a2a2;
  }
  div#footerArea div#footer ul li:hover{
    background-color:#c4c4c4;
    color:#fff;
  }
  div#footerArea div#footer ul li a{
    display:block;
    min-width:.75em;
    padding:.7em 15px;
    border-top:1px solid #fff;
    border-color:rgba(255,255,255,.3);
    color:#2f3e46;
    text-decoration:none;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  div#footerArea div#footer ul li a:focus{
    -webkit-box-shadow:inset 0 0 3px #387bbe,0px 0 9px #387bbe;
    box-shadow:inset 0 0 3px #387bbe,0px 0 9px #387bbe;
  }
}

/* 06. Element localNavi
----------------------------------------------------------------------- */
@media screen and (max-width:767px) {
  ul#localNavi{
    width:100%;
    padding:15px;
    overflow:hidden;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
  }
  ul#localNavi li{
    width:100%;
    background:none;
    font-size:16px;
  }
  ul#localNavi li a{
    position:relative;
    width:100%;
    color:#333;
    padding:.7em 15px;
    background:none;
    text-shadow: 0 1px 0 #fff;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
  }
  ul#localNavi li a::before{
    position:absolute;
    width:1px;
    right:15px;
    top:.7em;
    padding:9px;
    background:#949494;
    border-radius:50%;
    content:"";
  }
  ul#localNavi li a::after{
    position:absolute;
    width:5px;
    height:5px;
    right:21px;
    top:1em;
    margin:0 0 0 10px;
    border-right:3px solid #fff;
    border-top:3px solid #fff;
    border-radius:2px;
    content:"";
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
  }
  ul#localNavi li a:focus{
    -webkit-box-shadow:inset 0 0 3px #387bbe,0px 0 9px #387bbe;
    box-shadow:inset 0 0 3px #387bbe,0px 0 9px #387bbe;
  }
  ul#localNavi li#current1,
  ul#localNavi li#current1 a{
    width:100%;
    background:none;
  }
  ul#localNavi li#current1 >a:first-child{
    background:#dfdfdf;
    border:1px solid #ccc;
    border-width:1px 1px 0;
    border-top-left-radius:.6em;
    border-top-right-radius:.6em;
  }
  ul#localNavi li#current1 >a:first-child:hover{
    background:#cdcdcd;
    background:-webkit-gradient(linear,left top,left bottom,from(#cdcdcd),to(#bebebe));
    background:-moz-linear-gradient(top,#cdcdcd,#bebebe);
    background:linear-gradient(to bottom,#cdcdcd,#bebebe);
  }
  ul#localNavi li#current1 ul#localNavi2,
  ul#localNavi li#current1 ul#localNavi2 li{
    width:100%;
    background:none;
  }
  ul#localNavi li#current1 ul#localNavi2 li a{
    border:1px solid #ccc;
    border-width:1px 1px 0;
    background:#fafafa;
    background:-webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#f6f6f6));
    background:-moz-linear-gradient(top,#fafafa,#f6f6f6);
    background:linear-gradient(to bottom,#fafafa,#f6f6f6);
  }
  ul#localNavi li#current1 ul#localNavi2 li a:hover{
    background:#eee;
    background:-webkit-gradient(linear,left top,left bottom,from(#fdfdfd),to(#eee));
    background:-moz-linear-gradient(top,#fdfdfd,#eee);
    background:linear-gradient(to bottom,#fdfdfd,#eee);
  }
  ul#localNavi li#current1 ul#localNavi2 li.on{
    padding:.7em 15px;
    background:#666;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
  }
  ul#localNavi li#current1 ul#localNavi2 li.on span{
    padding:0;
  }
  ul#localNavi li#current1 ul#localNavi2 >li:last-child a{
    border-width:1px;
    border-bottom-left-radius:.6em;
    border-bottom-right-radius:.6em;
  }
}

/* 07. Element relatedLink
----------------------------------------------------------------------- */
@media screen and (max-width:767px) {
  div.relatedNaviA01,
  div.relatedNaviB01,
  div.relatedNaviC01{
    display:none;
  }
}