@charset "UTF-8";

/*===============================================================

  root

===============================================================*/

:root {
  --color-primary: 44,51,51;
  --color-primary-light: 211,222,220;
  --color-secondary: 211,93,110;
  --color-text-gray: rgba(var(--color-primary),.65);
  --color-border: 178,178,178;
  --color-gray: 244,245,244;
  --color-black: var(--color-primary);

  --header-height: 70px;
}

@media (max-width: 768px) {
  :root {
     --header-height: 64px;
  }
}


/*===============================================================

  basic DOM

===============================================================*/

html {
  scroll-behavior: initial;
}
body,
html {
  color: rgb(var(--color-black));
  font-size: 14px;
  line-height: 1.75;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  letter-spacing: 0;
}

.font-en,
.url a {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  letter-spacing: .05em;
  font-weight: 200 !important;
  text-decoration: none;
}

a {
  color: rgb(var(--color-black));
  text-decoration: none;
}

.logo-bindgallery {
  fill: rgb(var(--color-primary));
  transition: all .3s ease;
}

.lead,
.strong {
  font-weight: 500;
}

.lead {
  font-size: var(--font-lead);
}

.note {
  font-size: var(--font-caption);
  line-height: 1.48;
  font-weight: 300;
}

p > a,
a.underline {
  text-decoration: underline;
}

a.type-arrow {
  padding-left: 1.5em;
}

a.type-arrow:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%23272937" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 12"><path d="M1.7,0L0.3,1.4L4.9,6l-4.6,4.6L1.7,12l6-6L1.7,0z"/></svg>' );
  width: .35em;
  display: inline-block;
  position: absolute;
  left: 0;
  opacity: .65;
}

.thumbnail > .image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: 0.3s ease;
}

 a:hover .thumbnail > .image {
  transform: translate(-50%, -50%) scale(1.05);
}

iframe {
  width: 100%;
  border: 0;
}

picture > * + p {
  margin-top: 1em;
}

.kakomi {
  padding: var(--margin);
  background-color: rgb(var(--color-primary-light));
}

* + .kakomi {
  margin-top: 1.75em;
}

.anchor {
  text-decoration: none;
}

.anchor:after  {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%232C3333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 9"><path d="M20,4.5l-4.4,4.1l-0.7-0.7L18,5H0V4h18l-3.1-2.9l0.7-0.7L20,4.5z"/></svg>' );
  width: 20px;
  margin-left: .5em;
  display: inline-block;
}

.type-alert,
.swpm-login-widget-action-msg,
.type-alert a:not(.btn),
.swpm-login-widget-action-msg  a:not(.btn) {
  color: rgb(var(--color-secondary));
}


/*===============================================================

  container contents

===============================================================*/

.section {
  border-top: 1px solid rgb(var(--color-border));
}

[class^="section-"].type-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--margin);
}

[class^="section-"].type-split > * {
  margin: 0;
  flex: 1;
}

[class^="section-"].type-split > :first-child {
  flex: unset;
}

.contents-header .section,
.contents-footer .section {
  padding-top: 0;
  padding-bottom: 0;
}

/*  contents-header
---------------------------------------------------------------*/

.contents-header {
  width: 100vw;
  height: var(--header-height);
  position: fixed;
  top: 0;
  z-index: 100;
}
.contents-header .section {
  min-height: var(--header-height);
  background-color: #fff;
  border-top: none;
  border-bottom: 1px solid rgb(var(--color-border));
}

.contents-header .navigation_area {
  display: flex;
  align-items: center;
  gap: clamp( .5em,1.8vw,var(--margin) );
  padding-left: clamp( .5em,1.8vw,var(--margin) );
  padding-right: clamp( .5em,1.8vw,var(--margin) );
  font-size: clamp( 13px,1.6vw,1rem );
}

.contents-header .navigation_area a,
.nav_search-trigger {
  font-weight: 400;
}

.logo-header {
  width: 100%;
  max-width: 54px;
  margin: 0;
  line-height: 0;
  display: block;
}

.logo-header a {
  display: block;
}

@media (min-width: 769px) {
  .contents-header.static {
    position: relative;
  }
  .archive .contents-header.static,
  .detail .contents-header.static,
  .mylist .contents-header.static {
    position: fixed;
  }
}
@media (max-width: 768px) {
  .contents-header .navigation_area {
    padding-top: var(--margin-s);
    padding-bottom: var(--margin-s);
    padding-left: var(--margin);
    padding-right: var(--margin);
    gap: var(--margin-s);
  }
}


/*  contents-main
---------------------------------------------------------------*/

.contents-header + .contents-main,
.mylist .contents-header.static + .contents-main {
  margin-top: var(--header-height);
}

.contents-header + .contents-main .main > :first-child {
  border-top: 0;
}


@media (min-width: 769px) {
  .contents-header.static + .contents-main {
    margin-top: 0;
  }
}


/*  aside
---------------------------------------------------------------*/

.contents-main > .inner {
  padding: 0;
}

.contents-main > .inner > * {
  padding: var(--margin-l);
}

.contents-main > .inner > .main {
  width: 60%;
  margin: 0;
}

.contents-main > .inner > .aside {
  width: 40%;
  min-height: 50vh;
  border-right: 1px solid rgb(var(--color-border));
  background-color: rgb(var(--color-gray));
}

.contents-main > .inner .section {
  padding: 0;
}

.contents-main > .inner > .aside .section {
  border-top: 0;
}

.contents-main > .inner > .aside .section * {
  text-align: right;
}

.nav-aside {
  margin-top: var(--margin);
}

.nav-aside a {
  text-decoration: none;
}

.nav-aside .list {
  width: 9em;
  margin-top: 0;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-s);
}

.nav-aside .list > li {
  width: 100%;
  text-align: left !important;
  position: relative;
}


.nav-aside .list > li:before {
  content: '';
  height: 100%;
  border-left: 2px solid rgb(var(--color-primary));
  display: block;
  position: absolute;
  top: 50%;
  left: calc(var(--margin-xs) * -1);
  transform: translateY(-50%);
  opacity: 0;
  transition: .3s ease;
}

.nav-aside .list > li.current:before,
.nav-aside .list > li:hover:before, 
.nav-aside .list a {
  opacity: 1;
}

.aside-trigger {
  text-align: left !important;
  position: relative;
  cursor: pointer;
  display: none;
}

.aside-trigger:after {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="none" stroke-width="1.5" stroke="%232C3333" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 11"><polyline points="19,1.3 10,9.7 1,1.3"/></svg>' );
  width: .75em;
  line-height: 0;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: .3s ease;
}

