@font-face {
  font-family: 'AdobeBlank';
  src: url("data:font/opentype;base64,T1RUTwAKAIAAAwAgQ0ZGIN6nWacAAAfMAAABMURTSUcAAAABAAAJCAAAAAhPUy8yAF+xmwAAARAAAABgY21hcAE0tLwAAAasAAABAGhlYWQIOsNZAAAArAAAADZoaGVhB1oD7wAAAOQAAAAkaG10eAPoAHwAAAkAAAAACG1heHAAAlAAAAABCAAAAAZuYW1lc0mXUAAAAXAAAAU6cG9zdP+4ADIAAAesAAAAIAABAAAAAgBB1Q6SE18PPPUAAwPoAAAAANKdP6AAAAAA0p0/oAB8/4gDbANwAAAAAwACAAAAAAAAAAEAAANw/4gAAAPoAHwAfANsAAEAAAAAAAAAAAAAAAAAAAACAABQAAACAAAAAwPoAZAABQAAAooCWAAAAEsCigJYAAABXgAyANwAAAAAAAAAAAAAAAD3/67/+9///w/gAD8AAAAAQURCTwBAAAD//wNw/4gAAANwAHhgLwH/AAAAAAAAAAAAAAAgAAAAAAALAIoAAwABBAkAAACUAAAAAwABBAkAAQAaAJQAAwABBAkAAgAOAK4AAwABBAkAAwA4ALwAAwABBAkABAAaAJQAAwABBAkABQB0APQAAwABBAkABgAWAWgAAwABBAkACAA0AX4AAwABBAkACwA0AbIAAwABBAkADQKWAeYAAwABBAkADgA0BHwAQwBvAHAAeQByAGkAZwBoAHQAIACpACAAMgAwADEAMwAsACAAMgAwADEANQAgAEEAZABvAGIAZQAgAFMAeQBzAHQAZQBtAHMAIABJAG4AYwBvAHIAcABvAHIAYQB0AGUAZAAgACgAaAB0AHQAcAA6AC8ALwB3AHcAdwAuAGEAZABvAGIAZQAuAGMAbwBtAC8AKQAuAEEAZABvAGIAZQAgAEIAbABhAG4AawAgADIAUgBlAGcAdQBsAGEAcgAyAC4AMAAwADEAOwBBAEQAQgBPADsAQQBkAG8AYgBlAEIAbABhAG4AawAyADsAQQBEAE8AQgBFAFYAZQByAHMAaQBvAG4AIAAyAC4AMAAwADEAOwBQAFMAIAAyAC4AMAAwADEAOwBoAG8AdABjAG8AbgB2ACAAMQAuADAALgA4ADgAOwBtAGEAawBlAG8AdABmAC4AbABpAGIAMgAuADUALgA2ADUAMAAxADIAQQBkAG8AYgBlAEIAbABhAG4AawAyAEEAZABvAGIAZQAgAFMAeQBzAHQAZQBtAHMAIABJAG4AYwBvAHIAcABvAHIAYQB0AGUAZABoAHQAdABwADoALwAvAHcAdwB3AC4AYQBkAG8AYgBlAC4AYwBvAG0ALwB0AHkAcABlAC8AVABoAGkAcwAgAEYAbwBuAHQAIABTAG8AZgB0AHcAYQByAGUAIABpAHMAIABsAGkAYwBlAG4AcwBlAGQAIAB1AG4AZABlAHIAIAB0AGgAZQAgAFMASQBMACAATwBwAGUAbgAgAEYAbwBuAHQAIABMAGkAYwBlAG4AcwBlACwAIABWAGUAcgBzAGkAbwBuACAAMQAuADEALgAgAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACAAZABpAHMAdAByAGkAYgB1AHQAZQBkACAAbwBuACAAYQBuACAAIgBBAFMAIABJAFMAIgAgAEIAQQBTAEkAUwAsACAAVwBJAFQASABPAFUAVAAgAFcAQQBSAFIAQQBOAFQASQBFAFMAIABPAFIAIABDAE8ATgBEAEkAVABJAE8ATgBTACAATwBGACAAQQBOAFkAIABLAEkATgBEACwAIABlAGkAdABoAGUAcgAgAGUAeABwAHIAZQBzAHMAIABvAHIAIABpAG0AcABsAGkAZQBkAC4AIABTAGUAZQAgAHQAaABlACAAUwBJAEwAIABPAHAAZQBuACAARgBvAG4AdAAgAEwAaQBjAGUAbgBzAGUAIABmAG8AcgAgAHQAaABlACAAcwBwAGUAYwBpAGYAaQBjACAAbABhAG4AZwB1AGEAZwBlACwAIABwAGUAcgBtAGkAcwBzAGkAbwBuAHMAIABhAG4AZAAgAGwAaQBtAGkAdABhAHQAaQBvAG4AcwAgAGcAbwB2AGUAcgBuAGkAbgBnACAAeQBvAHUAcgAgAHUAcwBlACAAbwBmACAAdABoAGkAcwAgAEYAbwBuAHQAIABTAG8AZgB0AHcAYQByAGUALgBoAHQAdABwADoALwAvAHMAYwByAGkAcAB0AHMALgBzAGkAbAAuAG8AcgBnAC8ATwBGAEwAAAAAAAEAAwAKAAAADAANAAAAAAD0AAAAAAAAABMAAAAAAADX/wAAAAEAAOAAAAD9zwAAAAEAAP3wAAD//QAAAAEAAQAAAAH//QAAAAEAAgAAAAL//QAAAAEAAwAAAAP//QAAAAEABAAAAAT//QAAAAEABQAAAAX//QAAAAEABgAAAAb//QAAAAEABwAAAAf//QAAAAEACAAAAAj//QAAAAEACQAAAAn//QAAAAEACgAAAAr//QAAAAEACwAAAAv//QAAAAEADAAAAAz//QAAAAEADQAAAA3//QAAAAEADgAAAA7//QAAAAEADwAAAA///QAAAAEAEAAAABD//QAAAAEAAwAAAAAAAP+1ADIAAAAAAAAAAAAAAAAAAAAAAAAAAAEABAIAAQEBDEFkb2JlQmxhbmsyAAEBAS34G/gciwwe+B0B+B4Ci/sM+gD6BAUeKgAfDB+NDCL3Uw/3WRH3Vgwl96wMJAAFAQEGDlZjcEFkb2JlSWRlbnRpdHlDb3B5cmlnaHQgMjAxMywgMjAxNSBBZG9iZSBTeXN0ZW1zIEluY29ycG9yYXRlZCAoaHR0cDovL3d3dy5hZG9iZS5jb20vKS5BZG9iZSBCbGFuayAyQWRvYmVCbGFuazItMgAAAAABAAAAAAIBAUxO+nz7DLf6JLcB9xC3+Sy3A/cQ+gQV/nz5hPp8B/1Y/icV+dIH98X8MwWmsBX7xfg3Bfj2BqZiFf3SB/vF+DMFcGYV98X8NwX89gYOiw4AAQEBCfgfDCaX97kS+46LHAVGiwa9Cr0LAAAAA+gAfAAAAAAAAAABAAAAAA==");
}
img {
  vertical-align: top;
  border: 0;
  line-height: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

a, button, label {
  outline: none;
}

* {
  -webkit-tap-highlight-color: transparent;
}

input, textarea, select, button {
  outline: none;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
}

h1, h2, h3, b, strong {
  font-weight: inherit;
}

main {
  display: block;
}

body {
  margin: 0;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: calc(27 / 14);
  font-weight: 300;
  color: #333;
  --scale-base: 0.1vw;
}

img.fade {
  transition: opacity 1000ms ease;
  opacity: 0;
}
img.fade.show {
  opacity: 1;
}

.intersection,
.intersection-child {
  transition: opacity 1000ms ease;
  opacity: 0;
}

.intersection.show,
.intersection-child.show {
  opacity: 1;
}

#menu {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 7;
  width: 375px;
  height: auto;
  background: white;
  overflow-y: auto;
  text-align: center;
  transition: transform 300ms ease;
  transform: translateX(100%);
}
#header.open #menu {
  transform: translateX(0);
}
#menu .logo {
  margin: 0 0 38px;
  padding-top: 22px;
}
#menu .logo a {
  display: inline-block;
  vertical-align: top;
  transition: opacity 300ms ease;
}
#menu .logo a:hover {
  opacity: 0.6;
}
#menu #nav p {
  margin: 0 38px;
  border-bottom: 1px solid #a8a8a8;
}
#menu #nav p:first-child {
  border-top: 1px solid #a8a8a8;
}
#menu #nav a {
  display: block;
  padding: 14px 0;
  text-indent: 0.1em;
  transition: opacity 300ms ease;
}
#menu #nav a:hover {
  opacity: 0.6;
}
#menu .sns {
  display: flex;
  justify-content: center;
  margin-top: 33px;
  padding-bottom: 63px;
}
#menu .sns p {
  margin: 0;
}
#menu .sns p + p {
  margin-left: 39px;
}
#menu .sns a {
  display: inline-block;
  vertical-align: top;
  transition: opacity 300ms ease;
}
#menu .sns a:hover {
  opacity: 0.6;
}

