/* Y'S GEAR : responsive.css */


/*======================================================================*
 *  [ siteWrap ] 
 *======================================================================*/


body {
	width: 100%;
	min-width: 320px;
}


/*======================================================================*
 *  [ Media Queries 1030 ] 
 *======================================================================*/

@media screen and (max-width: 1030px) {
	
	/*==================================================================*
	 *  [ pageTop ] 
	 *==================================================================*/
	
	.pageTop {
		right: 25px;
		width: auto;
		margin: 0;
	}
	
}


/*======================================================================*
 *  [ Media Queries 980 ] 
 *======================================================================*/

@media screen and (max-width: 980px) {
	
	body {
		padding: 0;
	}
	
	/*==================================================================*
	 *  [ siteHeader ] 
	 *==================================================================*/
	
	#siteHeader .ysgear, 
	#siteHeader .yamaha {
		margin: 13px 20px;
	}
	
	/*======================================================================*
	 *  [ headerNav shopNav ] 
	 *======================================================================*/
	
	#headerNav .shopNav { width: calc(100% - 530px); }
	
	
	/*==================================================================*
	 *  [ breadcrumbs ] 
	 *==================================================================*/
	
	.breadcrumbs ol {
		margin: 11px 20px;
	}

	/* [ POPUP型 ] */
	.popupType .breadcrumbs ol {
		padding: 0 20px;
	}
	.popupType .breadcrumbs div {
		padding: 0 20px 0 0;
	}
	
	
	/*==================================================================*
	 *  [ pageTitle ] 
	 *==================================================================*/
	
	.pageTitle {
		margin: 18px 20px;
	}
	
	
	/*==================================================================*
	 *  [ contentsWidth ] 
	 *==================================================================*/
	
	.contentsTop   > .contentsWidth, 
	.contentsPopup > .contentsWidth {
		padding: 0 20px;
	}
	
	
	/*==================================================================*
	 *  [ common | 共通要素 ] 
	 *==================================================================*/
	
	/* [ commonWrap h2 / commonTitleH2 | 共通見出し H2 ] */
	.contentsTop   > .contentsWidth .commonWrap h2, 
	.contentsTop   > .contentsWidth .commonTitleH2,
	.contentsPopup > .contentsWidth .commonWrap h2, 
	.contentsPopup > .contentsWidth .commonTitleH2 {
		margin-right: -20px;
		margin-left: -20px;
	}
	
	
	/*==================================================================*
	 *  [ siteFooter ] 
	 *==================================================================*/
	
	#siteFooter small {
		margin: 10px 20px;
	}
	
	
	/*==================================================================*
	 *  [ pageTop ] 
	 *==================================================================*/
	
	.pageTop {
		right: 10px;
	}
	
	
	/*==================================================================*
	 *  [ siteLink ] 
	 *==================================================================*/
	
	.siteLink {
		margin: 0 10px;
	}
	.siteLink li:first-child a {
		margin: 0;
	}
	
}


/*======================================================================*
 *  [ Media Queries 768 ] 
 *======================================================================*/

@media screen and (max-width: 768px) {
	
	#siteWrap {
		position: relative;
	}
	
	
	/*==================================================================*
	 *  [ siteHeader ] 
	 *==================================================================*/
	
	#siteHeader .yamaha {
		position: absolute;
		right: 50%;
		bottom: 40px;
		margin-right: -57px;
	}
	
	
	/*==================================================================*
	 *  [ headerNav searchBox ] 
	 *==================================================================*/
	
	#headerNav .searchBox {
		margin: 18px 20px;
	}
	
	/*======================================================================*
	 *  [ headerNav shopNav ] 
	 *======================================================================*/
	
	#headerNav .shopNav { width: calc(100% - 395px); }
	
	
	/*==================================================================*
	 *  [ siteFooter ] 
	 *==================================================================*/
	
	#siteFooter small {
		display: block;
		float: none;
		clear: both;
		margin: 0;
		padding: 10px 20px;
		border-top: 1px solid #b4b4b4;
	}
	
	
	/*==================================================================*
	 *  [ contentsLink ] 
	 *==================================================================*/
	
	.contentsLink p, 
	.contentsLink .product, 
	.contentsLink .corporate  {
		width: 100%;
		border-right: none;
	}
	
	.contentsLink .inner {
		display: block;
	}
	
	.contentsLink .inner > ul {
		padding: 0;
	}
	.contentsLink .inner > ul > li {
		float: left;
		width: 33.3%;
	}
	
	
	/*==================================================================*
	 *  [ logo20th | 20周年ロゴ ] 2017.1 追記
	 *==================================================================*/
	
	.logo20th {
		float: none !important;
		width: 100% !important;
		clear: both !important;
	}
	
	
	/*==================================================================*
	 *  [ siteLink ] 
	 *==================================================================*/
	
	.siteLink {
		margin: 10px 10px 74px 10px;
		font-size: 11px;
		font-size: 1.1rem;
	}
	.siteLink a {
		padding: 5px 10px;
	}
	
}