.aside-trigger.active:after {
  transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 768px) {
  .contents-main > .inner > * {
    width: 100% !important;
    padding: var(--margin-section) var(--margin);
  }
  .contents-main > .inner > .aside {
    min-height: auto;
    padding: var(--margin-xs) var(--margin);
    border-right: 0;
    border-bottom: 1px solid rgb(var(--color-border));
    order: 1;
  }
  .aside-trigger {
    display: block;
  }
  .nav-aside {
    margin-top: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .nav-aside .list {
    width: 100%;
    height: 0;
    margin: 0;
    overflow: hidden;
    transition: .3s ease;
  }
  .aside-trigger.active + .list {
    height: auto;
    margin-top: 1em;
  }
  .nav-aside .list > li.current {
    margin: 0;
    display: none;
  }
  
}


/*  contents-footer
---------------------------------------------------------------*/
.contents-footer {
  margin-top: -1px;
  color: #fff;
  border-bottom: 1px solid rgb(var(--color-border));
  background-color: rgb(var(--color-primary));
  position: relative;
}

.contents-footer .bindup {
  padding-top: var(--margin-section);
  padding-bottom: var(--margin-section);
}

.contents-footer .bindup [class^="section-"] > * {
  text-align: center;
}

.contents-footer .bindup .btn {
  max-width: var(--contents-width-xs);
  width: 80%;
}

.logo-bindup {
  width: 100%;
  max-width: 158px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.logo-bindup svg {
  fill: #fff;
}

.logo-bindup + * {
  margin-top: var(--margin-s);
}

.contents-footer .footer_area {
  padding: 0;
}

.contents-footer .footer_area > .col {
  padding: var(--margin-m);
}

.contents-footer .footer_area > :first-child {
  padding-left: var(--margin);
}

.contents-footer .footer_area > :last-child {
  padding-right: var(--margin);
  border-left: 1px solid rgb(var(--color-border));
}

.logo-footer_area {
  width: 100%;
  max-width: 200px;
  line-height: 1;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: var(--margin-m);
  transform: translateY(-50%);
}

.logo-footer_area a {
  display: inline-block;
}

.logo-footer {
  display: block !important;
}

.logo-footer .logo-bindgallery {
  fill: #fff;
}

.logo-footer_area .prodused {
  text-align: right;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-weight: 200;
}

.logo-footer_area .logo-bindup {
  max-width: 80px;
  margin-left: var(--margin-xxs);
  position: relative;
  bottom: -5px;
}

@media (max-width: 768px) {
  [class^="section-"].type-split {
    display: block;
  }
  .logo-bindup {
    width: 120px;
  }
  .logo-footer_area {
    max-width: none;
    position: static;
    transform: none;
  }
  .logo-footer_area .logo-footer {
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
  }
  .logo-footer_area .prodused {
    margin-top: var(--margin-s);
    text-align: center;
  }
  .contents-footer .footer_area > .col {
    padding-left: var(--margin);
    padding-right: var(--margin);
  }
  .contents-footer .footer_area > :first-child {
    padding-bottom: var(--margin);
  }
  .contents-footer .footer_area > :last-child {
    padding-top: 0;
    border-left: none;
  }
}


/*===============================================================

  global navigation

===============================================================*/

.gnav {
  display: flex;
  gap: 0;
  margin-left: auto;
}
.gnav .gnav-category,
.gnav .gnav-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  margin-top: 0;
}

.gnav a {
  display: block;
}

.gnav .gnav-category .btn {
  background-color: transparent;
  border: none;
}
.gnav .gnav-menu a:not(.btn) {
  color: rgb(var(--color-primary));
  text-decoration: none;
}
.gnav .gnav-category .btn,
.gnav .gnav-menu a:not(.btn) {
  line-height: 70px;
  padding-left: clamp( .5em,.85vw,1em );
  padding-right: clamp( .5em,.85vw,1em );
}

.gnav .gnav-menu .btn_area {
  margin-top: 0;
  margin-left: clamp( .5em,.85vw,1em );
}
.gnav .gnav-menu .btn_area .btn {
  min-width: auto;
  padding: .5em clamp( .5em,1.5vw,1.5em );
}

@media (max-width: 1000px) {
}  

@media (max-width: 768px) {
  .gnav {
    flex-direction: column;
    width: 100vw;
    min-height: 100vh;
    padding: var(--margin-section) var(--margin) var(--margin);
    background-color: rgb(var(--color-primary));
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 100;
    transition: .3s ease;
  }
  .gnav.active {
    left: 0;
  }

  .gnav .gnav-category,
  .gnav .gnav-menu {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .gnav .gnav-category li,
  .gnav .gnav-menu li {
    width: 100%;
  }
  .gnav .gnav-category > li:not(:first-child),
  .gnav .gnav-menu > li:not(.btn_area):not(:last-child) {
    border-top: 1px solid rgb(var(--color-border));
  }
  .gnav .gnav-category .btn,
  .gnav .gnav-menu a:not(.btn) {
    width: 100%;
    padding-top: var(--margin-xs);
    padding-bottom: var(--margin-xs);
    padding-left: 0;
    padding-right: 0;
    color: #fff;
    line-height: 1.75;
    text-align: left;
  }
  .gnav .gnav-menu .btn_area {
    margin-top: 1em;
    margin-left: 0;
  }
  .gnav .gnav-menu .btn_area .btn {
    width: 100%;
    padding: 1em;
  }
}

/* プルダウン（ログインメニュー）
------------------------------------------------------------------ */
.gnav .parent {
  position: static;
}
.gnav .parent .children {
  width: 100vw;
  height: 0;
  margin-top: -1px;
  padding-left: var(--margin);
  padding-right: var(--margin);
  text-align: center;
  border-top: 1px solid rgb(var(--color-border));
  border-bottom: 1px solid rgb(var(--color-border));
  background-color: #fff;
  position: absolute;
  top: 100%;
  left: 0;
  transition: .3s ease;
  overflow: hidden;
  z-index: 1;
  display: flex;
  justify-content: end;
  gap: var(--margin);
  z-index: -1;
}
.gnav .parent .children li a {
  display: block;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  color: rgb(var(--color-primary)) !important;
  font-size: var(--font-s);
  line-height: 1;
}

@media (min-width: 769px) {
  .gnav .parent:hover .children {
    height: auto;
    padding-top: var(--margin-s);
    padding-bottom: var(--margin-s);
  }
}

@media (max-width: 768px) {
  .gnav .parent {
    position: relative;
    cursor: pointer;
  }
  .gnav .parent > :first-child {
    position: relative;
    pointer-events: none;
  }
  .gnav .parent > :first-child::after {
    content: url( 'data:image/svg+xml;utf-8,<svg fill="none" stroke-width="1.5" stroke="%23ffffff" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 11"><polyline points="19,1.3 10,9.7 1,1.3"/></svg>' );
    width: .75em;
    line-height: 0;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transition: 0.3s ease;
  }
  .gnav .parent.active > :first-child::after {
    transform: translateY(-50%) rotate(180deg);
  }
  .gnav .parent .children {
    position: static;
    flex-direction: column;
    gap: 0;
    width: auto;
    height: 0;
    padding-left: var(--margin);
    overflow: hidden;
    background-color: transparent;
    border: none;
    transition: 0.3s ease;
  }
  .gnav .parent.active .children {
    height: auto;
    padding-bottom: 1em;
  }
  .gnav .parent.active .children > li + li {
    margin-top: .5em;
  }
  .gnav .parent .children li a {
    font-weight: 200;
    color: #fff !important;
    text-align: left;
  }
}


/* ハンバーガー
------------------------------------------------------------------ */
.gnav-trigger {
  width: 44px;
  height: 44px;
  margin: 0 -10px 0 0;
  background-color: transparent;
  cursor: pointer;
  z-index: 101;
  display: none;
  position: relative;
}

.gnav-trigger > .label {
  width: 24px;
  height: 2px;
  background-color: rgb(var(--color-primary));
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.gnav-trigger > .label:before,
.gnav-trigger > .label:after {
  content: '';
  width: 100%;
  height: 2px;
  font-size: 0 !important;
  line-height: 0;
  background-color: rgb(var(--color-primary));
  display: block;
  position: absolute;
  left: 0;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.gnav-trigger > .label:before {
  top: -8px;
}
.gnav-trigger > .label:after {
  bottom: -8px;
}

.gnav-trigger.active > .label {
  background-color: transparent !important;
}
.gnav-trigger.active > .label:before,
.gnav-trigger.active > .label:after {
  height: 1px;
  top: 50%;
  left: 50%;
  transform-origin: left top 0;
}
.gnav-trigger.active > .label:before {
  transform: rotate(45deg) translate(-50%, -50%);
}
.gnav-trigger.active > .label:after {
  transform: rotate(-45deg) translate(-50%, -50%);
}
.inversion .gnav-trigger > .label,
.inversion .gnav-trigger > .label:before,
.inversion .gnav-trigger > .label:after,
.gnav-trigger.active > .label:before,
.gnav-trigger.active > .label:after {
  background-color: #fff;
}

@media (max-width: 768px) {
  .gnav-trigger {
    display: block;
  }
}


/* nav_search
------------------------------------------------------------------ */
.nav_search-trigger {
  text-align: center;
  cursor: pointer;
  transition: .3s ease;
}
.nav_search-trigger:hover {
  opacity: .5;
}
.nav_search-trigger .icon-search:before {
  width: 20px;
  margin-right: .5em;
  vertical-align: middle;
  line-height: 0;
  display: inline-block;
}

.nav_search {
  width: 0;
  height: 100vh;
  padding: var(--margin-l) 0;
  color: #fff;
  background-color: rgb(var(--color-primary));
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 102;
}
.nav_search:after {
  content: '';
  width: 100vw;
  height: 100vh;
  background-color: rgb(var(--color-primary));
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: .6;
}

.nav_search-trigger-close {
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: inline-block;
  position: absolute;
  top: var(--margin-s);
  right: var(--margin-s);
  transition: .3s ease;
}
.nav_search-trigger-close:before,
.nav_search-trigger-close:after {
  content: '';
  width: 24px;
  border-top: 1px solid #fff;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: left top 0;
}
.nav_search-trigger-close:before {
  transform: rotate(45deg) translate(-50%, -50%);
}
.nav_search-trigger-close:after {
  transform: rotate(-45deg) translate(-50%, -50%);
}
.nav_search-trigger-close:hover {
  opacity: .5;
}

.nav_search-trigger.active + .nav_search {
  width: 100%;
  max-width: 400px;
  padding: var(--margin-l) var(--margin);
  overflow-x: auto;
  overflow-y: scroll;
  transition: .3s ease;
}
.nav_search-trigger.active + .nav_search:after {
  display: block;
}

.nav_search .list {
  margin: 0 !important;
}
.nav_search .list > li {
  width: 100%;
}
.nav_search .list > li + li {
  margin-top: var(--margin-s);
}
.nav_search .list > :last-child {
  border-bottom: 1px solid rgb(var(--color-border));
}
.nav_search .list .heading + * {
  margin-top: var(--margin-xs);
}

.nav_search .list .topics {
  margin-bottom: var(--margin);
}
.nav_search .list .independent,
.nav_search .list .parent {
  margin-top: 0;
  padding-top: var(--margin-xs);
  padding-bottom: var(--margin-xs);
  border-top: 1px solid rgb(var(--color-border));
  position: relative;
}

.nav_search .list .independent a {
  display: block;
}
.nav_search .list .independent a:after {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="none" stroke-width="1.5" stroke="%23ffffff" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 11"><polyline points="19,1.3 10,9.7 1,1.3"/></svg>' );
  width: .75em;
  line-height: 0;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(-90deg);
  transition: .3s ease;
}

.nav_search .list .parent .heading {
  cursor: pointer;
  transition: .3s ease;
}

.nav_search .list .parent .heading:after {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="none" stroke-width="1.5" stroke="%23ffffff" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 11"><polyline points="19,1.3 10,9.7 1,1.3"/></svg>' );
  width: .75em;
  line-height: 0;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: .3s ease;
}

.nav_search .list .parent.active .heading:after {
  transform: translateY(-50%) rotate(180deg);
}

.nav_search .list .parent .heading:hover,
.nav_search .list .parent:hover .heading:after {
  opacity: .5;
}

.nav_search .list .parent .children {
  height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: .3s ease;
}

.nav_search .list .parent.active .children {
  height: auto;
  margin-top: var(--margin-xs);
  padding-bottom: var(--margin-xs);
}

.nav_search .filter_list .btn {
  color: #fff;
  border: none;
  background-color: rgba(var(--color-gray), .2);
}

.nav_search .topics .filter_list {
  flex-direction: column;
}
.nav_search .topics .filter_list .btn {
  display: block;
  text-align: left !important;
  line-height: 1.4;
}

.nav_search .keyword {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.nav_search .keyword > input {
  width: calc(100% - 40px);
  border: none;
  flex: 1;
}

.nav_search .keyword .icon-search {
  min-width: 40px;
  margin-left: auto;
  padding: 0 .5em;
  border: none;
  background-color: transparent;
  flex-shrink: 0;
}

.nav_search .keyword .icon-search:before {
  width: 20px;
  margin: 0 auto;
  display: block;
}

.nav_search .keyword .icon-search:after {
  content: '';
  height: 90%;
  border-left: 1px solid rgba(var(--color-primary), .2);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .nav_search {
    left: auto;
    right: 0;
  }
  .nav_search-trigger {
    margin-left: auto;
    display: inline-block;
    width: 40% !important;
    font-size: 12px !important;
  }
  .contents-header .nav_search-trigger {
    text-align: right;
  }
  span i.icon-search{
    width: 50%;
  }
}


/*  gnav footer
---------------------------------------------------------------*/
.gnav-footer .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--margin) var(--margin-l);
}
.gnav-footer a {
  color: #fff;
  text-decoration: none;
}

.gnav-footer .list .children {
  margin-top: var(--margin-s);
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-xs);
}
.gnav-footer .list li:not(.sns) .children {
  width: 13em;
}
.gnav-footer .list li:not(.sns) .children > li {
  width: 100%;
  flex-shrink: 0;
}
.gnav-footer .list .children.categories {
  width: calc(18em + var(--margin)) !important;
  gap: var(--margin-xs) var(--margin);
}
.gnav-footer .list .children.categories > li {
  width: auto !important;
  min-width: 9em;
}
.gnav-footer .list .sns .children {
  flex-wrap: nowrap;
}

@media (max-width: 768px) {
  .gnav-footer a {
    display: block;
  }
  .gnav-footer a.btn {
    width: 100%;
  }

  .gnav-footer .list {
    gap: 0;
    display: block;
  }
  .gnav-footer .list > li {
    width: 100%;
  }
  .gnav-footer li + li,
  .gnav-footer .list .children {
    margin-top: 0;
  }
  .gnav-footer .list .children.categories,
  .gnav-footer .list .children.categories > li {
    width: 100% !important;
  }
  .gnav-footer .list .sns {
    border-bottom: none;
  }
  .gnav-footer .list > li > :first-child {
    padding: .6em 0 !important;
    text-align: left;
    color: #fff !important;
    border: none !important;
    display: block;
    cursor: pointer;
  }
  .gnav-footer .list > li {
    border-bottom: 1px solid rgb(var(--color-border));
  }
  .gnav-footer .list > li.parent {
    position: relative;
    cursor: pointer;
  }
  .gnav-footer .list > li.parent > :first-child {
    pointer-events: none;
  }
  .gnav-footer .list > li.parent > :first-child:after {
    content: url( 'data:image/svg+xml;utf-8,<svg fill="none" stroke-width="1.5" stroke="%23ffffff" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 11"><polyline points="19,1.3 10,9.7 1,1.3"/></svg>' );
    width: .75em;
    line-height: 0;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transition: 0.3s ease;
  }
  .gnav-footer .list > li.parent.active > :first-child:after {
    transform: translateY(-50%) rotate(180deg);
  }
  .gnav-footer .parent .children {
    height: 0;
    padding-left: var(--margin);
    overflow: hidden;
    transition: 0.3s ease;
  }
  .gnav-footer .parent.active .children {
    height: auto;
    padding-bottom: 1em;
  }
  .gnav-footer .parent.active .children > li + li {
    margin-top: .5em;
  }
  .gnav-footer .children a {
    font-weight: 200;
  }
}


/*===============================================================

  heading

===============================================================*/

.heading {
  font-weight: 400;
  letter-spacing: .05em;
}

.heading.font-en + .heading {
  margin-top: .5em;
}

.heading + .url {
  margin-top: .5em;
}


/*===============================================================

  btn / btn_area

===============================================================*/

.btn {
  padding: 1em 1.5em;
  font-weight: 400;
  color: #fff;
  text-align: center;
  border-color: rgb(var(--color-primary));
  background-color:  rgb(var(--color-primary));
}

.btn.size-s {
  font-size: var(--font-s);
}

.btn.size-xs {
  font-size: var(--font-xs);
}

.btn.type-primary {
  color: #fff;
  border-color: rgb(var(--color-secondary));
  background-color: rgb(var(--color-secondary));
}

.btn.type-ghost {
  color: rgb(var(--color-primary));
  background-color: #fff;
}

.btn_area {
  text-align: center;
}

* + .btn_area {
  margin-top: var(--margin-m);
}

@media (max-width: 768px) {
  .btn:not(.hold) {
    width: 80%;
  }
  .btn_area {
    text-align: center;
  }
}


/*===============================================================

  contents billboard

===============================================================*/

.contents-billboard {
  margin-top: var(--header-height);
  overflow-x: hidden;
}

.top .contents-billboard .section {
  padding-top: 0;
  padding-bottom: 0;
  border-top: none;
}

/*.contents-billboard .section {
  padding-top: 0;
  padding-bottom: 0;
  border-top: none;
}*/

.contents-billboard .billboard {
  max-width: none;
  height: calc(100vh - var(--header-height));
  padding: 0;
}

.billboard_header {
  padding: var(--margin);
}

.logo-billboard {
  text-align: center;
}

.logo-billboard .logo-bindgallery {
  width: 100%;
  max-width: 320px;
}

.billboard_header .filter_list {
  max-width: var(--contents-width-xs);
  margin-top: var(--margin-m);
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
}

.billboard_header .filter_list .btn {
  padding: 1em 1.5em;
  color: #fff;
  border-color: rgb(var(--color-primary));
  background-color: rgb(var(--color-primary));
}

.billboard_header .nav_search-trigger {
  display: none;
}

@media (max-width: 768px) {
  .billboard_header .filter_list {
    display: none;
  }
  .billboard_header .nav_search-trigger {
    width: 80%;
    margin-top: var(--margin-m);
    margin-left: auto;
    margin-right: auto;
    padding: 1em 1.5em;
    color: rgb(var(--color-primary));
    border-color: #fff;
    border-radius: 4px;
    background-color: #fff;
    display: block;
  }
}



/* billboard slide
------------------------------------------------------------------ */
.billboard_slidearea {
  height: calc(100vh - var(--header-height));
  padding-top: calc((40vh - var(--header-height) )/2);
  padding-bottom: calc((40vh - var(--header-height) )/2);
  background-color: rgb(var(--color-primary));
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(var(--color-primary),1) 50%, rgba(var(--color-primary),1) 100%);
  position: relative;
  overflow: hidden;
}

.billboard_slidearea .billboard_slide {
  position: relative;
  overflow: visible !important;
}

.billboard_slidearea .billboard_slide:before,
.billboard_slidearea .billboard_slide:after {
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  font-size: 12vw;
  font-weight: 300;
  color: #fff;
  line-height: 1;
  text-align: center;
  display: block;
  position: absolute;
  mix-blend-mode: difference;
  z-index: 1;
}

.billboard_slidearea .billboard_slide:before {
  content: 'Made in';
  top: -.6em;
}

.billboard_slidearea .billboard_slide:after {
  content: 'BiNDup';
  bottom: -.6em;
}

.billboard_slide {
  font-size: 0;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}

.billboard_slide.slick-slider {
  overflow: hidden;
}

.billboard_slide figure {
  width: 60vh !important;
  height: 60vh;
  margin-left: 2.5vh;
  margin-right: 2.5vh;
  text-align: center;
  line-height: 0;
  background-color: rgb(var(--color-primary));
  overflow: hidden;
  display: inline-block !important;
  float: none;
}

.billboard_slide figure > img {
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .contents-billboard .billboard,
  .billboard_slidearea {
    height: auto;
  }
  .billboard_header {
    padding-top: var(--margin-section);
    color: #fff;
    background-color: rgb(var(--color-primary));
  }
  .logo-billboard .logo-bindgallery {
    max-width: 200px;
    fill: #fff;
  }
  .billboard_slidearea {
    padding-top: var(--margin);
    padding-bottom: var(--margin-section);
  }
  .billboard_slidearea .billboard_slide:before {
    display: none;
  }
  .billboard_slidearea .billboard_slide:after {
    content: 'Made in BiNDup';
    font-size: 11.5vw;
    bottom: -.6em;
  }
  .billboard_slide figure {
    width: calc(100vw - var(--margin) * 2) !important;
    height: calc(100vw - var(--margin) * 2);
  }
}


/*===============================================================

  site common

===============================================================*/

.url + * {
  margin-top: var(--margin-s);
}

.producer_name {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--margin-xs);
}