#button-menu {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 8;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  width: 54px;
  height: 54px;
}
#button-menu svg {
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 300ms ease;
  width: 54px;
  height: 54px;
}
#button-menu rect {
  transition: fill 300ms ease;
  fill: #777;
}
#button-menu:hover rect {
  fill: #949494;
}
#button-menu .open {
  opacity: 1;
}
#button-menu .close {
  opacity: 0;
}
#header.open #button-menu .open {
  opacity: 0;
}
#header.open #button-menu .close {
  opacity: 1;
}

#footer {
  padding: 69px 0 0;
  background: #F2F2F2;
}
#footer .logo {
  margin: 0;
  text-align: center;
}
#footer .logo a {
  display: inline-block;
  vertical-align: top;
  transition: opacity 300ms ease;
}
#footer .logo a:hover {
  opacity: 0.6;
}
#footer .logo img {
  width: 109px;
  height: 74px;
}
#footer .nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 38px;
  border-top: 1px solid #a9a9a9;
}
#footer .nav p {
  width: 50%;
  margin: 0;
  border-bottom: 1px solid #a9a9a9;
  text-align: center;
  text-indent: 0.1em;
}
#footer .nav p:nth-child(2n+1) {
  width: calc(50% - 1px);
  border-right: 1px solid #a9a9a9;
}
#footer .nav a {
  display: block;
  padding: 15px 0 13px;
  transition: opacity 300ms ease;
}
#footer .nav a:hover {
  opacity: 0.6;
}
#footer .sns {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
#footer .sns p {
  margin: 0;
}
#footer .sns p + p {
  margin-left: 60px;
}
#footer .sns a {
  display: inline-block;
  vertical-align: top;
  transition: opacity 300ms ease;
}
#footer .sns a:hover {
  opacity: 0.6;
}

