/*
================================================================================================================
店舗一覧
================================================================================================================
*/

/*入れ子*/
.inner{display:none; width:100%; max-width:700px; padding:20px 20px 0; margin:0 auto;}
@media screen and (max-width:480px){.inner{padding:10px 0 0;}}

/*
========================
エリア別ボタン
========================
*/
.btn-link.toggle{width:100%; margin:20px auto 0;}
.box h2 + .btn-link.toggle{margin-top:0;}
@media screen and (max-width:480px){.btn-link.toggle{margin:10px auto 0;}}

.btn-link.toggle:hover::before{right:20px;}
.btn-link.toggle::after{
top:calc(50% - 5px);
right:27px;
border-right:8px solid transparent !important;
border-left:8px solid transparent !important;
border-top:14px solid #fbb618 !important;
border-bottom:0;}
.btn-link.toggle:hover::after{border-top:14px solid #f00 !important;}
.btn-link.toggle.open::after{right:25px; transform:rotate(-60deg); border-top:14px solid #f00 !important;}

/*
========================
県別ボタン
========================
*/
.btn-toggle{
display:block;
position:relative;
width:100%;
max-width:800px;
color:#fff;
background:linear-gradient(to bottom,  #38f8d4 0%,#43ea80 100%);
font-size:16px;
font-weight:700;
text-align:center;
border-radius:10px;
border:2px solid #fcf698;
box-shadow:inset 0 0 5px rgba(0,0,0,.3) , 0 5px 0 #562900;
padding:10px 0;
margin:0 auto;
transition:all .2s ease;
cursor:pointer;}
.btn-toggle p{filter:drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000) drop-shadow(-1px 1px 0 #000) drop-shadow(1px -1px 0 #000); transform:translateZ(0);}
.btn-toggle:hover{box-shadow:inset 0 0 5px rgba(0,0,0,.3) , 0 5px 0 transparent; transform:translateY(5px);}
.inner + .btn-toggle{margin:20px auto 0;}

.btn-toggle::before{
display:block;
content:"";
position:absolute;
top:calc(50% - 5px);
right:20px;
width:0;
height:0;
border-style:solid;
border-right:8px solid transparent;
border-left:8px solid transparent;
border-top:14px solid #fff;
border-bottom:0;
transition:all .2s ease;}
.btn-toggle.open::before{top:calc(50% - 8px); transform:rotate(-180deg);}

@media screen and (max-width:480px){
.btn-toggle{font-size:14px; padding:5px 0;}
.inner + .btn-toggle{margin:10px auto 0;}}

/*
========================
店舗リスト
========================
*/
.inner.pref > a{display:flex; color:#281d02; background:#f8f0d1; font-size:14px; flex-direction:column; transition:opacity .2s ease;}
.inner.pref > a + a{border-top:2px solid;}
.inner.pref > a:hover{opacity:.9;}
.inner.pref > a > div{position:relative; width:100%; padding:10px;}
.inner.pref > a > div + div{border-top:1px solid;}
.inner.pref > a > div:nth-child(1){background:#e2dabb;}
.inner.pref > a > div:nth-child(2){display:flex; padding-left:80px; align-items:center;}
.inner.pref > a > div:nth-child(2)::before{display:block; content:"設置機種"; position:absolute; top:15px; left:10px;}
.inner.pref > a > div p{
display:block;
width:80px;
height:40px;
background-color:#000;
background-image:url(../img/common/logo/mfc_bg.png);
background-position:center;
background-repeat:no-repeat;
background-size:100% auto;}
.inner.pref > a > div p.mfg{background-color:#fff; background-image:url(../img/common/logo/mfg.png);}
.inner.pref > a > div p + p{margin-left:10px;}
@media screen and (max-width:480px){
.inner.pref > a{font-size:12px;}
.inner.pref > a > div{padding:5px 10px;}
.inner.pref > a > div:nth-child(2){padding-left:70px;}
.inner.pref > a > div:nth-child(2)::before{top:8px;}
.inner.pref > a > div p{width:70px; height:30px;}}