@charset "utf-8";
textarea {
  font-size: 13px;
}
.pc {
  display: none!important;
}
.sp {
  display: flex!important;
}
div.dialog .pc {
  display: none!important;
}
div.dialog .sp {
  display: flex!important;
}
div.gatev {
  padding: 0 15px;
}
/*----------------------------------------------------------------------------
header
------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------
nav
------------------------------------------------------------------------------*/
body {
  width: 100%;
  height: 100dvh;
  /*overflow: hidden;*/
}
body > nav {
  width: 80%;
}
body > nav.menu div.mlogo {
  position: relative;
}
/*----------------------------------------------------------------------------
wrapper
------------------------------------------------------------------------------*/
div.wrap {
  flex-direction: column;
  padding: 60px 0 72px!important;
  height: initial!important;
  min-height: initial;
  overflow: hidden;
}
body.link div.wrap {
  height: calc(100dvh - 50px - 82px - 70px);
}
div.wrap header {
  display: none;
}
main {
  padding: 0;
  width: 100%;
}
aside {
  display: block;
  padding: 0!important;
  border: none;
}
aside ul.config {
  display: none;
}
aside ul.link {
  flex-direction: row;
  justify-content: space-around;
  gap: 5px;
  padding: 0 5px;
  width: 100%;
  position: absolute;
  bottom: 82px;
}
aside ul.link li {
  gap: 5px;
  margin: 5px 0!important;
  padding: 0;
  height: 60px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.1em;
  line-height: 1;
}
aside ul.link li.talk {
  flex-direction: row;
}
/*----------------------------------------------------------------------------
popup
------------------------------------------------------------------------------*/
div.popup {
  padding: 20px;
}
div.popup form ul li {
  flex-direction: column;
}
div.popup form ul li label {
  margin-bottom: 10px;
  width: 100%;
}
/*----------------------------------------------------------------------------
section
------------------------------------------------------------------------------*/
section {
  flex-direction: column;
  padding: 0;
}
section > nav {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  border: none;
  background: inherit;
}
section > nav ul {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0;
  background: #fff;
}
section > nav ul li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0!important;
  height: 50px;
  background: #eee;
  border: 1px solid #ddd;
  border-top: 3px solid #fff;
}
section > nav ul li::before {
  content: initial;
}
section > nav ul li.current {
  border: 1px solid #fff;
  border-top: 3px solid var(--search-color);
  background: #fff;
}
section > nav ul li span {
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
}
section > nav:not(.pc) + div.scroll {
  padding: 10px 0 10px;
  height: calc(100dvh - 50px - 82px - 50px);
  height: initial !important;
}
section div.scroll.adjust {
  height: calc(100dvh - 50px - 82px - 50px - 70px)!important;
  height: initial !important;
}
section div.scroll.adjust2 {
  height: calc(100dvh - 50px - 82px - 70px)!important;
  height: initial !important;
}
section div.scroll.owner {
  height: calc(100dvh - 50px - 82px - 50px - 50px)!important;
  height: initial !important;
}
section div.bottom {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 10px;
  height: 50px;
}
div.photo-wrap {
  margin-top: 0;
  border-radius: initial;
}
section div.photo {
  border-radius: initial;
}
section div.photo > div {
  border-radius: initial !important;
}
section div.scroll nav.profile {
  margin: 0 auto;
  padding: 30px 0;
  border-top: none;
  width: 100%;
  border-radius: initial;
}
section div.scroll nav.links {
  margin: 0;
  border-radius: initial;
}
section div.scroll nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
}
section div.scroll > p.info {
  margin: 30px auto 0;
  border: none;
  font-size: 13px;
  padding: 0;
}
/*----------------------------------------------------------------------------
form
------------------------------------------------------------------------------*/
form button {
  margin: 0 auto;
}
form input[type="radio"] + label {
  min-width: 60px;
}
form div.addr > div:last-of-type {
  flex-direction: column;
  align-items: flex-start;
}
div.select {
  flex-direction: column;
}
div.select > div {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.2;
}
div.select > div.license > div input {
  width: 60px;
}
div.select > div.license > div:nth-child(n+2) {
  margin-top: 5px;
}
div.logo {
  margin: 10px 0 10px;
  width: 100%;
  height: 100px;
  background: url(../image/logo.svg) no-repeat center / 50%;
}
/*----------------------------------------------------------------------------
splash
------------------------------------------------------------------------------*/
div.splash h1 {
  width: 80%;
}
div.splash small {
  font-size: 10px;
  position: absolute;
  bottom: 30px;
}
div.center {
  padding-top: 60px;
  height: 100dvh;
  position: relative;
}
div.center > div span {
  display: none;
}
div.center h1 {
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  line-height: normal;
  letter-spacing: .72px;
}
div.center h3 {
  font-size: min(6vw, 30px);
}
div.center form {
  margin: 0 auto;
  padding: 40px 25px;
  border: none;
  background: none;
}
div.center form > p {
  margin-bottom: 10px;
  text-align: left;
}
div.center form ul li {
  flex-direction: column;
}
div.center form ul li:nth-child {
  margin-top: 15px;
}
div.center form ul li label {
  font-weight: 500;
}
div.center form ul li > div {
  padding: 5px 0;
}
div.center form ul li > div input {
  min-height: 50px;
  padding: 10px 35px 10px 20px;
  border-radius: 50px;
  border: 1px solid #EEE;
  background: #FFF;
  font-size: 16px;
  letter-spacing: .64px;
}
div.center form ul li > div input:focus {
  border: 1px solid #0071E3;
}
div.center form button {
  width: calc(100% - 30px);
  max-width: 470px;
}
div.center form a {
  color: #333;
}
div.center form div.agreement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 100px;
}
div.center form div.agreement a {
  color: #333;
}
div.link:nth-of-type(n+2) {
  margin-top: 20px;
}
div.link span.tel span {
  line-height: 2em;
}
/*----------------------------------------------------------------------------
filter
------------------------------------------------------------------------------*/
div.count {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px 18px;
  font-weight: 500;
  color: #999;
}
div.count span {
  margin: 0 7px;
  font-weight: 400;
  font-size: 30px;
  line-height: 30px;
}
div.count div.folder-select {
  padding: 10px;
  width: 180px;
}
div.filter {
  margin: 0;
  padding: 0;
}
div.filter ul {
  display: flex;
  flex-direction: row;
  gap: 0;
  width: 100%;
  border-top: 1px solid #fff
}
div.filter ul li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  height: 40px;
  background: #f9e836;
  color: #000000;
  font-size: 13px;
}
div.filter ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
div.filter ul li:nth-child(n+2) a {
  border-left: 1px solid #fff;
}
div.filter a.link:hover,
div.filter a.link.current {
  background: #fff15a;
  text-decoration: none;
}
div.filter + div.scroll {
  padding: 0;
  height: calc(100dvh - 50px - 80px - 40px);
}
/*----------------------------------------------------------------------------
(F) timeline
------------------------------------------------------------------------------*/
div.timeline {
  display: block;
  padding: 48px 18px 30px;
}
div.posted {
  width: 100%;
}
div.posted:nth-child(n+2) {
  margin-top: 25px;
}
/*----------------------------------------------------------------------------
profile
------------------------------------------------------------------------------*/
div.profile {
  margin: 0 auto;
  width: calc(100% - 20px);
}
div.profile > div:last-of-type > div:first-child {
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
  position: relative;
  top: initial;
}
div.profile > div:last-of-type > div:first-child div {
  margin-right: 10px;
}
div.profile > div:last-of-type > div:first-child span:first-of-type {
  margin-top: 10px;
}
div.profile > div:last-of-type > div:last-child {
  margin-top: 20px;
  padding: 0;
}
div.profile img {
  position: absolute;
  top: -75px;
  left: 10px;
}
div.profile p {
  padding: 15px 10px;
}
div.profile a.edit {
  right: 10px;
}

