@charset "Shift_jis";

/*  -----------------------------
for smart phone
-------------------------- */

@media screen and (max-width: 768px) {
    body {
        padding-top: 46px;
    }
    .header p.brand-name {
        display: none;
    }
    .contents {
        width: auto;
        padding: 0 5px;
    }

	/* header
	--------------------------------------------------------------------------------------*/
    .header {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 999;
        border-bottom: solid 2px #cab57a;
    }
    .header h1 {
        text-align: center;
        float: none;
        padding: 9px 0 0;
    }
    .header h1 img {
        height: 25px;
    }
    .header-in {
        height: 45px;
        width: 100%;
        position: relative;
        background-color: #fff;
    }
    .header .menu-trigger {
        position: absolute;
        z-index: 10;
        top: 7px;
        left: 9px;
        display: block;
		cursor:pointer;
    }
    .header .menu-trigger img {
        height: 33px;
    }

	/* contents
	--------------------------------------------------------------------------------------*/
    .leftContents {
        float: none;
        width: 100%;
        padding: 10px 0 10px 0;
    }
	h2.title {
		display: block;
		text-align: center;
		font-size: 18px;
		margin-bottom: 10px;
		font-weight: bold;
	}
	h3 {
		font-size: 28px;
	}

	/*-------------------
	トップコンテンツ
	--------------------*/
	.topContents {
	    width: auto;
		margin: 0px 5px 0px;
	}
	.pickupList {
	    width: 100%;
		float: none;
	}
	#slide {
	    width: 100%;
		background: #999;
	}
	.boseBanner {
	    display: none;
	}

	/*-------------------
	ページタイトル
	--------------------*/
	div.page-title {
        margin-bottom: 10px;
		width: 100%;
		padding: 20px 0px;
		display: block;
    }
	div.page-title h2{
		width: 100%;
	    float: none;
		display: block;
		font-size: 28px;
		text-align: center;
	}
	div.page-title p {
	    display: none;
	}

	/*-------------------
	グロナビ
	--------------------*/
    .sp-menu-box {
        display: block;
    }
    .menu-box {
        display: none;
    }
    #sp-menu {
        display: none;
        padding: 20px;
        position: fixed;
        top: 45px;
        left: 0;
        border-bottom: solid 2px #cab57a;
        background-color: rgba(241, 241, 241, 0.9);
        width: 100%;
        z-index: 10;
        box-shadow: 0px 5px 3px -3px rgba(0, 0, 0, 0.25);
        -webkit-box-shadow: 0px 5px 3px -3px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0px 5px 3px -3px rgba(0, 0, 0, 0.25);
    }
    #sp-menu .menu-category-main {
        font-weight: bold;
    }
    #sp-menu .menu-category-main > li {
        line-height: 1.8;
    }
    #sp-menu .menu-category-sub {
        font-weight: normal;
    }
    #sp-menu .menu-category-sub2 > li {
        text-indent: 1em;
    }

	/*-------------------
	レビューリスト
	--------------------*/
	.reviewList ul {
		overflow: hidden;
	}

	.reviewList ul li {
		float: left;
		width: 49.5%;
		text-align: center;
		font-size: 15px;
		margin-right: 0px;
		margin-bottom: 5px;
	}

	.reviewList ul li img {
		width: 60%;
	}

	.reviewList ul li:nth-child(2n) {
		float: right;
		margin-right: 0px;
	}

	.reviewList ul li a {
		display: block;
		width: auto;
		border: 1px solid #979797;
	}

	.reviewList ul li a:hover {
		text-decoration: none;
	}

	/*-------------------
	スペシャルコンテンツ
	--------------------*/

	div.special_contents {
		width: auto;
	}

	div.special_contents ul {
		overflow: hidden;
	}

	div.special_contents > ul > li {
		float: none;
		width: auto;
		margin: 0px 0px 5px 0px;
		text-align: center;
	}

	div.special_contents ul.btn {
		display: none;
	}


	/*-------------------
	レビュー
	--------------------*/

	div.archiveList {
		width: auto;
		margin: 0px;
		background: #FFF;
		padding: 0px;
	}

	div.archiveList ul {
		overflow: hidden;
	}

	div.archiveList > ul > li {
		float: none;
		width: 100%;
		margin: 0px 0px 10px;
		background: #FFF;
		text-align: left;
		display: table;
		border-bottom: 1px solid #979797;
	}

	div.archiveList .pic {
		width: 120px;
		margin: 0px;
		padding-right: 10px;
		padding-bottom: 10px;
		display: table-cell;
	}

	div.archiveList .pic img {
		border: 1px solid #979797;
	}

	div.archiveList .pic img.icon_vgp{
		position: absolute;
		left: 5px;
		top: 5px;
		display: block;
		width: 25px;
		border: none;;
	}

	div.archiveList .pic img.icon_vgp2{
		position: absolute;
		left: 5px;
		top: 35px;
		display: block;
		width: 25px;
		border: none;;
	}


	div.archiveList .detail {
		display: table-cell;
		vertical-align: middle;
	}

	div.archiveList ul.btn,
	div.archiveList ul.btn2,
    div.archiveList ul.btnShort {
		display: block;
		width: auto;
		margin: 0px auto 10px;
		overflow: hidden;
	}

	div.archiveList ul.btn li,
	div.archiveList ul.btn2 li,
    div.archiveList ul.btnShort li {
		display: block;
		height: auto;
		padding: 0px;
		float: left;
		margin-right: 5px;
		margin-bottom: 5px;
	}

	/*div.archiveList ul.btn li:first-child,
	div.archiveList ul.btn2 li:first-child {
		margin-bottom: 5px;
		float: none;
	}*/

	li.reviewLink a,
	li.detailLink a {
		display: inline-block;
		width: auto;
		height: auto;
		border: 2px solid #979797;
		border-radius: 15px;
		padding: 3px 10px;
		font-size: 12px;
	}

	li.reviewLink span {
		display: inline;
		font-size: 12px;
	}

	div.archiveList ul.btn img,
	div.archiveList ul.btn2 img {
		width: 30px !important;
	}

	div.archiveList h4 {
		display: none;
	}

	div.archiveList h5 {
		font-size: 15px;
		margin-bottom: 5px;
	}


	/*-------------------
	 Product Map
	--------------------*/
	#boseChart {
		width: auto;
	}

	#box1,
	#box2,
	#box3 {
		width: auto;
		height: auto;
	}

	/* tab */
	ul#tabs {
		width:100%;
		overflow: hidden;
	}

	ul#tabs li {
		width:33%;
		font-size: 11px;
		box-sizing: border-box;
	}

	ul#tabs li:nth-child(2) {
		width:34%;
	}

	ul#tabs li#last {
		width:33%;
	}

	/*
	ul#tabs li {
		width:44%;
		font-size: 13px;
		box-sizing: border-box;
	}

	ul#tabs li:nth-child(2) {
		width:26%;
	}

	ul#tabs li#last {
		width:30%;
	}
	*/
	

	/* right contents
	--------------------------------------------------------------------------------------*/
    .rightContents {
        float: none;
        width: auto;
        margin: 0 auto;
        padding: 10px 0;
		display: table;
    }
	.rightContents h4 {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
        padding: 0px 10px;
	}

	.rightContents h4 img {
		width: 30px;
		margin-right: 2px;
	}


	/*-------------------
	SNS
	--------------------*/
	.rightContents .bose_sns {
		display: none;
	}

	/*-------------------
	Facebook
	--------------------*/
	.rightContents .bose_facebook {
		display: none;
	}

	/* footer
	--------------------------------------------------------------------------------------*/
    div#footer {
        display: none;
    }
    footer.sp {
        padding: 10px 0;
        text-align: center;
        display: block;
        line-height: 1.2;
        font-size: 10px;
    }
}


@media screen and (max-width: 320px) {
	div.page-title h2{
		font-size: 26px;
	}
	div.archiveList .pic {
		width: 100px;
	}
	.rightContents h4 {
        padding: 0px 0px;
	}

}