@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&display=swap');
:root {
  --back-color: #F8F7F5;
  --font-color: #000;
  --font-small: #888;
  --font-bold: #202424;
  --font-focus: #0071E3;
  --line-color: #D5D5D5;
  --button-back: #eee;
  --button-font: #4D5156;
  --button-line: #8c8c8c;
  --button-back2: #212121;
  --button-font2: #fff;
  --main-color: #f5c700;
  --search-color: #F80;
  --swiper-navigation-size: 30px!important;
  --time-color: #F80;
  --notice-color: #C81E17;
  --content-back: #f5f5f6;
  --content-color: #999;
  --action-border: #13af00;
  --action-color: #0f8e00;
}
:focus-visible {
  outline: none;
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0; 
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  background: var(--back-color);
  color: var(--font-color);
}
[data-type="unicode"] {
  font-family: "Noto Sans JP", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, sans-serif, LastResort !important;
}
ul {
  list-style: none;
}
a, button {
  cursor: pointer;
  text-decoration: none;
}
img {
  max-width: 100%;
  object-fit: scale-down;
}
img.progress {
  display: none;
  width: 64px;
  height: auto;
  position: absolute;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
/*----------------------------------------------------------------------------
wrapper
------------------------------------------------------------------------------*/
.pc {
  display: none!important;
}
.sp {
  display: flex!important;
}
div.dialog .pc {
  display: flex!important;
}
div.dialog .sp {
  display: none!important;
}
body > nav {
  display: none;
}
div.wrap {
  display: flex;
  margin: 0 auto;
  padding: 60px 50px 72px;
  width: 1200px;
  max-width: 100%;
  min-height: 100vh;
}
main {
  width: 100% !important;
}
main > header {
  display: none;
}
aside {
  display: none;
}
div.gatev {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  width: 100%;
  height: 60px;
  background: #0E0E0E;
  position: relative;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}
a.home {
  display: block;
  width: 140px;
  height: 50px;
  xbackground: url(../img2/gateverse_logo.svg) no-repeat left / contain;
  background: #fff;
  mask-image: url(../img/gateverse_logo.svg);
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
div.gatev ul {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  font-size: 12px;
}
div.gatev ul li a {
  color: #fff;
}
/*----------------------------------------------------------------------------
header
------------------------------------------------------------------------------*/
body > header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  background: #0E0E0E;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  position: relative;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
body > header 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%);
}
body > header a.menu {
  display: block;
  width: 36px;
  height: 36px;
  background: #fff;
  mask-image: url(../img2/menu.svg);
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
body > header hr {
  display: none;
  width: calc(100% - 30px);
  position: absolute;
  left: 15px;
  bottom: 0;
}
/*----------------------------------------------------------------------------
nav
------------------------------------------------------------------------------*/
body > nav {
  display: none;
  width: 300px;
  height: calc(100dvh - 1px);
  background: #000;
  color: #fff;
  overflow: hidden;
  position: absolute;
  top: 1px;
  left: 1px;
  z-index: 2;
  overflow-y: auto;
  position: fixed;
}
body > nav > div {
  display: block;
  padding: 18px;
  width: 100%;
}
body > nav > div > label {
  display: flex;
  align-items: center;
  line-height: 30px;
}
body > nav > div > label i {
  margin-right: 20px;
  font-style: normal;
  font-weight: 200;
  font-size: 28px;
  color: #fff;
  transform: scale(1.5, 1);
}
body > nav ul {
  margin-top: 40px;
  width: 100%;
}
body > nav ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  font-size: 13px;
  cursor: pointer;
}
body > nav ul li:hover {
  text-decoration: underline;
}
body > nav ul li a {
  display: block;
  width: 20px;
  height: 20px;
  mask-image: url(../image/arrow_right.svg);
  -webkit-mask-image: url(../image/arrow_right.svg);
  background: #fff;
}
body > nav div a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  width: 100%;
  height: 40px;
  border-radius: 4px;
  font-size: 12px;
}
body > nav a.qr {
  margin-top: 50px;
  background: linear-gradient(180deg, #FFAB35 0%, #F80 24.04%, #FFAB35 89.9%);
  color: #fff;
}
body > nav a.logout {
  margin-top: 20px;
  border: 1px solid var(--search-color);
  color: var(--search-color);
  font-weight: 700;
}
body > nav.menu {
  background: linear-gradient(180deg, #E6C600 0%, #FEB032 75%);
  left: initial;
  right: 0;
  z-index: 3;
}
body > nav.menu label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: #000;
  height: 60px;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
}
body > nav.menu label i {
  font-style: normal;
  font-weight: 100;
  font-size: 28px;
  color: #fff;
  transform: scale(1.5, 1);
}
body > nav.menu ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
body > nav.menu ul li {
  justify-content: flex-start;
  padding: 0 20px;
  font-weight: 500;
  color: #000;
}
body > nav.menu ul li.i::before {
  display: block;
  content: "";
  margin-right: 10px;
  width: 20px;
  height: 20px;
  background: no-repeat center / 100%;
}
body > nav.menu ul li.gatetomo::before {
  background-image: url(../img2/home_tab_action.svg);
}
body > nav.menu ul li.listup::before {
  background-image: url(../img2/icon_listup.svg);
}
body > nav.menu ul li.trace::before {
  background-image: url(../img2/foot.svg);
}
body > nav.menu ul li.accepts::before {
  background-image: url(../img2/home_tab_syonin.svg);
}
body > nav.menu ul li.talk::before {
  background-image: url(../img2/home_timeline_icon_comment.svg);
}
body > nav.menu ul li.jobs::before {
  background-image: url(../img2/home_timeline_icon_comment.svg);
}
body > nav.menu ul li.wrote::before {
  background-image: url(../img2/home_timeline_icon_comment.svg);
}
body > nav.menu ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  padding-inline: 5px;
  min-width: 24px;
  height: 24px;
  background: var(--action-color);
  border-radius: 50%;
  color: #fff;
}
body > nav.menu div {
  margin: 20px 0;
}
body > nav.menu a.request,
body > nav.menu a.group,
body > nav.menu a.wrote {
  padding: 0 20px;
  background: var(--action-color);
  color: #fff;
}
body > nav.menu a.wrote {
  margin-top: 20px;
}
body > nav.menu div.mlogo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  width: 100%;
  font-size: 12px;
  line-height: 30px;
  letter-spacing: -0.2px;
  font-weight: 400;
  position: absolute;
  bottom: 0;
  left: 0;
  color: #000;
}
body > nav.menu div.mlogo::before {
  display: block;
  content: "";
  width: 80%;
  height: 120px;
  xbackground: url(../img2/gateverse_logo.svg) no-repeat center / 100%;
  background: url(../img/gateverse_logo.svg) no-repeat center bottom / 100%;
}
/*----------------------------------------------------------------------------
splash
------------------------------------------------------------------------------*/
div.splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  width: 100%;
  height: 100dvh;
  background: linear-gradient(180deg, #E6C600 0%, #FEB032 75%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  position: fixed;
}
div.splash h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 600px;
  height: 200px;
  xbackground: url(../img2/gateverse_logo.svg) no-repeat center / contain;
  background: url(../img/gateverse_logo.svg) no-repeat center / contain;
  text-indent: -9999px;
}
div.splash small {
  font-size: 16px;
  position: absolute;
  bottom: 30px;
}
/*----------------------------------------------------------------------------
section
------------------------------------------------------------------------------*/
section {
  display: flex;
  align-items: flex-start;
  padding: 0;
  min-height: 100%;
  position: relative;
}
/*----------------------------------------------------------------------------
center
------------------------------------------------------------------------------*/
div.center {
  width: 800px;
  max-width: 100%;
  height: 600px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px #0000001a, 0 0 0 1px #00000005;
  position: absolute;
  margin: auto;
  inset: 0;
}
div.center > div {
  padding: 50px 50px 0;
}
div.center > div > span {
  background: linear-gradient(180deg, #8CDCFF 0%, #5498DD 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 300;
  font-family: Alexandria;
  font-size: 24px;
  line-height: 120%;
  letter-spacing: .96px;
}
div.center h1 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 1.12px;
  color: #333;
}
div.center h3 {
  padding: 20px 0;
  border-bottom: 2px solid #878789;
  font-size: 30px;
  line-height: 1;
  color: #000;
}
div.center form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px auto;
  padding: 50px;
  width: 800px;
  max-width: 100%;
}
div.center form > p {
  margin-bottom: 20px;
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  color: var(--search-color);
}
div.center form ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 500px;
}
div.center form ul li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
div.center form ul li label {
  font-family: Noto Sans JP;
  font-weight: 600;
  font-size: 14px;
  line-height: normal;
  letter-spacing: 1.4px;
  color: #333;
}
div.center form ul li > div {
  width: 100%;
}
div.center form ul li > div input {
  padding: 6px 15px;
  min-height: 34px;
  background: #F8F8F8;
  color: #4d4d4d;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 400;
  font-family: Noto Sans JP;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: .56px;
}
div.center form ul li > div input:hover {
  border: 1px solid #97A8FF;
}
div.center form ul li > div input:focus {
  border: 1px solid #999;
}
div.center form button {
  margin: 40px auto;
  padding: 10px 20px;
  height: 50px;
  background: #F80;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: 15px;
  line-height: normal;
  letter-spacing: 1.5px;
  transition: 0.3s;
}
div.center form a {
  display: inline-block;
  color: #0071e3;
  font-weight: 500;
  font-size: 14px;
  line-height: 160%;
  letter-spacing: .56px;
  text-decoration: underline;
}
div.center form div.agreement {
  display: flex;
  flex-direction: row;
  gap: 5px;
  margin-top: 20px;
  font-weight: 500;
  font-size: 14px;
  line-height: 160%;
  letter-spacing: .56px;
}
div.center form div.agreement a {
  color: var(--search-color);
}
/*----------------------------------------------------------------------------
nav
------------------------------------------------------------------------------*/
section > nav {
  margin-right: 14px;
  min-width: 216px;
  background: #fcf4be;
  border: 1px solid var(--line-color);
  border-radius: 3px;
  position: relative;
}
section > nav ul + a {
  position: absolute;
  bottom: -40px;
}
section > nav h5 {
  padding: 10px;
  background: var(--main-color);
  font-size: 16px;
  color: var(--font-bold);
  text-align: center;
}
section > nav dl {
  display: flex;
  flex-direction: column;
}
section > nav dl dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  line-height: 30px;
  background: #fff08b;
  border-radius: 3px 3px 0 0;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  color: var(--font-bold);
}
section > nav dl d a {
  width: 60px;
}
section > nav dl dd {
  margin: 3px;
  border-radius: 0 0 3px 3px;
}
section > nav dl dd div {
  padding: 10px;
  font-size: 14px;
  color: #000;
}
section > nav dl dd div p {
  font-size: 12px;
  letter-spacing: -0.1em;
  color: var(--font-color);
}
section > nav ul {
  padding: 15px 25px;
}
section > nav ul li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 25px;
  color: var(--font-bold);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