.producer_name > * {
  margin-top: 0;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


.profile_area {
  padding-left: var(--margin-section);
  padding-right: var(--margin-section);
}

.profile_area > * {
  padding-top: var(--margin-s);
  padding-bottom: var(--margin-s);
}

.profile_area > :first-child {
  padding-right: var(--margin-section);
}

.profile_area > :last-child {
  padding-left: var(--margin-section);
  border-left: 1px solid rgb(var(--color-border));
}

.profile_area .description {
  margin-top: var(--margin-m);
}
.profile_area .description .greatsite {
  margin-bottom: -1em;
  color: rgb(var(--color-secondary));
  font-weight: 400 !important;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
}
.profile_area .description .greatsite::before {
  content: url( 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 51.55"><g><path d="m39.96,44.87l-6.19-15.31c2.63-3.13,4.22-7.16,4.22-11.56C38,8.07,29.92,0,20,0S2,8.07,2,18c0,4.4,1.59,8.43,4.22,11.56L.04,44.87c-.06.15-.04.32.05.46s.24.22.41.23l8.35.21,6.16,5.65c.09.09.21.13.34.13.04,0,.07,0,.11-.01.16-.04.29-.15.35-.3l6.2-15.36c.49-.05.96-.13,1.44-.22l-2.77,6.85,3.53,8.73c.06.15.19.26.35.3.04,0,.07.01.11.01.12,0,.25-.05.34-.13l6.16-5.65,8.35-.21c.16,0,.32-.09.41-.23s.11-.31.05-.46ZM20,2c8.82,0,16,7.18,16,16s-7.18,16-16,16S4,26.82,4,18,11.18,2,20,2Zm-9.14,39.28c-.06,0-.13-.01-.19-.04-.26-.1-.38-.39-.28-.65l2.46-6.08c.3.13.62.24.93.36l-2.46,6.1c-.08.19-.27.31-.46.31Zm19.17,1.67c-.06.02-.12.04-.19.04-.2,0-.38-.12-.46-.31l-3.15-7.81c.31-.12.63-.23.93-.36l3.15,7.79c.1.26-.02.55-.28.65Z" fill="%23d35d6e"/><path d="m20,29.5c6.34,0,11.5-5.16,11.5-11.5s-5.16-11.5-11.5-11.5c-1.85,0-3.7.45-5.33,1.31-.24.13-.34.43-.21.67.13.25.43.34.67.21,1.49-.78,3.17-1.19,4.87-1.19,5.79,0,10.5,4.71,10.5,10.5s-4.71,10.5-10.5,10.5-10.5-4.71-10.5-10.5c0-1.83.48-3.63,1.38-5.21.14-.24.05-.54-.19-.68-.24-.14-.55-.06-.68.19-.99,1.73-1.52,3.7-1.52,5.71,0,6.34,5.16,11.5,11.5,11.5Z" fill="%23d35d6e"/></g></svg>' );
  display: inline-block;
  width: 40px;
  margin-right: 1em;
  vertical-align: middle;
}
@media (max-width: 1280px) {
  .profile_area {
    padding-left: var(--margin);
    padding-right: var(--margin);
  }
  .profile_area > * {
    padding-top: 0;
    padding-bottom: 0;
  }
  .profile_area > :first-child {
    padding-right: var(--margin);
  }
  .profile_area.gcol > :last-child {
    padding-left: var(--margin);
  }
  
}

@media (max-width: 768px) {
  .avatar {
    width: 80px;
    height: 80px;
  }
  .profile_area > :first-child {
    padding-top: 0;
    padding-right: 0;
  }
  .profile_area > :last-child {
    padding-left: 0 !important;
    padding-bottom: 0;
    border-left: 0;
  }
  .profile_area.gcol > :last-child {
    margin-top: var(--margin-section) !important;
  }
}



/*===============================================================

  monthry greatsite

===============================================================*/

.section.greatsite {
  padding: var(--margin-xs);
  background-color: rgb(var(--color-primary-light));
}

.section.greatsite .greatsite_content {
  padding: 0;
  display: flex;
  position: relative;
}

.section.greatsite .greatsite_content > * {
  min-height: 37.5vw;
}

.section.greatsite .heading.font-en {
  display: flex;
  gap: .5em;
  color: #fff;
}
.section.greatsite .heading.font-en::before {
  content: url( 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 51.55"><g><path d="m39.96,44.87l-6.19-15.31c2.63-3.13,4.22-7.16,4.22-11.56C38,8.07,29.92,0,20,0S2,8.07,2,18c0,4.4,1.59,8.43,4.22,11.56L.04,44.87c-.06.15-.04.32.05.46s.24.22.41.23l8.35.21,6.16,5.65c.09.09.21.13.34.13.04,0,.07,0,.11-.01.16-.04.29-.15.35-.3l6.2-15.36c.49-.05.96-.13,1.44-.22l-2.77,6.85,3.53,8.73c.06.15.19.26.35.3.04,0,.07.01.11.01.12,0,.25-.05.34-.13l6.16-5.65,8.35-.21c.16,0,.32-.09.41-.23s.11-.31.05-.46ZM20,2c8.82,0,16,7.18,16,16s-7.18,16-16,16S4,26.82,4,18,11.18,2,20,2Zm-9.14,39.28c-.06,0-.13-.01-.19-.04-.26-.1-.38-.39-.28-.65l2.46-6.08c.3.13.62.24.93.36l-2.46,6.1c-.08.19-.27.31-.46.31Zm19.17,1.67c-.06.02-.12.04-.19.04-.2,0-.38-.12-.46-.31l-3.15-7.81c.31-.12.63-.23.93-.36l3.15,7.79c.1.26-.02.55-.28.65Z" fill="%23f4f5f4"/><path d="m20,29.5c6.34,0,11.5-5.16,11.5-11.5s-5.16-11.5-11.5-11.5c-1.85,0-3.7.45-5.33,1.31-.24.13-.34.43-.21.67.13.25.43.34.67.21,1.49-.78,3.17-1.19,4.87-1.19,5.79,0,10.5,4.71,10.5,10.5s-4.71,10.5-10.5,10.5-10.5-4.71-10.5-10.5c0-1.83.48-3.63,1.38-5.21.14-.24.05-.54-.19-.68-.24-.14-.55-.06-.68.19-.99,1.73-1.52,3.7-1.52,5.71,0,6.34,5.16,11.5,11.5,11.5Z" fill="%23f4f5f4"/></g></svg>' );
  flex: 0 0 1.2em;
}
.section.greatsite .heading.font-en span {
  word-break: normal;
}


@media (max-width: 768px) {
  .section.greatsite {
    padding: 0 0 var(--margin-xs);
  }
  .section.greatsite .greatsite_content {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .section.greatsite .greatsite_content > * {
    width: 100% !important;
  }
}


/* thumbnail
------------------------------------------------------------------ */
.section.greatsite .greatsite_content [class^="thumbnail_"] {
  flex-shrink: 0;
  overflow: hidden;
}

.section.greatsite .greatsite_content [class^="thumbnail_"] figure {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.section.greatsite .greatsite_content [class^="thumbnail_"] figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.section.greatsite .greatsite_content .thumbnail_area {
  width: 36vw;
}

.section.greatsite .greatsite_content .thumbnail_main {
  width: 100%;
  height: 100%;
}

.section.greatsite .greatsite_content .thumbnail_sub {
  width: 25vw;
  height: 100%;
  display: flex;
  gap: var(--margin-xs);
  flex-wrap: wrap;
  position: absolute;
  top: 0;
  right: 0;
}

.section.greatsite .greatsite_content .thumbnail_sub > figure {
  height: calc(50% / 2 - var(--margin-xs));
  height: 50%;
}

.section.greatsite .greatsite_content .thumbnail_sub > :nth-child(1) {
  width: calc(40% - var(--margin-xs));
}

.section.greatsite .greatsite_content .thumbnail_sub > :nth-child(2) {
  width: 60%;
}

.section.greatsite .greatsite_content .thumbnail_sub > :nth-child(3) {
  width: 100%;
  
}

@media (max-width: 1280px) {
  .section.greatsite .greatsite_content .thumbnail_area {
    min-height: 80vh;
    display: flex;
    gap: var(--margin-xs);
    flex-wrap: wrap;
  }
  .section.greatsite .greatsite_content .thumbnail_main {
    height: 42%;
  }
  .section.greatsite .greatsite_content .thumbnail_sub {
    width: 100%;
    height: 58%;
    position: static;
  }
}

@media (max-width: 768px) {
  .section.greatsite .greatsite_content .thumbnail_area {
    height: 100vw;
    padding: 0 var(--margin-xs);
  }
}


/* details
------------------------------------------------------------------ */

.section.greatsite .greatsite_content .details {
  padding: var(--margin-l) calc(var(--margin-m) + 25vw) var(--margin-l) calc(var(--margin) + 8vw);
  position: relative;
}

.section.greatsite .greatsite_content .details:before {
  content:attr(data-month);
  height: 100%;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-weight: 200;
  font-size: 8vw;
  line-height: 1;
  writing-mode: vertical-rl;
  text-align: center;
  letter-spacing: 0;
  color: rgb(var(--color-gray));
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  opacity: .33;
}


@media (max-width: 1280px) {
  .section.greatsite .greatsite_content .details {
    padding-right: var(--margin);
  }
}

@media (max-width: 768px) {
  .section.greatsite .greatsite_content .details {
    padding: var(--margin-section) var(--margin);
  }
  .section.greatsite .greatsite_content .details .heading.font-en {
    margin-bottom: var(--margin);
    text-align: center;
  }
  .section.greatsite .greatsite_content .details:before {
    height: 1.5em;
    writing-mode: unset;
    position: static;
    opacity: 1;
  }
}


/*===============================================================

  sites / site list / site

===============================================================*/

.section.sites {
  padding: 0;
}

.sites_area {
  padding: 0;
}

.sites_area-header > * {
  text-align: right;
}

.site_list .col {
  padding: var(--margin);
  border-right: 1px solid rgb(var(--color-border));
  border-bottom: 1px solid rgb(var(--color-border));
}

.site_list .site {
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin) 0;
}

.site_list .site > * {
  width: 100%;
}

/*.site_list .site {
  transition: all .3s ease;
}

.site_list .site:hover {
  background-color: rgb(var(--color-gray));
}*/

.site_list a:not(.btn) {
  text-decoration: none;
  display: block;
}

.site_list a:not(.btn):hover {
  opacity: 1;
}

.site .thumbnail + .heading {
  margin-top: var(--margin-s);
}

.site .thumbnail {
  width: 100%;
  padding-top: 125%;
  background-color: rgb(var(--color-primary));
  overflow: hidden;
  position: relative;
  box-shadow: 0px var(--margin-xs) var(--margin-s) 0px rgba(var(--color-primary), .05);
}

.site .thumbnail img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .3s ease;
}

.site_list a:hover .thumbnail img {
  transform: scale(1.01);
}

.site .site-data {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-xs);
  align-items: center;
  justify-content: space-between;
}



.site .icons [class^="icon-"] {
  width: 18px;
  height: 20px;
  background-color: transparent;
}

.site .icons .icon-like:before {
  width: 100%;
}

@media (min-width: 1281px) {
  .site_list > :nth-child(4n) {
    border-right: none;
  }
  .site_list.split-3 > .col {
    border-right: 1px solid rgb(var(--color-border));
  }
  .site_list.split-3 > :nth-child(3n) {
    border-right: none;
  }
}

@media (max-width: 1280px) {
  .site_list > .col {
    width: 33.33% !important;
  }
  .site_list > :nth-child(3n) {
    border-right: none;
  }
  .site_list.split-3 > .col {
    width: 50% !important;
    border-right: 1px solid rgb(var(--color-border));
  }
  .site_list.split-3 > :nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 768px) {
  .site_list.gcol > .col {
    width: 50% !important;
  }
  .site_list > .col {
    border-right: 1px solid rgb(var(--color-border));
  }
  .site_list > :nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 480px) {
  .site_list.gcol > .col {
    width: 100% !important;
    border-right: none !important;
  }
  .sites_area-header > * {
    text-align: left;
  }
  .site .thumbnail {
    padding-top: 75%;
  }
}

/*===============================================================

  detail / site_preview

===============================================================*/


/* site_preview
------------------------------------------------------------------ */

.site_preview_area {
  padding-bottom: var(--margin-section) !important;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(var(--color-primary),1) 50%, rgba(var(--color-primary),1) 100%);
  position: relative;
  z-index: 0;
}

.site_preview_area.greatsite:after {
  content: 'GREATSITE';
  height: 100%;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-weight: 200;
  font-size: 19vh;
  line-height: 1;
  writing-mode: vertical-rl;
  text-align: center;
  letter-spacing: 0;
  color: rgb(var(--color-gray));
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  opacity: .15;
  z-index: -1;
}

.site_preview_area .site_preview {
  width: 100%;
  max-width: var(--contents-width);
  margin-left: auto;
  margin-right: auto;
}

.site_preview_area .site_preview_frame {
  height: 80vh;
  min-height: 720px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

.site_preview_area .site_preview_frame.thumbnail img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.site_preview_area > [class^="section-"] {
  padding-left: var(--margin);
  padding-right: var(--margin);
}

.site_preview_area .site_preview iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.site_preview_area .site_preview.type-mobile .site_preview_frame {
  max-width: 375px;
}

.site_preview_area .site_preview_switch {
  margin-top: var(--margin-s);
  display: flex;
  justify-content: center;
}

.site_preview_switch > :first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.site_preview_switch > :last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.site_preview_switch .label {
  width: 100px;
  padding-top: var(--margin-xxs);
  padding-bottom: var(--margin-xxs);
  background-color: rgb(var(--color-primary));
  text-align: center;
  line-height: 0;
  display: inline-block;
  cursor: pointer;
  transition: all .3s ease;
}

.site_preview_switch .label.active {
  background-color: #fff;
}

.site_preview_switch .label:hover {
  opacity: .5;
}

.site_preview_switch .label [class^="icon-"] {
  display: inline-block;
}

.site_preview_switch .label [class^="icon-"]:before {
  width: 24px;
  line-height: 0;
  display: inline-block;
}

.site_preview_switch .label .icon-mobile:before {
  width: 14px;
}

@media (max-width: 768px) {
  .site_preview_area.greatsite:after {
    width: 100%;
    height: auto;
    writing-mode: unset;
    text-align: center;
    color: #fff;
    font-size: 18vw;
    top: auto;
    bottom: 0;
    z-index: 0;
    mix-blend-mode: difference;
    opacity: 1;
  }
  .site_preview_area .site_preview_frame {
    height: 75vh;
    min-height: auto;
    margin-top: var(--margin) !important;
  }
  .site_preview_area .site_preview_switch {
    display: none;
  }
}


/* detail
------------------------------------------------------------------ */

.detail .section.sites {
  border-top: none;
}

.detail .section.sites .section-header + [class^="section-"] {
  margin-top: var(--margin-s);
} 

.detail .section.sites .sites_area {
  border-top: 1px solid rgb(var(--color-border));
}

.detail .description .icons {
  margin-top: var(--margin-m);
}

.detail .information .information-block + .information-block {
  margin-top: var(--margin-s);
}

.detail .information .information-block {
  display: flex;
  gap: var(--margin-s);
}

.detail .information .information-block > .heading {
  width: 6.5em;
  flex-shrink: 0;
}

.detail .profile_area .information .avatar {
  width: 80px;
  height: 80px;
}

/*.detail .information .information-block .filter_list .btn {
  border-color: rgb(var(--color-primary));
  background-color: transparent;
}
*/


.detail .information .information-block .filter_list .btn.greatsite {
  color: #fff;
  background-color: rgb(var(--color-primary));
}



@media (max-width: 768px) {
  .detail .information .information-block + .information-block {
    margin-top: var(--margin);
  }
}


/*===============================================================

  topics

===============================================================*/


.section.topics {
  margin-bottom: -1px;
  padding: 0;
}

.topics_area {
  padding: 0;
}

.topics_area .topics_list .topic {
  border-bottom: 1px solid rgb(var(--color-border));
}

.topics_area .topics_list > :nth-child(odd) {
  border-right: 1px solid rgb(var(--color-border));
}

.topics_area a {
  height: 40vh;
  min-height: 20em;
  padding: var(--margin-m);
  color: #fff;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.topics_area a:hover {
  opacity: 1;
}

.topics_area .topic_bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: .3s ease;
}

.topics_area a:hover .topic_bg {
  transform: scale(1.025);
}

.topics_area .anchor {
  position: absolute;
  bottom: var(--margin-m);
  right: var(--margin-m);
}

.topics_area .anchor::after {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 9"><path d="M20,4.5l-4.4,4.1l-0.7-0.7L18,5H0V4h18l-3.1-2.9l0.7-0.7L20,4.5z"/></svg>' );
}

.topics_area a:after {
  content: '';
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, rgba(var(--color-black),1) 0%, rgba(var(--color-black),1) 20%, rgba(var(--color-black),0) 100%);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: .6;
  transition: .3s ease;
}