#copyright {
  margin: 0;
  padding: 72px 0 63px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  text-align: center;
}

#top-slideshow, #philosophy-slideshow, #shoplist-slideshow {
  position: relative;
}
#top-slideshow > h1, #top-slideshow > p, #philosophy-slideshow > h1, #philosophy-slideshow > p, #shoplist-slideshow > h1, #shoplist-slideshow > p {
  margin: 0;
  padding: 22px 0 27px;
  text-align: center;
}
#top-slideshow > h1 a, #top-slideshow > p a, #philosophy-slideshow > h1 a, #philosophy-slideshow > p a, #shoplist-slideshow > h1 a, #shoplist-slideshow > p a {
  display: inline-block;
  vertical-align: top;
}
#top-slideshow > h1 img, #top-slideshow > p img, #philosophy-slideshow > h1 img, #philosophy-slideshow > p img, #shoplist-slideshow > h1 img, #shoplist-slideshow > p img {
  width: 109px;
  height: 74px;
}
#top-slideshow .screen, #philosophy-slideshow .screen, #shoplist-slideshow .screen {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 150.933%;
  overflow: hidden;
  transition: opacity 600ms ease;
  opacity: 0;
}
#top-slideshow .screen.show, #philosophy-slideshow .screen.show, #shoplist-slideshow .screen.show {
  opacity: 1;
}
#top-slideshow .screen p, #philosophy-slideshow .screen p, #shoplist-slideshow .screen p {
  width: 100%;
  height: 100%;
  margin: 0;
}
#top-slideshow .screen a, #philosophy-slideshow .screen a, #shoplist-slideshow .screen a {
  display: block;
  width: 100%;
  height: 100%;
}
#top-slideshow .screen img, #philosophy-slideshow .screen img, #shoplist-slideshow .screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#top-slideshow .screen > p, #philosophy-slideshow .screen > p, #shoplist-slideshow .screen > p {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  transition: opacity 1s cubic-bezier(0.25, 0, 0.25, 1), visibility 1s linear;
  opacity: 0;
  visibility: hidden;
}
#top-slideshow .screen > p:first-child, #philosophy-slideshow .screen > p:first-child, #shoplist-slideshow .screen > p:first-child {
  z-index: 2;
  opacity: 1;
  visibility: visible;
}
#top-slideshow .screen > p:last-child, #philosophy-slideshow .screen > p:last-child, #shoplist-slideshow .screen > p:last-child {
  opacity: 1;
  visibility: visible;
}