section > nav ul li:nth-child(n+2) {
  margin-top: 5px;
}
section > nav ul li::before {
  display: block;
  margin: 2px 3px 0 0;
  content: "";
  width: 14px;
  height: 14px;
  background: url(../image/pc_navi_arrow_ylw.svg) no-repeat center / 100%;
}
section > nav ul li.black::before {
  background: url(../image/pc_navi_arrow_blk.svg) no-repeat center / 100%;
}
section > nav div.action {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
section > nav div.action a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  width: 100%;
  height: 42px;
  background: var(--main-color);
  border: 1px solid var(--button-line);
  border-radius: 3px;
  color: #000;
  font-weight: 700;
  font-size: 13px;
}
section > nav div.action a:hover {
  opacity: 0.8;
}
section > nav div.action a:nth-child(n+2) {
  margin-top: 20px;
}
section > nav div.action a.talk:before {
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  background: url(../image/talk.svg) no-repeat center;
}
section > nav div.action a.back {
  background: #eee;
  border: 1px solid var(--line-color);
  color: var(--button-font);
}
section > div {
  width: 100%;
  height: 100vh;
}
section div.scroll {
  padding: 0 0 50px;
  height: auto;
  min-height: calc(100dvh - 142px);
  overflow-x: hidden;
}
section div.scroll.fill {
  background: #fff;
}
section div.scroll.adjust {
  height: calc(100vh - 102px);
}
section div.scroll nav.profile {
  display: flex;
  margin: 0 auto;
  padding: 30px 0;
  border-top: none;
  width: 100%;
  background: #fff;
  border-radius: 0 0 4px 4px;
}
section div.scroll nav.address {
  display: flex;
  margin: 0 auto;
  padding: 30px 0;
  border: none;
  width: 100%;
}
section div.scroll nav.links {
  display: flex;
  justify-content: space-around;
  margin: 30px auto 0;
  padding: 20px 0;
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  color: var(--search-color);
  box-shadow: 0 2px 6px #0000001a, 0 0 0 1px #00000005;
}
section div.scroll nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  width: 100%;
}
section div.scroll nav ul li {
  display: flex;
  flex-direction: column;
  padding: 10px;
  width: calc(100% / 3);
  max-width: 100px;
  border: 1px dashed #fff;
  border-radius: 4px;
  font-size: 11px;
  line-height: 20px;
  color: #616161;
  cursor: pointer;
}
section div.scroll nav ul li:hover,
section div.scroll nav ul li.current {
  background: #F9F9F9;
}
section div.scroll nav ul li::before {
  display: block;
  content: "";
  margin: 0 auto 5px;
  width: 30px;
  height: 30px;
  background: url(../img2/howto.svg) no-repeat center / 100%;
}
section div.scroll nav ul li.industry::before {
  background-image: url(../img2/image_469.svg);
}
section div.scroll nav ul li.achieve::before {
  background-image: url(../img2/icon_works.svg);
}
section div.scroll nav ul li.recommend::before {
  background-image: url(../img2/image_468.svg);
}
section div.scroll nav ul li.company::before {
  background-image: url(../img2/image_470.svg);
}
section div.scroll nav ul li.gatetomo::before {
  background-image: url(../img2/Group_363.svg);
}
section div.scroll nav ul li.score::before {
  background-image: url(../img2/icon_appeal.svg);
}
section div.scroll > p {
  margin: 20px auto;
  padding: 20px;
  width: calc(100% - 36px);
  border: 1px solid var(--line-color);
}
section div.scroll > p.info {
  margin: 30px auto 0;
  border: none;
  font-size: 13px;
  padding: 0;
}
div.count {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px 18px;
  font-weight: 500;
  color: #999;
}
section div.contact {
  padding: 50px 18px 0;
  xborder-top: 1px solid var(--line-color);
}
section div.contact div.logo {
  margin: 0;
  width: auto;
  height: 45px;
  background-size: auto 100%;
  background-position: left;
}
section div.contact h3 {
  display: flex;
  padding: 20px 0 10px;
  font-size: 13px;
}
section div.contact a.link {
  font-size: 12px;
  color: var(--search-color);
}
/*----------------------------------------------------------------------------
(F) section
------------------------------------------------------------------------------*/
div.photo-wrap {
  margin-top: 30px;
  padding: 0!important;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px #0000001a, 0 0 0 1px #00000005;
}
div.dialog div.photo-wrap {
  margin: 0;
}
div.photo {
  display: flex;
  height: 130px;
  background: #fff;
  border-radius: 4px 4px 0 0;
}
div.image {
  background: no-repeat center / cover;
}
section div.photo > div:first-child {
  flex: 1;
  padding: 0 5px 0 10px;
  border-radius: 4px 0 0 0;
}
section div.photo > div:first-child > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 0;
}
section div.photo > div:first-child p:first-of-type {
  font-size: 12px;
  line-height: 15px;
  color: #333;
}
section div.photo > div:first-child p:last-of-type {
  margin-top: 5px;
  font-size: 10px;
  line-height: 13px;
}
section div.photo div.icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
}
section div.photo div.icon + div {
  display: flex;
  flex-direction: column;
}
section div.photo div.icon + div span:first-child {
  font-size: 10px;
  color: #333;
}
section div.photo div.icon + div span:last-child {
  font-size: 18px;
  white-space: nowrap;
}
section div.photo > div:last-child {
  flex: 1;
  height: 100%;
  position: relative;
  border-radius: 0 4px 0 0;
}
nav.address a,
nav.profile a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
nav.profile a span {
  border-bottom: 2px solid #fff;
  padding-bottom: 3px;
  font-weight: 600;
  font-size: 12px;
  color: #616161;
}
nav.profile a.current span {
  border-bottom: 2px solid var(--search-color);
}
nav.address a span:first-child {
  font-size: 24px;
}
nav.address a.accepts span:first-child {
  color: var(--notice-color);
}
nav.address a span:last-child {
  border-bottom: 2px solid #fff;
  padding-bottom: 3px;
  font-weight: 600;
  font-size: 12px;
}
nav.address a.current span:last-child {
  border-bottom: 2px solid var(--search-color);
}
nav.profile a::before {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  background: no-repeat center / 100%;
}
nav.profile a.timeline::before {
  background-image: url(../img2/home_tab_timeline.svg);
}
nav.profile a.actions::before {
  background-image: url(../img2/home_tab_action.svg);
}
nav.profile a.accepts::before {
  background-image: url(../img2/home_tab_syonin.svg);
}
/*----------------------------------------------------------------------------
(F) timeline
------------------------------------------------------------------------------*/
div.timeline {
  display: flex;
  flex-wrap: wrap;
  padding: 30px 0;
  gap: 20px;
}
div.posted {
  display: flex;
  flex-direction: column;
  padding-bottom: 44px;
  width: calc((100% - 40px) / 3);
  background: #fff;
  border: 1px solid var(--line-color);
  border-color: rgba(0, 0, 0, 0.176);
  border-radius: 4px;
  box-shadow: 0 2px 6px #0000001a, 0 0 0 1px #00000005;
  position: relative;
}
div.posted:has(article) {
  padding-bottom: 0;
}
div.posted > article div.posted {
  width: 100%;
}
div.posted > div:first-of-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid var(--line-color);
  color: var(--font-small);
}
div.posted > div:first-of-type p {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 12px;
}
div.posted > div:first-of-type p > span {
  margin-left: 5px;
}
div.posted > div:first-of-type a span {
  font-weight: 600;
  color: #000;
}
div.posted > div:first-of-type i {
  display: block;
  content: "";
  margin-right: 15px;
  width: 40px;
  height: 40px;
  background: no-repeat center / cover;
  border-radius: 50%;
}
div.posted > div:last-of-type time {
  font-weight: 600;
  font-size: 12px;
  color: var(--time-color);
}
div.posted > div:last-of-type {
  padding: 20px 22px;
  color: var(--font-small);
}
div.posted > div:last-of-type label {
  padding: 4px 10px;
  background: #FFF29E;
  color: #000;
  font-size: 10px;
}
div.posted.share > div:last-of-type label {
  display: flex;
  align-items: center;
  padding: 0;
  background: none;
  color: #000;
}
div.posted.share > div:last-of-type label::before {
  display: block;
  content: "";
  margin-right: 10px;
  width: 20px;
  height: 20px;
  background: url(../img2/home_timeline_icon_share.svg) no-repeat center / 100%;
}
div.posted > div:last-of-type h5 {
  margin-top: 10px;
  font-weight: 600;
  font-size: 12px;
}
div.posted > div:last-of-type p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 5px;
  font-size: 12px;
}
div.posted > article {
  margin: 0 auto 20px;
  width: calc(100% - 20px);
}
div.posted img, div.posted video {
  margin: 10px 0 0;
  width: 100%;
}
div.posted nav {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 !important;
  padding: 0 22px !important;
  width: 100% !important;
  height: 44px;
  border: none!important;
  border-top: 1px solid var(--line-color)!important;
  position: absolute;
  left: 0;
  bottom: 0;
}
div.posted nav a {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--search-color);
}
div.posted nav a::before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background: no-repeat center / 100%;
}
div.posted nav a.like::before {
  background-image: url(../img2/like.svg);
  width: 24px;
  height: 24px;
}
div.posted nav a.like.on::before {
  background-image: url(../img2/likeon.svg);
}
div.posted nav a.comment::before {
  background-image: url(../img2/home_timeline_icon_comment.svg);
}
div.posted nav a.share::before {
  background-image: url(../img2/home_timeline_icon_share.svg);
}
div.posted nav a.remove {
  position: absolute;
  right: 10px;
}
div.posted nav a.remove::before {
  background-image: url(../img2/trash.svg);
}