.topics_area a:hover:after {
  width: 100%;
}

@media (max-width: 768px) {
  .topics_area .topics_list .topic {
    border-right: none !important;
  }
  .topics_area a {
    height: 25vh;
  }
}


/*===============================================================

  entry

===============================================================*/

.section.entry {
  padding-top: var(--margin-l);
  padding-bottom: var(--margin-l);
  color: rgb(var(--color-primary));
  background-color: rgb(var(--color-gray));
}


.section.entry .logo-entry {
  width: 100%;
  max-width: 240px;
  display: inline-block;
}

.entry_step {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--margin-m);
}

.entry_step .step {
  width: calc( (100% - var(--margin-m) * 4 ) / 5);
  position: relative;
}

.entry_step .step-image {
  width: 100%;
  border-radius: 50%;
  border: 1px solid rgb(var(--color-border));
  background-color: #fff;
  position: relative;
}

.entry_step .step-image img {
  object-fit: cover;
}

.entry_step .step-image:after {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="none" stroke-width="2" stroke="%232C3333" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 20"><polyline class="st0" points="1.3,1 9.7,10 1.3,19 "/></svg>' );
  width: var(--font-xs);
  line-height: 0;
  display: block;
  position: absolute;
  top: 50%;
  left: calc(100% + var(--margin-m)/2 - var(--font-xs)/2 );
  transform: translateY(-50%);
}

