@charset 'utf-8';

/* nav
------------------------------------------------ */
.snap-nav { position: relative; z-index: 10; }
.snap-nav .trigger { margin: 0 0 30px; height: 40px; border: solid #2F2E2E 1px; text-align: center; font-size: 1.3rem; line-height: 40px; }
.snap-nav .trigger > span { display: block; position: relative; cursor: pointer; }
.snap-nav .trigger > span:before,
.snap-nav .trigger > span:after { content: ''; position: absolute; top: 50%; right: 15px; transition: ease .2s; width: 10px; height: 1px; background: #2F2E2E; }
.snap-nav .trigger > span:after { transform: rotate(90deg); }
.snap-nav .trigger.active > span:after { transform: rotate(0); }
.snap-nav .target { display: none; }
.snap-nav .box { position: relative; }
.snap-nav .box > dt { font-size: 1.3rem; line-height: 1.2; }
.snap-nav .box > dd { position: relative; }
.snap-nav .links { position: relative; }

@media screen and (max-width: 768px) {
  .snap-nav .target { position: absolute; top: 40px; left: 0; padding: 0 15px; width: 100%; background: #fff; border: solid #2F2E2E 1px; border-top: none; }
  .snap-nav .box { position: relative; border-bottom: solid #EFEFEF 1px; }
  .snap-nav .box:last-child { border-bottom: none; }
  .snap-nav .box > dt { position: relative; padding: 18px 8px; font-size: 1.3rem; line-height: 1.2; cursor: pointer; }
  .snap-nav .box > dt:before,
  .snap-nav .box > dt:after { content: ''; position: absolute; top: 50%; right: 8px; transition: ease .2s; width: 10px; height: 1px; background: #2F2E2E; }
  .snap-nav .box > dt:after { transform: rotate(90deg); }
  .snap-nav .box > dt.active:after { transform: rotate(0); }
  .snap-nav .box > dd { display: none; padding-bottom: 24px; }
  .snap-nav .links { margin: 0 16px; }
  .snap-nav .links > li { display: block; font-size: 1.2rem; line-height: 1.2; }
  .snap-nav .links > li + li { margin-top: 10px; }
  .snap-nav .links > li > a { display: block; position: relative; padding: 4px 0 4px 28px; text-decoration: none; }
  .snap-nav .links > li > a:before,
  .snap-nav .links > li > a:after { content: ''; position: absolute; top: 50%; border-radius: 50%; }
  .snap-nav .links > li > a:before { left: 0; margin-top: -10px; width: 20px; height: 20px; background: #fff; border: solid #EFEFEF 1px; }
  .snap-nav .links > li > a:after { display: none; left: 7px; margin-top: -3px; width: 8px; height: 8px; background: #2F2E2E; }
  .snap-nav .links > li > a.is-selected:after { display: block; }
}

@media screen and (min-width: 769px) {
  .snap-nav .trigger { display: none; }
  .snap-nav .target { display: block !important; height: auto !important; }
  .snap-nav .box + .box { margin-top: 50px; }
  .snap-nav .box > dt { padding-bottom: 10px; border-bottom: solid #2F2E2E 1px; font-size: 1.6rem; font-weight: 500; }
  .snap-nav .box > dd { display: block !important; height: auto !important; }
  .snap-nav .links > li { display: block; border-bottom: solid #EFEFEF 1px; font-size: 1.6rem; line-height: 1.2; }
  .snap-nav .links > li > a { display: block; padding: 14px 0 14px 18px; text-decoration: none; }
  .snap-nav .links > li > a.is-selected { background: #eee; }
}

/* result
------------------------------------------------ */
.snap-result { position: relative; }
.snap-result .snap-nav { position: relative; }
.snap-result-content { position: relative; }
.snap-result-tags { display: none; margin: -24px 0 20px -8px; }
.snap-result-tags.show { display: flex; flex-wrap: wrap; }
.snap-result-tags > li { margin: 24px 0 0 8px; text-align: center; font-size: 1.2rem; line-height: 1.2; }
.snap-result-tags > li span { display: inline-block; padding: 8px 20px; background: #fff; border: solid #ddd 1px; border-radius: 18px; text-decoration: none; vertical-align: top; }

@media screen and (max-width: 768px) {
  .snap-result .ac-snap-lists > li { margin: 30px 10px 0 0; width: calc((100% / 2) - (10px - (10px / 2))); }
  .snap-result .ac-snap-lists > li:nth-of-type(-n+2) { margin-top: 0; }
  .snap-result .ac-snap-lists > li:nth-of-type(2n) { margin-right: 0; }
}

@media screen and (min-width: 769px) {
  .snap-result { display: flex; justify-content: space-between; }
  .snap-result .snap-nav { width: 15.8333333333%; }
  .snap-result-content { width: 80.3333333333%; }
  .snap-result .ac-snap-lists > li { margin: 20px 20px 0 0; width: calc((100% / 4) - (20px - (20px / 4))); }
  .snap-result .ac-snap-lists > li:nth-of-type(-n+4) { margin-top: 0; }
  .snap-result .ac-snap-lists > li:nth-of-type(4n) { margin-right: 0; }
  .snap-result-tags { margin: -20px 0 30px -20px; }
  .snap-result-tags > li { margin: 20px 0 0 20px; font-size: 1.5rem; }
  .snap-result-tags > li span { padding: 8px 18px; }
}

/* detail
------------------------------------------------ */
.snap-detail { position: relative; }
.snap-detail-main { position: relative; }
.snap-detail-main > .photo { position: relative; }
.snap-detail-main > .photo img { width: 100%; max-width: inherit; }
.snap-detail-main > .info { position: relative; }
.snap-detail-main .staff { display: flex; }
.snap-detail-main .staff > .photo { position: relative; padding-bottom: 40.5405405405%; width: 40.5405405405%; height: 0; border-radius: 50%; overflow: hidden; }
.snap-detail-main .staff > .photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: inherit; object-fit: cover; font-family: 'object-fit: cover;'; }
.snap-detail-main .staff > .photo + .info { margin-left: 8.10810810811%; width: 51.3513513514%; }
.snap-detail-main .staff > .info { position: relative; }
.snap-detail-main .staff .text { margin: 0; font-size: 1.4rem; line-height: 1.42857142857; }
.snap-detail-main .staff .text + .text { margin-top: 10px; }
.snap-detail-main .staff .text.name,
.snap-detail-main .staff .text.height { font-size: 1.2rem; line-height: 1.41666666667; }
.snap-detail-main .date { margin: 24px 0 0; padding-top: 14px; border-top: solid #eee 1px; font-size: 1.4rem; font-weight: 700; line-height: 1.42857142857; }
.snap-detail-main .explain { margin-top: 14px; padding-bottom: 28px; border-bottom: solid #eee 1px; font-size: 1.2rem; line-height: 1.16666666667; }
.snap-detail-main .tag { display: flex; flex-wrap: wrap; margin: 6px 0 0 -8px; }
.snap-detail-main .tag > li { margin: 24px 0 0 8px; text-align: center; font-size: 1.2rem; line-height: 1.2; }
.snap-detail-main .tag > li a { display: inline-block; padding: 8px 20px; background: #fff; border: solid #ddd 1px; border-radius: 18px; text-decoration: none; vertical-align: top; }
.snap-detail-main .products { margin-top: 50px; }
.snap-detail-main .products .title { margin-bottom: 20px; font-size: 1.4rem; font-weight: 700; line-height: 1.42857142857; }
.snap-detail-main .products ul { display: flex; flex-wrap: wrap; }
.snap-detail-main .products ul > li { position: relative; }
.snap-detail-main .products ul > li > a { display: block; position: relative; width: 100%; text-decoration: none; }
.snap-detail-main .products ul > li .photo { padding: 0; }
.snap-detail-main .products ul > li .photo img { max-width: 100%; }
.snap-detail-main .products ul > li .info { padding-top: 10px; }
.snap-detail-main .products ul > li .name,
.snap-detail-main .products ul > li .price { margin: 0; font-size: 1.2rem; line-height: 1.42857142857; }
.snap-detail-main .products ul > li .price { margin-top: 4px; }
.snap-detail-coordinate { margin-top: 50px; padding-top: 30px; border-top: solid #eee 1px; }
.snap-detail-coordinate .ac-snap-lists > li .staff { margin-top: 10px; }

.snap-detail-main .products ul > li > a { transition: opacity 0.4s ease; }
.snap-detail-main .products ul > li > a:hover { opacity: 0.8; }
.snap-detail-main .tag > li a { transition: background-color 0.4s ease; }
.snap-detail-main .tag > li a:hover { background-color: #ddd; }


@media screen and (max-width: 768px) {
  .snap-detail-main > .info { margin-top: 26px; }
  .snap-detail-main .products ul > li { margin: 30px 10px 0 0; width: calc((100% / 2) - (10px - (10px / 2))); }
  .snap-detail-main .products ul > li:nth-of-type(-n+2) { margin-top: 0; }
  .snap-detail-main .products ul > li:nth-of-type(2n) { margin-right: 0; }
  .snap-detail-coordinate .ac-snap-lists > li { margin: 30px 10px 0 0; width: calc((100% / 2) - (10px - (10px / 2))); }
  .snap-detail-coordinate .ac-snap-lists > li:nth-of-type(-n+2) { margin-top: 0; }
  .snap-detail-coordinate .ac-snap-lists > li:nth-of-type(2n) { margin-right: 0; }
}

@media screen and (min-width: 769px) {
  .snap-detail-main { display: flex; }
  .snap-detail-main > .photo { width: 42.5%; }
  .snap-detail-main > .info { margin-left: 4.16666666667%; width: 53.3333333333%; }
  .snap-detail-main .staff > .photo { padding-bottom: 150px; width: 150px; }
  .snap-detail-main .staff > .photo + .info { margin-left: 30px; width: calc(100% - 180px); }
  .snap-detail-main .staff .text.brand { font-size: 1.6rem; line-height: 1.5; }
  .snap-detail-main .date { margin-top: 18px; padding: 20px 17px 0; font-size: 1.6rem; line-height: 1.5; }
  .snap-detail-main .explain { margin-top: 20px; padding: 0 17px 28px; font-size: 1.4rem; line-height: 1.71428571429; }
  .snap-detail-main .tag { margin: 2px 0 0 -3px; }
  .snap-detail-main .tag > li { margin: 20px 0 0 20px; font-size: 1.5rem; }
  .snap-detail-main .tag > li a { padding: 8px 18px; }
  .snap-detail-main .products { margin-top: 40px; padding: 0 17px; }
  .snap-detail-main .products .title { margin-bottom: 18px; font-size: 1.6rem; line-height: 1.5; }
  .snap-detail-main .products ul > li { margin: 20px 21px 0 0; width: calc((100% / 3) - (21px - (21px / 3))); }
  .snap-detail-main .products ul > li:nth-of-type(-n+3) { margin-top: 0; }
  .snap-detail-main .products ul > li:nth-of-type(3n) { margin-right: 0; }
  .snap-detail-main .products ul > li .info { padding-top: 15px; }
  .snap-detail-main .products ul > li .name,
  .snap-detail-main .products ul > li .price { font-size: 1.4rem; line-height: 1.42857142857; }
  .snap-detail-main .products ul > li .price { margin-top: 2px; }
  .snap-detail-coordinate { margin-top: 80px; padding-top: 50px; }
  .snap-detail-coordinate .ac-snap-lists > li { margin: 20px 20px 0 0; width: calc((100% / 4) - (20px - (20px / 4))); }
  .snap-detail-coordinate .ac-snap-lists > li:nth-of-type(-n+4) { margin-top: 0; }
  .snap-detail-coordinate .ac-snap-lists > li:nth-of-type(4n) { margin-right: 0; }
}