/*======================================================================*
 *  [ Media Queries 730 ] 
 *======================================================================*/

@media screen and (max-width: 730px) {
	
	/*==================================================================*
	 *  [ BASIC型 | 旧ID：contents-basic / 新CLASS：contentsBasic ] 
	 *==================================================================*/
	
	.contentsWrap:after {
		display: none;
	}
	
	.contentsBasic {
		float: none;
		width: 100%;
		margin: 0 0 50px 0;
		padding: 0;
	}
	
	
	/*==================================================================*
	 *  [ contentsWidth ] 
	 *==================================================================*/
	
	.contentsBasic > .contentsWidth {
		padding: 0 20px;
	}
	
	
	/*==================================================================*
	 *  [ common | 共通要素 ] 
	 *==================================================================*/
	
	/* [ commonWrap h2 / commonTitleH2 | 共通見出し H2 ] */
	.contentsBasic > .contentsWidth .commonWrap h2, 
	.contentsBasic > .contentsWidth .commonTitleH2 {
		margin-right: -20px;
		margin-left: -20px;
	}
	
	
	/*======================================================================*
	 *  [ contentsSide | サイドバー ] 
	 *======================================================================*/
	
	.contentsSide {
		float: none;
		width: 100%;
		padding: 0 20px;
	}
	
}


/*======================================================================*
 *  [ Media Queries 667 ] 
 *======================================================================*/

@media screen and (max-width: 667px) {
	
	/*==================================================================*
	 *  [ siteHeader ] 
	 *==================================================================*/
	
	#siteHeader .ysgear {
		margin: 13px 20px;
	}
	#siteHeader .ysgear img {
		width: 136px;
		height: 25px;
	}
	
	
	/*==================================================================*
	 *  [ headerNav searchBox ] 
	 *==================================================================*/
	
	#headerNav .searchBox {
		margin: 13px 20px;
	}
	
	/*======================================================================*
	 *  [ headerNav shopNav ] 
	 *======================================================================*/
	
	#headerNav .shopNav {
		width: calc(100% - 356px);
		height: 35px;
		margin: 0 -5px;
		padding: 8px 0;
	}
	#headerNav .shopNav li { margin: 0 5px; }
	
}


/*======================================================================*
 *  [ Media Queries 568 ] 
 *======================================================================*/