.entry_step >:last-child .step-image:after {
  display: none;
}

.entry_step .heading {
  max-width: 14em;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  position: relative;
  /* left: 50%; */
  /* transform: translateX(-50%); */
}
.entry_step .heading p {
  text-align: inherit;
}
.entry_step :where(.heading) * + p {
  margin-top: .5em;
}
.entry_step .heading .anchor {
  display: inline-block;
  padding: 0 .5em;
  background-color: #fff;
  border: 1px solid rgb(var(--color-border));
}

.entry_step .note {
  margin-top: 1em;
  text-align: left;
}

@media (max-width: 768px) {
  .section.entry .logo-entry {
    max-width: 160px;
  }
  .entry_step {
    gap: var(--margin);
  }
  .entry_step .step {
    width: 100%;
    display: flex;
    gap: var(--margin);
    align-items: center;
    justify-content: flex-start;
  }
  .entry_step .step:after {
    content: url( 'data:image/svg+xml;utf-8,<svg fill="none" stroke-width="2" stroke="%232C3333" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 11"><polyline points="19,1.3 10,9.7 1,1.3"/></svg>' );
    width: 1rem;
    line-height: 0;
    display: block;
    position: absolute;
    top: calc(100% + var(--margin)/2 - 1rem/2 );
    left: 50%;
    transform: translateX(-50%);
  }
  .entry_step >:last-child:after {
    display: none;
  }
  .entry_step .step-image {
    width: 30%;
  }
  .entry_step .heading {
    width: auto;
    margin-top: 0;
    text-align: left;
    position: static;
    transform: none;
    flex: 1;
  }
  .entry_step .step-image:after {
    display: none;
  }
}


