@charset "UTF-8";

/* 店舗一覧 */
h4.shops { font-size: 1.6rem; line-height: 1.2em; color: #FFF; background: #AC0000; padding: 10px; margin: 30px 0 20px 0;}
ul.shops_list { margin: 0; padding: 0; list-style-type: none;}
ul.shops_list li { width: 50%; padding: 10px; text-align: left !important; float: left;}
ul.shops_list li .shop_list_inner { padding-bottom: 8px; border-bottom: 1px solid #aaa; position: relative;}
ul.shops_list li .shop_list_inner img { width: 36%; height: auto; padding: 0 16px 20px 0; float: left;}
ul.shops_list li .shop_list_inner .txt_wrap {  width: 64%; float: right;}
ul.shops_list li .shop_list_inner ol { margin: 0; padding: 0; list-style-type: none;}
ul.shops_list li .shop_list_inner ol li { width: 100%; line-height: 1.6em; margin: 0; padding: 0 0 0 1em;}
ul.shops_list li .shop_list_inner ol li:nth-of-type(1):before { content: "\f278"; font-family: FontAwesome; color: #bbb; position: absolute; right: 61%;}
ul.shops_list li .shop_list_inner ol li:nth-of-type(2):before { content: "\f095"; font-family: FontAwesome; color: #bbb; position: absolute; right: 61%;}
ul.shops_list li .shop_list_inner ol li:nth-of-type(3):before { content: "\f017"; font-family: FontAwesome; color: #bbb; position: absolute; right: 61%;}

@media screen and (max-width: 991px) {
 ul.shops_list li { width: 100%; float: none;}
 ul.shops_list li .shop_list_inner ol li:nth-of-type(1):before { right: 62%;}
ul.shops_list li .shop_list_inner ol li:nth-of-type(2):before { right: 62%;}
ul.shops_list li .shop_list_inner ol li:nth-of-type(3):before { right: 62%;}
}

/* 店舗詳細ページ */
.shop-info-ttl { font-size: 14px; font-weight: bold; color: #333; margin: 0; letter-spacing: inherit;}
a.shop-tell { color: blue; font-size: 22px; font-weight: bold;}
.shop-tell i { color: #AC0000; margin: 0 5px 0 15px;}
a.shop-tell:hover { color: #E3AD00;}
a.btn_shop_access { padding: 0 15px 0 10px; background-color: #AC0000; color: #FFF; border-radius: 13px; display: inline-block;}
a.btn_shop_access:hover { background-color: #c8262a;}
.service_icon { background-color: #E3AD00; color: #FFF; padding: 4px; margin-right: 6px;}
.appeal-point { display: flex; flex-wrap: wrap;}
.appeal-point_icon { background-color: #644D2B; color: #FFF; padding: 2px 4px; margin-right: 6px; display: inline-block; margin-top: 5px;}
.shop-interior { display: flex; justify-content: space-evenly; align-items: flex-start;}
.shop-interior img { max-width: 31%; width: 100%; height: auto;}
.access_list { display: flex; justify-content: space-evenly; flex-wrap: wrap;}
.access_list img { width: 100%; height: auto; border: 2px solid #E3AD00;}
.access_list figure { width: 48%; margin-bottom: 20px; max-width: 380px;}
.access_list figcaption::first-letter { color: #E3AD00; font-size: 30px; float: left; padding: 5px 5px 0 0;}
@media screen and (max-width: 767px) {
  .access_list figure{ width: 100%;}
}
iframe { width: 99.98%; border: 1px solid #ccc !important;}
.shop-customer-voice { position: relative; background: #F2FBFF; box-shadow: 0px 0px 0px 5px #F2FBFF; border: dashed 2px #D8EBFF; padding: 10px ; color: #454545; margin: 0 auto 30px; width: calc(100% - 10px);}
.shop-customer-voice::after { position: absolute; content: ''; left: -7px; top: -7px; border-width: 0 0 25px 25px; border-style: solid; border-color: #FFF #FFF #B6D1FF; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);}
.customer-voice { padding: 20px 10px;}
.customer-voice-ttl { font-weight: bold; font-size: 18px; display: table; padding: 5px 10px 5px 50px; position: relative; border-bottom: 2px solid #87BBFF; border-top: 2px solid #87BBFF; margin: 0 auto 15px; background-color: #FFF; letter-spacing: inherit; color: #333;}
.customer-voice-ttl::before { font-family: "Font Awesome 5 Free"; content: "\f075"; font-weight: 900; position: absolute; font-size: 26px; left: 10px; top: 5px; color: #B6D1FF;}
.customer-voice-txt { padding: 0; width: 100%; background-image: linear-gradient( 90deg, transparent 0%, transparent 50%, #F2FBFF 50%, #F2FBFF 100%), linear-gradient(180deg, #D8EBFF 2px, transparent 1px); background-size: 10px 100%,100% 32px; line-height: 32px; padding-bottom: 2px;}
.shop-thanks { position: relative; border-top: solid 2px #87BBFF; border-bottom: solid 2px #87BBFF; background: #FFF; padding: 10px 15px; margin: 20px 0 10px; line-height: 1.9;}
.shop-thanks::after { position: absolute; content: '店舗からのお礼'; background: #87BBFF; color: #FFF; left: 0px; bottom: 100%; border-radius: 5px 5px 0 0; padding: 5px 7px 3px; font-size: 13px; line-height: 1; letter-spacing: 0.05em;}
h3.shop-title,h3.title-decoration { color: #FFF; padding: 10px 10px 7px; background-color: #AC0000; font-size: 19px;}
h2.shop-title,h2.title-decoration { color: #FFF; padding: 10px 10px 7px; background-color: #AC0000; font-size: 19px;}
@media screen and (max-width: 767px) {
  .customer-voice { padding: 20px 5px;}
  .shop-thanks{ padding: 10px 5px;}
  h3.shop-title,h3.title-decoration { font-size: 18px;}
  h2.shop-title,h2.title-decoration { font-size: 18px;}
}
/* 店舗詳細ページタイトル用 プルダウン */
.hidden_box input { display: none;}
@media screen and (max-width: 767px) {
  .hidden_box label{ display: flex; justify-content: space-between;
    align-items: center;}
  .hidden_box label .ttl-pull{ border-right: 1px solid #FFF; width: 100%; padding: 0 10px 0 0; margin: 0 10px 0 0;}
  .hidden_box .hidden_show { height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s;}
  .hidden_box input:checked ~ .hidden_show { padding: 10px 0; height: auto; opacity: 1;}
  .hidden_box .hidden_open { padding: 10px 0; height: auto; opacity: 1;}
  .hidden_box input:checked ~ .hidden_open { height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s;}
}

/* 買取実績バナー */
.kaitori_bnr { display: flex; flex-wrap: wrap; justify-content: space-between;}
.kaitori_bnr a { width: 48%; margin: 0 0 1.5%; transition: .3s;}
.kaitori_bnr a:hover {opacity: .6;}
.kaitori_bnr img { width: 100%; height: auto;}


/*================================
            店舗買取ページ
================================*/
/* タイトル */
.irregular_headline,
.irregular_headline_mt{ line-height: 1.6em; font-size: 1.9rem; color: #FFF; font-weight: bold; margin: 70px 0 30px 0; padding: 12px 10px 8px; background-color: #AC0000; text-align: center;}
.irregular_headline_mt{ margin: 0 0 30px 0;}
@media screen and (max-width: 767px) {
  .irregular_headline,
  .irregular_headline_mt{ line-height: 1.4em; font-size: 1.6rem; padding: 12px 5px 8px;}
}

.shop_kaitori .kaitori_contents{ margin: 0;}
.shop_kaitori p a{ color: blue; padding: 0 3px; border-bottom: 1px solid blue;}
.shop_kaitori p a:hover { color: #337ab7; border-bottom: 1px solid #337ab7;}
.shop_kaitori_img{ display: block; width: 100%; max-width: 400px; margin: 0 auto; height: auto;}
.assessment_img{ width: 100%; height: auto;}

.bg_header{ background: #AC0000; color: #FFF; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; line-height: 1.4; min-height: 100px; padding: 30px 20px; position: relative;}
.bg_header::after{ position: absolute; content: ''; background: url(../images/header_bg.png) no-repeat; background-size: cover; width: 100%; height: 100%; background-position: top left; mix-blend-mode: overlay;}
.bg_header.yellow{ background: #CE9D00; text-shadow: 0 0 5px #6B4718;}
.bg_header.blue{ background: #0B3C80; text-shadow: 0 0 5px #0A2B5A;}
.bg_header.rolex{ background: #083904; text-shadow: 0 0 5px #052202;}
.bg_header_ttl{ font-size: 3rem; margin: 0 0 20px;}
@media screen and (max-width: 767px) {
  .bg_header{ font-size: 12px; padding: 20px 10px; position: relative;}
  .bg_header_ttl{ font-size: 2.5rem; margin: 0 0 10px;}
}
@media screen and (max-width: 500px) {
  .bg_header_ttl{ font-size: 5vw;}
}

/* cta */
.shop_contact{ display: flex; flex-wrap: wrap; justify-content: space-around; padding: 30px 10px 40px; margin: 50px 0 0;}
.shop_contact_txt{ width: 100%; margin: 0 0 20px; font-size: 20px; text-align: center; font-weight: bold; padding: 0; color: #333;}
.shop_contact .tel,
.shop_contact .contact{ width: 48%; color: #FFF; font-size: 20px; font-weight: 700; text-align: center; background: #2d8c3c; box-shadow: 2px 4px 0 #0d6c1c; border-radius: 10px; padding: 20px 10px 20px 50px; line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: .3s all; position: relative;}
.shop_contact .tel{ background: #00a6ac; box-shadow: 2px 4px 0 #31708f;}
.shop_contact .tel:hover,
.shop_contact .contact:hover{ box-shadow: none; margin: 4px -2px -4px 2px;}
.shop_contact .tel::after{ position: absolute; content: "\f2a0"; font-family: "Font Awesome 5 Free"; font-size: 40px; height: fit-content; left: 50px; top: 0; bottom: 0; margin: auto;}
.shop_contact .contact::after{ position: absolute; content: ''; background: url(../images/icon_contact.svg) no-repeat; width: 40px; height: 40px; background-size: contain; background-position: center; left: 40px; top: 0; bottom: 0; margin: auto;}
.shop_contact span{ margin: 0 0 10px; font-size: 14px;}
@media screen and (max-width: 1199px) {
  .shop_contact .tel::after{ left: 40px;}
  .shop_contact .contact::after{ left: 20px;}
}
@media screen and (max-width: 991px) {
  .shop_contact .tel,
  .shop_contact .contact{ font-size: 17px; padding: 15px 5px 12px 40px;}
  .shop_contact .tel::after{ font-size: 30px; left: 25px;}
  .shop_contact .contact::after{ width: 30px; height: 30px; left: 10px;}
}
@media screen and (max-width: 767px) {
  .shop_contact .tel,
  .shop_contact .contact{ width: 100%; padding: 15px 5px 12px 50px;}
  .shop_contact .tel{ margin: 0 0 15px;}
  .shop_contact .tel:hover{ margin: 4px -2px 6px 2px;}
  .shop_contact .tel::after{ left: 10%;}
  .shop_contact .contact::after{ left: 9%;}
}
@media screen and (max-width: 330px) {
  .shop_contact .tel,
  .shop_contact .contact{ padding: 15px 0 12px 35px;}
  .shop_contact .tel::after{ font-size: 25px; left: 6%;}
  .shop_contact .contact::after{ width: 25px; height: 25px; left: 4%;}
}

/* ポイント */
.kaitori .point_contents{ margin: 20px auto; position: relative; padding: 20px 0 0; width: 90%;}
.kaitori .point_contents .point_ttl{ background-color: #E3AD00; color: #FFF; font-size: 18px; width: 100%; max-width: 300px; margin: 0 auto; left: 0; right: 0; top: 0; text-align: center; line-height: 1; padding: 10px 30px 8px; border-radius: 50px; position: absolute;}
.kaitori .point_contents .point_text{ border: 2px solid #E3AD00; background-color: #FFFAEA; padding: 30px 20px 20px;}
.kaitori .point_contents .point_subttl{font-weight: bold; font-size: 20px; color: #333; text-align: center; border-bottom: 1px solid #CE9D00; padding: 0 0 5px;}
@media screen and (max-width: 767px) {
  .kaitori .point_contents{ width: 100%;}
}

/* 宅配買取の流れ */
.shop_kaitori_flow{ counter-reset: flow 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
.shop_kaitori_flow .flow_box_p{ display: flex; width: 100%; align-items: flex-start; background: #f7f1e8; margin: 0 0 30px;}
.shop_kaitori_flow .flow_box_p.half { width: 48%; flex-direction: column; align-items: stretch;}
.shop_kaitori_flow .flow_box_p img{ width: 30%; height: auto; object-fit: cover; margin: 20px 10px;}
.shop_kaitori_flow .flow_box_p.half img{ width: auto; height: 150px; order: 1;}
.shop_kaitori_flow .flow_text_p{ width: 70%; padding: 20px; letter-spacing: 0; font-size: 13px;}
.shop_kaitori_flow .half .flow_text_p{ width: 100%;}
.shop_kaitori_flow .half .flow_text_p{ width: 100%; order: 2; padding: 0 10px;}
.shop_kaitori_flow .half .flow_ttl_p{ border-bottom: 1px solid #333; padding: 2px 0 15px;}
.shop_kaitori_flow .half .flow_ttl_p::before,
.shop_kaitori_flow .half .flow_ttl_p::after{ top: -200px; left: -20px;}
.shop_kaitori_flow .flow_text_p p{ margin: 0; line-height: 23px;}
.shop_kaitori_flow .flow_ttl_p{ position: relative; color: #AC0000; font-weight: bold; padding: 2px 0 15px 40px; font-size: 17px;}
.shop_kaitori_flow .flow_ttl_p::before{ position: absolute; content: "STEP"; font-size: 14px; color: #FFF; top: -30px; left: -30px; background: #F2C022; height: 60px; width: 60px; border-radius: 50%; line-height: 1; display: flex; align-items: center; justify-content: center; letter-spacing: 0.1em; padding: 7px 0 25px;}
.shop_kaitori_flow .flow_ttl_p::after{ position: absolute; counter-increment: flow 1; content: counter(flow); font-size: 25px; top: -30px; left: -30px; height: 60px; width: 60px; display: flex; align-items: center; justify-content: center; padding: 22px 0 0; color: #FFF;}
.shop_kaitori_flow a:hover{text-decoration: underline;}
.shop_kaitori_flow .folw_contact{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.shop_kaitori_flow .folw_contact .tel,
.shop_kaitori_flow .folw_contact .contact{ width: 49%; color: #FFF; font-size: 16px; font-weight: 700; text-align: center; background: #2d8c3c; border-radius: 5px; padding: 10px 15px; line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: .3s all;}
.shop_kaitori_flow .folw_contact .tel{ background: #00a6ac;}
.shop_kaitori_flow .folw_contact .tel:hover,
.shop_kaitori_flow .folw_contact .contact:hover{ text-decoration: none; opacity: .7;}
.shop_kaitori_flow .folw_contact span{ margin: 5px 0 0; font-size: 12px;}
@media screen and (max-width: 560px) {
  .shop_kaitori_flow .flow_box_p { flex-direction: column; align-items: stretch;}
  .shop_kaitori_flow .flow_box_p.half { width: 100%;}
  .shop_kaitori_flow .flow_box_p img{ width: auto; height: 150px; order: 1;}
  .shop_kaitori_flow .flow_text_p{ width: 100%; order: 2; padding: 0 10px;}
  .shop_kaitori_flow .flow_ttl_p{ border-bottom: 1px solid #333; padding: 2px 0 0 0;}
  .shop_kaitori_flow .flow_ttl_p::before,
  .shop_kaitori_flow .flow_ttl_p::after{ top: -200px; left: -20px;}
  .shop_kaitori_flow .folw_contact{ margin: -10px 0 20px;}
  .shop_kaitori_flow .folw_contact .tel,
  .shop_kaitori_flow .folw_contact .contact{ width: 100%;}
  .shop_kaitori_flow .folw_contact .tel{ margin: 0 0 10px;}
}

/* ブログ */
.kaitori_blog .blog_list { border-bottom: 1px solid #333; padding: 0 0 20px; margin: 0 0 30px;}
.kaitori_blog .blog_list:hover{ opacity: 0.7;}
.kaitori_blog .blog-thumbnail{ width: 25%; display: table-cell; padding: 0 20px 0 0;}
.kaitori_blog .blog-thumbnail img{ width: 100%; height: auto;}
.kaitori_blog .blog-content{ display: table-cell; vertical-align: middle;}
.kaitori_blog .blog-ttl{ color: #333; font-weight: bold; font-size: 2rem; line-height: 1.4; border-bottom: 1px solid #333; padding: 0 0 10px; text-align: left;}
.kaitori_blog .blog-excerpt{ color: #333; font-size: 1.5rem; margin: 10px 0 0; line-height: 1.6; text-align: left;}
@media screen and (max-width: 991px) {
  .kaitori_blog .blog-thumbnail{ width: 30%; padding: 0 10px 0 0;}
  .kaitori_blog .blog-ttl{ font-size: 1.8rem;}
  .kaitori_blog .blog-excerpt{ font-size: 1.4rem;}
}
@media screen and (max-width: 550px) {
  .kaitori_blog .blog-ttl{ font-size: 1.4rem; padding: 0 0 5px;}
  .kaitori_blog .blog-excerpt{ margin: 5px 0 0; overflow: hidden; height: 60px; letter-spacing: 0; font-size: 1.3rem;}
}