.top-brand .main {
  padding: 58px 0 71px;
}
.top-brand .main hgroup {
  text-align: center;
}
.top-brand .main hgroup h2 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
}
.top-brand .main hgroup h1 {
  margin: 10px 0 0;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  line-height: 1.2;
}
.top-brand .main hgroup h1 br {
  display: none;
}
.top-brand .main hgroup h1 span {
  display: block;
  margin: 0 0 8px;
  font-family: Lora, serif;
  font-size: 29px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: #80807a;
}
.top-brand .main img {
  margin-top: 49px;
}
.top-brand .main section h1 {
  margin: 58px 0 0 22px;
  font-size: 23px;
  letter-spacing: 0.2em;
  font-family: 'Noto Serif JP', serif;
}
.top-brand .main section p {
  margin: 49px 0 0 22px;
}
.top-brand .feature {
  padding: 61px 0 78px;
  background: #E3E3E3;
}
.top-brand .feature > h1 {
  position: relative;
  display: table;
  margin: 0 auto;
  font-size: 20px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-align: center;
}
.top-brand .feature > h1:before, .top-brand .feature > h1:after {
  content: '';
  position: absolute;
  top: 50%;
  display: block;
  width: 14px;
  height: 1px;
  background: #6b6b6b;
}
.top-brand .feature > h1:before {
  left: -23px;
}
.top-brand .feature > h1:after {
  right: -23px;
}
.top-brand .feature > h1 + img {
  display: block;
  margin: 51px auto 0;
}
.top-brand .feature section h1 {
  margin: 37px 0 0 27px;
  font-size: 31px;
  font-family: Lora, serif;
  letter-spacing: 0.2em;
  line-height: calc(55 / 40);
  color: #80807A;
}
.top-brand .feature section p {
  margin: 31px 0 0 27px;
}
.top-brand .feature article {
  width: 325px;
  margin: 55px auto 0;
  background: white;
  cursor: pointer;
}
.top-brand .feature article + article {
  margin-top: 12px;
}
.top-brand .feature article h1 {
  position: relative;
  margin: 0;
  padding: 14px 0;
  font-size: 16px;
  text-indent: 0.1em;
  text-align: center;
  line-height: calc(26 / 16);
  font-family: 'Noto Serif JP', serif;
}
.top-brand .feature article h1:after {
  content: '';
  position: absolute;
  right: 12px;
  top: calc(50% - 9px / 2);
  display: block;
  width: 17px;
  height: 9px;
  transition: transform 300ms ease;
  background: url("image/icon-allow-down.svg") 0 0 no-repeat;
}
.top-brand .feature article.open h1:after {
  transform: scaleY(-1);
}
.top-brand .feature article p {
  margin: 0;
  padding: 9px 20px 24px;
}
.top-brand .feature article p:empty {
  display: none;
}
.top-brand .feature article .container {
  height: 0;
  overflow: hidden;
  transition: height 300ms ease;
}
.top-brand .feature .cycle {
  display: block;
  margin: 37px auto 0;
}
.top-brand .video video {
  display: block;
  margin: 0 auto;
}
.top-brand .faq {
  padding: 55px 0 60px;
  background: #F2F2F2;
}
.top-brand .faq > h1 {
  position: relative;
  display: table;
  margin: 0 auto;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  text-align: center;
}
.top-brand .faq > h1:before, .top-brand .faq > h1:after {
  content: '';
  position: absolute;
  top: 50%;
  display: block;
  width: 14px;
  height: 1px;
  background: #6b6b6b;
}
.top-brand .faq > h1:before {
  left: -23px;
}
.top-brand .faq > h1:after {
  right: -23px;
}
.top-brand .faq .horizontal {
  padding-top: 19px;
}
.top-brand .faq section {
  width: 328px;
  border-top: 1px solid #a9a9a9;
  padding: 28px 0 25px;
  margin: 0 auto;
}
.top-brand .faq section:first-child {
  border-top: 0;
}
.top-brand .faq section h1 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.05em;
}
.top-brand .faq section p {
  width: 301px;
  margin: 20px 0 0 22px;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: calc(24.5 / 14);
}