/*----------------------------------------------------------------------------
(F) actions
------------------------------------------------------------------------------*/
div.actions {
  display: flex;
  flex-direction: column;
  margin: 48px auto;
  width: calc(100% - 36px);
  background: #fff;
  border: 1px solid var(--line-color);
  border-radius: 4px;
  box-shadow: 0 2px 6px #0000001a, 0 0 0 1px #00000005;
}
div.actions a span {
  color: var(--font-focus);
  font-weight: 600;
}
div.actions a.more span {
  font-size: 12px;
}
div.actions > p {
  padding: 20px 15px;
  font-size: 12px;
  color: var(--font-small);
}
div.actions p > span {
  margin-left: 5px;
}
div.actions > div {
  display: flex;
  justify-content: space-between;
  padding: 18px 15px;
  border-bottom: 1px solid var(--line-color);
}
div.actions h3 {
  font-size: 16px;
  letter-spacing: .64px;
}
div.actions h3 + a span {
  color: var(--search-color);
}
div.actions ul {
  padding: 10px 0;
}
div.actions ul li {
  padding: 0 15px 10px;
  border-bottom: 1px dotted var(--line-color);
}
div.actions ul li:last-child {
  border: none;
}
div.actions ul li > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
div.actions ul li > div p {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 12px;
}
div.actions ul li > div i {
  display: block;
  content: "";
  margin-right: 10px;
  width: 40px;
  height: 40px;
  background: no-repeat center / cover;
  border-radius: 50%;
}
div.actions.gatetomo ul li > div i {
  margin: 0;
}
div.actions ul li > div i.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid #000;
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  line-height: 1em;
}
div.actions ul li > div s {
  display: block;
  width: 15px;
  height: 15px;
  background: url(../image/connect_arrow.svg) no-repeat center / 100%;
}
div.actions ul li > div s.join {
  background: url(../image/connect_join.svg) no-repeat center / 8px;
}
div.actions ul li > div time {
  font-weight: 600;
  font-size: 12px;
  color: var(--font-small);
}
div.actions ul li > p {
  padding: 0;
  font-size: 12px;
  color: var(--font-small);
}
div.actions.visit h5 {
  margin: 40px auto 20px;
  width: calc(100% - 30px);
  height: 1px;
  background: var(--line-color);
  position: relative;
}
div.actions.visit h5 span {
  padding: 0 20px 0 0;
  background: #fff;
  font-weight: 600;
  font-size: 12px;
  position: absolute;
  top: -10px;
}
div.actions.visit ul li > div {
  padding: 10px 0 0;
}
div.actions.visit ul li p > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 15px;
  color: #9d9d9f;
  font-weight: 600;
}
div.actions.visit ul li div > div {
  display: flex;
  align-items: center;
  color: #9d9d9f;
  font-weight: 600;
  font-size: 10px;
}
div.actions.visit ul li div > div u {
  font-size: 20px;
  text-decoration: none;
}
div.actions.visit ul li div > div div {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  padding: 0 10px;
}
div.actions.visit ul li div > div div:before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/home_action_ashiato.svg) no-repeat center / 100%;
}
div.dialog div.actions {
  margin: 35px 0 0;
  width: 100%;
  border: none;
}
div.dialog div.actions > p {
  border-top: 1px dotted var(--line-color);
}
div.dialog div.actions ul  {
  padding: 0;
  border-top: 1px dotted var(--line-color);
  border-bottom: 1px dotted var(--line-color);
}
div.dialog div.actions ul li {
  padding: 10px 16px;
}
div.dialog nav.tab {
  display: flex;
  gap: 20px 10px;
  flex-wrap: wrap;
  margin-top: 35px;
}
div.dialog nav.tab a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 1px solid #000;
  border-radius: 20px;
  font-size: 12px;
}
div.dialog nav.tab a.current {
  background: #efefef;
}
a.next {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  width: 100%;
  color: var(--search-color);
}
a.next::before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background: url(../image/next.svg) no-repeat center / 100%;
  position: relative;
  top: 1px;
}
div.dialog div.actions.visit {
  margin-top: 0;
}
div.dialog div.actions.visit ul {
  border-top: 0;
}
div.dialog div.actions.visit h5 {
  margin: 10px 0 30px;
  width: 100%;
}
div.dialog div.actions.visit h5:nth-of-type(n+2) {
  margin-top: 50px;
}
div.dialog div.actions.visit ul li {
  padding: 10px 0;
}
div.dialog div.actions.visit ul li:last-child {
  border-bottom: 1px dotted var(--line-color);
}
div.dialog div.actions.visit ul li > div {
  font-weight: 600;
  font-size: 12px;
}
div.dialog div.total {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  font-weight: 600;
  font-size: 12px;
  color: #999;
}
div.dialog div.total span:last-child {
  color: #000;
}
/*----------------------------------------------------------------------------
(F) news
------------------------------------------------------------------------------*/
div.news > p {
  padding: 20px 15px;
}
div.news ul {
  margin-top: 30px;
}
div.news ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
div.news ul li i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-right: 10px;
  width: 56px;
  min-width: 56px;
  height: 56px;
  border: 1px solid #000;
  border-radius: 50%;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
  color: #000;
}
div.news ul li p {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 12px;
  color: var(--search-color);
}
div.news ul li time {
  min-width: 60px;
  text-align: right;
  white-space: nowrap;
  color: var(--time-color);
  font-weight: 600;
  font-size: 12px;
}
/*----------------------------------------------------------------------------
(F) accepts
------------------------------------------------------------------------------*/
div.accepts {
  padding: 40px 18px;
}
div.accepts > p {
  padding: 30px 0;
  font-weight: 400;
  font-size: 13px;
}
div.accepts h3 {
  font-weight: 600;
  font-size: 20px;
}
div.accepts h3:nth-of-type(n+2) {
  margin-top: 60px;
}
div.accepts h5 {
  margin-top: 45px;
  height: 1px;
  background: var(--line-color);
  position: relative;
}
div.accepts ul + h5 {
  margin-top: 50px;
}
div.accepts h5 span {
  display: block;
  padding-right: 10px;
  background: var(--back-color);
  font-weight: 600;
  font-size: 14px;
  position: absolute;
  top: -10px;
}
div.accepts ul {
  margin-top: 30px;
}
div.accepts ul li {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px #0000001a, 0 0 0 1px #00000005;
}
div.accepts ul li:nth-child(n+2) {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px dotted var(--line-color);
}
div.accepts ul li > div:first-of-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px;
}
div.accepts ul li > div:first-of-type p {
  display: flex;
  align-items: center;
  padding-right: 10px;
}
div.accepts ul li > div:first-of-type p span span:first-of-type {
  display: block;
  font-weight: 600;
  font-size: 12px;
}
div.accepts ul li > div:first-of-type p span span:last-of-type {
  display: block;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  color: #999;
}
div.accepts ul li > div:first-of-type i {
  display: block;
  content: "";
  margin-right: 10px;
  width: 46px;
  min-width: 46px;
  height: 46px;
  background: no-repeat center / cover;
  border-radius: 50%;
}
div.accepts ul li > div:first-of-type div {
  display: flex;
  align-items: center;
  gap: 15px;
}
div.accepts ul li > div:first-of-type div a {
  width: 30px;
  height: 30px;
  background: no-repeat center / 100%;
}
div.accepts ul li > div:first-of-type div a.profile {
  background-image: url(../img2/icon_message.svg);
  background-size: 80%;
  background-position: top 5px center;
}
div.accepts ul li > div:first-of-type div a.meishi {
  background-image: url(../img2/icon_meishi.svg);
}
div.accepts ul li > p {
  font-size: 12px;
}
div.accepts ul li div.action {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
}
div.accepts ul li div.action a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px;
  max-width: 200px;
  height: 50px;
  border: 1px solid var(--search-color);
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  color: var(--search-color);
}
div.accepts ul li div.action a.reject,
div.accepts ul li div.action a.remove {
  border-color: #d50000;
  color: #d50000;
}
div.accepts ul li div.action a.status {
  border-color: #0f8e00;
  color: #0f8e00;
}
/*----------------------------------------------------------------------------
(F) complist
------------------------------------------------------------------------------*/
div.complist {
  padding: 0;
}
div.complist ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
div.complist ul li {
  display: block;
  width: calc((100% - 40px) / 3);
  border: 1px solid var(--line-color);
  border-radius: 4px;
  font-size: 12px;
  color: #000;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 2px 6px #0000001a, 0 0 0 1px #00000005;
}
div.complist ul.swiper-wrapper {
  flex-wrap: nowrap;
  gap: 0;
}
div.complist ul.swiper-wrapper li {
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
}
div.complist ul.swiper-wrapper li div.attr {
  height: 100%;
}
div.complist div.title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px;
  min-height: 40px;
  background: var(--content-back);
  border-radius: 6px 6px 0 0;
  font-weight: 500;
  line-height: 15px;
}
div.complist div.title div {
  display: flex;
  align-items: center;
  gap: 15px;
}
div.complist div.title div a {
  width: 20px;
  height: 20px;
  background: no-repeat center / 100%;
  cursor: pointer;
  mask-size: cover;
  mask-repeat: no-repeat;
}
div.complist div.title div a.met {
  background-image: url(../img2/image_1475.svg);
  background: var(--search-color);
  mask-image: url(../img2/image_1475.svg);
}
div.complist div.title div a.met.has {
  background: #0f8e00;
}
div.complist div.title div a.listup {
  background-image: url(../img2/icon_listup.svg);
  background: var(--search-color);
  mask-image: url(../img2/icon_listup.svg);
}
div.complist div.title div a.listup.has {
  background: #0f8e00;
}
div.complist div.title div a.connect {
  background-image: url(../img2/icon_meishi.svg);
  background: var(--search-color);
  mask-image: url(../img2/icon_meishi.svg);
  width: 24px;
}
div.complist div.name {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 10px;
  border-bottom: 1px solid var(--line-color);
}
div.complist div.name i {
  min-width: 50px;
  height: 50px;
  background: no-repeat center / cover;
  border-radius: 50%;
}
div.complist div.name div {
  display: flex;
  flex-direction: column;
}
div.complist div.name div:nth-child(2) {
  width: 100%;
}
div.complist div.name div:nth-child(2) span:last-child {
  font-weight: 500;
  font-size: 15px;
}
div.complist div.name div:nth-child(3) {
  align-items: center;
  min-width: 110px;
}
div.complist div.name div:nth-child(3) span:first-child {
  display: flex;
  align-items: center;
  margin: 0 0 2px;
}
div.complist div.name div:nth-child(3) span:first-child::before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img2/area.svg) no-repeat center / 120%;
}
div.complist div.name div:nth-child(3) span:last-child {
  width: 100%;
  padding: 2px 0;
  background: var(--content-back);
  border: 1px solid var(--line-color);
  border-radius: 3px;
  text-align: center;
}
div.attr {
  display: flex;
  flex-direction: column;
  padding: 5px 20px 25px;
  border-bottom: 1px solid var(--line-color);
}
div.attr label {
  display: flex;
  margin: 15px 0 5px;
}
div.attr label::before {
  display: block;
  content: "";
  margin-right: 5px;
  width: 20px;
  height: 20px;
  background: url(../img2/area.svg) no-repeat center / 120%;
}
div.attr span {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
div.attr span i {
  background: var(--content-back);
  border: 1px solid var(--line-color);
  border-radius: 3px;
  padding: 2px 10px;
  font-style: normal;
}
div.complist div.score {
  display: flex;
  align-items: center;
  border-radius: 0 0 6px 6px;
  padding: 15px 10px;
}
div.complist div.score div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--content-color);
}
div.complist div.score i {
  display: block;
  content: "";
  width: 1px;
  height: 25px;
  background: var(--line-color);
}
div.complist div.score div b {
  margin-right: 7px;
  font-weight: 400;
  font-size: 30px;
  line-height: 30px;
}
/*----------------------------------------------------------------------------
(F) joblist
------------------------------------------------------------------------------*/
div.joblist {
  padding: 0;
}
div.joblist ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
div.joblist ul li {
  display: block;
  width: calc((100% - 40px) / 3);
  border: 1px solid var(--line-color);
  border-radius: 4px;
  font-size: 12px;
  color: #000;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 2px 6px #0000001a, 0 0 0 1px #00000005;
}
div.jobdetail ul li {
  width: 100%;
}
div.joblist ul.swiper-wrapper {
  flex-wrap: nowrap;
  gap: 0;
}
div.joblist ul.swiper-wrapper li {
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
}
div.joblist ul.swiper-wrapper li div.attr {
  height: 100%;
}
div.joblist div.title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 0 15px;
  min-height: 40px;
  background: var(--content-back);
  border-radius: 6px 6px 0 0;
  font-weight: 500;
  line-height: 15px;
}
div.joblist div.title div:first-child span {
  margin-right: 10px;
  padding: 0 4px;
  background: #000;
  color: #fff;
}
div.joblist div.title div:last-child a.check {
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img2/icon_listup.svg) no-repeat center / 100%;
  cursor: pointer;
  background: var(--search-color);
  mask-image: url(../img2/icon_listup.svg);
  mask-size: cover;
  mask-repeat: no-repeat;
}
div.joblist div.title div:last-child a.check.on {
  background: #13af00;
}
div.joblist div.time {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 50px;
  padding: 30px 15px 0;
  font-size: 12px;
}
div.joblist div.time span {
  white-space: nowrap;
}
div.joblist div.time div {
  font-weight: 600;
  text-align: right;
}
div.joblist div.time div.pv {
  display: flex;
  font-weight: 500;
}
div.joblist div.time div.pv::before {
  content: "";
  margin-right: 5px;
  width: 20px;
  height: 20px;
  background: url(../img2/login_pass_open.svg) no-repeat center / 100%;
  
}
div.joblist div.name {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 15px;
}
div.joblist div.name i {
  min-width: 50px;
  height: 50px;
  background: no-repeat center / cover;
  border-radius: 50%;
}
div.joblist div.name div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
div.joblist div.name span.new {
  padding: 4px;
  background: #000;
  color: #fff;
  font-size: 12px;
  line-height: 1em;
}
div.joblist div.name span:last-child {
  font-size: 15px;
  line-height: 30px;
}
div.joblist div.details {
  padding: 0 15px;
}
div.joblist div.attr {
  margin-top: 10px;
  padding: 25px 15px;
  border-top: 1px solid var(--line-color);
  border-bottom: none;
}
div.joblist div.attr span i {
  background: initial;
  border: initial;
  margin-right: 10px;
  padding: 0;
  font-size: inherit;
}
div.joblist dl:nth-child(n+2) {
  margin-top: 20px;
}
div.joblist dl dt {
  font-weight: 600;
}
div.joblist dl dt time {
  margin-left: 20px;
  color: var(--time-color);
  font-weight: 500;
  font-size: 11px;
}
div.joblist dl dd dl dt {
  font-weight: 500;
}
div.joblist dl dd dl:not(.uncheck) dd {
  padding-left: 1em;
}
div.joblist dl dd dl:not(.uncheck) dd::before {
  content: "・";
}
div.joblist div.entries {
  padding: 20px 15px 30px;
}
div.joblist div.entries p {
  color: #999;
}
div.joblist div.entries div {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
div.joblist div.entries div a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 40px;
}
div.joblist div.entries div a.message {
  background: #fff;
  border: 1px solid var(--action-border);
  color: var(--action-border);
}
div.joblist div.entries div a.accept {
  background: #fff;
  border: 1px solid var(--search-color);
  color: var(--search-color);
}
div.joblist div.target {
  background: #f5f5f5;
  border-top: 1px solid var(--line-color);
}
div.joblist div.target > label {
  display: block;
  padding: 30px 15px 10px;
}
div.joblist div.target div.prof {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}
div.joblist div.target div.prof div.name {
  padding: 0 10px 0 0;
}
div.joblist div.target div.prof div.name span:first-child {
  line-height: 14px;
}
div.joblist div.target div.prof div.name span:last-child {
  font-size: 18px;
}
div.joblist div.target div.prof a.meishi {
  display: block;
  width: 30px;
  height: 30px;
  background: no-repeat center / 100%;
  background-image: url(../img2/icon_meishi.svg);
}
div.joblist div.target div.score {
  display: flex;
  align-items: center;
  border-radius: 0 0 6px 6px;
  padding: 15px 0;
  font-size: 11px;
}
div.joblist div.target div.score div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--content-color);
}
div.joblist div.target div.score div b {
  margin-right: 7px;
  font-weight: 400;
  font-size: 30px;
  line-height: 30px;
}
div.joblist div.target div.score i {
  display: block;
  content: "";
  width: 1px;
  height: 25px;
  background: var(--line-color);
}
/*----------------------------------------------------------------------------
header
------------------------------------------------------------------------------*/
header ul {
  display: flex;
  border-bottom: 1px solid var(--line-color);
}
header ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 117px;
  height: 32px;
  background: var(--button-back);
  border: 1px solid var(--line-color);
  border-radius: 3px 3px 0 0;
  font-size: 11px;
  font-weight: 600;
  position: relative;
  top: 1px;
  cursor: pointer;
}
header ul li:nth-child(n+2) {
  margin-left: 3px;
}
header ul li.current {
  background: #fff;
  border-bottom: none;
  color: var(--font-bold);
  font-weight: 800;
}
header ul li::before {
  display: block;
  margin: 2px 3px 0 0;
  content: "";
  width: 14px;
  height: 14px;
  background: no-repeat center / 100%;
}
header ul li.home::before {
  background-image: url(../image/pc_tab_home.svg);
}
header ul li.home.current::before {
  background-image: url(../image/pc_tab_home_on.svg);
}
header ul li.search_comp::before {
  background-image: url(../image/pc_tab_company.svg);
}
header ul li.search_comp.current::before {
  background-image: url(../image/pc_tab_company_on.svg);
}
header ul li.search_job::before {
  background-image: url(../image/pc_tab_job.svg);
}
header ul li.search_job.current::before {
  background-image: url(../image/pc_tab_job_on.svg);
}
header ul li.request_job::before {
  background-image: url(../image/pc_tab_request.svg);
}
header ul li.request_job.current::before {
  background-image: url(../image/pc_tab_request_on.svg);
}
header ul li.message::before {
  background-image: url(../image/pc_tab_message.svg);
}
header ul li.message.current::before {
  background-image: url(../image/pc_tab_message_on.svg);
}
header ul li.profile::before {
  background-image: url(../image/pc_tab_profile.svg);
}
header ul li.profile.current::before {
  background-image: url(../image/pc_tab_profile_on.svg);
}
/*----------------------------------------------------------------------------
popup
------------------------------------------------------------------------------*/
div.popup {
  display: flex;
  flex-direction: column;
  padding: 50px;
  width: 560px;
  max-width: calc(100% - 20px);
  height: auto;
  border: 1px solid var(--line-color);
  border-radius: 10px;
  box-shadow: 0 0 2px 5px #e5e5e53d;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}
div.popup h5 {
  margin-bottom: 30px;
  font-weight: 700;
  font-size: 30px;
  line-height: 1em;
  text-align: center;
}
div.popup p {
  margin-bottom: 30px;
  font-size: 15px;
}
div.popup a.button {
  margin: 0 auto;
  width: 100px;
  height: 45px;
}
div.popup div {
  display: flex;
  justify-content: space-around;
  margin: 0 auto 30px;
  width: 300px;
  max-width: 100%;
}
div.popup div input {
  padding: 10px;
  width: 50px;
  border: 1px solid var(--line-color);
  border-radius: 6px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  outline: none;
}
div.popup form {
  margin: 0 0 30px;
}
div.popup form ul li {
  display: flex;
  align-items: center;
}
div.popup form ul li:nth-child(n+2) {
  margin-top: 10px;
}
div.popup form ul li label {
  min-width: 120px;
}
/*----------------------------------------------------------------------------
aside
------------------------------------------------------------------------------*/
aside ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 33px;
}
aside ul li {
  display: flex;
  align-items: center;
  width: 23px;
  height: 23px;
  background: no-repeat center / 23px 23px;
  cursor: pointer;
  position: relative;
}
aside ul li:nth-child(n+2) {
  margin-left: 10px;
}
aside ul li.trace {
  background-image: url(../image/pc_header_log.svg);
}
aside ul li.notify {
  background-image: url(../image/pc_header_alert.svg);
}
aside ul li.config {
  background-image: url(../image/pc_header_setting.svg);
}
aside ul:note(.link) li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  background: #ee2838;
  border-radius: 15px;
  color: #fff;
  font-weight: 700;
  font-size: 8px;
  position: absolute;
  top: 0;
  right: -5px;
}
aside ul.link {
  flex-direction: column;
  padding: 15px 0 0 10px;
  height: auto;
}
aside ul.link li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  width: 100%;
  height: auto;e
  min-height: 42px;
  background: var(--main-color);
  border: 1px solid var(--button-line);
  border-radius: 3px;
  color: #000;
  font-weight: 700;
  font-size: 13px;
  line-height: 15px;
}
aside ul.link li:nth-child(n+2) {
  margin: 10px 0 0 0;
}
aside ul.link li:hover {
  opacity: 0.8;
}
aside ul li.talk::before {
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  background: url(../image/talk.svg) no-repeat center;
}