/*===============================================================

  pagination

===============================================================*/

.nav-pagination {
  margin-top: -1px !important;
  padding: 0;
  border-top: 1px solid rgb(var(--color-border));
  border-bottom: 1px solid rgb(var(--color-border));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.nav-pagination > * {
  margin: 0;
  text-align: center;
}

.nav-pagination .btn {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent !important;
  display: block;
  position: relative;
}

.nav-pagination .btn.type-arrow {
  width: var(--margin-section);
  min-width: auto;
  height: var(--margin-section);
  flex-shrink: 0;
}

.nav-pagination .type-arrow:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="none" stroke-width="2" stroke="%232C3333" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 20"><polyline class="st0" points="1.3,1 9.7,10 1.3,19 "/></svg>' );
  width: var(--font-xs);
  line-height: 0;
  display: inline;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 1;
}

.nav-pagination .btn.type-arrow:after {
  content: '';
  height: 100%;
  border-left: 1px solid rgb(var(--color-border));
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  position: relative;
}

.nav-pagination .btn.view_all {
  width: 100%;
  padding: 0 var(--margin-section);
  color: rgb(var(--color-primary));
  line-height: var(--margin-section);
  position: relative;
}

.nav-pagination .btn.view_all .btn.type-arrow {
  margin: 0;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.nav-pagination .btn.view_all .btn.type-arrow:after {
  display: none;
}

.nav-pagination .type-arrow.next {
  margin-left: auto;
}

.nav-pagination .type-arrow.next:after {
  left: 0;
}

.nav-pagination .type-arrow.prev {
  margin-right: auto;
}

.nav-pagination .type-arrow.prev:after {
  right: 0;
}

.nav-pagination .type-arrow.prev:before {
  transform: translate(-50%,-50%) rotate(180deg);
}

.nav-pagination .type-arrow.disabled {
  pointer-events: none;
}

.nav-pagination .type-arrow.disabled:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="none" stroke-width="2" stroke="%23B2B2B2" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 20"><polyline class="st0" points="1.3,1 9.7,10 1.3,19 "/></svg>' );
}

.nav-pagination .pagination,
.nav-pagination .pagination > .label {
  width: 100%;
  height: 100%;
  border: none;
  flex: 1;
}

.nav-pagination .pagination > .label {
  padding: 0;
  font-weight: 400 !important;
  line-height: var(--margin-section);
}

.nav-pagination .pagination > .label:after {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="none" stroke-width="2.5" stroke="%232C3333" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 11"><polyline points="19,1.3 10,9.7 1,1.3"/></svg>' );
  width: .75em;
  margin-left: var(--margin-s);
  display: inline-block;
  position: relative;
  top: -.1em;
}

@media (max-width: 768px) {
  .nav-pagination .type-arrow:before {
    width: .5em;
  }
}


/*===============================================================

  filter list

===============================================================*/

.filter_list {
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-xs);
}

.filter_list .btn {
  width: auto;
  min-width: auto;
  padding: .5em 1em;
  color: rgb(var(--color-black));
  font-weight: 300;
  border-color: rgb(var(--color-gray));
  background-color: rgb(var(--color-gray));
}
@media (max-width: 768px) {
  .filter_list .btn {
    padding: .5em;
  }
}
.filter_list > li {
  order: 1;
}

.filter_list [data-slug="greatsite"] {
  order: 0;
}

.billboard_header .filter_list [data-slug="greatsite"],
.billboard_header .filter_list [data-slug="all"],
.nav_search .filter_list [data-slug="greatsite"],
.nav_search .filter_list [data-slug="all"] {
  order: 2;
}


/* category
------------------------------------------------------------------ */

.filter_list.category .btn {
  font-size: var(--font-s);
  border: none;
  border-radius: 0;
}

.filter_list.category .btn.greatsite {
  color: #fff;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-weight: 200;
  letter-spacing: 1px;
  background-color: rgb(var(--color-primary));
}


@media (max-width: 768px) {
  .filter_list {
    gap: var(--margin-xxs);
  }
  .filter_list.category .btn {
    font-size: var(--font-xs);
  }
}



/*===============================================================

  icons

===============================================================*/

.icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-s);
}

.icons li {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: var(--font-s);
  display: flex;
  flex-wrap: wrap;
  column-gap: .5em;
  align-items: center;
}

.icons [class^="icon-"] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgb(var(--color-gray));
  display: block;
  position: relative;
  cursor: pointer;
  transition: .3s ease;
}

.icons [class^="icon-"]:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: .3s ease;
}

[class^="icon-"]:before {
  letter-spacing: 0;
  line-height: 0;
  display: inline-block;
}


/* like
------------------------------------------------------------------ */

.icon-like {
  cursor: auto !important;
}

.icon-like.set_like_history {
  cursor: pointer !important;
}

.icon-like:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%232C3333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10,3.7C7.4-0.8,0,0.5,0,6.2c0,3.7,4.3,7.7,9.3,12.5c0.4,0.4,1,0.4,1.4,0c5-4.8,9.3-8.8,9.3-12.5C20,0.5,12.6-0.8,10,3.7"/></svg>' );
  width: 45%;
}

.icon-like.set_like_history.checked:before,
.icon-like.set_like_history:hover:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%23D35D6E" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10,3.7C7.4-0.8,0,0.5,0,6.2c0,3.7,4.3,7.7,9.3,12.5c0.4,0.4,1,0.4,1.4,0c5-4.8,9.3-8.8,9.3-12.5C20,0.5,12.6-0.8,10,3.7"/></svg>' );
}
  