#top-link {
  padding: 102px 0 83px;
}
#top-link p {
  display: table;
  margin: 0 auto;
  font-size: 18px;
  letter-spacing: 0.2em;
}
#top-link p + p {
  margin-top: 75px;
}
#top-link a {
  display: inline-block;
  vertical-align: top;
  transition: opacity 300ms ease;
}
#top-link a:hover {
  opacity: 0.6;
}
#top-link span {
  display: block;
  text-align: center;
  padding: 10px 0 0;
}
#top-link .allow {
  display: inline-block;
  vertical-align: top;
  margin-left: 12px;
  padding-top: 15px;
}
#top-link .allow polyline {
  fill: none;
  stroke: #6B6B6B;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#top-instagram {
  padding: 41px 0 70px;
  background: #F2F2F2;
}
#top-instagram h1 {
  margin: 0;
  padding-bottom: 27px;
  text-align: center;
}
#top-instagram h1 a {
  display: inline-block;
  vertical-align: top;
  transition: opacity 300ms ease;
}
#top-instagram h1 a:hover {
  opacity: 0.6;
}
#top-instagram .pictures {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#top-instagram .pictures p {
  margin: 5px;
}
#top-instagram .pictures a {
  display: inline-block;
  vertical-align: top;
  transition: opacity 300ms ease;
}
#top-instagram .pictures a[href]:hover {
  opacity: 0.6;
}
#top-instagram .pictures img {
  object-fit: cover;
  width: 151px;
  height: 151px;
}
#top-instagram .pictures .empty {
  width: 151px;
  height: 0;
  margin: 0 5px;
}

#top-link-business {
  padding: 74px 0 50px;
}
#top-link-business p {
  display: table;
  margin: 0 auto;
  font-size: 18px;
  letter-spacing: 0.2em;
}
#top-link-business a {
  display: inline-block;
  vertical-align: top;
  transition: opacity 300ms ease;
}
#top-link-business a:hover {
  opacity: 0.6;
}
#top-link-business span {
  display: block;
  text-align: center;
  padding: 6px 0 0;
}
#top-link-business .allow {
  display: inline-block;
  vertical-align: top;
  margin-left: 12px;
  padding-top: 15px;
}
#top-link-business .allow polyline {
  fill: none;
  stroke: #6B6B6B;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#philosophy-vision {
  padding: 63px 0 42px;
  background: #F2F2F2;
}
#philosophy-vision h1 {
  width: 315px;
  margin: 0 auto;
  border-bottom: 1px solid #8D807A;
  padding-bottom: 15px;
  font-size: 29px;
  font-family: Lora, serif;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: #8D807A;
  line-height: 1;
  text-align: center;
}
#philosophy-vision h2 {
  margin: 51px 0 0;
  font-size: 20px;
  letter-spacing: 0;
  font-family: 'Noto Serif JP', serif;
  text-align: center;
  line-height: calc(38 / 20);
}
#philosophy-vision p {
  margin: 30px 0 0;
  padding-left: 0.075em;
  line-height: calc(32 / 14);
  letter-spacing: 0.075em;
  text-align: center;
}
#philosophy-vision:after {
  content: '';
  display: block;
  width: 1px;
  height: 41px;
  margin: 18px auto 0;
  background: #8D807A;
  font-size: 0;
  line-height: 0;
}

#philosophy-1, #philosophy-2 {
  position: relative;
  padding: 52px 0 0;
}
#philosophy-1 h1, #philosophy-2 h1 {
  box-sizing: border-box;
  width: 315px;
  margin: 0 auto;
  padding: 0 11px 13px;
  border-bottom: 1px solid #8D807A;
  font-size: 29px;
  font-family: Lora, serif;
  letter-spacing: 0.2em;
  color: #8D807A;
  line-height: 1;
}
#philosophy-1 h1 br, #philosophy-2 h1 br {
  display: none;
}
#philosophy-1 h1 span, #philosophy-2 h1 span {
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.1em;
}
#philosophy-1 img, #philosophy-2 img {
  display: block;
  margin: 33px auto 0;
}
#philosophy-1 h2, #philosophy-2 h2 {
  width: 300px;
  margin: 48px auto 0;
  font-size: 20px;
  letter-spacing: 0.1em;
  font-family: 'Noto Serif JP', serif;
  line-height: calc(31 / 20);
}
#philosophy-1 p, #philosophy-2 p {
  width: 300px;
  margin: 29px auto 0;
}