/*----------------------------------------------------------------------------
form
------------------------------------------------------------------------------*/
hr {
  height: 1px;
  background: var(--line-color);
  border: none;
}
button, a.button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  min-width: 76px;
  height: 26px;
  background: var(--button-back2);
  border: 1px solid var(--button-back2);
  color: var(--button-font2);
  border-radius: 2px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  outline: none;
}
button.disable, a.button.disable {
  background: #ccc;
  border-color: #bbb;
  color: #919191;
  cursor: default;
}
button.remove, a.button.remove {
  color: #0f8e00 !important;
  border-color: #0f8e00 !important;
}
button:hover, a.button:hover {
  opacity: 0.8;
}
a.button.edit::after {
  display: flex;
  content: "";
  margin-left: 5px;
  width: 12px;
  height: 12px;
  background: url(../image/pc_btn_editing.svg) no-repeat center / 100%;
}
a.button.add::after {
  display: flex;
  content: "";
  margin-left: 5px;
  width: 12px;
  height: 12px;
  background: url(../image/pc_btn_editing.svg) no-repeat center / 100%;
}
input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="number"] {
  padding: 6px 15px;
  width: 100%;
  max-width: 100%;
  min-height: 34px;
  background: #F8F8F8;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .56px;
  outline: none;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="date"]:hover, input[type="email"]:hover, input[type="number"]:hover {
  border: 1px solid #97A8FF;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="email"]:focus, input[type="number"]:focus {
  border: 1px solid #999;
}
input[type="date"] {
  width: 200px;
}
input + span {
  margin-left: 10px;
}
.date-range {
  display: flex;
  align-items: center;
}
.date-range input + span {
  margin: 0 10px;
  width: 10px;
}
input[type="radio"] {
  display: none;
}
input[type="radio"] + label {
  display: inline-block;
  margin: 0 20px 0 10px;
  padding-left: 20px;
  min-width: 80px;
  position: relative;
}
input[type="radio"] + label:before {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid #bbb;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 0;
}
input[type="radio"]:checked + label:after {
  display: block;
  content: "";
  width: 8px;
  height: 8px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: 3px;
}
input::placeholder {
  color: #ccc;
}
textarea::placeholder {
  color: #ccc;
}
button {
  margin-top: 15px;
  width: 160px;
  height: 60px;
}
textarea {
  width: 100%;
  padding: 10px;
  background: #F8F8F8;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 20px;
  outline: none;
  resize: vertical;
}
textarea:hover {
  border: 1px solid #97A8FF;
}
textarea:focus {
  border: 1px solid #999;
}
select {
  width: 100%;
  padding: 6px 15px;
  background: #F8F8F8;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  appearance: base-select;
  outline: none;
}
select:hover {
  border: 1px solid #97A8FF;
}
select:focus {
  border: 1px solid #999;
}
::picker(select) {
  border-radius: 6px;
  background: #fff;
}
.pager a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 150px;
  height: 35px;
  background: var(--search-color);
  border-radius: 6px;
  color: #fff;
}
.pager a span {
  font-family: monospace;
  font-weight: bold;
  font-size: 16px;
  position: relative;
  top: 1px;
}
.pager a:hover {
  opacity: 0.8;
}
form.upload {
  display: none;
}
form {
  padding: 0 10px 20px;
}
form div.addr {
  display: flex;
  flex-direction: column;
}
form div.addr > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  width: 100%;
}
form div.addr > div:first-child span {
  width: 30px;
}
form div.addr > div:first-child input {
  margin-top: 0px;
  width: 100px;
  text-align: center;
}
form div.addr select {
  margin: 5px 10px 0 0;
  min-width: 130px;
  max-width: 130px;
}
form div.addr input {
  margin-top: 5px;
  width: 100%;
}
form p.caution {
  padding: 20px 0 0;
  color: #ff0000;
}
form h1 {
  padding: 20px 0 5px;
  font-size: 13px;
}
div.selector {
  display: none;
  padding: 20px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-color);
  position: absolute;
  top: 50px;
  left: 0;
}
/*----------------------------------------------------------------------------
dialog
------------------------------------------------------------------------------*/
div.dialog {
  width: 800px;
  max-width: calc(100% - 40px);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
div.dialog > div {
  width: 100%;
  height: auto;
  border: 1px solid var(--line-color);
  border-radius: 3px;
  box-shadow: 0 0 20px 1px #fff;
}
div.dialog div.task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 50px;
  background: #0E0E0E;
  color: #fff;
}
div.dialog div.task i {
  display: none;
}
div.dialog div.task hr {
  display: none;
}
div.dialog div.task a {
  font-weight: 800;
  font-size: 16px;
}
div.dialog div.task a.back {
  display: none;
}
div.dialog div.task a.close:hover {
  font-size: 18px;
}
div.dialog div.main {
  min-height: 100px;
  background: #fff;
}
div.dialog div.content {
  max-height: calc(100vh - 240px);
  background: #fff;
  overflow-y: auto;
}
div.dialog div.content.edit2 {
  padding: 20px;
  height: auto;
}
div.dialog div.content > div {
  padding: 30px;
}
div.dialog div.content > p {
  padding: 0 50px 20px;
  color: var(--search-color);
}
div.dialog div.content ul.list {
  padding-top: 20px;
}
div.dialog div.content ul.list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 !important;
  border-top: 1px solid var(--line-color);
  width: 100%;
  min-height: 50px;
  font-weight: 300;
  position: relative;
}
div.dialog div.content ul.list li:last-child {
  border-bottom: 1px solid var(--line-color);
}
div.dialog div.content ul.list li i {
  padding: 0 10px;
  color: var(--line-color);
  font-style: normal;
}
div.dialog div.content ul.list li span {
  width: 60px;
  border: 1px solid #777;
  font-weight: 300;
  font-size: 13px;
  text-align: center;
  position: absolute;
  top: 14px;
  right: 10px;
}
div.dialog div.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 40px 0 20px;
  padding: 0;
  background: none;
  position: relative;
}
div.dialog div.content.edit2 div.bottom {
  margin-bottom: 0;
}
div.dialog div.bottom.center {
  justify-content: center;
}
div.dialog div.bottom + a.button {
  margin-top: 30px;
  height: 50px;
  background: var(--search-color);
  color: #fff;
}
div.dialog a.button {
  width: auto;
  min-width: 180px;
  height: 38px;
  font-weight: 500;
  background: #fff;
  border: 1px solid var(--search-color);
  border-radius: 50px;
  color: var(--search-color);
}
div.dialog div.bottom a.button {
  height: 50px;
}
div.dialog div.bottom.single a.button {
  width: 100%;
}
div.dialog div.content.search + div.bottom {
  padding: 30px 20px 0;
  height: 90px;
}
div.dialog a.button.reset {
  border: 1px solid var(--action-color);
  color: var(--action-color);
}
div.dialog a.button.cancel {
  background: #eee;
  border: 1px solid var(--line-color);
  color: var(--button-font);
}
div.dialog a.button.exit {
  background: #eee;
  border: none;
  color: var(--notice-color);
}
div.dialog a.link {
  font-size: 12px;
  color: var(--search-color);
}
div.dialog div.content dt a.select {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 30px;
  height: 30px;
  color: var(--button-line);
  font-family: cursive;
  font-weight: 400;
  font-size: 20px;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
div.dialog div.content.regist ul {
  margin: 0;
}
div.dialog div.content.regist ul li {
  margin: 0;
  padding: 20px 0;
  min-height: initial;
  border-bottom: 1px solid var(--line-color);
}
div.dialog div.content.regist ul li:last-child {
  border: none;
}
div.dialog div.content.regist ul li > label {
  min-width: 160px;
}
div.dialog div.content.regist ul li > div {
  gap: 0;
  min-height: 35px;
}
div.dialog div.content.regist ul li > div.file {
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-height: 100px;
}
div.dialog div.content.regist ul li > div.file img {
  max-width: 200px;
  max-height: 100px;
}
div.dialog div.content.regist ul li > div.file a {
  max-width: 100px;
}
div.dialog div.content dl {
  display: flex;
  align-items: flex-start;
  padding: 20px 0;
  position: relative;
}
div.dialog div.content dl:last-child {
  border: none;
}
div.dialog div.content dl dt {
  min-width: 250px;
}
div.dialog div.content dl dt span {
  display: flex;
  align-items: center;
}
div.dialog div.content dl dt span span {
  font-weight: 400;
  font-size: 12px;
  color: #d33232;
}
div.dialog div.content dl dt span i {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #d33232;
}
div.dialog div.content dl dt span s {
  margin-left: 10px;
  padding: 0 5px;
  border: 1px solid var(--line-color);
  font-weight: 300;
  font-size: 11px;
  text-decoration: none;
  line-height: 15px;
}
div.dialog div.content dl dt a.editlink {
  padding: 2px 10px;
  border: 1px dashed var(--search-color);
  border-radius: 4px;
  font-size: 13px;
  color:  var(--search-color);
  position: relative;
  top: 20px;
}
div.dialog div.content dl dd {
  width: 100%;
}
div.dialog div.content dl dd div.row {
  display: flex;
  align-items: center;
  gap: 10px;
}
div.dialog div.content dl dd div.clone:nth-child(n+2) {
  margin-top: 10px;
}
div.dialog div.content dl dd div.term div:nth-child(n+2) {
  margin-top: 5px;
}
div.dialog div.content dl dd div.nest {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
div.dialog div.content p.alert {
  font-size: 12px!important;
  color: var(--notice-color)!important;
}
/*----------------------------------------------------------------------------
dialog step
------------------------------------------------------------------------------*/
div.dialog div.step a.resume {
  display: block;
  width: calc(100% - 160px);
  height: 50px;
  line-height: 50px;
  background: #fff;
  border: 1px solid var(--search-color);
  border-radius: 50px;
  font-weight: 400;
  text-align: center;
  color: var(--search-color);
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}
div.dialog div.step div.content {
  padding: 30px;
  background: #f5f5f6;
}
div.dialog div.step div.tabpage {
  margin: 30px 0;
  padding-bottom: 50px;
}
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);
}
div.dialog input[type="checkbox"] {
  display: none;
}
div.dialog input[type="checkbox"] + label {
  display: flex;
  align-items: center;
  font-weight: 500;
  width: 100%;
  line-height: 35px;
  color: var(--font-color);
  position: relative;
}
div.dialog input[type="checkbox"] + label::before {
  display: block;
  margin-right: 10px;
  content: "";
  width: 20px;
  min-width: 20px;
  height: 20px;
  background: url(../img2/check_off.svg) no-repeat top 1px center / 100%;
}
div.dialog input[type="checkbox"]:checked + label::before {
  background: url(../img2/check_on.svg) no-repeat top 1px center / 100%;
}
div.dialog input[type="checkbox"] + label span {
  position: absolute;
  right: 10px;
}
.license > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 0;
}
.license > div.flow {
  flex-direction: row;
  flex-wrap: wrap;
}
.license > div > span {
  display: block;
  padding: 20px 0 10px;
  width: 100%;
  border-top: 1px solid var(--line-color);
  font-weight: 600;
  font-size: 13px;
  color: #000;
}
.license label {
  margin: 7px 0!important;
  width: auto!important;
  line-height: 15px!important;
}
.license > div.flow label {
  margin: 10px 15px 10px 0 !important;
}
.area label {
  line-height: 30px!important;
  width: auto!important;
}
.area > div:nth-child(1) {
  display: flex;
  justify-content: flex-start;
  padding: 10px 0;
}
.area > div:nth-child(1) label {
  font-weight: 700!important;
}
.area > div:nth-child(n+2) {
  padding: 10px 0;
  border-top: 1px solid var(--line-color);
}
.area div.region {
  display: flex;
  justify-content: flex-start;
}
.area div.region label {
  font-weight: 400!important;
  font-weight: 700!important;
}
.area div.pref {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.area div.pref label {
  width: calc(100% / 4)!important;
}
div.dialog input[type="radio"] {
  display: none;
}
div.dialog input[type="radio"] + label {
  display: flex;
  align-items: center;
  margin: 0;
  padding-left: 30px;
  font-weight: 600;
  line-height: 35px;
  color: var(--font-color);
  position: relative;
}
div.dialog input[type="radio"] + label::before {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 50%;
  position: absolute;
  top: 12px;
  left: 4px;
}
div.dialog input[type="radio"]:checked + label::after {
  display: block;
  content: "";
  width: 6px;
  height: 6px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  top: 16px;
  left: 8px;
}
div.scores {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
div.scores input[type="radio"] + label {
  line-height: 20px;
}
div.scores input[type="radio"] + label::before {
  top: 4px;
}
div.scores input[type="radio"]:checked + label::after {
  top: 8px;
}
div.radio,
div.radio2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 10px;
}
div.radio2 input[type="radio"] + label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 5px;
  min-width: initial;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  color: var(--search-color);
  white-space: nowrap;
}
div.radio2.rate input[type="radio"] + label {
  max-width: 85px;
}
div.radio2 input[type="radio"]:checked + label {
  background: var(--search-color);
  color: #fff;
}
div.radio2 input[type="radio"] + label::before,
div.radio2 input[type="radio"]:checked + label::after {
  display: none;
}
.ui-widget {
  font-family: 'Noto Sans JP', sans-serif !important;
}
.ui-slider {
  margin: 10px 20px 25px;
}
.ui-slider-horizontal {
  height: 8px !important;
}
.ui-slider .ui-slider-range {
  background: #8c8c8c !important;
}
.ui-slider .ui-slider-handle {
  width: 20px !important;
  height: 20px !important;
  border-radius: 10px;
  top: -8px !important;
}
.ui-slider .ui-slider-handle::before {
  display: block;
  content: attr(data-value);
  min-width: 20px;
  height: 20px;
  font-weight: 400;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  color: var(--font-color);
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
}
.ui-slider .ui-slider-handle::after {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  background: var(--search-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
div.dialog form {
  padding: 0px 50px 30px;
}
/*
div.dialog ul li {
  display: flex;
  align-items: flex-start;
}
div.dialog ul li:nth-child(n+2) {
  margin-top: 20px;
}
div.dialog ul li label {
  min-width: 200px;
  line-height: 35px;
  font-weight: 600;
  font-size: 15px;
}
*/
div.dialog div.photo {
  display: flex;
  height: 130px;
  padding: 30px 0 0 10px;
}
div.dialog div.photo a.camera {
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img2/camera.svg) no-repeat center / 100%;
  position: absolute;
}
div.image {
  background: no-repeat center / cover;
}
div.dialog div.photo > div:first-child {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
}
div.dialog div.photo div.icon {
  margin-right: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
}
div.dialog div.photo div.icon a.camera {
  top: -20px;
  right: 0;
}
div.dialog div.photo div.icon + div {
  display: flex;
  flex-direction: column;
  padding: 5px;
  width: calc(100% - 50px);
}
div.dialog div.photo div.icon + div span:last-child {
  font-size: 18px;
  white-space: nowrap;
}
div.dialog div.photo > div:last-child {
  flex: 1;
  height: 100%;
  position: relative;
}
div.dialog div.photo > div:last-child a.camera {
  top: -20px;
  right: 10px;
}
div.dialog nav ul {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 30px 18px 20px;
}
div.dialog nav ul li {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  margin: 0!important;
  width: calc((100% - 20px) / 5);
  border: 1px dashed #fff;
  border-radius: 4px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #616161;
  cursor: pointer;
}
div.dialog nav ul li::before {
  display: block;
  content: "";
  margin: 0 auto 5px;
  width: 35px;
  height: 35px;
  background: url(../image/detail.svg) no-repeat center / 100%;
}
div.dialog nav ul li.meishi::before {
  background-image: url(../img2/icon_meishi.svg);
}
div.dialog nav ul li.score::before {
  background-image: url(../img2/icon_appeal.svg);
  background-size: 90%;
}
div.dialog nav ul li.achieve::before {
  background-image: url(../img2/icon_works.svg);
  background-size: 85%;
}
div.dialog nav ul li.pricelist::before {
  background-image: url(../img2/icon_kakaku.svg);
  background-size: 85%;
}
div.dialog nav ul li.qr::before {
  background-image: url(../img2/icon_qr.svg);
}
div.status {
  margin-top: 20px;
}
div.status ul {
  display: flex;
  align-items: center;
  padding: 0 10px;
}
div.status ul li {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center !important;
  margin: 0!important;
  font-size: 12px;
  font-weight: 600;
  color: #9d9d9f;
}
div.status ul li span:last-child {
  font-size: 24px;
  color: #000;
}

/*----------------------------------------------------------------------------
edit2
------------------------------------------------------------------------------*/
div.dialog .edit2 p {
  padding: 10px 0;
  font-size: 12px;
}
div.dialog .edit2 div.arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
div.dialog .edit2 div.arrow a.pagenext {
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img2/pagenext.svg) no-repeat center / 100%;
}
div.dialog .edit2 div.arrow a.pageprev {
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img2/arrow_prev.svg) no-repeat center / 100%;
}
div.dialog .edit2 div.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
div.dialog .edit2 div.title > label {
  font-size: 20px;
}
div.dialog .edit2 div.title > div {
  display: flex;
  gap: 5px;
}