@media (max-width: 768px) {
  .icons li {
    font-size: var(--font-xs);
  }
}

/* sns
------------------------------------------------------------------ */

.icon-twitter:before {
  content: url( 'data:image/svg+xml;utf-8,<svg viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg"><g><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="%23000"/></g></svg>' );
  width: 50%;
}

.icon-facebook:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%232C3333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 20"><path d="M2.5,6.7H0V10h2.5v10h4.2V10h3L10,6.7H6.7V5.3c0-0.8,0.2-1.1,0.9-1.1H10V0H6.8c-3,0-4.3,1.3-4.3,3.8V6.7z"/></svg>' );
  width: 25%;
}

.icon-instagram:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%232C3333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10,1.8c2.7,0,3,0,4,0.1C16.8,2,18,3.3,18.1,6c0,1.1,0.1,1.4,0.1,4s0,3-0.1,4c-0.1,2.7-1.4,4-4.1,4.1c-1.1,0-1.4,0.1-4,0.1s-3,0-4-0.1C3.2,18,2,16.7,1.9,14c0-1.1-0.1-1.4-0.1-4s0-3,0.1-4C2,3.3,3.2,2,6,1.9C7,1.8,7.3,1.8,10,1.8M10,0C7.3,0,6.9,0,5.9,0.1C2.2,0.2,0.2,2.2,0.1,5.9C0,6.9,0,7.3,0,10s0,3.1,0.1,4.1c0.2,3.6,2.2,5.7,5.8,5.8C6.9,20,7.3,20,10,20s3.1,0,4.1-0.1c3.6-0.2,5.7-2.2,5.8-5.8c0-1.1,0.1-1.4,0.1-4.1s0-3.1-0.1-4.1c-0.2-3.6-2.2-5.7-5.8-5.8C13.1,0,12.7,0,10,0 M10,4.9c-2.8,0-5.1,2.3-5.1,5.1s2.3,5.1,5.1,5.1s5.1-2.3,5.1-5.1S12.8,4.9,10,4.9L10,4.9 M10,13.3c-1.8,0-3.3-1.5-3.3-3.3S8.2,6.7,10,6.7c1.8,0,3.3,1.5,3.3,3.3S11.8,13.3,10,13.3C10,13.3,10,13.3,10,13.3 M15.3,3.5c-0.7,0-1.2,0.5-1.2,1.2c0,0.7,0.5,1.2,1.2,1.2c0.7,0,1.2-0.5,1.2-1.2S16,3.5,15.3,3.5"/></svg>' );
  width: 50%;
}

.icon-youtube:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%232C3333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 15"><path d="M16.3,0.2c-3-0.2-9.7-0.2-12.7,0C0.4,0.4,0,2.3,0,7.5c0,5.2,0.4,7.1,3.7,7.3c3,0.2,9.7,0.2,12.7,0c3.2-0.2,3.6-2.2,3.7-7.3C20,2.3,19.6,0.4,16.3,0.2 M7.5,10.8V4.2l6.7,3.3L7.5,10.8z"/></svg>' );
  width: 50%;
}

.icon-line:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%232C3333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 32"><path d="M33.8,13.6C33.8,6.1,26.3,0,17,0S0.2,6.1,0.2,13.6c0,6.7,5.9,12.4,14,13.4c0.6,0.1,1.3,0.3,1.5,0.8c0.2,0.4,0.1,1.1,0,1.6c0,0-0.2,1.2-0.2,1.5c-0.1,0.4-0.3,1.7,1.5,0.9C18.7,31,26.5,26,30.1,22l0,0C32.6,19.3,33.8,16.7,33.8,13.6L33.8,13.6z M10.4,18.1H7.1c-0.4,0-0.9-0.4-0.9-0.9v-6.7c0-0.4,0.4-0.9,0.9-0.9c0.4,0,0.9,0.4,0.9,0.9v5.8h2.5c0.4,0,0.9,0.4,0.9,0.9C11.3,17.7,11,18.1,10.4,18.1z M13.9,17.2c0,0.4-0.4,0.9-0.9,0.9s-0.9-0.4-0.9-0.9v-6.7c0-0.4,0.4-0.9,0.9-0.9s0.9,0.4,0.9,0.9C13.9,10.5,13.9,17.2,13.9,17.2z M21.9,17.2c0,0.3-0.2,0.7-0.6,0.8c-0.1,0-0.2,0-0.3,0c-0.2,0-0.6-0.1-0.7-0.3L16.9,13v4.1c0,0.4-0.4,0.9-0.9,0.9s-0.9-0.4-0.9-0.9v-6.7c0-0.3,0.2-0.7,0.6-0.8c0.1,0,0.2,0,0.3,0c0.2,0,0.6,0.1,0.7,0.3l3.5,4.7v-4.1c0-0.4,0.4-0.9,0.9-0.9s0.9,0.4,0.9,0.9C21.9,10.5,21.9,17.2,21.9,17.2z M27.3,13c0.4,0,0.9,0.4,0.9,0.9s-0.4,0.9-0.9,0.9h-2.5v1.6h2.5c0.4,0,0.9,0.4,0.9,0.9s-0.4,0.9-0.9,0.9h-3.4c-0.4,0-0.9-0.4-0.9-0.9v-3.4l0,0l0,0v-3.4c0-0.4,0.4-0.9,0.9-0.9h3.4c0.4,0,0.9,0.4,0.9,0.9s-0.4,0.9-0.9,0.9h-2.5V13L27.3,13L27.3,13z"/></svg>' );
  width: 50%;
}


/* sytem
------------------------------------------------------------------ */

.icon-search:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%232C3333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M19.9,17.4l-5.3-5.3c2.3-3.7,1.2-8.6-2.5-10.9S3.6,0,1.3,3.7s-1.2,8.6,2.5,10.9c2.5,1.6,5.7,1.6,8.3,0.1l5.3,5.3L19.9,17.4 M3,7.9c0-2.7,2.2-5,4.9-5c2.7,0,5,2.2,5,4.9c0,2.7-2.2,5-4.9,5c0,0,0,0,0,0C5.2,12.8,3,10.6,3,7.9"/></svg>' );
}

.icon-pc:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M18.3,0H1.7C0.7,0,0,0.7,0,1.7v12.5c0,0.9,0.7,1.7,1.7,1.7h16.7c0.9,0,1.7-0.7,1.7-1.7V1.7C20,0.7,19.3,0,18.3,0zM18.3,11.7H1.7v-10h16.7V11.7z M15,20H5c0.8-0.3,2.2-1.1,2.2-2.5h5.7C12.8,18.8,14.3,19.7,15,20z"/></svg>' );
}

.active .icon-pc:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%232C3333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M18.3,0H1.7C0.7,0,0,0.7,0,1.7v12.5c0,0.9,0.7,1.7,1.7,1.7h16.7c0.9,0,1.7-0.7,1.7-1.7V1.7C20,0.7,19.3,0,18.3,0zM18.3,11.7H1.7v-10h16.7V11.7z M15,20H5c0.8-0.3,2.2-1.1,2.2-2.5h5.7C12.8,18.8,14.3,19.7,15,20z"/></svg>' );
}

.icon-mobile:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 20"><path class="st0" d="M10.2,0H1.8C0.9,0,0.2,0.7,0.2,1.7v16.7c0,0.9,0.7,1.7,1.7,1.7h8.3c0.9,0,1.7-0.7,1.7-1.7V1.7C11.8,0.7,11.1,0,10.2,0z M4.8,1.7h2.5c0.2,0,0.4,0.2,0.4,0.4c0,0.2-0.2,0.4-0.4,0.4H4.8c-0.2,0-0.4-0.2-0.4-0.4C4.3,1.9,4.5,1.7,4.8,1.7z M6,18.3c-0.5,0-0.8-0.4-0.8-0.8c0-0.5,0.4-0.8,0.8-0.8c0.5,0,0.8,0.4,0.8,0.8C6.8,18,6.5,18.3,6,18.3zM10.2,15.8H1.8V4.1h8.3V15.8z"/></svg>' );
}

.active .icon-mobile:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%232C3333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 20"><path class="st0" d="M10.2,0H1.8C0.9,0,0.2,0.7,0.2,1.7v16.7c0,0.9,0.7,1.7,1.7,1.7h8.3c0.9,0,1.7-0.7,1.7-1.7V1.7C11.8,0.7,11.1,0,10.2,0z M4.8,1.7h2.5c0.2,0,0.4,0.2,0.4,0.4c0,0.2-0.2,0.4-0.4,0.4H4.8c-0.2,0-0.4-0.2-0.4-0.4C4.3,1.9,4.5,1.7,4.8,1.7z M6,18.3c-0.5,0-0.8-0.4-0.8-0.8c0-0.5,0.4-0.8,0.8-0.8c0.5,0,0.8,0.4,0.8,0.8C6.8,18,6.5,18.3,6,18.3zM10.2,15.8H1.8V4.1h8.3V15.8z"/></svg>' );
}

.icon-anchor {
  margin-left: .5em;
}