#philosophy-2 {
  margin-top: 64px;
  padding-bottom: 84px;
}

#shoplist-slideshow .screen {
  padding-top: 64%;
}

#shoplist-top {
  padding: 50px 0 46px;
  background: #F2F2F2;
}
#shoplist-top h1 {
  margin: 0;
  font-size: 18px;
  font-family: Lora, serif;
  letter-spacing: 0.236em;
  text-indent: 0.236em;
  color: #8C807A;
  line-height: 1;
  text-align: center;
}
#shoplist-top ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 29px 10px 0;
  padding: 0;
}
#shoplist-top ul li {
  list-style: none;
}
#shoplist-top ul a {
  box-sizing: border-box;
  display: block;
  width: 73px;
  height: 36px;
  border: 1px solid #B4B4B4;
  margin: calc(8px / 2) calc(7px / 2);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  line-height: 34px;
  text-align: center;
  background: #F2F2F2;
  transition: color 300ms ease, background 300ms ease;
}
#shoplist-top ul a:hover {
  color: white;
  background: #B4B4B4;
}

.shoplist-area {
  position: relative;
  margin-bottom: 45px;
}

.shoplist-anchor {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

.shoplist-area-heading {
  margin: 0;
  padding: 5px 0;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-align: center;
  background: #E3E3E3;
}

.shoplist-shop {
  position: relative;
  width: 331px;
  margin: 0 auto;
  border-bottom: 1px solid #6B6B6B;
  padding: 0 0 3px;
}
.shoplist-shop .button-toggle-info {
  box-sizing: border-box;
  position: absolute;
  right: -8px;
  top: 8px;
  width: 33px;
  height: 33px;
  margin: 0;
  padding: 10px;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
}
.shoplist-shop .button-toggle-info:before {
  position: absolute;
  left: 10px;
  top: 16px;
  content: '';
  display: block;
  width: 13px;
  height: 1px;
  background: #6B6B6B;
}
.shoplist-shop .button-toggle-info:after {
  position: absolute;
  left: 16px;
  top: 10px;
  content: '';
  display: block;
  width: 1px;
  height: 13px;
  background: #6B6B6B;
}
.shoplist-shop .button-toggle-info.open:after {
  display: none;
}
.shoplist-shop .button {
  width: 100%;
  padding: 15px 0 13px;
  cursor: pointer;
}
.shoplist-shop .prefecture {
  box-sizing: border-box;
  display: table;
  width: 52px;
  height: 20px;
  margin: 0;
  border: 1px solid #B1B1B1;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  line-height: 18px;
  text-align: center;
}
.shoplist-shop .shopname {
  margin: 7px 0 0;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: calc(24 / 16);
}
.shoplist-shop .techniques {
  display: flex;
  margin: 12px 0 0;
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
.shoplist-shop .techniques li {
  list-style: none;
  width: 122px;
  text-align: center;
  background: #F2F2F2;
}
.shoplist-shop .techniques li + li {
  margin-left: 9px;
}
.shoplist-shop .info {
  height: 0;
  overflow: hidden;
}
.shoplist-shop .info.open {
  height: auto;
}
.shoplist-shop .keeper:before {
  content: '';
  display: block;
  height: 0;
}
.shoplist-shop .zipcode, .shoplist-shop .address, .shoplist-shop .tel {
  margin: 0;
  font-size: 12px;
  line-height: calc(21 / 12);
  letter-spacing: 0.1em;
}
.shoplist-shop .zipcode a, .shoplist-shop .address a, .shoplist-shop .tel a {
  transition: opacity 300ms ease;
}
.shoplist-shop .zipcode a:hover, .shoplist-shop .address a:hover, .shoplist-shop .tel a:hover {
  opacity: 0.6;
}
.shoplist-shop .map {
  margin: 13px 0 0;
  padding-bottom: 3px;
}
.shoplist-shop .map a {
  box-sizing: border-box;
  display: block;
  width: 100%;
  border: 1px solid #B4B4B4;
  padding: 8px 0;
  color: white;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-align: center;
  background: #B4B4B4;
  transition: color 300ms ease, background 300ms ease;
}
.shoplist-shop .map a:hover {
  color: #333333;
  background: white;
}