div.dialog .edit2 dl {
  border: none!important;
}
div.dialog .edit2 dl dt {
  justify-content: space-between;
}
div.dialog .edit2 dl dt > div {
  display: flex;
  gap: 10px;
}
a.ico {
  display: block;
  width: 30px;
  min-width: 30px;
  height: 30px;
  background: no-repeat center / 18px;
}
a.ico:hover {
  opacity: 0.8;
}
a.ico.add {
  background-image: url(../img2/add.svg);
}
a.ico.delete {
  background-image: url(../img2/delete.svg);
}
a.ico.trash {
  background-image: url(../img2/trash.svg);
}
div.publics {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  white-space: nowrap;
}
div.switch input[type="checkbox"] + label,
div.publics input[type="checkbox"] + label {
  display: block;
  width: 40px;
  height: 18px;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
}
div.switch input[type="checkbox"] + label::before,
div.publics input[type="checkbox"] + label::before {
  display: block;
  content: "";
  width: 40px;
  height: 18px;
  background: none!important;
  border: 1px solid var(--line-color);
  border-radius: 10px;
  box-sizing: border-box;
}
div.switch input[type="checkbox"] + label::after,
div.publics input[type="checkbox"] + label::after {
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  background: var(--line-color);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 3px;
  transition: 0.5s;
}
div.switch input[type="checkbox"]:checked + label::after,
div.publics input[type="checkbox"]:checked + label::after {
  background: var(--search-color);
  left: 23px;
}
div.passwd {
  position: relative;
}
div.passwd input + a {
  display: block;
  width: 35px;
  height: 35px;
  background: url(../img2/login_pass.svg) no-repeat center / 18px;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 1;
}
div.passwd input[type="text"] + a {
  background-image: url(../img2/login_pass_open.svg);
}
div.text {
  position: relative;
}
div.text.w100 {
  width: 100%;
}
div.text input + a {
  display: block;
  width: 30px;
  height: 30px;
  background: url(../img2/icon_batu.svg) no-repeat center / 16px;
  position: absolute;
  top: 2px;
  right: 4px;
}
div.text input + a:hover {
  opacity: 0.8;
}
div.dialog .edit2 div.photo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  padding: 5px;
  width: 100%;
  height: 120px;
  border: 1px dashed var(--line-color);
  border-radius: 6px;
  position: relative;
}
div.dialog .edit2 div.photo img {
  max-height: 100%;
}
div.dialog .edit2 div.photo a {
  display: block;
  width: 20px;
  height: 20px;
  background: url(../image/attach.svg) no-repeat center / 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 1;
}
div.dialog .edit2 div.photo a:hover {
  opacity: 0.8;
}
div.preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  color: #999;
}
div.preview a {
  display: block;
  margin-left: 10px;
  min-width: 48px;
  min-height: 48px;
  background: url(../image/preview.svg) no-repeat center / 100%;
}
div.preview a:hover {
  opacity: 0.8;
}
/*----------------------------------------------------------------------------
config
------------------------------------------------------------------------------*/
div.dialog .config {
  color: #000;
}
div.dialog .config form > p {
  padding: 30px 0 10px;
  font-size: 12px;
}
div.dialog .config form > p.notice {
  padding: 10px;
  background: #eee;
}
div.dialog .config form > p.notice span {
  font-weight: 500;
  color: var(--notice-color);
}
div.dialog .config form > small {
  display: block;
  padding: 15px;
  border: 1px solid var(--notice-color);
  font-size: 12px;
  color: var(--notice-color);
}
div.dialog .config form > small span {
  font-weight: 500;
}
div.logo {
  margin: 10px 0 10px;
  width: 100%;
  height: 100px;
  background: url(../image/logo.svg) no-repeat center / 50%;
}
div.dialog .config form div.caution {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 0 0px;
  width: 100%;
  font-weight: 500;
  font-size: 15px;
}
div.dialog .config form div.caution::before {
  display: block;
  content: "";
  width: 60px;
  height: 60px;
  background: url(../image/caution.svg) no-repeat center / 50px;
}
div.dialog .config form div.confirm {
  margin: 30px 0 0px;
  padding: 5px 0;
  background: #eee;
}
div.dialog .config form div.confirm label {
  justify-content: center!important;
  font-size: 12px!important;
  color: var(--notice-color)!important;
}
div.dialog .config form h1 {
  padding: 20px 0 10px;
  font-weight: 600;
  font-size: 14px;
}
div.dialog .config form h1 + p {
  padding: 0 0 30px;
  font-weight: 500;
}
div.dialog .config form h2 {
  display: flex;
  padding: 0 0 10px;
  font-size: 14px;
}
div.dialog.howto .config form h2::before {
  display: block;
  content: "";
  margin-right: 5px;
  width: 20px;
  height: 20px;
  background: url(../img2/howto.svg) no-repeat center / 100%;
  position: relative;
  top: 1px;
}
div.dialog .config form h2 + p {
  padding: 0 0 30px;
  font-weight: 500;
}
div.dialog .config form h3 {
  display: flex;
  padding: 20px 0 10px;
  font-size: 13px;
}
div.dialog .config form h3 + p {
  padding: 0 0 20px;
}
div.dialog .config form h3 + p + a.button {
  margin-bottom: 20px;
}
div.dialog .config form menu {
  display: inline-block;
  margin: 10px 0 0;
  padding: 15px 25px 15px 15px;
  background: #eee;
  color: var(--search-color);
}
div.dialog .config form menu ul {
  list-style: none;
}
div.dialog .config form menu ul li {
  padding: 3px 0;
  font-size: 12px;
  cursor: pointer;
}
address {
  font-style: normal;
  font-size: 12px;
}
address span {
  display: flex;
  font-weight: 600;
  font-size: 15px;
}
address span:before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img2/tel.svg) no-repeat center / 100%;
  position: relative;
  top: 1px;
}
div.dialog .config div.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 45px 0 0;
}
div.dialog .config div.title a.editlink {
  padding: 2px 10px;
  font-size: 13px;
  color: var(--search-color);
}
div.dialog .config div.title > label {
  font-size: 20px;
}
div.dialog .config.search div.title > label {
  display: flex;
  align-items: center;
}
div.dialog .config.search div.title > label:before {
  display: block;
  content: "";
  width: 30px;
  height: 30px;
  background: url(../image/area.svg) no-repeat center / 30px;
}
div.dialog .config dl {
  border: none!important;
}
div.checked label {
  display: block;
  margin: 30px 0 10px;
  width: 100%;
  height: 1px;
  background: var(--line-color);
  position: relative;
}
div.checked label span {
  display: block;
  padding: 0 10px 0 0;
  max-width: calc(100% - 50px);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  position: absolute;
  top: -10px;
  left: 0;
}
div.checked dl {
  padding: 10px 0;
}
div.checked dl dt {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 30px!important;
  font-weight: 600;
  font-size: 13px;
}
div.checked.group dl dt {
  margin: 20px 0 20px;
  padding: 0 !important;
  width: 100%;
  height: 1px;
  background: var(--line-color);
  position: relative;
}
div.checked.group dl dt span {
  display: block;
  padding: 0 10px 0 0;
  max-width: calc(100% - 50px);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  position: absolute;
  top: -10px;
  left: 0;
}
div.checked dl dd {
  display: flex;
  padding: 0 25px;
  font-size: 12px;
  line-height: 30px;
}
div.checked dl dd:not(.text):before {
  display: block;
  content: "";
  width: 30px;
  height: 30px;
  background: url(../img2/checked.svg) no-repeat center / 20px;
}
div.checked dl dd.off:before {
  background: none;
}
div.nest {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
div.nest.border {
  height: 35px;
  padding: 0 10px;
  border: 1px solid var(--line-color);
  border-radius: 6px;
}
div.nest a {
  display: block;
  width: 20px;
  height: 20px;
  background: url(../image/arrow_right.svg) no-repeat center / 100%;
}
div.nest a.selector {
  transform: rotate(90deg);
}
div.notice {
  margin: 20px 0;
  padding: 15px;
  background: #f3f3f3;
  color: #9d9d9f;
}
div.notice span {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #000;
}
div.chart {
  margin: 0 auto;
  max-width: 400px;
}
div.chart + div.score {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  font-size: 12px;
  line-height: 30px;
  color: #9d9d9f;
}
div.chart + div.score span:last-child {
  font-size: 30px;
  color: #000;
}
div.dialog a.logout {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background: #e1e1e1;
  font-weight: 700;
  color: var(--search-color);
}
div.dialog form > button.accept,
div.dialog form a.accept {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  width: 100%;
  height: 50px;
  background: #2379ff;
  border: 1px solid #2379ff;
  border-radius: 4px;
  color: #fff;
}
div.dialog form > button.accept {
  margin-top: 35px;
}
div.dialog form div.button {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
div.dialog form div.button a,
div.dialog form div.button button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  padding: 0 10px;
  width: auto;
  max-width: 300px;
  height: 50px;
  background: #fff;
  border: 1px solid var(--search-color);
  border-radius: 0;
  color: var(--search-color);
  font-weight: 500;
  font-size: 14px;
  white-space: pre-wrap;
}
div.dialog form div.button a.cancel {
  border-color: var(--action-color);
  color: var(--action-color);
}
/*----------------------------------------------------------------------------
native dialog
------------------------------------------------------------------------------*/
dialog {
  padding: 30px;
  width: 90%;
  border: 1px solid var(--line-color);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
dialog h6 {
  margin-bottom: 25px;
  font-weight: 600;
  font-size: 15px;
}
dialog p {
  font-size: 13px;
}
dialog footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 40px;
  margin-top: 25px;
  position: initial;
}
/*----------------------------------------------------------------------------
industry
------------------------------------------------------------------------------*/
div.industry div.a {
  padding: 40px 0 20px;
  border-bottom: 1px solid var(--line-color);
  font-weight: 600;
}
div.industry div.b {
  margin-top: 10px;
  font-weight: 600;
  font-size: 13px;
}
div.industry div.c {
  padding: 0 0 0 15px;
  font-weight: 400;
  font-size: 12px;
}
div.industry label {
  padding: 5px 0;
  line-height: 1.2em!important;
  font-weight: inherit!important;
  font-size: inherit!important;
}
/*----------------------------------------------------------------------------
area
------------------------------------------------------------------------------*/
div.area div.r {
  margin-top: 10px;
  padding: 10px;
  background: #fcf4be;
  font-weight: 600;
  width: 100%;
  line-height: 30px;
  color: var(--font-color);
}
div.area div.r:first-of-type,
div.license div.c:first-of-type {
  margin-top: 0;
}
div.area div.p div,
div.license div.l div {
  margin: 2px 0px;
  padding: 5px 45px;
  background: #fbf8e3;
}
div.addition > div {
  line-height: 1.2em;
  position: relative;
}
div.addition > div:nth-child(n+2) {
  margin-top: 10px;
}
div.addition > div span {
  display: inline-block;
  min-width: 70px;
}
div.addition a.remove {
  display: block;
  width: 23px;
  height: 23px;
  background: url(../image/remove2.svg) no-repeat center / 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
div.addition a.remove:hover {
  opacity: 0.8;
}
div.addition a + div {
  padding-left: 40px;
}
div.addition.machine {
  border: none!important;
}
div.addition.machine div.photo {
  margin: 0!important;
}
div.addition.machine div.photo div {
  padding: 30px 0 0;
}
div.addition div.photo a.remove {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
/*----------------------------------------------------------------------------
entry
------------------------------------------------------------------------------*/
div.entry {
  width: 100%;
}
div.entry h3 {
  padding: 20px 0;
  border-bottom: 2px solid #878789;
  font-size: 30px;
  line-height: 1;
  color: #000;
}
div.entry div.detail {
  margin: 50px auto;
  padding: 20px 50px;
  width: 800px;
  max-width: 100%;
  position: relative;
}

div.link {
  margin: 0 auto;
  width: 800px;
  max-width: 100%;
  border: 1px solid var(--line-color);
  border-radius: 3px;
}
div.link:nth-of-type(n+2) {
  margin-top: 50px;
}
div.link dl {
  display: flex;
  flex-direction: column;
}
div.link dl dt {
  padding: 10px 15px;
  background: #eee;
  border-bottom: 1px solid var(--line-color);
  color: #000;
}
div.link dl dd {
  padding: 15px;
}
div.link a.button {
  margin-bottom: 10px;
  width: 140px;
  height: 40px;
  color: #fff;
  background-color: var(--search-color);
  border-color: #e18400;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: initial;
}
div.link span {
  line-height: 2px;
}
div.link span.tel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 800;
  color: #000;
}
div.link span.tel::before {
  display: block;
  content: "";
  margin-right: 10px;
  width: 20px;
  height: 20px;
  background: url(../image/phone.svg) no-repeat center / 100%;
}
div.link span.tel span {
  font-weight: 400;
}
/*----------------------------------------------------------------------------
edit
------------------------------------------------------------------------------*/
div.edit {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line-color);
}
div.edit h3 {
  padding: 20px 0;
  border-bottom: 1px solid #878789;
  font-size: 20px;
  line-height: 1;
  color: #000;
}
div.edit ul {
  margin-top: 30px; 
}
div.edit ul li {
  display: flex;
  flex-direction: column;
}
div.edit ul li:nth-child(n+2) {
  margin-top: 20px;
}
div.edit ul li label {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background: rgb(238 238 238);
  border-radius: 3px;
  font-weight: 800;
  font-size: 14px;
  color: #000;
  position: relative;
}
div.edit .drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fbfbfb;
  border: 1px dashed #c8c8c8;
  overflow: hidden;
  position: relative;
}
div.edit .drop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
div.edit .drop > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
div.edit .drop a.button {
  padding: 5px;
  height: auto;
  background: rgb(238 238 238 / 84%);
  border: 1px solid var(--line-color);
  color: var(--button-font);
}
div.detail ul + div,
div.edit ul + div {
  display: flex;
  justify-content: space-between;
  margin: 0;
}
div.detail ul + div div {
  display: flex;
  justify-content: center;
  width: 100%;
}
div.detail ul + div a.button,
div.edit ul + div a.button {
  margin-top: 15px;
  width: 130px;
  height: 42px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: initial;
}
div.detail ul + div a.button.back,
div.edit ul + div a.button.back {
  background: #eee;
  border: 1px solid var(--line-color);
  color: var(--button-font);
}
/*----------------------------------------------------------------------------
filter
------------------------------------------------------------------------------*/
div.filter {
  display: flex;
  margin-right: 14px;
  padding-bottom: 10px;
}
div.filter div {
  width: 100%;
}
div.filter ul {
  display: flex;
  gap: 10px;
}
div.filter ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-size: 13px;
}
div.filter ul li select {
  width: 200px;
}
div.filter a {
  min-width: 80px;
}
div.filter a:nth-child(n+2) {
  border-left: 1px solid #9d9d9f;
}
div.filter a.link:hover,
div.filter a.link.current {
  text-decoration: underline;
}
div.filter + div.scroll {
  padding: 0;
  height: calc(100vh - 122px - 30px);
}
/*----------------------------------------------------------------------------
info
------------------------------------------------------------------------------*/
div.info {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  margin-top: 20px;
  padding: 20px;
  background: var(--button-back);
  border: 1px solid var(--line-color);
  border-radius: 6px;
}
/*----------------------------------------------------------------------------
profile
------------------------------------------------------------------------------*/
div.profile {
  min-height: 270px;
  border: 1px solid var(--line-color);
  position: relative;
}
div.profile > div:first-of-type {
  width: 100%;
  height: 120px;
  background: center / cover;
}
div.profile > div:last-of-type {
  position: relative;
}
div.profile > div:last-of-type > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 190px;
  position: absolute;
  top: -75px;
}
div.profile > div:last-of-type > div:first-child span:first-of-type {
  display: block;
  margin-top: 15px;
  font-weight: 800;
  font-size: 20px;
  color: #000;
}
div.profile > div:last-of-type > div:first-child span:last-of-type {
  display: block;
  height: 20px;
  margin-top: 2px;
  font-size: 13px;
}
div.profile > div:last-of-type > div:last-child {
  padding-left: 180px;
  width: 100%;
}
div.profile img {
  width: 150px;
  height: 150px;
  border: 3px solid #fff;
  border-radius: 150px;
  object-fit: cover;
}
div.profile p {
  padding: 15px 15px 15px 0;
  font-size: 14px;
  line-height: 1.8em;
}
div.profile a.edit {
  position: absolute;
  top: 10px;
  right: 20px;
}
/*----------------------------------------------------------------------------
detail
------------------------------------------------------------------------------*/
div.detail {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  padding: 15px 20px;
  width: 100%;
  background: #eee;
  border: 1px solid var(--line-color);
  position: relative;
}
div.detail h3 {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 2px solid #878789;
  font-weight: 800;
  font-size: 18px;
  line-height: 1em;
  color: #000;
}
div.detail h3::before {
  display: block;
  content: "";
  margin-right: 8px;
  width: 26px;
  height: 20px;
  background: url(../image/pc_icon_helmet.svg) no-repeat top 4px center / 100%;
}
a.edit {
  position: absolute;
  top: 17px;
  right: 20px;
}
div.detail > div {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  padding: 15px 20px;
  width: 100%;
  background: #fff;
}
div.detail > div h5 {
  padding: 5px 0 10px;
  border-bottom: 1px solid #c5c5c5;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
}
div.detail > div p {
  padding: 5px 0 0;
  font-size: 14px;
  line-height: 1.8;
}
div.detail ul {
  margin-top: 10px;
}
div.detail div + ul {
  margin-top: 20px;
}
div.detail ul li {
  display: flex;
}
div.detail ul li:nth-child(n+2) {
  margin-top: 2px;
}
div.detail ul li > label {
  display: flex;
  align-items: center;
  margin-right: 2px;
  padding: 10px;
  min-width: 170px;
  background: #fff;
}
div.detail ul li > div {
  display: flex;
  align-items: center;
  padding: 10px;
  width: 100%;
  background: #fff;
}
ul li div.license, ul li div.industry {
  display: flex;
  flex-direction: column;
  align-items: flex-start!important;
}
ul li div.license > div {
  display: flex;
}
ul li div.license > div label:first-child {
  margin-right: 10px;
  min-width: 120px;
  max-width: calc(100% - 50px);
}
ul li div.license > div label:last-child {
  width: 40px;
}
ul li div.industry span {
  display: flex;
}
ul li div.industry span.b {
  margin-left: 20px;
}
ul li div.industry span.c {
  margin-left: 40px;
}
ul li div.industry span::before {
  display: block;
  margin-right: 5px;
  content: "";
  width: 20px;
  height: 24px;
  background: url(../image/check_on.svg) no-repeat top 4px center / 18px;
}
div.select {
  display: flex;
  align-items: flex-start!important;
  justify-content: space-between!important;
  padding: 10px 0;
  width: 100%;
}
div.select > div {
  padding: 5px 10px 0 0;
  width: 100%;
  font-size: 15px;
  line-height: 24px;
  color: #000;
}
div.detail ul li > div.select a {
  margin-top: 4px;
}
div.select > div.license > div {
  display: flex;
  align-items: center;
}
div.select > div.license > div:nth-child(n+2) {
  margin-top: 10px;
}
div.select > div.license > div label {
  width: calc(100% - 130px);
}
div.select > div.license > div input {
  width: 80px;
  text-align: center;
}
div.detail ul li div.multi {
  flex-direction: column;
  align-items: flex-start;
}
div.detail ul li div.multi input:nth-child(n+2) {
  margin-top: 5px;
}
div.term > div {
  display: flex;
  align-items: center;
}
div.term select, div.term input {
  margin: 0 10px;
  width: 75px;
}
div.toggle {
  margin: 10px 0 15px;
  padding: 10px;
  width: 100%;
  background: #eee;
}
div.toggle input[type="radio"] {
  margin: 0!important;
}
div.toggle input[type="radio"] + label {
  width: 150px;
}
div.comment {
  margin-top: 10px;
  width: 100%;
}
div.comment label {
  display: block;
  padding: 5px 0;
}
div.comment > p {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0 10px;
}
div.comment > p i {
  width: 40px;
  height: 40px;
  background: no-repeat center / 100%;
  border-radius: 50%;
}
div.comment > p label {
  font-weight: 600;
}
div.comment textarea {
  height: 155px;
  background: rgb(240, 246, 255);
  border: none;
  resize: none;
}
div.detail p {
  font-size: 13px;
  color: var(--search-color);
}
div.regist {
  margin-top: 0;
}
div.regist h3 {
  padding: 20px 0;
  font-size: 20px;
  line-height: 1;
}
div.regist h3::before {
  width: 30px;
}
div.regist ul {
  margin: 30px 0 2px;
}
div.regist ul li {
  align-items: stretch;
  min-height: 53px;
}
/*----------------------------------------------------------------------------
detail2
------------------------------------------------------------------------------*/
div.detail2 {
  padding: 0 20px;
}
div.detail2 > div {
  display: flex;
  margin-bottom: 20px;
  padding: 0;
  gap: 10px;
}
div.detail2 > div.method {
  flex-direction: column;
}
div.detail2 > div ul {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-color);
  border-radius: 3px;
}
div.detail2 > div ul label {
  padding: 2px;
  background: #eee;
  text-align: center;
}
div.detail2 > div ul li {
  display: flex;
  padding: 4px 20px 0;
  border-bottom: 1px dotted var(--line-color);
}
div.detail2 > div ul li span:first-child {
  width: 100%;
}
div.detail2 > div ul li span:last-child {
  min-width: 100px;
  text-align: right;
}
div.detail2 > div ul li span i {
  display: block;
  margin-left: auto;
  width: 20px;
  height: 20px;
  background: url(../image/action_check.svg) no-repeat center right -2px / 20px;
}
div.detail2 > div ul li:last-child {
  padding-bottom: 4px;
  border-bottom: none;
}
div.detail2 > p {
  margin-bottom: 20px;
  padding: 10px 7px;
}
div.detail2 > label {
  display: block;
  margin: 10px 0px 0;
  padding: 7px;
  background: #eee;
  border: 1px solid var(--line-color);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  text-align: center;
  position: relative;
}
div.detail2 > ul {
  border: 1px solid var(--line-color);
  border-radius: 3px;
}
div.detail2 > label + ul {
  border-radius: 0 0 3px 3px;
}
div.detail2 > ul li {
  display: flex;
}
div.detail2 > ul li > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px;
  width: 200px;
  border-right: 1px solid var(--line-color);
}
a.publics {
  padding: 2px 5px;
  background: #13af00;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
}
a.publics:hover {
  opecity: 0.8
}
div.detail2 > label a.publics {
  position: absolute;
  top: 5px;
  right: 10px;
}
div.detail2 > ul li > div {
  display: flex;
  align-items: center;
  padding: 7px;
  width: calc(100% - 100px);
}
div.detail2 > ul li > div.addition {
  display: block;
}
div.detail2 > ul li > div.addition > span {
  display: inline-block;
  min-width: 70px;
}
div.detail2 div.machine {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 20px 10px;
  border: 1px solid var(--line-color);
}
div.detail2 div.machine div.photo {
  width: calc((100% - 30px) / 4);
}
div.detail2 div.machine div.photo div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
div.detail2 div.machine div.photo img {
  height: 100px;
}
div.detail2.regist > ul li > div {
  padding: 10px;
}
div.detail2.regist > ul li > div.fill {
  width: 100%;
}
div.detail2.regist ul li div.multi {
  flex-direction: column;
  align-items: flex-start;
}
div.detail2.regist ul li div.multi input:nth-child(n+2) {
  margin-top: 5px;
}
div.detail2 > ul li:first-child > * {
  padding-top: 10px;
}
div.detail2 > ul li:last-child > * {
  padding-bottom: 10px;
}
div.detail2.regist:first-child > label {
  margin: 0;
}
div.detail2.regist ul {
  margin: 0;
}
div.detail2.regist ul li {
  border-bottom: 1px dashed var(--line-color);
}
div.detail2.regist ul li:last-child {
  border-bottom: none;
}
div.detail2.regist div.drop {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100px;
  overflow: hidden;
}
div.detail2.regist div.drop.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fbfbfb;
  overflow: hidden;
  position: relative;
}
div.detail2.regist div.drop.icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section div.bottom {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
section div.bottom a.button {
  width: 130px;
  height: 42px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: initial;
}
section div.bottom a.button.back {
  background: #eee;
  border: 1px solid var(--line-color);
  color: var(--button-font);
}
div.method h2 {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 10px;
}
div.method h2 + p {
  font-size: 12px;
}
div.method h2 + p + span {
  margin-top: 20px;
  color: var(--line-color);
}
div.method h3 {
  margin: 50px 0 40px;
  width: 100%;
  height: 1px;
  background: var(--line-color);
  position: relative;
}
div.method h3 span {
  display: block;
  padding-right: 20px;
  min-width: 60px;
  background: #fff;
  font-size: 15px;
  position: absolute;
  top: -10px;
}
div.method dl {
  margin-top: 10px;
}
div.method dl:nth-of-type(n+2) {
  margin-top: 20px;
}
div.method dl dt {
  margin-bottom: 5px;
  padding: 0;
  font-weight: 600;
  font-size: 12px;
}
div.method dl dd {
  font-weight: 500;
  font-size: 12px;
}
div.achieves > div {
  margin-top: 25px;
  padding: 20px;
  background: #ececf380;
  border: 1px solid var(--line-color);
  border-radius: 4px;
  font-weight: 300;
  font-size: 13px;
  color: #000;
}
div.achieves > div > div {
  display: flex;
  flex-direction: column;
}
div.achieves > div > div:first-of-type {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-color);
}
div.achieves > div > div:nth-of-type(n+2) {
  margin-top: 10px;
}
div.achieves > div label {
  margin: 5px 0;
  font-weight: 600;
}
div.achieves > div > label {
  display: block;
  margin: 0;
  padding: 2px 5px;
  width: 100px;
  text-align: center;
  font-weight: 400;
  font-size: 12px;
  border: 1px solid var(--line-color);
  background: #fff;
}
div.achieves div.photolink {
  margin-top: 20px !important;
  padding-top: 20px;
  border-top: 1px dotted var(--button-line);
}
div.achieves div.photolink > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background: #fff;
  border: 1px solid var(--button-line);
  color: var(--button-line);
  font-weight: 400;
  font-size: 12px;
  position: relative;
}
div.achieves div.photolink > div.open {
  color: #000;
  cursor: pointer;
}
div.achieves div.photolink div::after {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background: url(../image/pagenext.svg) no-repeat center / 10px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
div.photos > label {
  display: block;
  margin: 0;
  padding: 2px 5px;
  width: 100px;
  text-align: center;
  font-weight: 400;
  font-size: 12px;
  border: 1px solid var(--line-color);
  background: #fff;
}
div.photos dl {
  border: none!important;
}
div.photos > div {
  display: flex;
  flex-direction: column;
  padding: 20px 0 0;
}
div.photos > div:first-of-type {
  margin-top: 20px;
  border-top: 1px dashed var(--line-color);
}
div.photos > div p {
  font-weight: 500;
  font-size: 12px;
}
section div.pricelist {
  margin-top: 80px;
}
section div.pricelist div.price {
  display: flex;
  line-height: 25px;
}
section div.pricelist div.price:first-of-type {
  margin-top: 30px;
}
section div.pricelist div.price div:nth-child(1) {
  flex: 2;
  word-break: break-all;
}
section div.pricelist div.price div:nth-child(2) {
  flex: 1;
  text-align: right;
}
section div.pricelist div.price div:nth-child(3) {
  flex: 1;
  text-align: right;
}
div.recommend {
  margin-top: 30px;
  padding: 20px;
  background: url(../image/recommend.png) no-repeat center / cover;
  border: 1px solid var(--line-color);
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
}
div.recommend:nth-of-type(n+2) {
  margin-top: 60px;
}
div.recommend label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  font-weight: 600;
  font-size: 20px;
}
div.recommend > p {
  margin-top: 30px;
}
div.recommend > div {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}
div.recommend > div i {
  min-width: 50px;
  height: 50px;
  background: no-repeat center / cover;
  border-radius: 50%;
}
div.recommend > div div {
  display: flex;
  flex-direction: column;
}
div.recommend + div {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
section div.recommend + div a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 15px;
  width: calc((100% - 20px) / 2);
  height: 50px;
  border: 2px solid #aaa;
  border-radius: 6px;
  font-size: 12px;
  line-height: 15px;
  color: #aaa;
  position: relative;
  cursor: pointer;
}
section div.gatetomo > div > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
section div.gatetomo > div > div p {
  display: flex;
  align-items: center;
  padding-right: 10px;
}
section div.gatetomo > div > div p i {
  display: block;
  content: "";
  margin-right: 10px;
  width: 46px;
  height: 46px;
  background: no-repeat center / cover;
  border-radius: 50%;
}
section div.gatetomo > div > div span span:first-of-type {
  display: block;
  font-weight: 600;
  font-size: 12px;
}
section div.gatetomo > div > div span span:last-of-type {
  display: block;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  color: #999;
}
section div.gatetomo > div > div div {
  display: flex;
  align-items: center;
  justify-content: center;
}
section div.gatetomo a.meishi {
  width: 30px;
  height: 30px;
  background: no-repeat center / 100%;
  background-image: url(../img2/icon_meishi.svg);
}
section div.gatetomo label {
  display: block;
  margin: 30px 0;
  width: 100%;
  height: 1px;
  background: var(--line-color);
}
section div.gatetomo label span {
  background: #fff;
  padding-right: 20px;
  position: relative;
  top: -10px;
}
body > div.swiper {
  display: block;
  width: 100%;
  height: 100dvh;
  background: #00000096;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  overflow: hidden;
}
body > div.swiper div.swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 40px;
}
body > div.swiper div.swiper-slide a {
  display: block;
  margin-left: auto;
  margin-bottom: 10px;
  width: 30px;
  height: 30px;
  background: url(../image/close.svg) no-repeat center / 100%;
}
body > div.swiper div.swiper-slide p {
  margin-top: 20px;
  color: #fff;
}
/*----------------------------------------------------------------------------
cover
------------------------------------------------------------------------------*/