/*----------------------------------------------------------------------------
detail
------------------------------------------------------------------------------*/
div.edit {
  margin: 10px auto 0;
  width: calc(100% - 20px);
  padding: 0 10px 15px;
}
div.detail {
  margin: 10px auto 0;
  width: calc(100% - 20px);
  padding: 0 10px 15px;
}
a.edit {
  width: 87px;
  top: 10px;
  right: 10px;
}
div.detail ul li > label {
  min-width: initial;
  width: 100px;
}
div.detail ul li > div {
  width: calc(100% - 100px);
}
div.detail ul li > div.flex {
  flex-direction: column;
  align-items: flex-start;
}
div.detail ul li > div.flex input[type="radio"] + label {
  margin: 2px 0;
}
div.detail.regist ul li {
  flex-direction: column;
}
div.detail.regist ul li > label {
  width: 100%;
  background: #e5e5e5;
}
div.detail.regist ul li > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px 10px;
  width: 100%;
}
form div.addr select {
  width: 100%;
}
div.term > div {
  flex-wrap: wrap;
}
div.term > div label {
  margin: 10px 0!important;
  width: 100%;
}
div.term select, div.term input {
  margin: 0 5px;
}
div.term input:first-of-type {
  margin-left: 0;
}
div.toggle input[type="radio"] + label {
  margin: 10px;
}
/*----------------------------------------------------------------------------
detail2
------------------------------------------------------------------------------*/
div.scroll.owner {
  padding: 20px 0 0;
}
div.scroll.adjust {
  padding: 20px 0 0;
}
div.detail2 {
  margin: 50px 0 0;
  padding: 0;
}
div.detail2 > p {
  margin: 0;
  padding: 10px 7px;
  border-top: 1px solid var(--line-color);
  border-left: none;
  border-right: none;
}
div.detail2 > label {
  margin: 0;
  border-left: none;
  border-right: none;
  border-radius: initial;
}
div.detail2 > div {
  flex-direction: column;
  gap: 0;
  padding: 0 15px;
}
div.detail2 > div ul {
  margin-top: 20px;
  border: 1px solid var(--line-color)!important;
}
div.detail2 > ul li > label {
  width: 100px;
}
div.detail2 > ul {
  border-left: none;
  border-right: none;
  border-bottom: none;
}
div.detail2 div.machine {
  padding: 10px 7px;
  border: none;
  border-top: 1px solid var(--line-color);
  gap: 7px;
}
div.detail2 div.machine div.photo {
  width: calc((100% - 14px) / 3);
}
div.detail2.regist {
  margin: 0 10px;
  border: 1px solid var(--line-color);
  border-top: none;
  border-radius: 3px;
}
div.detail2.regist + div {
  margin: 20px 10px;
}
div.detail2.regist div.flex {
  flex-direction: column;
  align-items: flex-start;
}
div.detail2.regist div.flex label {
  padding: 5px 0 5px 20px;
}
div.detail2.regist div.flex label::before {
  top: 10px;
}
div.detail2.regist div.flex label::after {
  top: 13px;
}
/*----------------------------------------------------------------------------
list2
------------------------------------------------------------------------------*/
.pager a {
  padding: 0 10px;
  min-width: inherit;
  font-size: 13px;
}
div.list2 {
  padding: 0;
  min-height: initial;
  border: none;
}
div.list2 div.pager {
  justify-content: space-around;
}
a.linkbutton {
  height: 40px;
  position: initial;
}
/*----------------------------------------------------------------------------
(F) fglist
------------------------------------------------------------------------------*/