.icon-anchor:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%232C3333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 9"><path d="M20,4.5l-4.4,4.1l-0.7-0.7L18,5H0V4h18l-3.1-2.9l0.7-0.7L20,4.5z"/></svg>' );
  width: 20px;
}


/*===============================================================

  form

===============================================================*/

.form.type-label {
  padding: 0;
  font-weight: 400;
}


.form.type-checkbox > .label:before,
.form.type-input,
.form.type-radio > .label:before,
.form.type-select > .label,
.form.type-textarea,
.form.type-pre {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  border-color: rgb(var(--color-border));
  border-radius: 0;
  line-height: 1.5;
}

.form.type-pre {
  background-color: rgb(var(--color-gray));
}

.form.type-pre.wrap {
  white-space: nowrap;
  overflow: hidden;
}

.form.type-checkbox > :checked + .label:before,
.form.type-radio > :checked + .label:before {
  background-color: rgb(var(--color-primary));
}

.form.type-label.required:after {
  content: '*';
  color: rgb(var(--color-secondary));
}

.form-group > * {
  margin-top: var(--margin-xs);
}

.form-group > :first-child {
  margin-top: 0;
}

.form-group.align-center {
  justify-content: center;
}

.btn > .form.type-file {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
}

.file_val {
  width: 100%;
  font-size: var(--font-xs);
  text-align: left;
  white-space: nowrap;
  position: absolute;
  top: calc(100% + 1em);
  left: 0;
  opacity: .5;
}

.form-group > .form.type-label,
.form-group .note {
  width: 100%;
}

.form-group.type-avatar .form-alert {
  width: auto;
  display: flex;
  align-items: center;
  transition: all .3s ease;
  cursor: pointer;
}

.form-group.type-avatar .form-alert .btn_area {
  margin-top: 0;
  margin-left: var(--margin-s);
}

.form-group.type-list .form-block {
  width: 100%;
  display: flex;
  gap: var(--margin-xs);
  align-items: center;
}

.form-group.type-list .form-block > .form.type-label {
  width: 5em;
  font-weight: 300;
  flex-shrink: 0;
}

.form-group.type-list .form-block + .form-block {
  margin-top: var(--margin-xs);
}

.form-group .filter_list .form.type-radio .label,
.form-group .filter_list .form.type-checkbox .label {
  padding: .5em 1em;
  line-height: 1;
}

.form-group .filter_list .form.type-radio .label:before,
.form-group .filter_list .form.type-checkbox .label:before {
  display: none;
}

.form-group .filter_list .form.type-radio .label:hover,
.form-group .filter_list .form.type-checkbox .label:hover,
.form-group .filter_list .form.type-radio :checked + .label,
.form-group .filter_list .form.type-checkbox :checked + .label {
  color: #fff;
  border-color: rgb(var(--color-primary));
  background-color: rgb(var(--color-primary));
  opacity: 1;
}

.form.type-submit {
  cursor: pointer;
  transition: all .3s ease;
}

.form.type-submit:hover {
  opacity: .5;
}

.form-group .thumbnail {
  padding-bottom: 66%;
  border: 1px solid rgb(var(--color-border));
  position: relative;
  overflow: hidden;
}

.form-group .thumbnail > img {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.form-group.alert_area {
  padding: var(--margin);
  background-color: rgb(var(--color-gray));
}

.form-group.alert_area .type-alert {
  color: rgb(var(--color-secondary));
}

.form-group.alert_area .list > li + li {
  margin-top: var(--margin-xs);
}

.form-group.alert_area .list.type-alert li:before {
 background-color: rgb(var(--color-secondary));
}

.form-group label img {
  cursor: pointer;
}

p + .form-group.alert_area {
  margin-top: var(--margin);
}

@media (max-width: 768px) {
  .form.type-checkbox > .label:before,
  .form.type-input,
  .form.type-radio > .label:before,
  .form.type-select > .label,
  .form.type-textarea,
  .form.type-pre {
    font-size: 16px;
  }
}

/*===============================================================

  breadcrumbs

===============================================================*/

.breadcrumbs_area {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: 0;
}

.breadcrumbs_area.cover {
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.breadcrumbs_area.cover {
  border-top: 0;
}

.breadcrumbs_area.cover + .section {
  padding-top: calc(var(--margin-section) + var(--margin-s)) !important;
  border-top: 0;
}

.nav-breadcrumbs {
  padding-top: var(--margin-s);
  padding-bottom: var(--margin-s);
  overflow-x: hidden;
  white-space: nowrap;
}

.nav-breadcrumbs > * {
  max-width: none !important;
}

.breadcrumbs {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  letter-spacing: .05em;
  font-weight: 200;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-s) var(--margin-xs);
}

.breadcrumbs > :last-child {
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bolder;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  /*overflow: hidden;*/
}


.breadcrumbs li:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%232C3333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 12"><path d="M1.7,0L0.3,1.4L4.9,6l-4.6,4.6L1.7,12l6-6L1.7,0z"/></svg>' );
  width: .3em;
  margin-right: var(--margin-xs);
  display: inline-block;
  opacity: .76;
  position: relative;
  top: -.15em;
}

.breadcrumbs > :first-child:before,
.breadcrumbs > :last-child:before {
  display: none;
}

.breadcrumbs a {
  text-decoration: none;
}

.detail .breadcrumbs li,
.detail .nav-breadcrumbs a {
  color: #fff;
}

.detail .breadcrumbs li:before {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 12"><path d="M1.7,0L0.3,1.4L4.9,6l-4.6,4.6L1.7,12l6-6L1.7,0z"/></svg>' );
}

@media (max-width: 768px) {
  .breadcrumbs_area.cover + .section {
    padding-top: calc(var(--margin-section) + var(--margin-l)) !important;
  }
  .nav-breadcrumbs {
    padding-top: var(--margin);
    padding-bottom: var(--margin);
  }
}


/*===============================================================

  producer

===============================================================*/

.producer .profile_area {
  align-items: center;
}

.producer .profile_area .producer_name {
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .producer .profile_area .producer_name {
    justify-content: center;
  }
}


/*===============================================================

  mylist

===============================================================*/

.mylist.archive .sites_area,
.mylist.archive .nav-pagination {
  margin-left: calc(var(--margin-l) * -1);
  margin-right: calc(var(--margin-l) * -1);
  margin-bottom: calc(var(--margin-l) * -1) !important;
  border-top: 1px solid rgb(var(--color-border));
}

.mylist.archive .nav-pagination {
  margin-top: calc(var(--margin-l) - 1px) !important;
}

/*.mylist.sites .site_list .site.draft {
  background-color: rgb(var(--color-gray));
}

.mylist.sites .site_list .site.draft .filter_list .btn {
  background-color: #fff;
}*/


.mylist.sites .site_list .site:before,
.mylist.edit .site_name:before {
  min-width: 4em;
  padding: .5em;
  line-height: 1;
  color: #fff;
  text-align: center;
  font-size: var(--font-s);
  background-color: rgb(var(--color-primary));
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.mylist.edit .site_name:before {
  margin-right: var(--margin-xs);
  position: static;
}

.mylist.sites .site_list .site.publish:before,
.mylist.edit .publish .site_name:before {
  content: '掲載中';
  background-color: rgb(var(--color-secondary));
}

.mylist.sites .site_list .site.draft:before,
.mylist.edit .draft .site_name:before {
  content: '掲載準備中';
}

.mylist.sites .site_list .site.rejected:before,
.mylist.edit .rejected .site_name:before {
  content: '掲載保留';
}

.mylist.sites .site_list .site.rejected:after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(var(--color-primary), .25);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  transition: all .3s ease;
}

.mylist.sites .site_list .site:hover:after {
  opacity: 0;
}



@media (max-width: 768px) {
  .mylist .form-group + * {
    margin-top: var(--margin-m);
  }
  .mylist.archive .sites_area,
  .mylist.archive .nav-pagination {
    margin-left: calc(var(--margin) * -1);
    margin-right: calc(var(--margin) * -1);
    margin-bottom: calc(var(--margin-section) * -1) !important;
  }
  .mylist.archive .nav-pagination {
    margin-top: calc(var(--margin-section) - 1px) !important;
  }
}

/*===============================================================

  modal

===============================================================*/

.modal {
  width: 100%;
  max-width: var(--contents-width-xs);
  margin-left: var(--margin);
  margin-right: var(--margin);
  padding: var(--margin);
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  display: none;
}

.modal.active {
  display: block;
}

.modal-trigger,
.modal-close {
  transition: all .3s ease;
  cursor: pointer;
}

.modal-trigger:hover,
.modal-close:hover {
  opacity: .5;
}

.modal-bg {
  width: 100vw;
  height: 100vh;
  background-color: rgb(var(--color-primary));
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: .6;
}

.modal .btn_area {
  margin-top: var(--margin);
}

@media (max-width: 768px) {
  .modal {
    width: calc(100% - var(--margin)*2);
    margin-left: 0;
    margin-right: 0;
    padding: var(--margin-m);
  }
}