/* ------------------------------------
style.css 中古買取ページ用 css
https://www.shimamura.co.jp/used/

*Reset
*common-Bootstrap
*common-基本設定
*common-各パーツ設定
*common-各パーツ設定(incファイル単位)
*キャンペーン関連
*トップページ /used/
*店舗買取 /used/flow/shop/
*出張買取 /used/flow/visit/
*宅配買取 /used/flow/delivery/
*委託販売 /used/flow/consignment/
*中古楽器販売店店舗 /used/shops/
*各Deptページ /used/gakki/◯◯/index.php
---------------------------------------*/


/*2022-02-03 Webリニューアルでヘッダー側パンくずを削除（HTML修正するまでの暫定処置）*/
.usedHeader + .topicPath{
	display: none;
}


/*=======================================================
Reset
=========================================================*/

em{
	font-style: normal;
}

ul{
	list-style-type: disc;
	padding-left: 1.3em;
	margin-bottom: 1em;
}

p{
	margin-bottom: 1em;
}

/*=======================================================
common-Bootstrap
=========================================================*/

/*row
---------------------------------------------------------*/
.row{
	margin-bottom: 0;
}

/*text
---------------------------------------------------------*/
.text-primary{ color: #a3161d; }
.text-web{ color: #004964; }
.text-line{ color: #00c300; }
.text-call{ color: #6C2; }

/*テキストサイズ調整*/
.text-sm_90{ font-size: 90% !important; }
.text-lg_120{ font-size: 120% !important; }
.text-lg_150{ font-size: 150% !important; }
.text-lg_200{ font-size: 200% !important; }
.text-lg_250{ font-size: 250% !important; line-height:1.2; }

/*btn
---------------------------------------------------------*/
/*通常[H:60px]
------------------------------*/
.btn{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	line-height: 1.5;
	border-width: 0;
	border-radius: 5px;
	margin-top: .5em;
	margin-bottom: .5em;
	padding-top: 18px;
	padding-bottom: 18px;
}

/*btn-sm[H:40px]
------------------------------*/
.btn-sm,
.btn-group-sm > .btn{
	font-size: 100%;
	line-height: 1.4;
	border-radius: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
}

/*btn-lg[H:80px]
------------------------------*/
.btn-lg,
.btn-group-lg > .btn{
	max-width: 720px;
	font-size: 16px;
	line-height: 1.5;
	border-radius: 5px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 28px;
	padding-bottom: 28px;
}

/*btn-lg（カスタム）*/
.btn-lg_120,
.btn-lg_150,
.btn-lg_180,
.btn-lg_200{
	font-weight: bold;
}
@media screen and (min-width: 767px){
	.btn-lg_120{ padding: 1em 2em; font-size: 120%; }
	.btn-lg_150{ padding: 1em 2em; font-size: 150%; }
	.btn-lg_180{ padding: 1em 2em; font-size: 180%; }
	.btn-lg_200{ padding: 1em 2em; font-size: 200%; }
}

/*btn-primary
------------------------------*/
.btn.btn-primary{ color: #fff; background-color: #ee7800; }
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus{ color: #fff; background-color: #F92; }

/*btn-default
------------------------------*/
.btn.btn-default{
	white-space: normal;
}
.btn.btn-default span,
.btn.btn-default small{
	display: inline-block;
}
/*btn-plain*/
.btn-default.btn-plain{ color: #333; background-color: #DDD; }
.btn-default.btn-plain:hover,
.btn-default.btn-plain:active,
.btn-default.btn-plain:focus{ color: #333; background-color: #EEE; }
/*btn-gakki*/
.btn-default.btn-gakki{ 
	color: #fff;
	background-color: #A3161D;
	padding: 0;
}
.btn-default.btn-gakki:hover,
.btn-default.btn-gakki:active,
.btn-default.btn-gakki:focus{ color: #fff; background-color: #b67477; }
/*btn-visit*/
.btn-default.btn-visit{ 
	color: #fff;
	background-color: #444;
	padding: 0;
}
.btn-default.btn-visit:hover,
.btn-default.btn-visit:active,
.btn-default.btn-visit:focus{ color: #fff; background-color: #999; }
/*btn-web*/
.btn-default.btn-web{ color: #fff; background-color: #004964; }
.btn-default.btn-web:hover,
.btn-default.btn-web:active,
.btn-default.btn-web:focus{ color: #fff; background-color: #279; }
/*btn-line*/
.btn-default.btn-line{ color: #fff; background-color: #00c300; }
.btn-default.btn-line:hover,
.btn-default.btn-line:active,
.btn-default.btn-line:focus{ color: #fff; background-color: #4D4; }
/*btn-digital-piano*/
.btn-default.btn-digital-piano{ color: #fff; background-color: #9C632A; }
.btn-default.btn-digital-piano:hover,
.btn-default.btn-digital-piano:active,
.btn-default.btn-digital-piano:focus{ color: #FFF; background-color: #631; }
/*btn-acoustic-piano*/
.btn-default.btn-acoustic-piano{ color: #FFF; background-color: #992950; }
.btn-default.btn-acoustic-piano:hover,
.btn-default.btn-acoustic-piano:active,
.btn-default.btn-acoustic-piano:focus{ color: #FFF; background-color: #C36; }
/*btn-soundproof*/
.btn-default.btn-soundproof{ color: #FFF; background-color: #6A92BC; }
.btn-default.btn-soundproof:hover,
.btn-default.btn-soundproof:active,
.btn-default.btn-soundproof:focus{ color: #FFF; background-color: #ACE; }
/*btn-digimart*/
.btn-default.btn-digimart{ color: #FFF; background-color: #222; }
.btn-default.btn-digimart:hover,
.btn-default.btn-digimart:active,
.btn-default.btn-digimart:focus{ color: #FFF; background-color: #555; }
/*btn-call*/
.btn-default.btn-call{ color: #FFF; background-color: #6C2; }
.btn-default.btn-call:hover,
.btn-default.btn-call:active,
.btn-default.btn-call:focus{ color: #FFF; background-color: #9E6; }
.btn-default.btn-call span{ display: block; }
.btn-default.btn-call span:nth-of-type(1){ font-weight: normal; }
.btn-default.btn-call span:nth-of-type(2){ font-size: 120%; }

/*アイコン用設定
------------------------------*/
.btn-icon{
	padding-left: 30px;
	padding-right: 30px;
}
.btn-icon::before,
.btn-icon::after{
	position: absolute;
	width: 100%;
	font-family: FontAwesome;
	font-size: 24px;
	line-height: 1;
}
.btn-icon::after{
	text-align: right;
	padding-right: 20px;
}
.btn-sm.btn-icon::after{
	padding-right: 10px;
}
.btn-icon::before{
	text-align: left;
	padding-left: 20px;
}
.btn-sm.btn-icon::before{
	padding-left: 10px;
}

/*右アイコン-FontAwesome*/
.btn-icon-circle-chevron-down::after{ 
	content: '\f13a';
	font-size: 19px;
}
.btn-icon-arrow::after{ content: '\f105'; }
.btn-icon-search::after{ content: '\f002'; }
.btn-icon-refresh::after{ content: '\f021'; }
.btn-icon-exlink::after{ content: '\f08e'; }
.btn-icon-double_arrow_up::after{ content: '\f102'; }
.btn-icon-double_arrow_down::after{ content: '\f103'; }

/*左アイコン-FontAwesome*/
.btn-icon-arrow_back::before{ content: '\f104'; }
.btn-icon-call::before{ content: '\f095'; }

/*左アイコン-SVG画像*/
.btn-icon-device::before{
	left: 0;
	content: url(/used/img/icon-assess_web-white.svg);
}
.btn-icon-messanger::before{
	left: 0;
	content: url(/used/img/icon-assess_line-white.svg);
}
.btn-icon-digital-piano::before{
	left: 0;
	content: url(/used/img/icon-assess_digital-piano.svg);
}
.btn-icon-acoustic-piano::before{
	left: 0;
	content: url(/used/img/icon-assess_acoustic-piano.svg);
}
.btn-icon-soundproof::before{
	left: 0;
	content: url(/used/img/icon-assess_soundproof.svg);
}
@media screen and (min-width: 768px){
	.btn-icon-device::before,
	.btn-icon-messanger::before{
		width: 100px;
	}
	.btn-icon-digital-piano::before,
	.btn-icon-acoustic-piano::before,
	.btn-icon-soundproof::before{
		width: 60px;
	}
}
@media screen and (max-width: 767px){
	.btn-icon-device::before,
	.btn-icon-messanger::before{
		width: 70px;
		padding-left: 10px;
	}
	.btn-icon-digital-piano::before,
	.btn-icon-acoustic-piano::before,
	.btn-icon-soundproof::before{
		width: 27px;
		padding-left: 5px;
	}
}
@media screen and (max-width: 360px){
	.btn-icon-device::before,
	.btn-icon-messanger::before{
		width: 50px;
	}
}

/*panel
---------------------------------------------------------*/

/*共通調整
------------------------------*/
/*heading-見出し*/
.container .panel-heading h2,
.container .panel-heading h3,
.container .panel-heading h4,
.container .panel-heading h5{
	font-size: 100%;
	margin: 0;
}
/*body*/
.container .panel-body{
	padding: 20px;
}
/*body-見出し*/
.container .panel-body > h2:first-child,
.container .panel-body > h3:first-child,
.container .panel-body > h4:first-child,
.container .panel-body > h5:first-child{
	margin-top: 0;
}
/*body-リスト*/
.panel-body ul,
.panel-body ol{
	padding-left: 1.5em;
}
/*body-余白調整*/
.panel-body > *:first-child{ margin-top: 0; }
.panel-body > *:last-child{ margin-bottom: 0; }

/*panel-default
------------------------------*/
.panel.panel-default{
	border-color: #CCC;
	border-radius: 0;
	box-shadow: none;
}
.panel-default > .panel-heading{
	background-color: #EEE;
	border-color: transparent transparent #CCC transparent;
}
.panel-default > .panel-body h3{
	font-weight: 700;
}

/*panel-primary
------------------------------*/
.panel.panel-primary{
	border-color: #CCC;
	border-radius: 0;
	box-shadow: none;
	margin-top: 40px;
}
.panel-primary > .panel-heading{
	background-color: #F7EED4;
	border-color: transparent transparent #CCC transparent;
	padding: 20px;
}
.panel-primary > .panel-heading h3{
	color: #333;
	font-size: 143%;/*20px相当*/
	text-align: center;
}

/*panel-index
------------------------------*/
.panel.panel-index{
	background-color: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	width: 60%;
	margin: auto;
}
.panel.panel-index > .panel-body li a{
	color: #000;
	display: flex;
	justify-content: space-between;
    align-items: center;
}
.panel.panel-index > .panel-body li a::after {
    content: "\e252";
}
.panel.panel-index > .panel-body li a::after {
    justify-content: center;
    align-items: center;
    font-family: "Glyphicons Halflings";
    font-weight: 400;
}
.panel.panel-index > .panel-body,.panel.panel-brand .panel-collapse > .panel-body{
	padding-left: 0;
	padding-right: 0;
}

.panel.panel-index ul{
	list-style-type: none;
	padding-left: 0;
}
.panel.panel-index ul li{
	background-color: #EEE;
	padding: 10px 20px;
}
.panel.panel-index ul li + li{
	margin-top: 10px;
}
@media screen and (max-width: 767px){
	.panel.panel-index{
		width: 100%;
	}
}

/*panel-brand
------------------------------*/
.panel.panel-brand{
	background-color: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
.panel.panel-brand > .panel-heading{
	border: 1px solid #CCC;
	border-radius: 0;
	padding: 0;
}
.panel.panel-brand > .panel-heading h3{
	background-color: #777;
	color: #FFF;
	font-size: 114%;/*16px相当*/
	padding: 1em 20px;
}
.panel.panel-brand > .panel-heading h3.toggle{
	padding: 0;
}
.panel.panel-brand > .panel-heading h3 a{
	display: flex;
	justify-content: space-between;
    align-items: center;
	padding: 1em 20px;
}
.panel.panel-brand > .panel-heading h3 a[aria-expanded="false"]::after {
    content: "\002b";
}
.panel.panel-brand > .panel-heading h3 a[aria-expanded="true"]::after {
    content: "\2212";
}
.panel.panel-brand > .panel-heading h3 a::after {
    justify-content: center;
    align-items: center;
    font-family: "Glyphicons Halflings";
    font-weight: 400;
}
.panel.panel-brand > .panel-body,.panel.panel-brand .panel-collapse > .panel-body{
	padding-left: 0;
	padding-right: 0;
}

.panel.panel-brand ul{
	list-style-type: none;
	padding-left: 0;
}
.panel.panel-brand ul li{
	background-color: #EEE;
	padding: 10px 20px;
}
.panel.panel-brand ul li + li{
	margin-top: 10px;
}

/*well
---------------------------------------------------------*/
/*スタイル調整*/
.well{
	background-color: #f6f6f6;
	border-color: #CCC;
	border-radius: 0;
	box-shadow: none;
}
/*余白調整*/
.well{
	margin: 30px 0;
}
.well > *:first-child{ margin-top: 0; }
.well > *:last-child{ margin-bottom: 0; }
/*見出し*/
.container .well h3{
	font-size: 114%;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 1em;
}
/*リスト*/
.well > ul{
	padding-left: 1.3em;
}
.well > ul > li{
	line-height: 1.5;
}
.well > ul > li:not(:last-of-type){
	margin-bottom: .5em;
}

/*list-flex (ブロック要素として扱う list-inline のようなもの)
---------------------------------------------------------*/
ul.list-flex{
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	margin-left: 0;
	padding-left: 0 !important;
}
ul.list-flex.list-flex-center{
	justify-content: center;
}

ul.list-flex > li{
	margin: 0;
	padding: 0;
}
ul.list-flex > li:not(:last-of-type)::after{
	content: '';
	display: inline-block;
	width: 1px;
	height: 1em;
	background-color: #333;
	margin-left: .75em;
	margin-right: .75em;
	transform: rotate(30deg);
	position: relative;
	top: .1em;
}

/*list-group
---------------------------------------------------------*/
/*対象店舗リスト*/
a.list-group-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
a.list-group-item span.glyphicon-new-window{
	margin-left: .5em;
	font-size: 85%;
}

/* Collapse チャンク用設定
---------------------------------------------------------*/
/*全体*/
.panel-group-chunk .panel{
	background-color: transparent;
	border: initial;
	border-radius: initial;
	box-shadow: initial;
}
/*見出し*/
.panel-group-chunk .panel-heading{
	padding: 0;
}
.panel-group-chunk .panel-heading > a{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	color: #FFF;
}
.panel-group-chunk .panel-heading > a span,
.panel-group-chunk .panel-heading > a h3{
	width: 100%;
	line-height: 1;
	padding: 15px;
}
.panel-group-chunk .panel-heading.panel-heading-lg > a span,
.panel-group-chunk .panel-heading.panel-heading-lg > a h3{
	font-size: 140%;
}
.panel-group-chunk .panel-heading > a:hover,
.panel-group-chunk .panel-heading > a:focus{
	text-decoration: none;
}
.panel-group-chunk .panel-heading > a:hover span,
.panel-group-chunk .panel-heading > a:hover h3{
	text-decoration: underline;
}
/*開閉マーク*/
.panel-group-chunk .panel-heading > a::after{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5rem;
	font-family: "Glyphicons Halflings";
	font-weight: 400;
}
.panel-group-chunk .panel-heading > a[aria-expanded="false"]::after{ content: "\002b"; }/*plus*/
.panel-group-chunk .panel-heading > a[aria-expanded="true"]::after{ content: "\2212"; }/*minus*/
/*本文*/
.panel-group-chunk .panel-heading + .panel-collapse > .list-group,
.panel-group-chunk .panel-heading + .panel-collapse > .panel-body{
	border: initial;
	margin-top: 10px;
}
.panel-group-chunk .panel .panel-body > *:first-child{
	margin-top: 0;
}
.panel-group-chunk .panel{
	margin-top: 1em;
}
.panel-group.panel-group-chunk .panel + .panel{
	margin-top: 2em;
}
/*本文内の見出しスタイル*/
.panel-group-chunk .panel .panel-body h4{
	color: #a3161d;
}

/*panel-default
------------------------------*/
/*見出し*/
.panel-group-chunk .panel-default .panel-heading > a[aria-expanded="false"]{
	background-color: #DDD;
	color: #333;
}
.panel-group-chunk .panel-default .panel-heading > a[aria-expanded="true"],
.panel-group-chunk .panel-default .panel-heading > a[aria-expanded="false"]:hover{
	background-color: #777;
	color: #FFF;
}
/*見出し（LINEで買取）*/
.panel-group-chunk .panel-default .panel-heading-line > a[aria-expanded="true"],
.panel-group-chunk .panel-default .panel-heading-line > a[aria-expanded="false"]{
	background-color: #00c300;
	color: #fff;
}
.panel-group-chunk .panel-default .panel-heading-line > a[aria-expanded="true"]:hover,
.panel-group-chunk .panel-default .panel-heading-line > a[aria-expanded="false"]:hover{
	background-color: #4D4;
}
/*見出し（Webで買取）*/
.panel-group-chunk .panel-default .panel-heading-web > a[aria-expanded="true"],
.panel-group-chunk .panel-default .panel-heading-web > a[aria-expanded="false"]{
	background-color: #004964;
	color: #fff;
}
.panel-group-chunk .panel-default .panel-heading-web > a[aria-expanded="true"]:hover,
.panel-group-chunk .panel-default .panel-heading-web > a[aria-expanded="false"]:hover{
	background-color: #279;
}
/*見出し（下取）*/
.panel-group-chunk .panel-default .panel-heading-trade_in > a[aria-expanded="true"],
.panel-group-chunk .panel-default .panel-heading-trade_in > a[aria-expanded="false"]{
	background-color: #a3161d;
	color: #FFF;
}
.panel-group-chunk .panel-default .panel-heading-trade_in > a[aria-expanded="true"]:hover,
.panel-group-chunk .panel-default .panel-heading-trade_in > a[aria-expanded="false"]:hover{
	background-color: #C22;
}
/*見出し（有料引取）*/
.panel-group-chunk .panel-default .panel-heading-withdraw > a[aria-expanded="true"],
.panel-group-chunk .panel-default .panel-heading-withdraw > a[aria-expanded="false"]{
	background-color: #ff792b;
	color: #FFF;
}
.panel-group-chunk .panel-default .panel-heading-withdraw > a[aria-expanded="true"]:hover,
.panel-group-chunk .panel-default .panel-heading-withdraw > a[aria-expanded="false"]:hover{
	background-color: #F92;
}
/*本文*/
.panel-group-chunk .panel-default .panel-heading + .panel-collapse > .list-group,
.panel-group-chunk .panel-default .panel-heading + .panel-collapse > .panel-body{
	background-color: #FFF;
	border: 1px solid #DDD;
}

/*panel-info
------------------------------*/
/*見出し*/
.panel-group-chunk .panel-info .panel-heading > a[aria-expanded="false"]{
	background-color: #ee7800;
	color: #FFF;
}
.panel-group-chunk .panel-info .panel-heading > a[aria-expanded="true"],
.panel-group-chunk .panel-info .panel-heading > a[aria-expanded="false"]:hover{
	background-color: #555;
	color: #FFF;
	text-decoration: none;
}
/*本文*/
.panel-group-chunk .panel-info .panel-heading + .panel-collapse > .list-group,
.panel-group-chunk .panel-info .panel-heading + .panel-collapse > .panel-body{
	background-color: #FFF;
	border: 1px solid #DDD;
}

/*panel-faq
------------------------------*/
/*見出し*/
.panel-faq > .panel-heading{
	position: relative;
	font-size: 114%;/*16px相当*/
	line-height: 1.4;
}
.panel-faq .panel-heading > a[aria-expanded="false"] span,
.panel-faq .panel-heading > a[aria-expanded="false"]::before,
.panel-faq .panel-heading > a[aria-expanded="false"]::after{
	background-color: #DDD;
	color: #333;
}
.panel-faq .panel-heading > a[aria-expanded="true"] span,
.panel-faq .panel-heading > a[aria-expanded="true"]::before,
.panel-faq .panel-heading > a[aria-expanded="true"]::after,
.panel-faq .panel-heading > a[aria-expanded="false"]:hover span,
.panel-faq .panel-heading > a[aria-expanded="false"]:hover::before,
.panel-faq .panel-heading > a[aria-expanded="false"]:hover::after{
	background-color: #777;
	color: #FFF;
	font-weight: bold;
}
/*本文*/
.panel-faq .panel-body::before,
.panel-faq .panel-body > div{
	background-color: #FFF;
	border: 1px solid #DDD;
}
.panel-faq .panel-body > div{
	padding: 10px 15px;
}
.panel-faq .panel-body > div > *:last-child{
	margin-bottom: 0;
}
/*Q・A固定*/
.panel-faq .panel-heading a{
	position: relative;
}
.panel-faq .panel-body{
	position: relative;
	padding: 0;
}
.panel-faq .panel-heading a::before,
.panel-faq .panel-body::before{
	position: absolute;
	content: 'Q';
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5rem;
	height: 100%;
}
.panel-faq .panel-heading a::before{ content: 'Q'; }
.panel-faq .panel-body::before{ content: 'A'; }

.panel-faq .panel-heading > a span,
.panel-faq .panel-body > div{
	margin-left: 5.5rem;
}

/*Alert
---------------------------------------------------------*/
.alert {
	border-radius: 0;
}
.alert > *:first-child{
	margin-top: 0;
}
.alert > *:last-child{
	margin-bottom: 0;
}
.alert em{ border-bottom: 2px solid  #F92; }

/*=======================================================
common - 基本設定
=========================================================*/

/*flex
------------------------------*/
.flex{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}

/*figure
------------------------------*/
.figure{
	margin-top: 20px;
}
.figure figcaption{
	color: #666;
	text-align: center;
	margin-top: .5em;
}

/*ヘッダー画像用コンテナ設定
------------------------------*/
.container-fluid.img-header{
	padding-left: 0;
	padding-right: 0;
}
.container-fluid.img-header img.img-responsive{
	max-width: 1140px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.container-fluid.img-header h1{
	border:none;
	margin:0;
	padding:0;
}

/*コンテナ設定
.container…最大1140px
.container-fulid…横幅いっぱい
------------------------------*/
/*上下余白調整*/
@media screen and (min-width: 768px){
	section > .container{
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.container-fluid.bg-fill{
		padding-top: 80px;
		padding-bottom: 80px;
	}
}
@media screen and (max-width: 767px){
	section > .container{
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.container-fluid.bg-fill{
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/*横幅いっぱい*/
.container-fluid .container > *:last-child{
	margin-bottom: 0;
}
.container-fluid.bg-fill + .bg-fill{
	margin-top: 0;
}
.container-fluid.bg-fill h2{
	margin-top: 0;
}

/*背景色定義
------------------------------*/
.bg-white{ background-color: #FFF; }
.bg-gray{ background-color: #f6f6f6; }
.bg-beige{ background-color: #ebe7d3; }

/*交互の背景色*/
.bg-alternate > section:nth-of-type(odd) > .bg-fill{ background-color: #FFF; }
.bg-alternate > section:nth-of-type(even) > .bg-fill{ background-color: #f6f6f6; }

/*リピート背景
------------------------------*/
.bg-bricks{
	max-height: 480px;
	background-image: url(/used/img/bg-bricks.png);
	background-position: center center;
	background-repeat: repeat-x;
}
@media screen and (max-width: 1139px){
	.bg-bricks{ background-size: auto 100%; }
}

/*ページタイトル
------------------------------*/
/*全体*/
.pageTitle{
	background-color: #000000;
}
.digital-piano .pageTitle{ background-color: #9C632A; }
.acoustic-piano .pageTitle{ background-color: #992950; }
.soundproof .pageTitle{ background-color: #6A92BC; }
.web .pageTitle{ background-color: #004964; }
.line .pageTitle{ background-color: #00c300; }

/*見出し*/
.pageTitle .container h1{
	color: #FFF;
	font-size: 285%;/*40px相当*/
	line-height: 1.4;
	margin: 0;
	padding: 1em 0;
}
@media screen and (min-width: 768px){
	.pageTitle .container h1{
		text-align: center;
		font-size: 160%;
	}
	.pageTitle .container h1 span{
		display: inline-block;
	}
}
@media screen and (max-width: 767px){
	.pageTitle .container h1{
		font-size: 105%;/*28px相当*/
		display: flex;
		flex-wrap: wrap;
	}
}
.pageTitle .container h1 em{
	color: #fe0;
}

/*セクションごとの見出し
------------------------------*/
.container h2{
	font-size: 200%;
	line-height: 1;
	text-align: center;
	margin: 0 auto 40px;
}
.container h2 span{
	display: block;
	font-weight: 700;
	line-height: 1.3;
	word-break: keep-all;
	margin-bottom: 20px;
}
.container h2 span.small{
	letter-spacing: -.01em;
	margin-top: .5em;
	margin-bottom: .5em;
}
.container h2 i{
	display: block;
	font-family: Tangerine, serif;
	font-weight: 400;
	color: #a3161d;
}
.container h2 i::before,
.container h2 i::after{
	display: inline-block;
	content: '';
	width: 80px;
	height: 1px;
	background-color: #CCC;
	position: relative;
	bottom: .3em;
}
.container h2 i::before{ margin-right: 20px; }
.container h2 i::after{ margin-left: 20px; }
@media screen and (max-width: 767px){
	.container h2{
		font-size: 171%;/*24px相当*/
	}
	.container h2 i::before,
	.container h2 i::after{
		width: 40px;
	}
	.container h2 i::before{ margin-right: 10px; }
	.container h2 i::after{ margin-left: 10px; }
}

/*セクションごとの見出し（サブタイトルなし）*/
.container h2.nonsub span{
	margin-bottom: 0;
}
.container h2.nonsub::after{
	display: inline-block;
	content: '';
	width: 80px;
	height: 1px;
	background-color: #CCC;
}

/*本文内見出し
------------------------------*/
.container h3{
	font-size: 160%;
	margin: 10px auto 20px;
}
.container h4{
	font-size: 120%;
	font-weight: bold;
	margin: 40px auto 20px;
}
.container h5{
	font-size: 110%;
	font-weight: bold;
	margin: 30px auto 15px;
}
.container h6{
	font-size: 100%;
	font-weight: bold;
	margin: 30px auto 15px;
}

/*リンク
------------------------------*/
a:hover,
a:focus{
	transition: .1s;
}
a:hover img,
a:focus img{
	opacity: 0.8;
	transition: .1s;
}

/*ページ内リンク位置調整*/
@media screen and (min-width: 641px){
	.anchor{
		margin-top: -75px;
		padding-top: 75px;
	}
}
@media screen and (max-width: 640px){
	.anchor{
		margin-top: -50px;
		padding-top: 50px;
	}
}

/*テーブル
------------------------------*/
.table th{
	background-color: #EEE;
}
.table td{
	background-color: #FFF;
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th{
	vertical-align: middle;
}
/*テーブル内リスト（左余白調整）*/
.table ul{
	padding-left: 1.3em;
}
.table ul li{
	line-height: 1.3;
}
/*テーブル内リスト（下余白調整）*/
.table ul,
.table dl{
	margin-bottom: 0;
}
.table ul li:not(:last-of-type),
.table dl dd:not(:last-of-type){
	margin-bottom: .5em;
}

/*テキスト中央寄せ（幅指定）
------------------------------*/
@media screen and (max-width: 767px){
	.text-left-xs{ text-align: left; }
	.text-center-xs{ text-align: center; }
	.text-right-xs{ text-align: right; }
}
@media screen and (min-width: 768px) and (max-width: 991px){
	.text-left-sm{ text-align: left; }
	.text-center-sm{ text-align: center; }
	.text-right-sm{ text-align: right; }
}
@media screen and (min-width: 992px) and (max-width: 1199px){
	.text-left-md{ text-align: left; }
	.text-center-md{ text-align: center; }
	.text-right-md{ text-align: right; }
}
@media screen and (min-width: 1200px){
	.text-left-lg{ text-align: left; }
	.text-center-lg{ text-align: center; }
	.text-right-lg{ text-align: right; }
}

/*=======================================================
common-各パーツ設定
=========================================================*/

/*注意書き(p.note,ul.notes)
---------------------------------------------------------*/
/*段落*/
p.note{
	line-height: 1.4;
	text-indent: -1em;
	padding-left: 1em;
	margin-top: 1em;
}
p.note::before{
	content: '※';
}
p.note .glyphicon {
	text-indent: 0;
}
/*リスト*/
ul.notes{
	list-style-type: none;
	margin-top: 1em;
	padding-left: 0;
}
ul.notes > li{
	line-height: 1.5;
	text-indent: -1em;
	padding-left: 1em;
}
ul.notes > li > ul{
	list-style-type: disc;
	margin-top: .25em;
}
ul.notes > li::before{
	content:'\203B';
}
ul.notes > li:not(:last-of-type){
	margin-bottom: .4em;
}
ul.notes > li ul,
ul.notes > li ol{
	text-indent: 0;
	margin-left: 0;
	padding-left: 1.5em;
}
ul.notes > li .glyphicon {
	text-indent: 0;
}
/*強調表示*/
p.note strong,
ul.notes strong{
	font-weight: bold;
}
p.notes em,
ul.notes em{
	text-decoration: underline;
}

/*チェックマークリスト(ul.check)
---------------------------------------------------------*/
ul.check{
	list-style-type: none;
	padding-left: 0;
}
ul.check li::before{
	font-family: FontAwesome;
	padding-right: 2px;
	content: '\f046';
	color: #a3161d;
}

/*更新履歴(dl.log)
---------------------------------------------------------*/
dl.log{
	overflow: hidden;
	margin-bottom: 0;
}
dl.log dd ul{
	margin-top: .5em;
	margin-bottom: 0;
	padding-left: 1.3em;
}
@media screen and (min-width: 768px){
	dl.log dt{
		clear: left;
		float: left;
		width: 10em;
		padding: 1em 0 1em 1em;
	}
	dl.log dd{
		padding: 1em 1em 1em 10em;
	}
	/*dl.log dt:not(:last-of-type),*/
	dl.log dd:not(:last-of-type){
		border-bottom: 1px solid #ddd;
	}
}
@media screen and (max-width: 767px){
	dl.log dt{
		padding: 1em 1em .5em;
	}
	dl.log dd{
		padding: 0 1em 1em;
	}
	dl.log dd:not(:last-of-type){
		border-bottom: 1px solid #ddd;
	}
}

/*項目が1つのみの説明文(dl.define-single)
---------------------------------------------------------*/
dl.define-single{
	text-align: center;
	margin-bottom: 0;
}
/*見出し
------------------------------*/
dl.define-single dt{
	font-weight: 400;
	margin-bottom: .5em;
}
dl.define-single dt span{
	display: inline-block;
}
/*項目
------------------------------*/
dl.define-single dd{
	font-size: 114%;/*16px相当*/
	font-weight: 700;
}
dl.define-single dd a{
	color: #a3161d;
	text-decoration:underline;
}
dl.define-single dd a:hover,
dl.define-single dd a:focus{
	text-decoration: none;
}
/*余白調整
------------------------------*/
/*直後にリンクボタンが来た場合*/
dl.define-single + .btn{
	margin-top: 20px;
}

/*解説ボックス（画像＋見出し＋説明文の構造）
---------------------------------------------------------*/
.explain{
	display: flex;
	flex-wrap: wrap;
}
.explain > *{
	width: 100%;
}
.explain > *:last-child{
	margin-bottom: 0;
}
/*見出し*/
.explain h3{
	order: 2;
	color: #a3161d;
	font-weight: bold;
	text-align: center;
}
/*画像*/
.explain figure,
.explain .row{
	order: 1;
	margin-bottom: 1em;
}
.explain figure img{
	display: block;
	width: 100%;
	height: auto;
}
/*本文*/
.explain p,
.explain ul{
	order: 3;
}
.explain ul > li + li{
	margin-top: .5em;
}
/*注釈*/
.explain p.note,
.explain ul.notes{
	order: 4;
}

/*解説ボックス（画像＋説明文の構造、PC時2カラム推奨サイズ）
---------------------------------------------------------*/
.explain-min {
	margin-bottom: 2.5em;
}
.explain-min > figure {
	text-align: center;
}
.explain-min > figure > img {
	margin-bottom: .75em;
}

/*5px斜線ボーダー(.stripe-border)
---------------------------------------------------------*/
.stripe-border{
	background: url(/used/img/bg-stripe.png) repeat;
	padding: 5px;
	margin-top: 20px;
}
.stripe-border > *{
	background-color: #FFF;
	margin: 0;
	padding: 20px;
}
.stripe-border > * > *:last-child{
	margin-bottom: 0;
}

/*見出し
------------------------------*/
.stripe-border h2,
.stripe-border h3{
	color: #a3161d;
	font-size: 143%;/*20px相当*/
	font-weight: 700;
	text-align: center;
	line-height: 1.3;
	margin: 10px auto 20px;
}
.stripe-border h2 span,
.stripe-border h3 span{
	display: inline-block;
	margin-bottom: 0;
}

/*余白調整
------------------------------*/
/*直後にリンクボタンが来た場合*/
.stripe-border + .btn{
	margin-top: 40px;
}
/*開閉要素の中にある場合*/
.panel-group-chunk .panel .panel-collapse > .stripe-border{
	margin: 20px;
}

/*お問い合わせ先情報(address.signature)
---------------------------------------------------------*/
address.signature h3{
	text-align: initial;
}
address.signature dl{
	overflow: hidden;
	border-bottom: 1px solid #CCC;
}
address.signature dl dt,
address.signature dl dd{
	line-height: 1.5;
	padding-top: .5em;
	padding-bottom: .5em;
}
@media screen and (min-width: 415px){
	address.signature dl dt{
		float: left;
		clear: left;
		width: 5em;
		font-weight: 300;
	}
	address.signature dl dd{
		border-top: 1px solid #CCC;
		padding-left: 5em;
	}
}
@media screen and (max-width: 414px){
	address.signature dl dt{
		border-top: 1px solid #CCC;
		padding-bottom: 0;
	}
}
address.signature dl + .alert{
	margin-top: 1em;
}


/*=======================================================
common-各パーツ設定(incファイル単位)
=========================================================*/

/*-------------------------------------------------------
買取価格表の注意書き
notice-price.inc
---------------------------------------------------------*/
.price-alert ul{
	padding-left: 1.3em;
}
.price-alert table{
	margin-top: 1em;
	margin-bottom: 0;
}
.price-alert .table > tbody > tr > th{
	width: 6em;
	text-align: center;
	vertical-align: middle;
}
.price-alert .table > tbody > tr > td{
	background-color: #FFF;
}

/*-------------------------------------------------------
買取方法リスト
list-flow.inc
---------------------------------------------------------*/
.flow-list.flex > div{
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}
@media screen and (min-width: 992px){/*1行に均等配置*/
	.flow-list.flex{ flex-wrap: nowrap; }
	.flow-list.flex a.btn::after{ padding-right: 8px; }
}
@media screen and (max-width: 991px) and (min-width: 641px){/*最大2カラム、640px以下は1カラム*/
	.flow-list.flex > div{ max-width: 50%; }
}
.flow-list h3{
	color: #a3161d;
	font-weight: bold;
	text-align: center;
	padding-top: 10px;
}
.flow-list img{
	display: block;
	margin: 0 auto;
}
.flow-list p{
	margin-top: 1em;
}
.flow-list p.copy{
	font-weight: bold;
	text-align: center;
}
.flow-list a.btn{
	margin-top: 2em;
}

/*-------------------------------------------------------
取り扱い楽器一覧
gakki-list.inc
---------------------------------------------------------*/

/*楽器分類見出し
------------------------------*/
.container .hl-inst{
	font-size: 114%;
	font-weight: bold;
	text-align: center;
	margin-top: 2em;
}

/*楽器リスト
------------------------------*/
ul.gakkiList{
	list-style: none;
	margin-bottom: 2em;
	padding-left: 0;
}
ul.gakkiList li:not(:first-of-type){
	margin-top: .75em;
}
ul.gakkiList li a,
ul.gakkiList li span{
	display: block;
	line-height: 1.3;
	border-width: 1px;
	border-style: solid;
	border-radius: 5px;
	padding:.5em .5em;
}
/*リンクあり*/
ul.gakkiList li a{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #FFF;
	color: #a3161d;
	border-color: #a3161d;
}
ul.gakkiList li a::after{
	font-family: FontAwesome;
	content: '\f105';
}
ul.gakkiList li a:hover,
ul.gakkiList li a:focus{
	background-color: rgb(255,235,235,.8);
	color: #a3161d;
	border-color: #a3161d;
	text-decoration: none;
}
/*リンクなし*/
ul.gakkiList li span{
	background-color: #FFF;
	color: #333;
	border-color: #333;
}
ul.gakkiList li span:hover{
	cursor: default;
}

/*-------------------------------------------------------
出張買取誘導バナーリンク
entry-visit.inc
---------------------------------------------------------*/
.entry-visit{
	margin-top: 40px;
}
.entry-visit a{
	display: block;
	max-width: 500px;
	width: 100%;
	margin: 10px auto;
}

/*-------------------------------------------------------
PC・スマホで申し込む／電話で申し込む
gakki/acoustic-piano/entry.inc
gakki/electric-organ/entry.inc
---------------------------------------------------------*/

/*パネルの高さを合わせる*/
.entry-web_line_tel .flex{
	row-gap: 20px;
}
.entry-web_line_tel .flex .panel{
	margin-bottom: 0;
}
.entry-web_line_tel .flex .panel-body{
	height: 100%;
	display: flex;
	flex-direction: column;
}
/*電子ピアノ・アコースティックピアノの相互リンクバナー*/
.entry-digital-piano{
	justify-content: space-evenly;
}
@media screen and (min-width: 992px){
	a.piano-banner{
		width: 80%;
	}
}

/*上下中央寄せ*/
.flex-column-centered{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 20px;
}
.flex-column-centered > *{
	margin: 0 !important;
}

/*-------------------------------------------------------
Web・LINE査定誘導ボタンリンク
entry-web_line.inc
---------------------------------------------------------*/
section.entry-web_line{}

/*全体レイアウト
------------------------------*/
.fixedPage{
	display: none;
}
@media screen and (min-width: 835px){
	.entry-web_line .container{
		background-color: #FFF;
		border: 1px solid #CCC;
		padding: 20px;
	}
	/*出張買取用の場合は表示しない*/
	.entry-web_line.entry-web_line-visit{
		display: none;
	}
}
@media screen and (max-width: 834px){
	.entry-web_line-general .container{
		background-color: #FFF;
		border: 1px solid #CCC;
		padding: 20px;
	}
	button.fixedButton{
		display: block;
		margin-left: auto;
        background: transparent;
        border: none;
		padding-right: 3px;
        margin-bottom: -2px;
	}
	button.fixedButton .fa-window-close{
		background-color: #fff;
		padding: 0 3px;
		margin: 3px 0px;
		border-radius: 6px;
		opacity: .9;
		color: #000000;
        font-size: 44px;
		
	}
	.entry-web_line-fixed{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 998;
	}
	.entry-web_line-fixed .container-fluid,
	.entry-web_line-fixed .container{
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.bg-alternate > section.entry-web_line-fixed:nth-of-type(even) > .bg-fill{
		background: transparent;
	}
	.bg-alternate > section.entry-web_line-fixed:nth-of-type(odd) > .bg-fill{
		background: transparent;
	}
}

/*段落
------------------------------*/
.entry-web_line p{
	text-align: center;
	margin-bottom: 20px;
}
@media screen and (min-width: 835px){
	.entry-web_line .container:nth-of-type(2){
		margin-top: 20px;
	}
	.entry-web_line p{ 
		font-size: 18px;
		font-weight: 500;
	}
}
@media screen and (max-width: 834px){
	.entry-web_line p{ 
		background-color: #a3161d;
		color: #FFF;
		margin-bottom: 0; }
	.entry-web_line #page-3 p{
		background-color: #444;
		margin-top: 0;
	}
	.entry-web_line-general p{ margin-bottom: 20px; padding: 10px; }
}

/*ボタンレイアウト
------------------------------*/
.entry-web_line .flex{
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0;
	row-gap: 20px;
}
.entry-web_line .flex button.btn{
	margin: 0;
}
@media screen and (min-width: 835px){
	.entry-web_line .flex a.btn,.entry-web_line .flex button.btn{
		flex-basis: 49%;
		height: 80px;
	}
	.entry-web_line .visit-redirect a.btn{
		flex-basis: 31%;
	}
	.entry-web_line #page-1,.entry-web_line button.fixedButton{
		display: none;
	}
}
@media screen and (max-width: 834px){
	.entry-web_line .flex a.btn,.entry-web_line .flex button.btn{
		flex-basis: 50%;
		height: 60px;
		border-radius: 0;
		display: flex;
		align-items: center;
	}
	.entry-web_line .flex button.btn i{
		margin-left: 10px;
	}
	.entry-web_line .visit-redirect a.btn:nth-of-type(1),.entry-web_line .visit-redirect a.btn:nth-of-type(3){
		flex-basis: 32%;
	}
	.entry-web_line .visit-redirect a.btn:nth-of-type(2){
		flex-basis: 36%;
	}
	.entry-web_line-general .flex{
		gap: 10px;
	}
	.entry-web_line-general .flex a.btn{
		flex-basis: 100%;
		height: 60px;
	}
}
/*ボタン
------------------------------*/
.entry-web_line a.btn{
	margin: 0;
	padding: 0;
}
@media screen and (min-width: 835px){
	/*テキスト*/
	.entry-web_line .flex a.btn span{
		font-size: 150%;
	}
	.entry-web_line .visit-redirect a.btn span{
		font-size: 120%;
	}
	/*アイコン*/
	.entry-web_line a.btn-icon-device::before,
	.entry-web_line a.btn-icon-messanger::before,{
		width: 100px;
	}
}
@media screen and (max-width: 520px){
	/*テキスト*/
	.entry-web_line a.btn span{
		position: absolute;
		left: 0;
		font-size: 114%;
		text-align: left;
		padding-left: 65px;
	}
	.entry-web_line .visit-redirect a.btn span{
		padding-left: 35px;
		text-align: center;
		font-size: 80%;
	}
	.entry-web_line .visit-redirect a.btn-icon-acoustic-piano span{
		padding-left: 30px;
		font-size: 70%;
	}
	/*アイコン*/
	.entry-web_line a.btn-icon-device::before,
	.entry-web_line a.btn-icon-messanger::before{
		width: 50px;
	}
	.entry-web_line a.btn-icon-arrow::after,
	.entry-web_line button.btn-icon-arrow::after{
		padding-right: 8px;
	}
}
@media screen and (max-width: 360px){
	/*テキスト*/
	.entry-web_line a.btn span{
		font-size: 100%;
		padding-left: 60px;
	}
}

/*-------------------------------------------------------
買取価格検索誘導ボタンリンク
entry-search.inc
---------------------------------------------------------*/
section.entry-search{}


/*全体レイアウト
------------------------------*/
@media screen and (max-width: 991px){
	.entry-search{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 998;
	}
	.entry-search .container-fluid,
	.entry-search .container{
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.entry-search .container-fluid.bg-fill{
		background-color: rgba(0,0,0,.2) !important;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);/*Safari*/
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/*ボタン
------------------------------*/
.entry-search .btn{
	margin-top: 0;
}
@media screen and (max-width: 991px){
	.entry-search .btn{
		padding-top: 18px;
		padding-bottom: 18px;
		max-width: 90svw;
		box-shadow: 0 2px 5px rgba(0,0,0,.3);
	}
}

/*-------------------------------------------------------
カウントアップ数字(.hl-number)
※.stepと.reasonsで使用
---------------------------------------------------------*/
body{
	counter-reset: step reason;
}
.hl-number{
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	line-height: 1;
}
.hl-number span:first-of-type{
	position: absolute;
	width: 100%;
	color: #333;
	background-color: #F8EED3;
	border: 1px solid #D9D3BD;
	padding-top: .3em;
	padding-bottom: .3em;
	padding-right: 3em;
	text-align: center;
}
.hl-number span:last-of-type{
	position: relative;
	display: block;
	content: '';
	color: #FFF;
	background-color: #a3161d;
	width: 3em;
	height: 3em;
	border-radius: 100%;
	margin-left: 3em;
}
.hl-number span:last-of-type::before{
	position: absolute;
	width: 100%;
	font-family: 'Noto Serif', serif;
	font-style: italic;
	font-size: 260%;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
}
/*step1・2・3…*/
.step{counter-reset: step;}
.step .hl-number span:first-of-type{
	font-family: 'Noto Serif', serif;
	font-style: italic;
}
.step .hl-number span:last-of-type::before{
	counter-increment: step;
	content: counter(step);
}
.step .hl-number span:last-of-type::before{
	counter-increment: step;
	content: counter(step);
}
/*その1・2・3…*/
.reasons .hl-number span:last-of-type::before{
	counter-increment: reason;
	content: counter(reason);
}

/*-------------------------------------------------------
◯◯の流れ
step-flow.inc
step-flow-◯◯.inc
step-apply-◯◯.inc
---------------------------------------------------------*/

/*全体
------------------------------*/
.step{
	display: flex;
}

/*矢印（chevron）
------------------------------*/
.step-arrow{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.step-arrow::after{
	font-family: FontAwesome;
	color: #CCC;
	font-size: 36px;
}
@media screen and (min-width: 992px){
	.step-content{ flex-basis: 30%; }
	.step-arrow{ flex-basis: 5%; }
	.step-arrow::after{ content: '\f0da'; }/*fa-caret-right*/
}
@media screen and (max-width: 991px){
	.step{ flex-wrap: wrap; }
	.step-content{ width: 100%; margin-bottom: 20px; }
	.step-arrow{ display: none; }
}

/*1ステップごと
------------------------------*/
.step-content{
	display: flex;
	flex-wrap: wrap;
	align-self: flex-start;
}
.step-content > *{
	width: 100%;
}
/*見出し*/
.step-content h3,
.step-content h4{
	order: 3;
	color: #a3161d;
	font-size: 143%;/*20px相当*/
	font-weight: bold;
	text-align: center;
	margin: 10px auto 20px;
}
@media screen and (max-width: 991px){
	.step-content h3,
	.step-content h4{
		font-size: 128%;
	}
}
/*連番*/
.step-content .hl-number{
	order: 1;
	font-size: 18px;
	margin-bottom: 1em;
}
/*画像*/
.step-content figure{
	order: 2;
	background-color: #FFF;
	border: 1px solid #CCC;
}
.step-content figure img[src$="svg"]{
	display: block;
	margin: 1em auto;
}
.step-content figure img[src$="jpg"]{
	width: 100%;
	height: auto;
}
/*本文*/
.step-content p{
	order: 4;
	margin-bottom: .5em;
}
.step-content ul{
	order: 5;
	margin-bottom: .5em;
}
/*リンクボタン*/
.step-content a.btn{
	order: 6;
}
/*注意事項*/
.step-content ul.notes{
	order: 7;
}

/*-------------------------------------------------------
◯つの理由
point-reasons.inc
---------------------------------------------------------*/

/*見出し（島村楽器～～◯つの理由）
------------------------------*/
.reasons h2{
	background-color: #a3161d;
	color: #FFF;
	line-height: 1;
	text-align: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin-bottom: 1em;
	padding: 0 1em;
}
.reasons h2 img{
	display: block;
	margin: 0 auto;
	max-height: 50px;
	width: auto;
}

/*レイアウト
------------------------------*/
.reasonList{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
@media screen and (min-width: 1200px){
	.reasons h3 > .stripe-border > div{ height: 7em; }
	.reasonList.reasonList-num4 > div{ flex-basis: 24%; }
	.reasonList.reasonList-num5 > div{ flex-basis: 19%; }
}
@media screen and (min-width: 641px) and (max-width: 1199px){
	.reasons h3 > .stripe-border > div{ height: 4em; }
	.reasonList > div{ flex-basis: 49%; }
	.reasonList.reasonList-num5 > div:last-of-type{ flex-basis: 100%; }
}
@media screen and (max-width: 640px){
	.reasonList > div{ flex-basis: 100%; }
}

/*見出し（その◯～～）
------------------------------*/
.reasons h3{
	color: #222;
	font-size: 100%;
	font-weight: bold;
}
.reasons h3 em{
	color: #a3161d;
}
.reasons h3 > .hl-number{
	margin-bottom: 1em;
}
.reasons h3 > .stripe-border{
	font-size: 150%;
	line-height: 1.3;
}
.reasons h3 > .stripe-border > div{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	padding: 10px;
}
.reasons h3 > .stripe-border > div small{
	font-size: 14px;
}

/*補足テキスト
------------------------------*/
.reasons p{
	line-height: 1.6;
}
.reasons p strong{
	color: #a3161d;
}

/*-------------------------------------------------------
用語解説
point-glossary.inc
---------------------------------------------------------*/
dl.glossary{
	overflow: hidden;
	background-color: #FFF;
	font-size: 114%;/*16px相当*/
	margin: 0;
	padding: 2em;
}
dl.glossary dt{
	background-color: #a3161d;
	color: #FFF;
	text-align: center;
	padding: .5em;
}
dl.glossary dt span{
	font-weight: normal;
}
dl.glossary dd{
	padding-top: .5em;
}
dl.glossary dd:not(:last-of-type){
	margin-bottom: 1em;
}
dl.glossary + div{
	padding: 0 3em 2em;
}
@media screen and (min-width: 641px){
	dl.glossary dt{
		clear: left;
		float: left;
		width: 10em;
	}
	dl.glossary dd{
		padding-bottom: .5em;
		padding-left: 11em;
	}
}

/*-------------------------------------------------------
最大20%UP画像
point-percentage.inc
---------------------------------------------------------*/
.percentage{
	background-color: #FFF;
	border: 2px solid #DDD;
	margin: 30px auto;
	padding: 15px;
}

/*=======================================================
キャンペーン関連
=========================================================*/

/*キャンペーントップ /used/campaign/
------------------------------*/
.cp-list.flex h4:first-child{ margin-bottom: 0; }
.cp-list.flex span.label + .alert{ margin-top: 5px; }
.cp-list.flex span.label + table.table{ margin-top: 10px; }
.cp-list.flex table.table + .well{ margin-top: 0; }
.cp-list.flex table.table th{ width: 6em; text-align: center; }

/*「実施中のキャンペーン」セクション
------------------------------*/
section.campaign{
	background-color: #FFEBEB;
}
section.campaign .flex > div{
	margin-bottom: 1em;
}

/*各CPリンク(a.campaign-link)
------------------------------*/
a.campaign-link{
	background-color: #FFF;
	color: #666;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	border: 1px solid #FFF;
	padding: 1em 0 1em 1em;
}
a.campaign-link > div{
	height: 100%;
}
a.campaign-link:hover,
a.campaign-link:focus{
	background-color: #FFEBEB;
	text-decoration: none;
	border-color: #a3161d;
}
a.campaign-link::after{
	font-family: FontAwesome;
	content: '\f054';
	color: #ddd;
	padding-right:.5em;
	padding-left:1em;
}
a.campaign-link:hover::after,
a.campaign-link:focus::after{
	color: #a3161d;
	border-color: #a3161d;
}
/*CP名*/
a.campaign-link h3{
	color: #a3161d;
	font-size: 114%;/*16px相当*/
	font-weight: bold;
	margin-top: 0;
	margin-bottom: .5em;
}
a.campaign-link:hover h3{
	color: #a3161d;
}
/*CP概要*/
a.campaign-link p{
	font-size: 85%;/*12px相当*/
	line-height: 1.5;
	margin-bottom: 0;
}

/*もっと見るボタン(a.more-link)
------------------------------*/
a.more-link{
	display: inline-block;
	color: #000;
	font-size: 150%;
	font-weight: bold;
	line-height: 1;
	border-bottom: 3px solid #a3161d;
	margin-top: 15px;
	padding-bottom: .5em;
	transition: .1s;
}
a.more-link:hover,
a.more-link:focus{
	color: #a3161d;
	text-decoration: none;
	transition: .1s;
	padding-left: 1em;
	padding-right: 1em;
}



/*=======================================================
査定申し込みセクション(section.entry)
=========================================================*/
section.entry{
}

/*パネル*/
.entry .panel-body{
	text-align: center;
}

/*余白調整*/
@media screen and (min-width: 641px){
	.entry .panel-body,
	.entry .well{
		padding: 2em;
	}
}
@media screen and (max-width: 640px){
	.entry .panel-body,
	.entry .well{
		padding: 20px;
	}
}

/*リンクボタン
.entry a.btn-web,
.entry a.btn-line{
	margin-top: 2em;
}*/


/*ご利用上の注意点(.strip-border)と連続する場合の余白設定*/
.entry .stripe-border + *{
	margin-top: 40px;
}

/*直接お問い合わせ(委託販売)*/
.entry-contact{
	text-align: center;
}
.entry-contact p{
	font-size:18px;
	margin-bottom: 25px;
}
.entry-contact p span{
	display: inline-block;
}


/*=======================================================
トップページ /used/
=========================================================*/

/*高額買取のコツ
------------------------------*/
.tips .explain{
	margin-top: 40px;
}

/*お問い合わせ
------------------------------*/
section.contact{}

@media screen and (min-width: 768px){
	.contact p{
		text-align: center;
	}
}

/*購入・修理をお考えなら
------------------------------*/
section.stores .bg-fill{
	background-color: #333;
	color: #FFF;
}
.stores h2{
	color: #FFF;
}
.stores-link{
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	padding-left: 0;
}
@media screen and (min-width: 992px){
	.stores-link{
		justify-content: space-between;
		max-width: 970px;
	}
	.stores-link > div{
		width: 48%;
	}
}
@media screen and (max-width: 991px){
	.stores-link{
		justify-content: center;
		max-width: 600px;
	}
	.stores-link > div{
		width: 100%;
	}
}
.stores-link > div{
	display: flex;
	flex-wrap: wrap;
}
.stores-link > div a{
	order: 1;
	display: block;
	width: 100%;
	background-color: #FFF;
}
.stores-link > div a img{
	width: 100%;
	height: auto;
}
.stores-link > div h3{
	order: 2;
	width: 100%;
	color: #FFF;
	font-size: 100%;
}

/*twitter
------------------------------*/
section.twitter .bg-fill{
	background-color: #d1ebfc;
	color: #444;
}
section.twitter .container > ul{
	text-align: center;
	margin-bottom: 2em;
	padding-left: 0;
}
section.twitter .container > ul li{
	display: inline-block;
}
section.twitter i.fa{
	padding-right: 2px;
	color: #2ea3dc;
}
section.twitter .container > div{
	max-width: 600px;
	margin: 0 auto;
}

/*=======================================================
店舗買取 /used/flow/shop/
=========================================================*/

/*買取実施条件(.terms)
------------------------------*/
.terms .flex > div > .panel{ height: 100%; }
.terms .flex > div{ padding-bottom: 2em; }
/*見出し*/
.terms h3{
	color: #555;
	font-size: 114%;
	font-weight: bold;
	border-bottom: 2px solid #EEE;
	padding-bottom: .5em;
}
.terms h3::before{
	font-family: FontAwesome;
	content: '\f058';
	margin-right: .25em;
}
.terms h3:not(:first-of-type){
	margin-top: 2.5em;
}

/*=======================================================
出張買取 /used/flow/visit/
=========================================================*/

/*エリア名見出し
------------------------------*/
.container .hl-area{
	color: #a3161d;
	font-size: 114%;
	font-weight: bold;
	text-align: center;
	margin-top: 2em;
}
/*都道府県リスト
------------------------------*/
ul.prefList{
	background-color: #FFF;
	list-style-type: none;
	overflow: hidden;
	border: 1px solid #CCC;
	padding: 1em;
}
ul.prefList li{
	float: left;
	line-height: 1.5;
}
ul.prefList li:not(:last-of-type)::after{
	content: '・';
}

/*=======================================================
宅配買取 /used/flow/visit/
=========================================================*/

/*段ボール箱リスト
------------------------------*/
.packing-kit .table-responsive,
.packing-kit table.table{
	margin-bottom: 0;
}
.packing-kit table.table > tbody > tr > td,
.packing-kit table.table > tbody > tr > th,
.packing-kit table.table > thead > tr > td,
.packing-kit table.table > thead > tr > th{
	padding: 10px;
}
.packing-kit table.table thead tr{
	border-top: 2px solid #DDD;
}
.packing-kit table.table th{
	text-align: center;
}
.packing-kit table.table td{
	text-align: center;
	vertical-align: top;
}
.packing-kit table.table tr th:first-of-type{
	min-width: 10em;
}
.packing-kit table.table tr > *:not(:last-child){
	border-right: 1px solid #DDD;
}
.packing-kit table.table td img{
	margin-top: 10px;
}

/*梱包方法
------------------------------*/
.packing .stripe-border .explain{
	padding: 20px;
}
.packing .stripe-border .explain figure{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.packing .stripe-border .explain figure img{
	margin: 0 auto;
}
.stripe-border-inner{
	padding: 0 40px;
	margin-bottom: 20px;
}
.packing .attention{
	font-weight: bold;
}

/*=======================================================
委託販売 /used/flow/consignment/
=========================================================*/

/*実施条件
------------------------------*/
/*料金テーブル*/
.consignment-require table{
	width: 100%;
}

/*=======================================================
中古楽器販売店店舗 /used/shops/
=========================================================*/

/*ナビゲーション
------------------------------*/
nav.area-list ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style-type: none;
	margin-bottom: 0;
	padding-left: 0;
}
@media screen and (min-width: 641px){ nav.area-list ul li{ flex-basis: 24%; } }
@media screen and (max-width: 640px){ nav.area-list ul li{ flex-basis: 48%; } }

/*店舗
------------------------------*/
/*余白調整*/
.shops .flex > div{
	margin-bottom: 40px;
}
/*1店舗ごと*/
.shopcard{
	position: relative;
	height: 100%;
	background-color: #FFF;
	border: 1px solid #CCC;
	padding: 20px 20px 80px 20px;
}
/*店名*/
.shopcard h4{
	color: #004964;
	font-size: 114%;/*16px相当*/
	text-align: center;
	white-space: nowrap;
	letter-spacing: 0;
	margin-top: 0;
}
/*画像*/
.shopcard img{
	padding-bottom: 10px;
}
/*コメント*/
.shopcard p.message{
	position: relative;
	font-size: 92%;/*13px相当*/
	border-bottom: 1px solid #CCC;
	margin-bottom: 1em;
	padding-bottom: 1em;
}
.shopcard p.message.more{
	overflow: hidden;
	cursor: pointer;
}
.shopcard p.message.more::after{
	display: block;
	content: '続きを読む';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-top: 6em;
	text-align: center;
	line-height: 3em;
	background: linear-gradient( 180deg, rgb(255, 255, 255, 0) 0%, rgb(255, 255, 255, 1) 70% );
	color: #999;
}
/*取扱楽器*/
.shopcard dl{
	overflow: hidden;
	font-size: 92%;
	line-height: 1.5;
	margin-top: 1em;
	margin-bottom: 0;
}
.shopcard dl dt{
	float: left;
	clear: left;
}
.shopcard dl dt::after{ content: '：'; }
.shopcard dl dt:not(:first-of-type),
.shopcard dl dd:not(:first-of-type){
	margin-top: .8em;
}
/*リンク*/
.shopcard .btnArea{
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	width: 100%;
	padding: 20px 10px;
}
.shopcard .btnArea > a.btn{
	margin: 0 10px;
}

/*=======================================================
各Deptページ /used/gakki/◯◯/index.php
=========================================================*/

/*製品情報・品番を調べる方法
------------------------------*/
#product-number h3{
	font-weight: 700;
    text-align: center;
	margin: 0px 0 30px;
    background-color: #e7e2cc;
    padding: 8px;
}
@media screen and (max-width: 768px){
	#product-number h3{
		font-size: 18px;
	}
}
/*保証書から調べられる情報
------------------------------*/
#product-number .flex{
	align-items: center;
	margin-bottom: 50px;
}
#product-number .flex .alert{
	margin-bottom: 0;
}
/*アプリ購入履歴の場合
------------------------------*/
/*矢印（chevron）
------------------------------*/
.how-to-arrow{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.how-to-arrow::after{
	font-family: FontAwesome;
	color: #CCC;
	font-size: 36px;
}
@media screen and (min-width: 992px){
	.how-to-content{ flex-basis: 30%; }
	.how-to-arrow{ flex-basis: 5%; }
	.how-to-arrow::after{ content: '\f0da'; }/*fa-caret-right*/
}
@media screen and (max-width: 991px){
	.how-to{ flex-wrap: wrap; }
	.how-to-content{ width: 100%; margin-bottom: 20px; }
	.how-to-arrow{ display: none; }
}

/*1ステップごと
------------------------------*/
.how-to-content{
	display: flex;
	flex-wrap: wrap;
	align-self: flex-start;
}
.how-to-content > *{
	width: 100%;
}
/*画像*/
.how-to-content figure{
	width: 100%;
	margin: auto;
	border: none;
	background-color: #fafafa;
	padding: 20px;
}
.how-to-content figure img{
	width: 80%;
	height: auto;
	display: block;
	margin: auto;
}
#product-number .how-to figure figcaption{
	margin-top: 20px;
}
/*買取実績
------------------------------*/
.performance-item{
	padding: 0 10px;
}
.slick-initialized .slick-slide.performance-item{
	display: flex;
	flex-wrap: wrap;
}
.performance-item > *{
	width: 100%;
}
/*商品名*/
.performance-item h3{
	order: 2;
	font-size: 114%;/*16px相当*/
	border-bottom: 1px solid #CCC;
	padding-bottom: 1em;
}
.performance-item h3 span{
	display: block;
}
/*商品画像*/
.performance-item figure{
	order: 1;
}
.performance-item figure img{
	max-width: 200px;
	width: 100%;
	border: 1px solid #CCC;
	margin: 0 auto 5px;
}
/*買取情報*/
.performance-item dl{
	order: 3;
	overflow: hidden;
	margin-bottom: 0;
}
.performance-item dl dt{
	float: left;
	clear: left;
	width: 8em;
	color: #666;
	font-weight: 300;
}
.performance-item dl dd{
	padding-left: 8.5em;
}
.performance-item dl dd:not(:last-of-type){
	margin-bottom: 1em;
}

/*各Dept出張買取の流れ
------------------------------*/
#flow-hl{
	background-color: #555;
	color: #FFF;
	font-size: 143%;/*20px相当*/
	font-weight: 700;
	text-align: center;
}
.digital-piano #flow-hl{ background-color: #9C632A; }
.acoustic-piano #flow-hl{ background-color: #992950; }
.soundproof #flow-hl{ background-color: #6A92BC; }