body > div.cover {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 0 30px;
  padding-inline: calc((100% - 520px) / 2);
  width: 100%;
  height: 100dvh;
  background: #00000096;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}
body > div.cover a.close {
  display: block;
  margin-bottom: 10px;
  font-style: normal;
  font-weight: 100;
  font-size: 40px;
  line-height: 1em;
  color: #d33232;
  transform: scale(1.5, 1);
}
div.cover.wrote > div,
div.cover.meishi > div {
  display: flex;
  flex-direction: column;
  padding: 20px;
  width: 100%;
  background: #fff;
  color: #000;
}
div.cover.wrote > div.preview2 {
  padding: 0;
  background: none;
}
div.cover.wrote > div.preview2 div.recommend {
  margin: 0;
}
div.cover.wrote > div.preview2 div.recommend + p {
  padding: 20px 0 0;
  color: #fff;
}
div.cover.meishi > div.swiper {
  padding: 0;
  background: none;
  overflow: hidden;
}
div.cover.meishi > div.swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 0 0;
}
div.cover.meishi > div.swiper .swiper-slide > div {
  padding: 20px;
  background: #fff;
  position: relative;
}
div.cover.meishi > div.swiper .swiper-slide > div a.close {
  position: absolute;
  top: -50px;
  right: 0;
}
div.cover.meishi div.comment {
  margin: 30px 0;
  font-size: 13px;
  max-height: calc(100dvh - 150px);
  overflow-y: auto;
}
div.cover.meishi div.photo {
  display: flex;
  align-items: center;
  margin-top: 30px;
}
div.cover.meishi div.photo div:first-child {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
div.cover.meishi div.photo div:last-child {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  width: calc(100% - 50px);
}
div.cover.meishi div.photo p:nth-child(1) {
  font-weight: 600;
}
div.cover.meishi div.photo p:nth-child(2) {
}
div.cover.meishi div.photo p:nth-child(3) {
  font-size: 18px;
}
div.cover.meishi > div dl {
  margin-top: 10px;
}
div.cover.meishi > div dl dt {
  font-weight: 600;
}
div.cover div.qr {
  margin: 30px auto;
  padding: 10px;
  border: 1px solid #000;
}
div.cover div.qr + p {
  margin-bottom: 25px;
  font-size: 13px;
}
a.button.camera {
  margin: 0 auto 30px;
  width: 170px;
  height: 40px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
}
div.cover div.reader {
  padding: 0;
  background: transparent;
}
div.cover div.reader video {
  max-width: 100%;
  height: calc(100dvh - 100px);
}
div.cover div.title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 20px 30px;
  border-bottom: 1px solid var(--line-color);
}
div.cover div.title span.message {
  padding: 2px 4px;
  background: #fff;
  border: 1px solid var(--action-border);
  color: var(--action-border);
  font-size: 11px;
}
div.cover div.title span:last-child {
  font-size: 18px;
  line-height: 30px;
}
div.cover div.title span.accept {
  padding: 2px 4px;
  background: #fff;
  border: 1px solid var(--search-color);
  color: var(--search-color);
  font-size: 11px;
}
div.cover div.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-left: 10px;
}
div.cover div.swiper div.message div.head {
  padding: 10px 0 30px;
  border-bottom: 1px solid var(--line-color);
}
div.cover div.head label {
  display: flex;
  align-items: center;
}
div.cover div.head label::before {
  display: block;
  content: "";
  margin-right: 10px;
  width: 25px;
  height: 25px;
  background: url(../image/image_962.svg) no-repeat center / 100%;
}
div.cover.wrote div.head label::before {
  background-image: url(../image/image_1349.svg);
}
div.cover div.head a {
  color: var(--search-color);
}
div.cover textarea:read-only {
  background: #f9f9f9;
}
div.cover div > p {
  font-weight: 400;
  font-size: 13px;
}
div.cover div.bottom {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}
div.cover div.bottom a.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc((100% - 20px) / 2);
  height: 38px;
  background: #fff;
  border: 1px solid var(--search-color);
  border-radius: 4px;
  color: var(--search-color);
}
div.cover div.bottom a.button:first-child {
  border: 1px solid var(--action-border);
  color: var(--action-color);
}
div.cover div.bottom a.button.close2:first-child {
}
div.cover.share {
  align-items: center;
  justify-content: flex-end;
}
div.cover.share > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  width: 100%;
}
div.cover.share a.button {
  width: 100%;
  height: 50px;
  background: #fff;
  border: 1px solid var(--search-color);
  border-radius: 8px;
  color: var(--search-color);
}
div.cover.share a.button.cancel {
  margin-top: 10px;
  border: 1px solid var(--notice-color);
  border-radius: 8px;
  color: var(--notice-color);
}
/*----------------------------------------------------------------------------
action_menu
------------------------------------------------------------------------------*/
ul.action {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 15px;
}
ul.action li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 15px;
  width: calc((100% - 20px) / 2);
  max-width: 200px;
  height: 50px;
  border: 2px solid var(--search-color);
  border-radius: 6px;
  font-size: 12px;
  line-height: 15px;
  color: var(--search-color);
  position: relative;
  cursor: pointer;
}
ul.action li::before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  mask-repeat: no-repeat;
  mask-position: left;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
}
ul.action li.status1::before {
  background: #fff!important;
}
ul.action li.status2::before {
  background: #fff!important;
}
ul.action li.listup::before {
  mask-image: url(../img2/icon_listup.svg);
  background: var(--search-color);
}
ul.action li.listup.status1 {
  background: var(--action-color);
  border-color: var(--action-color);
  color: #fff;
}
ul.action li.connect::before {
  width: 24px;
  height: 24px;
  mask-image: url(../img2/icon_meishi.svg);
  background: var(--search-color);
}
ul.action li.connect.status1 {
  background: var(--search-color);
  border-color: var(--search-color);
  color: #fff;
}
ul.action li.connect.status2 {
  background: var(--action-color);
  border-color: var(--action-color);
  color: #fff;
}
ul.action li.met::before {
  mask-image: url(../img2/icon_appeal.svg);
  background: var(--search-color);
}
ul.action li.met.status1 {
  background: var(--search-color);
  border-color: var(--search-color);
  color: #fff;
}
ul.action li.met.status2 {
  background: var(--action-color);
  border-color: var(--action-color);
  color: #fff;
}
/*----------------------------------------------------------------------------
empty
------------------------------------------------------------------------------*/
div.notfound {
  margin: 20px 0;
  padding: 20px;
  background: #eee;
}
div.list2 div.notfound {
  background: #fcf4be;
}
/*----------------------------------------------------------------------------
comp
------------------------------------------------------------------------------*/
div.comp {
  display: flex;
  align-items: center;
  margin: 0 0 20px;
  padding: 20px;
  gap: 30px;
  box-shadow: 0 2px 6px #0000001a, 0 0 0 1px #00000005;
}
div.comp > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
div.comp > div a.photo {
  width: 50px;
  min-width: initial;
  height: 50px;
  background: no-repeat center / cover;
  border-radius: 50%;
}
div.comp > div span {
  margin-top: 5px;
  font-weight: 600;
  font-size: 12px;
}
div.comp ul {
  display: flex;
  flex-direction: column;
  width: calc(100% - 80px);
}
div.comp ul li {
  font-size: 13px;
  line-height: 15px;
}
div.comp ul li:first-child {
  font-weight: 500;
}
div.comp ul li.name {
  margin-top: 10px;
  font-size: 20px;
  line-height: 20px;
}
div.comp ul li.nickname {
  margin-top: 5px;
  color: #777777;
}
div.comp ul li span {
  display: block;
}
div.comp ul li span.kana {
  font-size: 12px;
  line-height: 16px;
}
div.fglist {
  padding: 50px 18px 0;
  xborder-top: 1px solid var(--line-color);
}
div.fglist > div.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
div.fglist > div.title h2 {
  font-size: 20px;
}
div.fglist > div.title a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  background: var(--search-color);
  color: #fff;
  font-size: 12px;
}
div.fglist > p {
  font-size: 13px;
}
div.fglist div.complist {
  margin-top: 30px;
  padding: 0;
  overflow: hidden;
}
div.fglist div.joblist {
  margin-top: 30px;
  padding: 0;
  overflow: hidden;
}
div.fglist2 {
  padding: 5px 18px 0;
}
div.fglist2 > div.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 30px;
  position: relative;
}
div.fglist2 > div.title h2 {
  font-size: 15px;
}
div.fglist2 > div.title a.sort {
  margin-left: 30px;
  width: 24px;
  height: 24px;
  background: url(../img2/image_204.svg) no-repeat center / 100%;
}
div.fglist2 > div.title a.sort + div {
  padding: 10px;
  background: #fff;
  border: 1px solid #000000;
  border-radius: 8px;
  position: absolute;
  right: 0;
  top: 30px;
  z-index: 2;
}
div.fglist2 > div.title a.sort + div a {
  display: block;
  padding: 5px 50px 5px 5px;
  font-weight: 500;
  font-size: 12px;
  position: relative;
}
div.fglist2 > div.title a.sort + div a.checked::after {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img2/checked.svg) no-repeat center / 100%;
  position: absolute;
  right: 5px;
  top: 4px;
}
div.address ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
div.address ul li {
  background: #fff;
  padding: 0px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 6px #0000001a, 0 0 0 1px #00000005;
  cursor: pointer;
}
div.dialog div.address ul li {
  padding: 0;
  box-shadow: initial;
  cursor: default;
}
div.member > div,
div.address ul > div {
  margin: 10px 0;
  background: var(--line-color);
  height: 1px;
  position: relative;
}
div.member > div span,
div.address ul > div span {
  padding: 0 10px 0 0;
  background: var(--back-color);
  position: absolute;
  top: -10px;
}
div.dialog div.member > div span,
div.dialog div.address ul > div span {
  background: #fff;
}
div.address ul > div a.edit {
  display: block;
  padding: 0 5px;
  width: 32px;
  background: var(--action-color);
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  position: absolute;
  top: -10px;
  right: 37px;
  z-index: 1;
}
div.address ul > div a.remove {
  display: block;
  padding: 0 5px;
  width: 32px;
  background: var(--notice-color);
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  position: absolute;
  top: -10px;
  right: 0;
  z-index: 1;
}
div.address ul > div a::before {
  display: block;
  content: "";
  width: 5px;
  height: 20px;
  background: #fff;
  position: absolute;
  left: -5px;
}
div.address ul li > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px;
}
div.address ul li > div p {
  display: flex;
  align-items: center;
  padding-right: 10px;
}
div.address ul li > div p i {
  display: block;
  content: "";
  margin-right: 10px;
  width: 46px;
  min-width: 46px;
  height: 46px;
  background: no-repeat center / cover;
  border-radius: 50%;
  cursor: pointer;
}
div.address ul li > div p span {
  cursor: pointer;
}
div.address ul li > div p span span:first-of-type {
  display: block;
  font-weight: 600;
  font-size: 12px;
}
div.address ul li > div p span span:last-of-type {
  display: block;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  color: #999;
}
div.address ul li > div div {
  display: flex;
  align-items: center;
  gap: 10px;
}
div.address ul li a {
  display: block;
  width: 30px;
  height: 30px;
  background: no-repeat center / 100%;
}
div.address ul li a.profile {
  background-image: url(../img2/icon_message.svg);
  background-size: 80%;
  background-position: top 6px center;
}
div.address ul li a.meishi {
  background-image: url(../img2/icon_meishi.svg);
  background-size: 80%;
  background-position: top 5px center;
}
div.address ul li a.talk {
  background-image: url(../img2/home_timeline_icon_comment.svg);
  background-size: 80%;
}
div.address ul li a.check {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../image/Ellipse_84.svg);
}
div.address ul li a.checked::after {
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  background: url(../image/image_1098.svg) no-repeat center / 100%;
}
div.address ul li a.request {
  padding: 2px 5px;
  width: auto;
  height: auto;
  background: #000;
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
}
div.address ul li div.visit span:first-child {
  font-size: 12px;
}
div.address ul li div.visit span:last-child {
  display: flex;
  align-items: center;
  font-size: 20px;
}
div.address ul li div.visit {
  padding-top: 20px;
  border-top: 1px solid var(--line-color);
}
div.address ul li div.visit span:last-child::before {
  display: block;
  content: "";
  margin-right: 10px;
  width: 34px;
  height: 34px;
  background: url(../img/home_action_ashiato.svg) no-repeat center / 100%;
}
div.address ul li div.visit_tm {
  justify-content: flex-end;
  color: var(--time-color);
  font-size: 12px;
}
div.address ul li:last-child div.visit_tm {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-color);
}
div.address ul li > p {
  font-size: 12px;
}
div.address ul li div.action {
  display: flex;
  gap: 24px;
}
div.address ul li div.action a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px;
  height: 50px;
  border: 1px solid var(--search-color);
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  color: var(--search-color);
}
div.address ul li div.action a.reject,
div.address ul li div.action a.remove {
  border-color: #d50000;
  color: #d50000;
}
div.member {
  padding: 30px 0;
}
div.member ul {
  display: flex;
  flex-wrap: wrap;
}
div.member ul li {
  padding: 10px;
  width: 80px;
  position: relative;
}
div.member ul li > p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
div.member ul li > p i {
  display: block;
  content: "";
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  background: no-repeat center / cover;
  border-radius: 50%;
  cursor: pointer;
}
div.member ul li.add > p i {
  background-image: url(../img/icon_tuika.svg);
}
div.member ul li > p span {
  font-size: 12px;
  line-height: 16px;
}
div.member ul li > p span:nth-of-type(n+2) {
  padding: 2px 5px;
  background: #000;
  color: #fff;
}
div.member ul li a.remove {
  display: block;
  width: 15px;
  height: 15px;
  background: url(../img2/icon_batu.svg) no-repeat center / 100%;
  position: absolute;
  top: 5px;
  right: 5px;
}
/*----------------------------------------------------------------------------
list2
------------------------------------------------------------------------------*/
div.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0!important;
}
div.pager a.off {
  display: none;
}
div.pager2 {
  display: flex;
  flex-direction: row!important;
  align-items: center;
  justify-content: flex-end;
  gap: 15px!important;
  margin: 20px 0 0 !important;
  padding: 0 15px!important;
}
div.pager2 a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #fff;
  border: 1px solid var(--search-color);
  border-radius: 50%;
  font-weight: 600;
  color: var(--search-color);
}
div.pager2 a.current {
  background: var(--search-color);
  color: #fff;
}
div.pager2 a.space {
  border: none;
}
/*div.list2 {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*}*/
/*div.list2 div.head {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: space-between;*/
/*  padding: 0 20px;*/
/*  height: 50px;*/
/*  background: var(--button-back);*/
/*  border-radius: 3px;*/
/*}*/
/*div.list2 div.data {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*}*/
/*div.comp {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  padding: 15px;*/
/*  color: #000;*/
/*  border: 1px solid var(--line-color);*/
/*  border-radius: 3px;*/
/*  position: relative;*/
/*}*/
/*div.comp:nth-child(n+2) {*/
/*  margin-top: 20px;*/
/*}*/
div.slide div.comp {
  margin-top: 0!important;
}
div.adjust div.comp, div.owner div.comp {
  padding: 0 0 20px;
  border: none;
}
a.linkbutton {
  display: flex;
  align-items:  center;
  justify-content: center;
  padding: 0 10px;
  width: 100%;
  height: 30px;
  background: var(--search-color);
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  color: #fff;
}
a.linkbutton:hover {
  opacity: 0.8;
}
div.requests_header {
  display: flex;
  line-height: 26px;
  padding: 5px 20px;
}
div.requests {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 10px;
  background: #fff;
  border-radius: 3px;
}
div.requests:nth-child(n+3) {
  margin: 10px 0 0;
}
div.requests > div:first-child {
  display: flex;
  line-height: 26px;
  font-weight: 600;
  color: #000;
}
div.requests_header div:nth-child(1),
div.requests > div:first-child div:nth-child(1) {
  width: 100%;
}
div.requests_header div:nth-child(2),
div.requests > div:first-child div:nth-child(2) {
  min-width: 100px;
  text-align: center;
}
div.requests_header div:nth-child(3),
div.requests > div:first-child div:nth-child(3) {
  min-width: 100px;
  text-align: center;
}
div.requests_header div:nth-child(4),
div.requests > div:first-child div:nth-child(4) {
  display: flex;
  justify-content: flex-end;
  min-width: 162px;
}
div.requests a.remove {
  margin-left: 10px;
}
div.requests > div:last-child {
  display: flex;
  flex-direction: column;
  margin: 20px 0 0;
  border-top: 1px solid var(--line-color);
}
div.requests > div:last-child > div {
  display: flex;
  margin-top: 10px;
}
div.requests > div:last-child > div span:first-child {
  min-width: 100px;
}
div.requests > div:last-child > div span:last-child {
  width: 100%;
}
div.posts {
  display: flex;
  flex-direction: column;
  padding: 15px;
  border: 1px solid var(--line-color);
  border-radius: 3px;
  color: #000;
  position: relative;
}
div.posts > span {
  position: absolute;
  top: 20px;
  right: 20px;
}
div.posts:nth-child(n+2) {
  margin-top: 20px;
}
div.room div.posts {
  margin: 0 0 20px;
  width: 60%;
  background: #fff;
  border: none;
}
div.detail2 div.posts {
  padding: 15px;
  gap: 0;
}
div.posts > label {
  margin-bottom: 10px;
  padding: 3px 10px;
  width: 100px;
  background: #13af00;
  border-radius: 3px;
  font-size: 12px;
  color: #fff;
  text-align: center;
}
div.posts.job_want > label { background: #f96e36; }
div.posts.borrow > label { background: #f96e36; }
div.posts.buy > label { background: #f96e36; }
div.posts.job_want > label { background: #f96e36; }
div.posts img {
  width: 100%;
  object-fit: contain;
  border-radius: 3px;
}
div.posts div {
  margin-top: 10px;
}
div.posts ul {
  margin: 0 !important;
  border: none!important;
}
div.posts ul li {
  display: flex;
  padding: 0 !important;
  border: none !important;
}
div.posts ul li:nth-child(n+2) {
  margin-top: 5px;
}
div.posts ul li label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  padding: 3px 0;
  min-width: 100px;
  background: var(--button-back);
}
div.posts ul li > span {
  padding: 3px 0;
  width: 100%;
  text-align: left !important;
}
div.posts ul li > span span {
  display: block;
  text-align: left !important;
}
div.posts p {
  padding: 10px 0;
}
div.room div.posts p,
div.list2 div.posts p {
  margin: 10px 0;
  padding: 0;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
div.posts a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 0 10px;
  width: 100%;
  height: 30px;
  background: var(--search-color);
  border: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  color: #fff;
  position: initial;
}
div.posts a.edit::after {
  display: none;
}
div.posts a:hover {
  opacity: 0.8;
}
div.posts div.flex {
  display: flex;
  justify-content: space-around;
}
div.posts div.flex a {
  width: 150px;
}
/*----------------------------------------------------------------------------
talkroom
------------------------------------------------------------------------------*/
div.talk-wrap {
  padding: 0;
  position: relative;
}
img.sending, img.process {
  display: none;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
div.talk-wrap.talk {
  height: auto;
  background: #fff;
}
div.talk-menu a {
  display: block;
  width: 30px;
  height: 30px;
  background: no-repeat center / 100%;
}
div.talk-menu a:hover {
  opacity: 0.8;
}
div.talk-menu a.talk {
  background-image: url(../image/talk.svg);
}
div.talk-wrap.talk div.talk-menu {
  display: none;
}
div.talk-input {
  display: none;
}
div.talk-input {
  display: flex;
  align-items: center;
  padding: 15px;
  width: 100%;
  height: auto;
  background: var(--back-color);
  position: relative;
}
div.talk-input a.send {
  display: block;
  margin-left: 10px;
  min-width: 32px;
  height: 32px;
  background: url(../img2/home_timeline_icon_post.svg) no-repeat center / 24px;
}
div.talk-input a.send:hover {
  opacity: 0.8;
}
div.talk-input a.photo {
  display: block;
  margin-right: 10px;
  min-width: 32px;
  height: 32px;
  background: url(../img2/photo.svg) no-repeat center / 24px;
}
div.talk-input a.photo:hover {
  opacity: 0.8;
}
div.talk-input textarea {
  padding: 6px 8px;
  width: 100%;
  height: 32px;
  background: #fff;
  border-radius: 8px;
  border: none;
  font-family: inherit;
  font-size: 13px;
  line-height: 20px;
  resize: none;
  outline: none;
}
div.talk-input-wrap {
  width: 1200px;
  max-width: 100%;
  padding: 0 50px;
  background: var(--back-color);
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
}
div.talk-input-wrap video,
div.talk-input-wrap img {
  display: block;
  margin: 40px auto 0;
  max-width: calc(100% - 30px);
  max-height: 260px;
  border-radius: 8px;
  object-fit: scale-down;
}
div.talk-input-wrap > a {
  display: block;
  width: 20px;
  height: 20px;
  background: no-repeat center / 100%;
  background-image: url(../img2/trash.svg);
  position: absolute;
  top: 10px;
  right: 20px;
}
div.talk-input-wrap > a:hover {
  opacity: 0.8;
}
div.room {
  margin-bottom: 10px;
  width: 100%;
  min-height: calc(100vh - 220px);
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
}
div.talk-wrap.talk div.room {
  margin: 0;
  padding: 0 18px;
  height: calc(100dvh - 60px - 72px - 62px);
  min-height: initial;
  scrollbar-width: none;
}
div.talk-wrap.talk div.room::-webkit-scrollbar {
  display: none;
}
div.room > ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  width: 100%;
}
div.room > ul > div {
  margin: 10px 0;
  background: var(--line-color);
  height: 1px;
  position: relative;
}
div.room > ul > div:nth-of-type(n+2) {
  margin-top: 30px;
}
div.room > ul > div span {
  padding: 0 10px 0 0;
  background: var(--back-color);
  position: absolute;
  top: -10px;
}
div.room > ul li {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 15px 10px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px #0000001a, 0 0 0 1px #00000005;
  cursor: pointer;
  position: relative;
}
div.room > ul li div:nth-child(1) {
  margin-right: 20px;
  min-width: 50px;
  height: 50px;
  border-radius: 50px;
  background: no-repeat center / cover;
}
div.room > ul li div:nth-child(2) {
  display: flex;
  flex-direction: column;
  width: 100%;
}
div.room > ul li div:nth-child(2) span:first-of-type {
  font-weight: 500;
  font-size: 12px;
}
div.room > ul li div:nth-child(2) span:first-of-type span {
  display: inline;
  margin-left: 5px;
  font-size: 12px;
}
div.room > ul li div:nth-child(2) span:last-of-type {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 11px;
  color: #999;
}
div.room > ul li div:nth-child(2) span:last-of-type span {
  display: block;
  margin-block: 5px;
  padding: 3px 2px;
  width: 45px;
  line-height: 1;
  background: var(--action-color);
  color: #fff;
  text-align: center;
}
div.room > ul li div:nth-child(2) span:last-of-type span.accept {
  background: var(--search-color);
}
div.room > ul li div:nth-child(3) {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 50px;
  text-align: right;
  color: var(--time-color);
  font-size: 12px;
}
div.room > ul li div:nth-child(3) span:nth-child(2) {
  display: block;
  margin-top: 5px;
  padding: 0 5px;
  min-width: 25px;
  height: 25px;
  border-radius: 20px;
  background: #00af0d;
  color: #fff;
  font-size: 12px;
  line-height: 25px;
  text-align: center;
}
div.room > ul li div.button {
  display: flex;
  height: 35px;
  margin-left: 10px;
}
div.room > ul li div.button a.group {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  background: var(--action-color);
  color: #fff;
  font-size: 12px;
}
div.room > ul li div.button a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  background: var(--notice-color);
  color: #fff;
  font-size: 12px;
}
div.room > div {
  display: flex;
  flex-direction: column;
  position: relative;
}
div.room > div > span {
  display: block;
  margin: 10px auto;
  padding: 3px 8px;
  background: rgb(99 99 99 / 68%);
  border-radius: 20px;
  font-size: 13px;
  color: #fff;
}
div.room div.message {
  display: flex;
  margin-bottom: 20px;
  max-width: 80%;
  position: relative;
}
div.room div.message a.meishi {
  display: block;
  width: 30px;
  height: 30px;
  background: no-repeat center / 100%;
  background-image: url(../img/icon_meishi.svg);
  position: absolute;
  top: 40px;
  left: 0;
}
div.room div.message > span {
  display: block;
  min-width: 40px;
  height: 40px;
  background: no-repeat center / cover;
  border-radius: 40px;
}
div.room div.message > div {
  position: relative;
}
div.room div.message > div.push {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgb(0 0 0 / 20%);
  border-radius: 6px;
  position: absolute;
  top: 5px;
  left: 0px;
  z-index: 1;
}
div.room div.message > div.push a.remove {
  display: block;
  width: 18px;
  height: 18px;
  background: url(../image/remove.svg) no-repeat center / 100%;
}
div.room div.message > div.push a.remove:hover {
  opacity: 0.8;
}
div.room div.message > div.video {
  display: block;
  margin-top: 18px;
  margin-left: 10px;
  height: auto;
}
div.room div.message > div.photo {
  display: block;
  margin-top: 18px;
  margin-left: 10px;
  height: auto;
}
div.room div.message > div.pdf {
  display: block;
  margin-top: 18px;
  margin-left: 10px;
  width: 100px;
  height: 100px;
  background: #b40b00;
  border-radius: 20px;
}
div.room div.message.self > div.video,
div.room div.message.self > div.photo,
div.room div.message.self > div.pdf {
  margin: 0;
}
div.room div.message > div.video span,
div.room div.message > div.photo span,
div.room div.message > div.pdf span {
  font-size: 12px;
  line-height: 1em;
  white-space: nowrap;
  position: absolute;
  top: -18px;
  left: 0px;
}
div.room div.message > div.pdf a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 800;
  font-size: 30px;
  color: #fff;
}
div.room div.message > div.pdf a:hover {
  opacity: 0.8;
}
div.room div.message img {
  border-radius: 10px;
}
div.room div.message video {
  max-width: 100%;
  border-radius: 10px;
}
div.room div.message div.video a {
  display: none;
  width: 50px;
  height: 50px;
  background: no-repeat center / 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
div.room div.message div.video a.play {
  background-image: url(../image/play.svg);
}
div.room div.message div.video a.play:hover {
  background-image: url(../image/play_hover.svg);
}
div.room div.message div.video a.stop {
  background-image: url(../image/stop.svg);
}
div.room div.message div.video a.stop:hover {
  background-image: url(../image/stop_hover.svg);
}
div.room div.message p {
  display: block;
  margin-top: 18px;
  margin-left: 10px;
  width: auto;
  background: #eee;
  border-radius: 8px;
  word-break: break-all;
  color: #000;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  position: relative;
}
div.room div.message p.removed {
  padding: 3px 8px;
  background: rgb(99 99 99 / 68%);
  color: #fff;
  font-size: 13px;
}
div.room div.message p i {
  display: block;
  width: 40px;
  height: 40px;
  background: #eee;
  mask-image: url(../image/message.svg);
  -webkit-mask-image: url(../image/message.svg);
  position: absolute;
  top: 5px;
  left: -3px;
  transform: rotate(166deg);
  z-index: 0;
}
div.room div.message.target p > span:first-of-type {
  font-size: 12px;
  line-height: 1em;
  white-space: nowrap;
  position: absolute;
  top: -18px;
  left: 0px;
}
div.room div.message p span:last-of-type {
  display: block;
  padding: 15px;
  position: relative;
  z-index: 1;
  span.message, span.accept, span.recommend {
    display: none;
  }
}
div.room div.message p span.title {
  display: block;
  padding: 15px;
  border-bottom: 1px solid var(--line-color);
}
div.room div.message p span.title:has(span.recommend) {
  color: var(--action-color);
}
div.room div.message p span.title span {
  display: block;
  margin-block: 5px;
  padding: 3px 2px;
  width: 45px;
  line-height: 1;
  background: var(--action-color);
  color: #fff;
  text-align: center;
}
div.room div.message p span.title span.accept {
  background: var(--search-color);
}
div.room div.message time {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  margin-left: 10px;
  font-size: 12px;
  color: #999;
}
div.room div.message.self {
  flex-direction: row-reverse;
  margin-left: auto;
  margin-right: 10px;
}
div.room div.message.self p {
  margin: 0;
  background: #F0F6FF;
}
div.room div.message.self p i {
  background: #F0F6FF;
  transform: rotate(292deg);
  left: initial;
  right: -5px;
}
div.room div.message.self time {
  margin: 0 10px 0 0;
}
div.room div.message.self time span {
  font-size: 11px;
  line-height: 1;
  color: var(--time-color);
}
div.media-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  width: 100%;
  height: 100vh;
  background: rgb(0 0 0 / 73%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
div.media-wrap > div {
  display: flex;
  max-height: calc(100vh - 200px);
  position: relative;
}
div.media-wrap a {
  display: block;
  width: 30px;
  height: 30px;
  background: no-repeat center / 100%;
  position: absolute;
}
div.media-wrap a:hover {
  opacity: 0.8;
}
div.media-wrap a.close {
  background-image: url(../image/close.svg);
  top: -40px;
  right: 0px;
}
div.media-wrap a.download {
  background-image: url(../image/download.svg);
  width: 25px;
  top: -38px;
  right: 50px;
}
div.media-wrap video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
}
/*----------------------------------------------------------------------------
footer
------------------------------------------------------------------------------*/
footer {
  display: flex;
  flex-direction: column;
  padding: 0 50px;
  width: 1200px;
  max-width: 100%;
  background: var(--back-color);
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
footer > ul {
  display: flex;
  gap: 10px;
  width: 100%;
}
footer > ul li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  background: linear-gradient(180deg, #FFAB35 0%, #F80 24.04%, #FFAB35 89.9%);
  border-radius: 8px;
  height: 60px;
  color: #fff;
  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;
}