div.fglist {
  width: calc(100dvw + 80px);
}
/*----------------------------------------------------------------------------
(F) complist
------------------------------------------------------------------------------*/
div.complist {
  padding: 0 15px;
}
div.fglist div.complist {
  width: calc(100dvw - 80px);
  overflow: visible;
}
div.complist ul {
  display: block;
}
div.complist ul.swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
}
div.complist ul li {
  margin-bottom: 30px;
  width: 100%;
}
ul.action {
  justify-content: flex-start;
}
/*----------------------------------------------------------------------------
(F) joblist
------------------------------------------------------------------------------*/
div.joblist {
  padding: 0 18px;
}
div.fglist div.joblist {
  width: calc(100dvw - 80px);
  overflow: visible;
}
div.joblist ul {
  display: block;
}
div.joblist ul.swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
}
div.joblist ul li {
  margin-bottom: 30px;
  width: 100%;
}
div.jobdetail ul li {
  margin-bottom: 0;
}
/*----------------------------------------------------------------------------
dialog
------------------------------------------------------------------------------*/
div.dialog {
  display: none;
  max-width: 100%;
  top: 0;
  left: 0;
  transform: initial;
}
div.dialog > div {
  border: none;
  border-radius: initial;
  box-shadow: initial;
}
div.dialog div.task {
  justify-content: center;
  height: 60px;
  position: relative;
}
div.dialog div.task .title {
  font-weight: 700;
  font-size: 16px;
}
div.dialog div.task i {
  display: block;
}
div.dialog div.task a.close {
  display: none;
}
div.dialog div.task a.back + i {
  display: none;
  margin-right: 20px;
  font-style: normal;
  font-weight: 200;
  font-size: 28px;
  color: #fff;
  position: absolute;
  left: 18px;
  top: 50%;
  transform: scale(1.5, 1) translateY(-50%);
  cursor: pointer;
}
div.dialog div.task a.back {
  width: 15px;
  height: 28px;
  background: #fff;
  mask-image: url(../img2/arrow_prev.svg);
  text-indent: -9999px;
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}
div.dialog div.task hr {
  display: none;
  width: calc(100% - 30px);
  position: absolute;
  bottom: 0;
  left: 15px;
}
div.dialog.modal div.task a.back {
  display: none !important;
}
div.dialog.modal div.task a.back + i {
  display: block;
}
div.dialog div.task a.save {
  font-weight: 400;
  font-size: 14px;
  color: #fff;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
div.dialog div.task a.send {
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/home_timeline_icon_post.svg) no-repeat center / 100%;
  text-indent: -9999px;
}
div.dialog div.main {
}
div.dialog div.content {
  padding: 0;
  max-height: initial;
  height: calc(100dvh - 60px);
}
div.dialog div.content > div {
  padding: 30px 18px;
}
div.dialog div.content > p {
  padding: 20px 0;
  font-size: 13px;
}
div.dialog a.button {
  width: 100%;
  min-width: initial;
  background: #fff;
  border: 1px solid var(--search-color);
  color: var(--search-color);
}
div.dialog a.button.accept {
  background: var(--search-color);
  border-color: var(--search-color);
  color: #fff;
}
div.dialog div.bottom {
  align-items: center;
  justify-content: space-between;
  margin: 40px 0 20px;
  padding: 0;
  background: none;
}
div.dialog div.bottom a.button {
  width: calc((100% - 20px) / 2);
  height: 50px;
}
div.dialog div.bottom + a.button {
  height: 50px;
}
div.dialog div.bottom.single {
  justify-content: center;
}
div.dialog div.bottom.single a.button {
  width: 100%;
}
div.dialog div.bottom div.count {
  padding: 0 10px;
}
div.dialog div.content.search {
}
div.dialog div.content.search + div.bottom {
  padding-top: 30px;
  height: 90px;
}
div.dialog div.content.sort {
  padding: 20px 10px;
  height: calc(100dvh - 60px);
}
div.dialog div.content.edit2 {
  padding: 20px 18px 50px;
  height: calc(100dvh - 60px);
}
div.dialog div.content ul li > label {
  min-width: 100px;
  font-weight: 500;
  font-size: 13px;
}
div.dialog div.content ul li a.button {
  height: 27px;
  font-size: 12px;
}
div.dialog div.content ul li > div.folder {
  min-height: calc(100dvh - 250px);
  max-height: initial;
}
div.dialog div.content ul li > div.folder ul li label,
div.dialog div.content ul li > div.folder ul li input {
  height: 30px;
}
div.dialog div.content p + dl {
  xmargin-top: 40px;
}
div.dialog div.content dl {
  flex-direction: column;
}
div.dialog div.content dl:last-child {
  border: none;
}
div.dialog div.content dl dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  padding: 0;
  width: 100%;
  height: 30px;
  font-size: 12px;
  position: relative;
}
div.dialog div.content dl dt.err {
  background: #fff2f1;
}
div.dialog div.content dl dt a.editlink {
  top: initial;
}
div.dialog div.content dl dd {
  min-height: 20px;
  font-weight: 400;
  font-size: 12px;
}
div.dialog div.content dl dd p {
  padding: 10px 0 20px;
}
div.dialog div.content dl dd > span {
  display: block;
}
div.dialog div.content dl dd p + div.notice {
  margin: 0 0 10px;
}
div.dialog div.content dl dd div.row {
  display: flex;
  align-items: center;
  gap: 10px;
}
div.dialog div.content dl dd div.row > span {
  font-weight: 500;
}
div.dialog div.content dl dd div.clone:nth-child(n+2) {
  margin-top: 10px;
}
div.dialog div.content dl dd div.score {
  display: flex;
  justify-content: flex-end;
}
div.dialog div.content dl dd div.score span:first-child {
  color: rgb(135 135 135);
  margin-right: 10px;
}
div.dialog div.content.config {
  padding: 0;
}
div.dialog div.content.config dl dt {
  margin: 0;
}
div.dialog div.content.config form {
  padding: 0 18px 50px;
}
div.dialog div.content.action {
  height: calc(100dvh - 40px - 82px);
}
div.dialog div.content.action + div.bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 82px;
}
div.dialog div.content.area,
div.dialog div.content.industry,
div.dialog div.content.license {
  padding: 10px 5px;
}
div.dialog div.content p.alert {
  font-size: 12px!important;
  color: var(--notice-color)!important;
}
/*----------------------------------------------------------------------------
dialog step
------------------------------------------------------------------------------*/
div.dialog div.step a.resume {
  width: auto;
  height: auto;
  font-weight: 400;
  font-size: 13px;
  background: initial;
  border: none;
  color: #fff;
  position: absolute;
  right: 15px;
  left: initial;
  top: 50%;
  bottom: initial;
  transform: translateY(-50%);
}
div.dialog div.step hr {
  width: calc(100% - 20px);
  position: absolute;
  left: 10px;
  bottom: 1px;
}
div.dialog div.step div.content {
  padding: 0;
  height: calc(100dvh - 60px - 70px);
  background: #f5f5f6;
}
div.dialog div.step div.tabpage {
  margin: 30px 0;
  padding: 0;
}
div.dialog div.step div.tabpage > p {
  font-size: 13px;
}
div.dialog div.step div.tabpage.end > p {
  margin-bottom: 30px;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
}
div.dialog div.step div.tabpage dl {
  padding: 30px 0;
}
div.dialog div.step div.tabpage dl dt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  height: auto;
}
div.dialog div.step div.tabpage dl dt span:last-child {
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
}
div.dialog div.step div.tabpage dl dt p {
  margin-bottom: 20px;
}
div.dialog div.step div.tabpage div.pages {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 50px 20px 60px 0;
  font-weight: 600;
  font-size: 17px;
  color: #999;
}
div.dialog div.step div.tabpage div.pages span:first-child {
  font-size: 36px;
  line-height: 36px;
}
div.dialog div.step div.tabpage div.nest {
  background: #fff;
  height: 50px;
  padding: 0 20px;
  border: 1px solid var(--line-color);
  color: #9e9e9e;
  position: relative;
}
div.dialog div.step div.tabpage dl dd p {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--search-color);
}
/*----------------------------------------------------------------------------
area, license
------------------------------------------------------------------------------*/
div.area div.r,
div.license div.c {
  margin: 0;
  padding: 5px;
  font-size: 13px;
}
div.area div.p div,
div.license div.l div {
  margin: 2px 0px;
  padding: 0px 5px 0 20px;
  font-size: 12px;
}
div.detail2.regist ul li {
  flex-direction: column;
  border-bottom: 1px solid var(--line-color);
}
div.detail2.regist ul li > label {
  padding: 10px 10px 0;
  width: 100%;
  border-right: none;
}
div.detail2.regist ul li > div {
  width: 100%;
}
div.dialog form {
  padding: 0;
}
div.dialog div.content.regist ul li {
  flex-direction: column;
  padding: 10px 0;
  font-size: 12px;
}
div.dialog div.content.regist ul li > label {
  padding: 0 0 10px;
  width: 100%;
}
div.dialog div.content.regist ul li > div {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
div.dialog input[type="checkbox"] + label {
  font-weight: 400;
  font-size: inherit;
}
div.dialog input[type="radio"] + label {
  font-weight: 400;
  font-size: inherit;
  white-space: nowrap;
}
/*----------------------------------------------------------------------------
talkroom
------------------------------------------------------------------------------*/
div.talk-wrap {
  margin: 0;
  padding: 0;
  border: none;
  position: relative;
}
div.talk-wrap.talk {
  padding: 0;
  height: auto;
}
div.room {
  margin: 0;
  min-height: initial;
}
div.talk-wrap.talk div.room {
  margin: 0;
  padding: 0 18px;
  height: calc(100dvh - 60px - 72px - 62px);
}
div.talk-input-wrap {
  padding: 0;
  left: 0;
  transform: initial;
}
div.room > ul {
}
div.room > ul li {
}
div.room > ul li div:nth-child(1) {
  margin-right: 10px;
  min-width: 35px;
  height: 35px;
}
div.room > ul li div:nth-child(2) {
  font-size: 12px;
  line-height: 16px;
}
div.room div.message {
  max-width: 100%;
}
div.room div.message > span {
  min-width: 35px;
  height: 35px;
}
div.room div.message img {
}
div.room div.message video {
}
div.room div.posts {
  width: 80%;
}
div.talk-wrap.talk div.talk-input {
  padding: 15px 5px;
}
div.talk-wrap textarea {
  font-size: 16px;
  /** 16px以下にするとiPhoneでは拡大してしまう **/
}
.emoji-picker {
  width: 100%!important;
}
div.talk-menu {
  display: none;
}
div.posts > span {
  top: 3px;
  right: 10px;
}
/*----------------------------------------------------------------------------
list2
------------------------------------------------------------------------------*/
div.detail2 div.posts {
  padding: 0 10px;
  border: none;
}
div.detail2 div.posts ul {
  border: none !important;
}
div.list2 div.posts {
  padding: 0 10px;
  border: none;
}
/*----------------------------------------------------------------------------
cover
------------------------------------------------------------------------------*/
body > div.cover {
  padding-inline: 30px;
}
/*----------------------------------------------------------------------------
footer
------------------------------------------------------------------------------*/
footer {
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 100%;
  border: 1px solid var(--line-color);
  position: fixed;
  bottom: 0;
  left: 0;
  transform: initial;
  z-index: 1;
}
footer > ul {
  display: flex;
  gap: 0;
  width: 100%;
}
footer > ul li {
  margin: 0;
  height: 70px;
  background: #000;
  border-radius: unset;
  position: relative;
  cursor: pointer;
}
footer > ul li span {
  font-size: min(3.2vw, 14px);
  line-height: 16px;
}
footer.submenu {
  display: flex;
  width: 100%;
  height: calc(100dvh - 50px - 82px);
  background: #fffffff0;
  overflow-y: auto;
  position: absolute;
  top: 50px;
}
footer.submenu div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
footer.submenu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}
footer.submenu ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  height: 40px;
  background: var(--search-color);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}
footer.submenu ul li:hover {
  opacity: 0.8;
}