@media screen and (max-width: 568px) {
	
	/*==================================================================*
	 *  [ siteHeader ] 
	 *==================================================================*/
	
	#siteHeader .ysgear {
		margin: 13px 15px;
	}
	
	
	/*==================================================================*
	 *  [ navButton ] 
	 *==================================================================*/
	
	#navButton {
		display: block;
		float: right;
		margin: 9px 15px;
		cursor: pointer;
	}
	#navButton img {
		display: none;
	}
	#navButton img.active {
		display: block;
	}
	
	
	/*==================================================================*
	 *  [ headerNav ] 
	 *==================================================================*/
	
	#headerNav {
		display: none;
		position: absolute;
		top: 51px;
		width: 100%;
		padding: 0 15px;
		background: #fff;
		box-sizing: border-box;
		z-index: 100;
	}
	
	#headerNav .closeButton {
		display: block;
		margin: 0 -15px;
		padding: 12px 15px;
		border-top: 1px solid #fff;
		background: #000;
		color: #fff;
		font-size: 14px;
		font-size: 1.4rem;
		text-align: center;
	}
	#headerNav .closeButton:hover {
		background: #666;
		color: #fff;
		cursor: pointer;
	}
	
	
	/*==================================================================*
	 *  [ headerNav searchBox ] 
	 *==================================================================*/
	
	#headerNav .searchBox {
		margin: 0;
		float: none;
		width: 100%;
	}
	#headerNav .searchBox .search {
		font-size: 16px;
		font-size: 1.6rem;
		line-height: 1.8;
	}
	
	
	/*==================================================================*
	 *  [ headerNav shopNav ] 
	 *==================================================================*/
	
	#headerNav .shopNav {
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		width: 100%;
		margin: 0;
		padding: 10px 0;
		height: auto;
		text-align: center;
	}
	#headerNav .shopNav li {
		width: calc(25% - 10px);
		margin: 0;
		padding: 0 5px;
	}
	#headerNav .shopNav a {
		display: inline-block;
	}
	#headerNav .shopNav a::before { display: block; }
	#headerNav .shopNav .wishlist a::before { content: url(/shared/svg/icon_shopnav_wishlist.svg); }
	#headerNav .shopNav .registration a::before { content: url(/shared/svg/icon_shopnav_registration.svg); }
	#headerNav .shopNav .login a::before { content: url(/shared/svg/icon_shopnav_login.svg); }
	#headerNav .shopNav .mypage a::before { content: url(/shared/svg/icon_shopnav_mypage.svg); }
	#headerNav .shopNav .cart a::before { content: url(/shared/svg/icon_shopnav_cart.svg); }
	#headerNav .shopNav br { display: inline-block; }
	
	
	/*==================================================================*
	 *  [ globalNav ] 
	 *==================================================================*/
	
	#globalNav {
		margin: 0 -15px;
		font-size: 14px;
		font-size: 1.4rem;
	}
	#globalNav ul {
		display: block;
	}
	#globalNav li {
		width: 100%;
		text-align: left;
	}
	#globalNav li + li {
		padding: 0;
	}
	#globalNav a {
		padding: 12px 15px;
		border-bottom: none;
		background: #e6e6e6;
	}
	#globalNav li + li a {
		border-top: 1px solid #fff;
	}
	#globalNav a:before {
		display: inline-block;
		width: 0;
		height: 0;
		margin: 0 2px 2px 0;
		border: 3px solid transparent;
		border-left: 4px solid #575757;
		content: "";
	}
	#globalNav .profile a:after {
		content: "企業情報";
	}
	#globalNav .product a:after {
		content: "製品情報";
	}
	#globalNav .shop a:after {
		content: "オンラインショップ";
	}
	#globalNav .event a:after {
		content: "イベント&エンターテイメント";
	}
	#globalNav .shoplist a:after {
		content: "販売店検索";
	}
	#globalNav .support a:after {
		content: "お問い合わせ・製品サポート";
	}
	#globalNav li img {
		display: none;
	}
	
	
	/*==================================================================*
	 *  [ breadcrumbs ] 
	 *==================================================================*/
	
	.breadcrumbs ol {
		margin: 0;
		padding: 7px 10px 7px 6px;
		border-top: 1px solid #e2e2e2;
		border-bottom: 1px solid #e2e2e2;
	}
	.breadcrumbs li {
		display: none;
	}
	.breadcrumbs li.spn {
		display: inline-block;
	}
	.breadcrumbs li + li:before {
		content: "";
		margin: 0;
	}
	.breadcrumbs a:before {
		display: inline-block;
		width: 0;
		height: 0;
		margin: 0 2px 0 0;
		border: 3px solid transparent;
		border-right: 4px solid #bfc0c0;
		content: "";
	}
	
	/* [ POPUP型 ] */
	.popupType .breadcrumbs {
		margin: 0;
	}
	.popupType .breadcrumbs ol {
		padding: 7px 10px 7px 6px;
	}
	.popupType .breadcrumbs div {
		position: relative;
		padding: 0;
	}
	#closeButton {
		position: absolute;
		top: 0;
		bottom: 0;
		height: 100%;
	}
	/* [ IE9以上 ] */
	:root #closeButton { min-height: 33px\0; }
	
	
	/*==================================================================*
	 *  [ pageTitle ] 
	 *==================================================================*/
	
	.pageTitle {
		margin: 18px 10px;
	}
	
	
	/*==================================================================*
	 *  [ contentsWidth ] 
	 *==================================================================*/
	
	.contentsTop   > .contentsWidth, 
	.contentsBasic > .contentsWidth, 
	.contentsPopup > .contentsWidth {
		padding: 0 10px;
	}
	
	
	/*==================================================================*
	 *  [ common | 共通要素 ] 
	 *==================================================================*/
	
	/* [ commonIndent | 共通インデント ] */
	.commonIndent {
		margin-left: 10px !important;
	}
	
	/* [ commonWrap h2 / commonTitleH2 | 共通見出し H2 ] */
	/* [ commonWrap h4 / commonTitleH4 | 共通見出し H4 ] */
	.commonWrap h2, .commonTitleH2, 
	.commonWrap h4, .commonTitleH4 {
		margin-right: -10px !important;
		margin-left: -10px !important;
		padding-right: 10px;
		padding-left: 10px;
	}
	
	/* [ commonLinkBox | 共通リンクボックス（カラム選択可） ] */
	.commonLinkBox {
		margin: 30px 10px;
	}
	.commonLinkBox.column3 li { width:  50%; }
	.commonLinkBox.column3 li:nth-child(3n+1) { clear: none; }
	.commonLinkBox.column3 li:nth-child(2n+1) { clear: both; }
	
	
	/*======================================================================*
	 *  [ readerBox | Adobe Acrobat Reader ] 
	 *======================================================================*/
	
	.readerBox, 
	.readerBox dl, 
	.readerBox dt, 
	.readerBox dd {
		display: block;
	}
	.readerBox dt, 
	.readerBox dd {
		padding: 10px;
	}
	.readerBox dt {
		max-width: 100%;
		padding-bottom: 0;
		background: #f8f7f7;
		text-align: left;
	}
	.readerBox dd {
		border-left: none;
	}
	.readerBox dd br {
		display: none;
	}
	
	
	/*==================================================================*
	 *  [ contentsSide | サイドバー ] 
	 *==================================================================*/
	
	.contentsSide {
		padding: 0 10px;
	}
	
	
	/*==================================================================*
	 *  [ siteFooter ] 
	 *==================================================================*/
	
	#siteFooter small {
		padding: 10px 15px;
	}
	
	
	/*==================================================================*
	 *  [ contentsLink ] 
	 *==================================================================*/
	
	.contentsLink {
		font-weight: normal;
	}
	
	.contentsLink p {
		display: none;
	}
	
	.contentsLink .inner > ul {
		border-top: none;
	}
	.contentsLink .inner > ul > li {
		float: none;
		width: 100%;
		padding: 0;
	}
	.contentsLink .inner > ul > li > a {
		margin: 0;
	}
	.contentsLink.spn .title {
		position: relative;
	}
	.contentsLink.spn .title:after {
		display: block;
		position: absolute;
		top: 50%;
		right: 15px;
		margin: -8px 0 0 0;
		content: url(../svg/icon_footer_show.svg);
	}
	.contentsLink.spn .title.active:after {
		content: url(../svg/icon_footer_hide.svg);
	}
	.contentsLink ul ul {
		display: none;
	}
	.contentsLink li li {
		line-height: 1.5;
	}
	.contentsLink .top {
		display: block;
	}
	.contentsLink .inner li a {
		padding: 10px 10px 10px 15px;
		border-bottom: 1px solid #fff !important;
	}
	.contentsLink .inner li li a {
		padding-left: 45px;
	}
	.contentsLink li a:before {
		margin: 0 2px 2px 0;
		border-width: 3px 3px 3px 4px;
	}
	
	
	/*==================================================================*
	 *  [ logo20th | 20周年ロゴ ] 2017.1 追記
	 *==================================================================*/
	
	.logo20th {
		padding: 15px 0 !important;
	}
	.contentsLink .inner li.logo20th a {
		border-bottom: none !important;
	}
	
	/*==================================================================*
	 *  [ siteLink ] 
	 *==================================================================*/
	
	.siteLink {
		margin: 10px 10px 74px 5px;
	}
	
}


/*======================================================================*
 *  [ Media Queries 480 ] 
 *======================================================================*/

@media screen and (max-width: 480px) {
	
	/*==================================================================*
	 *  [ common | 共通要素 ] 
	 *==================================================================*/
	
	/* [ commonLinkBox | 共通リンクボックス（カラム選択可） ] */
	.commonLinkBox.column2 li, 
	.commonLinkBox.column3 li { width:  100%; }
	
	
	/*==================================================================*
	 *  [ specialLink | 特集リンク ]
	 *==================================================================*/
	
	.specialLink .medium {
		float: none;
		width: 100%;
	}
	.specialLink .small {
		width: 50%;
	}
	.specialLink .small img {
		width: 100%;
	}
	
}