@charset "UTF-8";

ul, ul ul, ul li {
  padding: 0;
  list-style: none;
  margin: 0;
}
li::marker {
  display: none;
}


/* カスタムプロパティ ーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
:root {
    --main-color: #000;
    --h2-fontSize: 17px;
    --pc-storeName__fontSize: 20px;
    --link-bg-Color: #147544;
    --border-radius: 5px;
    --address-fontSize: 14px;
    --fontSize: 14px;
    --item-bg-color: #F3F3F3;
    --color: #fff;
    --open-bgcolor: #79300E;
    --checked-color: #8b2100;
    --pc__borderColor: #cdcdcd;
    --pc__checked-color:#FFB890;
    --area-bgColor: #FFE390;
}
.l-Small {
    color: var(--main-color);
    font-family: "Meiryo";
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 30px;
}
.l-section h2 {
    color: var(--main-color);
    font-size: var(--h2-fontSize);
    font-weight: 700;
    line-height: 18px;
}
.storeSearch {
    background-color: var(--link-bg-Color);
    border-radius: var(--border-radius);
    margin-left: 0;
    margin-bottom: 30px;
}
.storeSearch a {
    display: block;
    width: 100%;
    color: #FFF;
    text-align: center;
    font-size: var(--h2-fontSize);
    font-weight: 700;
    line-height: 18px;
    padding: 11px 0;
}
.storeSearch:hover {
    opacity: .8;
}
/* リスト検索 (SP)ーーーーーーーーーーーーーー */
/*ベース*/
.toggle {
	  display: none;
}
.Label,
.area {		/*タイトル*/
    display: block;
    height: 35px;
    color: var(--main-color);
    background:#FFE390;
    text-align: center;
    font-size: var(--fontSize);
    font-weight: 400;
    line-height: 20px;
    padding: 8px 0;
    border-radius: var(--border-radius);
    margin-bottom: 10px;
}
.Label::before{		/*タイトル横の矢印*/
    content: "";
    position: absolute;
    top: 12px;
    right: 19px;
    border: 6px solid transparent;
    border-top: 9px solid var(--main-color);  
    transition: all 0.1s ease-in-out;
}
.Label,
.content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s ease-in;
}
.content {		/*本文*/
    height: 0;
    overflow: hidden;
}
.toggle:checked + .Label + .content {	/*開閉時*/
    height: auto;
    transition: all .3s ease-in;
}
.toggle:checked + .Label::before {
    transform: rotate(-180deg) !important;
    top: 6px;
    transform-origin: center;
}
.list-container {
  margin-bottom: -5px;
}
.list-container .Label {
  margin-bottom: 15px;
}
/* 都道府県名 */
.prefectures,
.pc_prefectures {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin-bottom: 20px;
    gap: 7px;
    padding: 0;
}
.pc_prefectures {
    margin-top: 30px;
    gap: 0.76%;
    row-gap: 5px;
}
.placeName, 
.pc_placeName {
    width: 31.88%;
    height: 30px;
    text-align: center;
    margin-bottom: 3px;
    border-radius: var(--border-radius);
    background-color: var(--item-bg-color);
    list-style: none;
}
.pc_placeName label,
.placeName label {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.placeName button {
    border: none;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding: 5px 0;
    border-radius: var(--border-radius);
    background-color: var(--item-bg-color);
    color: var(--main-color);
}
.pc_placeName {
    height: 35px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    background-color: var(--item-bg-color);
    color: var(--main-color);
    list-style: none;
}
.area button,
.pc_placeName button {
   border: none;
}
.area button {
    background-color: transparent;
    width: 100%;
    padding: 10px 0;
}
.placeName button.is-active {
    background-color: var(--open-bgcolor);
    color: var(--color);
}
 /* 店舗カード */
  .storeList-wrapper {
    display: none;
  }
  .is-active.storeList-wrapper {
    display: block !important;
  }
  .address-wrapper {
    margin-bottom: 25px;
  }
  .address_item {
    height: 41px;
  }
  .store_name {
    margin: 0;
    margin-bottom: 10px;
  }
  .address_item-wrapper {
    display: flex;
    gap: 15px;
  }
  .address {
    color: #000;
    font-size: var(--address-fontSize);
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 5px;
  }
  .number {
    color: #000;
    font-size: var(--address-fontSize);
    font-weight: 400;
    line-height: 18px;
    margin-right: .875rem;
  }
  .number:hover {
    opacity: .8;
  }
  a.map {
    color: #0FA98D;
    font-size: var(--address-fontSize);
    font-weight: 400;
    line-height: 18px;
  }
  .store_link {
    background-color: var(--link-bg-Color);
    width: 90px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
  }
  .store_link a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 11px 0;
    color: #FFF;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
  }
  /* 店舗カード ここまで*/
  .storePlace {
    font-size: var(--address-fontSize);
    background-color: transparent;
    border: none;
  }
  .storePlace input:checked ~ label {
    color: var(--checked-color);
  }
  /* .storePlace input:checked ~ #pc_YokohamaOtherStoreList {
    display: none;
  } */
  .placeName label {
    font-size: 14px;
  }
  .pc_placeName label {
    height: 100%;
  }
  .pc_placeName input,
  .placeName input {
    background-color: var(--item-bg-color);
  }
  .pc_placeName input:checked ~ label,
  .placeName input:checked ~ label {
    color: var(--color);
    background-color: var(--open-bgcolor);
    display: flex;
    height: 100%;
    border-radius: var(--border-radius);
    justify-content: center;
    align-items: center;
  }
  .area label {
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: center;
  }
  .area input:checked ~ label {
    background-color: var(--pc__checked-color);
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
  }
  .pc_placeName input:checked ~ label {
    height: 35px;
  }
  .pc_placeName input,
  .placeName input,
  .storePlace input,
  .area input
  {
    display: none;
  }
  .storePlace label {
    line-height: 26px;
    border-bottom: 1px solid;
    box-sizing: border-box;
    height: 20px;
    display: block;
  }
  #tokyo23storeList,
  #tokyo23otherstoreList,
  #YokohamaStoreList,
  #YokohamaOtherStoreList {
    display: none;
    padding: 0;
  }
  #tokyo23storeList,
  #YokohamaStoreList {
    display: block;
  }
  .storePlace-wrapper {
    display: flex;
    justify-content: left;
    gap: 20px;
    margin-bottom: 30px;
    line-height: 20px;
  }
  .storePlace-wrapper p {
    margin: 0;
  }
  /* リスト検索　(PC) ーーーーーーーーーーーーーーーーーーー */
  .area {
    width: 33.33%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    margin-top: -8px;
  }
  .pc_area-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1.125rem;
    padding: 0;
  }
  .pc_prefectures {
    display: none;
    padding: 0;
  }
  .pc_prefectures.is-active {
    display: flex;
  }
  @media screen and (max-width:767px) {
    .pc_list-contents {
      display: none;
    }
  }
  @media screen and (min-width: 768px) {
    :root {
      --h2-fontSize: 23px;
      --address-fontSize: 1em;
    }
    .l-Small {
      font-size: 1rem;
    }
    /* SPコンテンツを非表示 */
    .accordion,
    .Label::before
    {
      display: none;
    }
    .l-contents-wrapper {
      width: 97%;
      margin: 0 auto;
    }
    .list-container {
      width: 340px;
    }
    /* 地域、都道府県名、区内外のボタンのホバーの設定とチェックされて時のホバーの設定 */
    .pc_placeName label,
    .area label {
      display: flex;
      align-items: center;
      line-height: 3;
      width: 100%;
    }
    .pc_placeName input:not(:checked) ~ label {
      display: flex;
    }
    button:hover,
    .pc_placeName input:not(:checked) ~ label:hover,
    .area input:not(:checked) ~ label:hover {
      cursor: pointer;
      opacity: .6;
      line-height: 3;
      border-radius: var(--border-radius);
    }
    .pc_placeName label:hover,
    .area label:hover {
      width: 100%;
    }
    .area input:not(:checked) ~ label:hover {
      background-color: var(--area-bgColor);
    }
    .pc_placeName input:not(:checked) ~ label:hover {
      line-height: 3;
      display: flex;
    }
    .storePlace label:hover {
      cursor: pointer;
    }
    a.map:hover,
    .store_link a:hover,
    .storePlace input:not(:checked) ~ label:hover {
      opacity: .8;
    }
    .storePlace-wrapper {
      margin-bottom: 35px;
      padding-left: 10px;
    }
    .storeSearch {
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 40px;
    }
    .storeSearch a {
      font-size: 20px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .storeSearch-wrapper h2 {
      margin-top: 40px;
      margin-bottom: 20px;
    }
    .pc_area-wrapper {
      gap: 1.7%, 1.7%;
    }
    .area {
      width: 31%;
    }
    .List h2 {
      margin-bottom: 10px;
      font-size: var(--pc-storeName__fontSize);
    }
    .List .List-heading {
      margin-bottom: 25px;
      font-size: 23px;
    }
    .pc_placeName {
      width: 10.2%;
      max-width: 110px;
    }
    .address-wrapper {
      border-bottom: 1px solid var(--pc__borderColor);
      padding-bottom: 20px;
      padding-left: 10px;
      margin-bottom: 0;
      margin-top: 20px;
    }
    .l-section .store_name {
      line-height: 28px;
    }
    .store_link {
      width: 120px;
      height: 50px;
    }
    .store_link a {
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .address_item-wrapper {
      gap: 40px;
      box-sizing: border-box;
    }
    .address_item {
      width: 430px;
      height: 50px;
    }
    .address {
      margin-bottom: 10px;
    }
    /* PCの時は電話番号から発信されない */
    a[href*="tel:"] {
      pointer-events: none;
      cursor: default;
      text-decoration: none;
      }
      
    .storeSearch {
      width: 400px;
    }
    .is-active.areaButton {
      background-color: var(--pc__checked-color);
      border-radius: var(--border-radius);
    }
  }  
    /* メインコンテンツ以外のスタイル変更　ーーーーーーーーーーーーーーーーーーーーー */
    @media screen and (min-width: 768px) {
    html {
      min-width: 768px;
      width: 100%;
      overflow-x: hidden;
    }
    body {
      width: 100%;
    }
    ._main,
    .brand-common-wisywig h1, h1.mod-heading
     {
      width: 100%;
    }
    .area-contents {
      padding-bottom: 40px;
      width: 100%;
      min-width: 768px;
    }
    .area-header-brand {
      min-width: 768px;
    }
    .area-header-brand ._wrap,
    .area-footer ._wrap,
    .mod-wrap
     {
      width: 100%;
      min-width: 768px;
      max-width: 1056px;
      margin: 0 auto;
    }
    .area-footer ._wrap {
      min-width: 700px;
    }
    .area-contents {
      width: 100%;
    }
    .area-footer {
      width: 100%;
        min-width: 768px;
        margin: 0 auto;
    }
    .area-footer ._brand-menu-navitime ._links,
    .area-footer ._brand-list dl._company,
    .area-footer ._wrap
    {
      width: 97%;
      margin: 0 auto;
    }
    .area-header-brand ._main
    .mod-breadcrumb {
      width: 100%;
    }
    .mod-breadcrumb ul {
      width: 97%;
      max-width: 1056px;
    }
      .area-header-brand ._wrap {
        width: 97%;
        margin: 0 auto;
      }
      .area-footer ._btn-pagetop {
        bottom: 20px;
        right: 0
    }
    .area-header-brand ._btn-opener-logo {
      right: 4%;
    }
  }
  @media screen and (min-width: 800px) {
    .area-header-brand ._btn-opener-logo {
      right: 1%;
    }
    .pc_placeName {
      width: 10.4%;
    }
    .area {
      width: 31.7%;
    }
  }
  @media screen and (min-width: 945px) {
    .area {
      width: 32%;
    }
  }
  @media screen and (min-width: 1090px) {
    .l-contents-wrapper {
      width: 100%;
    }
    .area {
      width: 340px;
    }
    .pc_placeName {
      width: 110px;
    }
  }
  @media screen and (min-width: 1200px) {
    .area-footer ._btn-pagetop {
      right: 5%
    }
  }
   /* メインコンテンツ以外のスタイル変更　ここまで　ーーーーーーーーーーーーーーーーーーーーー */