@use "./sns_common.scss" as root;

//全ページ共通
.sns-relate-login,
.sns-relate-list,
.sns-relate-editor,
.sns-relate-import {
  font-size: clamp(4.5px, 0.52vw, 15px);

  @include root.mq(sp) {
    font-size: calc(100vw / 39);
    box-sizing: border-box;
  }

  color: root.$color-text;
  font-family: root.$sns_font_default;
  font-weight: 500;

  /* リセットCSS
  ===================================== */

  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  button,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    border: 0;
    font: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
  }

  ol,
  ul {
    list-style: none;
  }

  li,
  dd {
    list-style-type: none;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  caption,
  th,
  td {
    font-weight: normal;
    text-align: left;
    vertical-align: middle;
  }

  q,
  blockquote {
    quotes: none;
  }

  q {

    &:before,
    &:after {
      content: "";
      content: none;
    }
  }

  blockquote {

    &:before,
    &:after {
      content: "";
      content: none;
    }
  }

  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  main,
  menu,
  nav,
  section,
  summary {
    display: block;
  }

  /* 基本設定
  ===================================== */

  *,
  *::before,
  *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  a {
    cursor: pointer;
    text-decoration: none;
    color: root.$color-text;
  }


  //input要素リセットCSS
  [type="text"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    padding: 0.4em 0.8em;
    width: 100%;
    height: 100%;
  }

  [type="text"]:focus {
    box-shadow: none;
    outline: none;
  }

  [type="email"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    padding: 0.4em 0.8em;
    width: 100%;
    height: 100%;
  }

  [type="email"]:focus {
    box-shadow: none;
    outline: none;
  }


  textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    padding: 0.4em 0.8em;
    width: 100%;
    height: 100%;
  }

  textarea:focus {
    box-shadow: none;
    outline: none;
  }

  [type="submit"] {
    -webkit-appearance: none;
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font-size: inherit;
    height: inherit;
    text-decoration: none;
  }

  [type="submit"]:focus {
    box-shadow: none;
    outline: none;
  }

  /* 共通パーツ
  ===================================== */
  //イメージフレーム
  .img_frame {
    background-color: transparent;
    position: relative;
    overflow: hidden;
    padding-top: 47.8%;

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

  //１番目の見出し
  .page_title {
    position: relative;
    width: fit-content;
    margin: 2.86em auto 0;
    padding: 0.43em 2.46em;
    font-family: root.$sns_font_title;
    font-weight: 500;
    font-size: 3.5em;
    letter-spacing: 2px;
    text-align: center;
    border-radius: 5.7em;
    background-color: rgb(225, 233, 248);
    box-shadow: 10px 10px 0px 0px #cad3f5;

    @include root.mq(sp) {
      margin-top: 2.5em;
      font-size: 2.5em;
      line-height: 1.2;
    }

    .title_postType {
      white-space: nowrap;
      font-weight: 300;
      font-size: 0.57em;
      letter-spacing: 1px;
      padding-top: 1em;

      @include root.mq(sp) {
        font-size: 0.6em;
      }

      .wp-menu-image {
        margin-right: 0.5em;

        &::before {
          width: 1.2em;
          height: 1.2em;
          vertical-align: middle;
          position: relative;

          @include root.mq(sp) {
            width: 0.8em;
            height: 0.8em;
          }
        }
      }
    }

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: -0.7em;
      width: 0.57em;
      height: 100%;
      background: transparent url('../img/title_side.png') no-repeat center center / cover;
    }
  }

  //２番目の見出し
  .work_content_title {
    font-size: 3em;
    width: 10.7em;
    font-family: root.$sns_font_title;
    position: relative;
    background: #dfefff;
    box-shadow: 0px 0px 0px 5px #dfefff;
    border: dashed 2px #fff;
    padding: 0.2em 0.5em;
    color: #454545;
    text-align: center;
    margin: 0 auto;

    &::after {
      position: absolute;
      content: '';
      left: -7px;
      top: -7px;
      border-width: 0 0 15px 15px;
      border-style: solid;
      border-color: #f0f0f1 #f0f0f1 #a8d4ff;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    }

    @include root.mq(sp) {
      font-size: 2em;
      width: fit-content;
      white-space: nowrap;
    }
  }

  //共通ボタン
  .cmd_btn,
  .post_exec,
  .follow_btn,
  .fb_btn,
  .tw_btn,
  .sns_delete,
  #sns_entry,
  #btn_end,
  #btn_delete,
  .sns_exec,
  .set_btn,
  .clear_btn,
  .snslist_btn {
    background: #dddfe4;
    box-shadow:
      -3px -3px 12px rgba(255, 255, 255, 0.7),
      3px 3px 12px rgba(17, 17, 17, 0.3),
      inset 3px 3px 12px transparent,
      inset -3px -3px 12px transparent;
    transition: box-shadow ease-in-out 0.5s;
    border-radius: 0.5em;
    font-size: 2em;
    padding: 0.5em 1em;
    text-align: center;
    color: #000;

    @include root.mq(sp) {
      font-size: 1.4em;
      padding: 0.7em;
    }

    &:hover {
      //opacity: 0.7;
      cursor: pointer;
      background: #dddfe4;
      box-shadow:
        -3px -3px 12px transparent,
        3px 3px 12px transparent,
        inset 3px 3px 12px rgba(17, 17, 17, 0.3),
        inset -3px -3px 12px rgba(255, 255, 255, 0.7);
    }

    &.disable {
      opacity: 0.5;

      &:hover {
        box-shadow:
          -3px -3px 12px rgba(255, 255, 255, 0.7),
          3px 3px 12px rgba(17, 17, 17, 0.3),
          inset 3px 3px 12px transparent,
          inset -3px -3px 12px transparent;
        cursor: auto;
      }
    }
  }

  .cmd_btn {
    width: fit-content;
    height: 2.5em;
    line-height: 2.5em;
    //margin-left: auto;
    padding: 0 1em;

    @include root.mq(sp) {
      margin: 1.4em auto 0;
      width: 48%;

      &.get_in {
        padding: 0 0.7em;
        height: 2.1em;
        line-height: 2.1em;
      }
    }
  }

  .tw_btn {
    width: fit-content;
    margin: 0 auto 0.5em;
    padding: 0.5em 0.5em;

    a {
      color: #000;
    }
  }

  .fb_btn {
    width: fit-content;
    margin: 0.5em auto;
    padding: 0.5em 1em;

    &.logout {

      margin-top: 1em;
    }

    p {
      font-size: 1.2em;
    }
  }

  #btn_delete {
    margin: 1em auto 0;
    width: 80%;
    position: relative;

    &.ignore {
      opacity: 0.3;

      &:hover {
        opacity: 0.3;
        cursor: auto;
      }
    }

    &.return {
      &::before {
        position: absolute;
        content: "";
        height: calc(100% + 16px);
        width: calc(100% + 8px);
        top: -8px;
        left: -8px;
        border-radius: 10px;
        border: 1px solid rgba(132, 132, 164, 0.35);
        animation: 1.5s linear 0s normal none infinite focuse;
      }
    }
  }

  .snslist_btn {
    display: block;
    padding: 0.3em 0.5em;
    font-size: 1.3em;
    width: fit-content;
    margin-left: auto;

    &.new {
      width: 6.5em;
      height: 2.5em;
      line-height: 2.5em;
      font-size: 2.5em;
      padding: 0;

      @include root.mq(sp) {
        margin-bottom: 0;
        font-size: 2em;
      }
    }


    &:last-child {
      margin-top: 0.5em;
    }

  }

  .btn_return,
  .btn_prev,
  .btn_next {
    margin-left: auto;
    width: 9em;
    font-size: 2em;
    position: relative;
    color: #000;

    a {
      color: #000;
    }

    @include root.mq(sp) {
      margin-top: 0;
      font-size: 1.4em;
      width: 10em;

    }

    &:hover {
      cursor: pointer;

      &::after {
        transform: scaleX(1.2) skewX(228deg) translateY(-70%);
      }
    }

    &::after {
      content: "";
      position: absolute;
      width: 10em;
      height: 0.7em;
      right: -1em;
      bottom: -1em;
      background-color: transparent;
      transform-origin: center left;
      transform: skewX(228deg) translateY(-70%);
      border-right: #000 solid 2px;
      border-bottom: #000 solid 1px;
      transition: all 0.3s ease 0s;

      @include root.mq(sp) {
        width: 10em;
        height: 0.7em;
        right: 0;
        bottom: -0.7em;
      }
    }
  }

  .btn_prev,
  .btn_next {
    display: none;

    &.appear {
      display: block;
    }
  }

  .btn_next {
    @include root.mq(sp) {
      width: 5em;
    }

    &::after {
      width: 9em;
      right: 1.5em;
      bottom: -1em;

      @include root.mq(sp) {
        width: 7.1em;
        height: 0.7em;
        right: -1.5em;
        bottom: -0.7em;
      }
    }
  }

  .btn_prev {
    @include root.mq(sp) {
      width: 5em;
      margin-left: 1.5em;
    }

    &::after {
      width: 9em;
      left: -2.5em;
      bottom: -1em;
      background-color: transparent;
      transform-origin: center right;
      transform: skewX(121deg) translateY(-70%);
      border-left: #000 solid 2px;
      border-right: none;

      @include root.mq(sp) {
        left: -1.8em;
        width: 7.1em;
        height: 0.7em;
        bottom: -0.7em;
      }
    }

    &:hover {
      opacity: 1;

      &::after {
        transform: scaleX(1.2) skewX(121deg) translateY(-70%);
      }
    }
  }

  .modal_close,
  .img_close {
    position: absolute;
    top: 2em;
    right: 2em;
    width: 4em;
    height: 4em;
    border-radius: 50%;
    background-color: rgb(223, 221, 221);
    transition: all 0.3s ease 0s;

    @include root.mq(sp) {
      width: 2em;
      height: 2em;
    }

    &:hover {
      cursor: pointer;
      opacity: 0.7;
    }

    .drawer_icon_bars {
      position: relative;
      height: 100%
    }

    .drawer_icon_bar1,
    .drawer_icon_bar2 {
      position: absolute;
      left: 0;
      height: 2px;
      background-color: #000;
      transition: all 0.5s ease 0s;
    }

    .drawer_icon_bar1 {
      width: 65%;
      top: 45%;
      left: 18%;
      transform: rotate(40deg);
    }

    .drawer_icon_bar2 {
      width: 65%;
      top: 45%;
      left: 18%;
      transform: rotate(-40deg);
    }

    &.ignore {
      opacity: 0.3;

      &:hover {
        cursor: auto;
      }
    }
  }

  //カスタムラジオボタン
  #page_list,
  .draft_radio {
    padding-top: 0.5em;
    border-top: 1px #000 solid;
    font-size: 2em;

    @include root.mq(sp) {
      font-size: 1.6em;
    }

    label {
      display: flex;
      padding-left: 1em;
      padding-bottom: 0.4em;

      &:first-of-type {
        padding-top: 0.5em;
      }

      input {
        -webkit-appearance: none;
        /* remove default */
        display: block;
        margin: 10px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        cursor: pointer;
        vertical-align: middle;
        box-shadow: hsla(0, 0%, 100%, .15) 0 1px 1px, inset hsla(0, 0%, 0%, .5) 0 0 0 1px;
        background-color: hsla(0, 0%, 0%, .2);
        background-image: -webkit-radial-gradient(hsla(200, 100%, 90%, 1) 0%, rgb(40, 127, 170) 30%, hsla(200, 100%, 60%, .3) 38%, hsla(200, 100%, 30%, 0) 70%);
        background-repeat: no-repeat;
        -webkit-transition: background-position .15s cubic-bezier(.8, 0, 1, 1),
          -webkit-transform .25s cubic-bezier(.8, 0, 1, 1);
        outline: none;
      }

      input:checked {
        -webkit-transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1),
          -webkit-transform .25s cubic-bezier(0, 0, .2, 1);
      }

      input:active {
        -webkit-transform: scale(1.5);
        -webkit-transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1);
      }

      input {
        background-size: 0;
        &::before{
          content: none !important;
          display: none !important;
        }
      }

      &.ready {
        input {
          background-size: 100%;
          
        }
      }

      &.check_prev {

        input,
        input:active {
          background-position: 0 24px;
        }
      }

      &.checked {
        input:checked {
          background-position: 0 0;
        }
      }

      &.check_next {

        input,
        input:active {
          background-position: 0 -24px;
        }
      }
      

      span {
        display: block;
        padding-left: 1em;
        line-height: 2.5em;
      }
    }

    .username {
      font-size: 0.9em;
      padding-bottom: 0.5em;
    }
  }

  //セレクトボックス
  #id_category,
  #id_postType,
  [name^="target_sns"] {
    display: none;
  }

  .custom_select {
    position: relative;

    @include root.mq(sp) {
      width: 80%;
    }

    &>div {
      position: relative;
      z-index: 2;
      padding: 0.4em 0.6em;
      border-radius: 8px;
      background: #fff;
      font-size: 2em;
      min-height: 2.2em;
      box-shadow: 0 4px 16px 0 rgba(#162A5A, .12);
      transition: box-shadow .3s ease;

      @include root.mq(sp) {
        font-size: 1.6em;
      }

      &:hover {
        box-shadow: 0 4px 24px -1px rgba(#162A5A, .16);
      }

      .arrow {
        overflow: visible;
        left: auto;
        right: 2em;
        
        top: 50%;
        transform: translateY(-30%);
        cursor: pointer;
        width: 1.4em;
        position: absolute;

        &:after {
          content: '';
          position: absolute;
          display: block;
          width: 0.75em;
          height: 0.75em;
          border-bottom: 2px solid #99A3BA;
          border-left: 2px solid #99A3BA;
          top: 50%;
          left: 50%;
          transform: translateY(-60%) rotate(315deg);
          
          transition: all .3s ease;

          @include root.mq(sp) {
            width: 0.75em;
            height: 0.75em;
            top: 33%
          }
        }

      }

      span {
        color: #99A3BA;
        display: block;
        position: absolute;
        left: 12px;
        cursor: pointer;
        top: 50%;
        transform: translateY(-50%);
        line-height: 1em;
        transition: all .3s ease;

        @include root.mq(sp) {
          line-height: 1.8em;
        }

        &.hide {
          opacity: 0;
          visibility: hidden;
          transform: translate(-4px, 0);
        }
      }

      a {
        position: relative;
        padding: 0 24px 6px 8px;
        line-height: 1.4em;
        color: root.$textColor;
        display: inline-block;
        vertical-align: top;
        margin: 6px 6px 0 0;

        .wp-menu-image {
          margin-right: 0.25em;

          &::before {
            width: 1.25em;
            height: 1.25em;
            vertical-align: middle;
          }
        }

        em {
          font-style: normal;
          display: block;
          white-space: nowrap;
          padding-left: 2em;
          position: relative;

          @include root.mq(sp) {
            padding-left: 2.5em;
            padding-right: 1.25em;
            font-size: 0.875em;
          }

          //img要素を入れる
          &.catg_item,
          &.term_item,
          &.tag_item {
            &::after {
              content: "";
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: 0.25em;
              width: 1.25em;
              height: 1.25em;

              @include root.mq(sp) {
                width: 1.12em;
                height: 1.12em;
              }
            }
          }

          &.catg_item {
            &::after {
              background: transparent url('../img/category.png') no-repeat center center / cover;
            }
          }

          &.term_item {
            &::after {
              background: transparent url('../img/taxsonomy.png') no-repeat center center / cover;
            }
          }

          &.tag_item {
            &::after {
              background: transparent url('../img/tag.png') no-repeat center center / cover;
            }
          }
        }

        &:before {
          content: '';
          left: 0;
          top: 0;
          bottom: 6px;
          width: 100%;
          position: absolute;
          display: block;
          background: rgba(#E4ECFA, .7);
          z-index: -1;
          border-radius: 4px;
        }

        i {
          cursor: pointer;
          position: absolute;
          top: 0;
          right: 0;
          width: 1.2em;
          height: 1.4em;
          display: block;

          &:before,
          &:after {
            content: '';
            display: block;
            width: 2px;
            height: 1.25em;
            position: absolute;
            left: 50%;
            top: 50%;
            background: root.$primary;
            border-radius: 1px;
          }

          &:before {
            transform: translate(-50%, -50%) rotate(45deg);
          }

          &:after {
            transform: translate(-50%, -50%) rotate(-45deg);
          }
        }

        &.notShown {
          opacity: 0;
          transition: opacity .3s ease;

          &:before {
            width: 28px;
            transition: width .45s cubic-bezier(.87, -.41, .19, 1.44) .2s;
          }

          i {
            opacity: 0;
            transition: all .3s ease .3s;
          }

          em {
            opacity: 0;
            transform: translate(-6px, 0);
            transition: all .4s ease .3s;
          }

          &.shown {
            opacity: 1;
            margin-top: 6px;

            // &:first-of-type{
            //   margin-top: 6px;
            // }
            &:before {
              width: 100%;
            }

            i {
              opacity: 1;
            }

            em {
              opacity: 1;
              transform: translate(0, 0);
            }
          }
        }

        &.remove {
          &:before {
            width: 28px;
            transition: width .4s cubic-bezier(.87, -.41, .19, 1.44) 0s;
          }

          i {
            opacity: 0;
            transition: all .3s ease 0s;
          }

          em {
            opacity: 0;
            transform: translate(-12px, 0);
            transition: all .4s ease 0s;
          }

          &.disappear {
            opacity: 0;
            transition: opacity .5s ease 0s;
          }
        }
      }
    }

    &>ul {
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 0.8em;
      max-height: 40vh;
      overflow: scroll;
      z-index: 1;
      position: relative;
      top: auto;
      left: 0;
      right: 0;
      visibility: hidden;
      opacity: 0;
      //height: 0;
      max-height: 0;
      border-radius: 8px;
      transform: translate(0, 20px) scale(.8);
      transform-origin: 0 0;
      filter: drop-shadow(0 12px 20px rgba(#162A5A, .08));
      transition: all .4s ease, transform .4s cubic-bezier(.87, -.41, .19, 1.44), filter .3s ease .2s;

      li {
        color: root.$textColor;
        background: #fff;
        padding: 0.5em 0.7em 0.5em 2.8em;
        font-size: 2.5em;
        cursor: pointer;
        overflow: hidden;
        position: relative;
        transition: background .3s ease, color .3s ease, transform .3s ease .3s, opacity .5s ease .3s, border-radius .3s ease .3s;

        .wp-menu-image {
          margin-right: 0.2em;

          &::before {
            width: 1em;
            height: 1em;
            vertical-align: middle;
          }
        }

        //img要素を入れる
        &.catg_item,
        &.term_item,
        &.tag_item {
          &::before {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 1em;
            width: 1em;
            height: 1em;

            @include root.mq(sp) {
              width: 0.9em;
              height: 0.9em;
            }
          }
        }

        &.catg_item {
          &::before {
            background: transparent url('../img/category.png') no-repeat center center / cover;
          }
        }

        &.term_item {
          &::before {
            background: transparent url('../img/taxsonomy.png') no-repeat center center / cover;
          }
        }

        &.tag_item {
          &::before {
            background: transparent url('../img/tag.png') no-repeat center center / cover;
          }
        }

        @include root.mq(sp) {
          font-size: 1.6em;
        }

        &:first-child {
          border-radius: 8px 8px 0 0;

          &:last-child {
            border-radius: 8px;
          }
        }

        &:last-child {
          border-radius: 0 0 8px 8px;

          &:first-child {
            border-radius: 8px;
          }
        }

        &:hover {
          background: root.$primary;
          color: #fff;
        }

        &:after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 6px;
          height: 6px;
          background: rgba(#000, .4);
          opacity: 0;
          border-radius: 100%;
          transform: scale(1, 1) translate(-50%, -50%);
          transform-origin: 50% 50%;
        }

        &.beforeRemove {
          border-radius: 0 0 8px 8px;

          &:first-child {
            border-radius: 8px;
          }
        }

        &.afterRemove {
          border-radius: 8px 8px 0 0;

          &:last-child {
            border-radius: 8px;
          }
        }

        &.remove {
          transform: scale(0);
          opacity: 0;

          &:after {
            animation: ripple .4s ease-out;
          }
        }

        &.notShown {
          display: none;
          transform: scale(0);
          opacity: 0;
          transition: transform .35s ease, opacity .4s ease;

          &.show {
            transform: scale(1);
            opacity: 1;
          }
        }
      }
    }

    &.open {
      &>div {
        box-shadow: 0 4px 20px -1px rgba(#162A5A, .12);

        .arrow {
          &:after {
            top: 40%;
            transform: rotate(135deg);

            @include root.mq(sp) {
              top: 43%;
            }
          }
        }
      }

      &>ul {
        transform: translate(0, 12px) scale(1);
        opacity: 1;
        visibility: visible;
        //height: auto;
        max-height: 30vh;
        overflow: hidden visible;
        filter: drop-shadow(0 16px 24px rgba(#162A5A, .16));
      }
    }
  }

  .custom_select.selectMultiple {
    width: 50em;

    @include root.mq(sp) {
      margin: 0 auto;
      width: 90%;
    }

    &>div {
      padding: 0.8em 3em 0.8em 1.2em;
    }
  }

  .custom_select.selectSingle {
    width: 35em;
    margin: 0 auto;
    &>div {
      a {
        &:hover {
          cursor: auto;
        }

        i {
          display: none;
        }
      }
    }
  }

  .select_wapper {
    display: flex;
    align-items: center;
    position: relative;

    .option_title {
      position: absolute;
      font-size: 2em;
      padding: 0.25em 1em;
      background-color: #fff;
      width: fit-content;
      left: 0.5em;
      top: -1.5em;
      box-shadow: 0 4px 16px 0 rgb(22 42 90 / 12%);
      border-radius: 5px;
      z-index: 10;

      @include root.mq(sp) {
        font-size: 1.4em;
        padding: 0.36em;
        left: 0.36em;
        top: -1.78em;
      }
    }

    .custom_select {
      width: 60%;

      @include root.mq(sp) {
        width: 100%;
      }
    }

    .custom_select>div {
      padding-top: 1.5em;

      @include root.mq(sp) {
        padding-top: 1em;
      }

      span {
        @include root.mq(sp) {
          font-size: 1em;
        }
      }
    }

    .info_btn {
      position: relative;
      margin-left: 3em;
      width: 3em;
      height: 3em;

      &:hover {
        cursor: pointer;
      }

      @include root.mq(sp) {
        margin-left: 1em;
        width: 2em;
        height: 2em;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  //ラジオボタン型セレクト
  .radio_select {
    position: absolute;
    right: 1em;
    bottom: 1em;

    @include root.mq(sp) {
      right: 0.5em;
      bottom: 0.5em;
    }

    .radio_list {
      display: flex;
      column-gap: 1.5em;
      padding: 0.8em 2em;
      background-color: rgb(219, 215, 215);
      border-radius: 5px;

      @include root.mq(sp) {
        padding: 0.5em 1.5em;
        column-gap: 4em;
      }

      .radio_btn {
        width: 2.8em;
        height: 2.8em;
        position: relative;
        transition: all 0.3s ease 0s;
        z-index: 5;

        @include root.mq(sp) {
          width: 3em;
          height: 3em;
        }

        &:hover {
          cursor: pointer;
          opacity: 0.7;
        }
      }
    }
  }

  .radio_btn,
  .tw_icon {
    &.select {
      .img_wrapper {

        &::before,
        &::after {
          opacity: 0;
        }
      }
    }

    .img_wrapper {

      &::before,
      &::after {
        content: "";
        top: 50%;
        left: 50%;
        position: absolute;
        width: 110%;
        height: 2px;
        background-color: red;
        z-index: 5;
      }

      &::before {
        transform: translate(-50%, -50%) rotate(135deg);
      }

      &::after {
        transform: translate(-50%, -50%) rotate(-135deg);
      }
    }

    img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .bullet {
      position: relative;
      width: 4.2em;
      height: 4.2em;
      left: -6px;
      top: -5px;
      border: 3px solid #fff;
      opacity: 0;
      border-radius: 50%;
      z-index: -1;

      @include root.mq(sp) {
        width: 4.2em;
        height: 4.2em;
      }

      .line {
        position: absolute;
        width: 10px;
        height: 2px;
        background-color: #fff;
        opacity: 0;

        &.zero {
          left: 11px;
          top: -21px;
          transform: translateY(20px);
          width: 2px;
          height: 10px;
        }

        &.one {
          right: -7px;
          top: -11px;
          transform: rotate(-55deg) translate(-9px);
        }

        &.two {
          right: -20px;
          top: 11px;
          transform: translate(-9px);
        }

        &.three {
          right: -8px;
          top: 35px;
          transform: rotate(55deg) translate(-9px);
        }

        &.four {
          left: -8px;
          top: -11px;
          transform: rotate(55deg) translate(9px);
        }

        &.five {
          left: -20px;
          top: 11px;
          transform: translate(9px);
        }

        &.six {
          left: -8px;
          top: 35px;
          transform: rotate(-55deg) translate(9px);
        }

        &.seven {
          left: 11px;
          bottom: -21px;
          transform: translateY(-20px);
          width: 2px;
          height: 10px;
        }
      }
    }

    &.select .bullet {
      position: absolute;
      opacity: 1;
      animation-name: explode;
      animation-duration: 0.350s;

      .line.zero {
        animation-name: drop-zero;
        animation-delay: 0.100s;
        animation-duration: 0.9s;
        animation-fill-mode: forwards;
      }

      .line.one {
        animation-name: drop-one;
        animation-delay: 0.100s;
        animation-duration: 0.9s;
        animation-fill-mode: forwards;
      }

      .line.two {
        animation-name: drop-two;
        animation-delay: 0.100s;
        animation-duration: 0.9s;
        animation-fill-mode: forwards;
      }

      .line.three {
        animation-name: drop-three;
        animation-delay: 0.100s;
        animation-duration: 0.9s;
        animation-fill-mode: forwards;
      }

      .line.four {
        animation-name: drop-four;
        animation-delay: 0.100s;
        animation-duration: 0.9s;
        animation-fill-mode: forwards;
      }

      .line.five {
        animation-name: drop-five;
        animation-delay: 0.100s;
        animation-duration: 0.9s;
        animation-fill-mode: forwards;
      }

      .line.six {
        animation-name: drop-six;
        animation-delay: 0.100s;
        animation-duration: 0.9s;
        animation-fill-mode: forwards;
      }

      .line.seven {
        animation-name: drop-seven;
        animation-delay: 0.100s;
        animation-duration: 0.9s;
        animation-fill-mode: forwards;
      }
    }
  }

  //テキストボックス
  .text_input_area {
    .input_box {
      width: 80%;
      position: relative;
      margin: 0 auto;
      background-color: #fff;
      box-shadow: 0 4px 16px 0 rgb(22 42 90 / 12%);
      transition: box-shadow 0.3s ease;
      border-radius: 15px;

      &.title {
        margin-bottom: 1.5em;

        strong {
          color: red;
        }

        @include root.mq(sp) {
          margin-bottom: 2em;
          margin-top: 8rem;
        }
      }

      &.date_picker {
        position: absolute;
        width: 22em;
        right: 15em;
        top: 5.5em;


        label {
          @include root.mq(sp) {
            font-size: 1.4em;

            &.active {
              font-size: 1em;
            }
          }

          input {
            @include root.mq(sp) {
              font-size: 1.2em;
            }
          }
        }


        @include root.mq(sp) {
          width: 15em;
          font-size: 1.4em;
          right: 2em;

        }

        input {
          padding: 1em 0.5em 0.5em 1em;

          @include root.mq(sp) {
            font-size: 1.4em;
            padding: 0.7em 0.5em 0.5em 0.8em;
          }
        }
      }

      &.url_box {
        display: flex;
        align-items: center;
        background-color: transparent;
        margin-top: 3em;
        margin-bottom: 3em;
        padding-bottom: 7em;

        @include root.mq(sp) {
          display: block;
        }

        .home_url {
          padding: 0.62em 0.62em 0 1.5em;
          font-size: 1.6em;

          @include root.mq(sp) {
            padding-left: 0.62em;
            padding-bottom: 0.62em;
          }
        }

        input {
          padding: 1em 3.5em 1em 1em;
        }

        .url_check {
          position: absolute;
          bottom: 0;
          right:3em;
          @include root.mq(sp) {
            right:1em;
          }
          label {
            background-color: transparent;
            @include root.mq(sp) {
              font-size: 1.2em;
            }
          }
        }
      }

      @include root.mq(sp) {
        width: 100%;
      }

      .info_btn {
        position: absolute;
        top: calc(50% - 1.2em);
        right: 1.8em;
        width: 2.5em;
        height: 2.5em;
        transition: all 0.3s ease 0s;
        &.url_input{
          top: calc(50% - 4.5em);
          @include root.mq(sp) {
            top: calc(50% - 2.5em);
          }
        }

        @include root.mq(sp) {
          width: 2em;
          height: 2em;
        }

        //z-index: 60;
        &:hover {
          //opacity: 0.7;
          cursor: pointer;
        }

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    label {
      position: absolute;
      top: 0;
      font-size: 2em;
      margin: 10px;
      padding: 7px 10px;
      background-color: #fff;
      color: #000;
      box-shadow: 0 4px 16px 0 rgb(22 42 90 / 12%);
      border-radius: 5px;
      -webkit-transition: top .2s ease-in-out, font-size .2s ease-in-out;
      transition: top .2s ease-in-out, font-size .2s ease-in-out;
      z-index: 5;

      @include root.mq(sp) {
        font-size: 1.8em;
      }

      &.active {
        top: -1.5em;
        font-size: 2em;

        @include root.mq(sp) {
          top: -2.8em;
          font-size: 1.4em;
        }
      }
    }

    input[type=text],
    textarea {
      width: 100%;
      padding: 1.25em 2.25em 1em 1em;
      font-size: 2em;
      background-color: #fff;
      color: #000;
      position: relative;
      border-radius: 15px;

      @include root.mq(sp) {

        font-size: 1.6em;
        padding: 1.25em 2.5em 0.94em 0.625em;
      }
    }

    textarea {
      resize: none;
      height: auto;
      padding-bottom: 3em;

      @include root.mq(sp) {
        padding-bottom: 6em;
      }

      &::selection {
        background-color: rgba(152, 203, 236, 0.541);
        color: #000;
      }
    }

    input[type=text]:focus,
    textarea:focus {
      outline: none;
    }

    #focus {
      box-shadow: 0px 0px 15px 3px rgb(166, 193, 241);
      position: absolute;
      //margin: 50px auto;
      transition:
        width .2s ease,
        height .2s ease,
        left .2s ease,
        top .2s ease,
        border-radius .2s ease;
      pointer-events: none;
      z-index: 5;
      border-radius: 10px;
      display: none;
    }

    .tw_check,
    .url_check {
      padding-bottom: 1em;

      label {
        position: static;
        white-space: nowrap;
        font-size: 1.8em;

        @include root.mq(sp) {
          font-size: 1.4em;
        }
      }
    }

    .tw_check {
      @include root.mq(sp) {
        bottom: 0;
        right: auto;
      }
    }

    .char_count {
      position: absolute;
      bottom: 9em;
      left: 3em;
      display: flex;
      

      @include root.mq(sp) {
        left: auto;
        right: 1em;
        display: block;
      }

      label {
        position: static;
        margin: 0;
        font-size: 1.8em;
        font-weight: 400;
        background-color: rgb(245, 241, 232);
        white-space: nowrap;
        &:first-child{
          margin-right: 1em;
        }
        @include root.mq(sp) {
          font-size: 1.4em;
          &:first-child{
            margin-right: 0;
          }
        }
      }
    }

    #id_textArea {
      @include root.mq(sp) {
        margin-top: 8em;
        min-height: 4em;
      }
    }

    #id_comment {
      @include root.mq(sp) {
        min-height: 15em;
      }
    }
  }

  //チェックボックス
  .cansel_check,
  .save_check,
  .del_check,
  .tw_check,
  .url_check {
    margin-left: auto;
    margin-top: 3em;
    position: relative;
    width: fit-content;

    @include root.mq(sp) {
      padding-top: 1em;
      margin-top: 0;
    }

    input[type='checkbox'] {
      display: none;
    }

    label {
      font-size: 2em;
      position: relative;
      display: flex;
      padding: 0.5em 1em;
      align-items: center;
      color: #9e9e9e;
      transition: color 250ms cubic-bezier(.4, .0, .23, 1), background-position 0.3s;

      @include root.mq(sp) {
        padding: 1em 1.5em;
      }

      p {
        position: relative;

        @include root.mq(sp) {
          font-size: 1.4em;
        }

        &:before {
          content: attr(rel);
          position: absolute;
          top: 0;
          left: 0;
          color: #02350f;
          transition: opacity 300ms cubic-bezier(.4, .0, .23, 1);
          opacity: 0;
        }
      }

      span {
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 1em;
        width: 1.4em;
        height: 1.4em;
        background: transparent;
        border: 2px solid #9E9E9E;
        border-radius: 2px;
        position: relative;
        transition: all 250ms cubic-bezier(.4, .0, .23, 1);

        @include root.mq(sp) {
          width: 1.3em;
          height: 1.3em;
          margin-right: 0.6em;
        }
      }
    }

    label:hover {
      color: #000;
      cursor: pointer;

      span {
        background: rgba(255, 255, 255);
      }
    }

    input[type='checkbox']:checked {
      ~p {
        &::before {
          opacity: 1;
        }
      }

      ~span {
        border: .7em solid #FFEB3B;

        @include root.mq(sp) {
          //border: .4em solid #FFEB3B;
        }

        animation: shrink-bounce 200ms cubic-bezier(.4, .0, .23, 1);

        &:before {
          content: "";
          position: absolute;
          top: -0.2em;
          left: -0.2em;
          border-right: 3px solid transparent;
          border-bottom: 3px solid transparent;
          transform: rotate(45deg);
          transform-origin: 0% 50%;
          animation: checkbox-check 125ms 250ms cubic-bezier(.4, .0, .23, 1) forwards;
        }
      }
    }
  }

  .cansel_check {
    position: absolute;
    top: 3em;
    left: 3em;
    width: 50%;

    @include root.mq(sp) {
      width: 55%;
      top: 3.5em;
      left: 0;
      padding-left: 0;
    }
  }

  //吹き出し
  .ballon {
    position: absolute;
    width: fit-content;
    white-space: nowrap;
    top: -11em;
    left: 3em;
    transform: scale(0);
    transform-origin: 1em 120%;
    transition: all 0.5s ease-in 0s;
    z-index: 40;
    opacity: 1;

    &:hover {
      opacity: 1;
    }

    &.under {
      left: auto;
      right: 3em;
      top: 5.5em;
      transform-origin: 100% -12%;

      &::before {
        left: auto;
        bottom: auto;
        right: -1em;
        top: -3em
      }

      &::after {
        left: auto;
        bottom: auto;
        right: 0;
        top: -1.5em
      }
    }

    &.left {
      left: auto;
      right: 3em;
      top: -11em;
      transform-origin: 100% 110%;

      &::before {
        left: auto;
        bottom: -1em;
        right: -1em;
        top: auto;
      }

      &::after {
        left: auto;
        bottom: -0.5em;
        right: 0;
        top: auto;
      }
    }

    &.twArea {
      >div {
        background: rgba(175, 202, 243, 0.8);
      }

      &::before {
        background: rgba(175, 202, 243, 0.8);
      }

      &::after {
        background: rgba(175, 202, 243, 0.8);
      }

      p {
        font-size: 1.2em;
        padding: 0.28em;
        border-radius: 10px;
        background-color: #fff;

        @include root.mq(sp) {
          font-size: 1.4em;
        }

        &.over {
          background-color: transparent;
          color: red;
          font-weight: bold;
          margin-bottom: 1em;
        }
      }

      .tw_icon {
        position: absolute;
        width: 2.2em;
        height: 2em;
        left: 1em;
        top: 50%;
        transform: translateY(-50%);

        @include root.mq(sp) {
          width: 2.5em;
          height: 2.5em;
        }

        .img_wrapper {
          width: 4em;
          height: 4em;

          @include root.mq(sp) {
            width: 2.5em;
            height: 2.5em;
          }
        }

        .bullet {
          width: 3em;
          height: 3em;
          left: -5px;
          top: -9px;

          @include root.mq(sp) {
            width: 3.5em;
            height: 3.5em;
            left: -8px;
            top: -10px;
          }
        }
      }
    }

    &.display {
      transform: scale(1);
      @include root.mq(sp) {
        transform: scale(0.7);
      }
    }

    @include root.mq(sp) {
      top: -5em;
      left: 1em;
    }

    &::before {
      content: "";
      position: absolute;
      left: 0;
      width: 1.3em;
      height: 1.2em;
      bottom: -3.2em;
      background: rgba(243, 110, 33, 0.8);
      border-radius: 50%;

      @include root.mq(sp) {
        left: 1em;
        width: 1em;
        height: 0.8em;
        bottom: -2em;
      }
    }

    &::after {
      content: "";
      position: absolute;
      left: 0.5em;
      width: 2em;
      height: 1.8em;
      bottom: -1.7em;
      background: rgba(243, 110, 33, 0.8);
      ;
      border-radius: 50%;

      @include root.mq(sp) {
        left: 2em;
        width: 1.5em;
        height: 1.3em;
        bottom: -1.2em;
      }
    }

    span,
    >div {
      position: relative;
      display: block;
      color: #000;
      padding: 0.94em 1.25em 0.94em 3.75em;
      font-size: 1.6em;
      text-align: left;
      background: rgba(243, 110, 33, 0.8);
      border-radius: 1.875em;

      @include root.mq(sp) {
        padding: 0.7em 0.6em 0.7em 4.5em;
        font-size: 1.2em;
        border-radius: 1em;
      }
    }

    span {
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0.8em;
        width: 2.2em;
        height: 2.2em;
        background: transparent url('../img/info.png') no-repeat center center / cover;

        @include root.mq(sp) {
          width: 2em;
          height: 2em;
        }
      }
    }

    .tool_btn_wrapper {
      display: flex;
      justify-content: center;
      column-gap: 1.5em;
      margin-top: 2em;

      div,
      button {
        height: 1.56em;
        padding: 0 1.25em;
        font-size: 1.6em;
        line-height: 1.56em;
      }
    }
  }

  //各SNSのヘッダー
  .twitter_header,
  .facebook_header,
  .fb_user_header,
  .instagram_header,
  .sns_check {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2em 2em 4em;
    position: relative;

    &.menu {
      padding: 2em 2em 5em;
    }

    @include root.mq(sp) {
      padding: 0 1em 6em;
    }

    .header_logo {
      flex: 0 0 auto;
      width: 5em;
      height: auto;

      img {
        height: 100%;
        width: 100%;
      }

      @include root.mq(sp) {
        padding: 0;
        width: 3em;
      }
    }

    .user_info,
    .page_info {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      position: relative;

      .image {
        flex: 0 0 auto;
        width: 5em;
        height: 5em;
        background-color: rgb(250, 252, 228);
        border-radius: 50%;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      &.login {
        .text {
          color: #000;
        }
      }

      &.error {
        display:block;
        padding: 1.5em 0 1.5em 2.5em;
        font-size: 2em;
        width: 0%;
        margin-left: 0;

        &::after {
          content: "";
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0.25em;
          width: 1.5em;
          height: 1.5em;
          background: transparent url('../img/sns_err.png') no-repeat center center / cover;

          @include root.mq(sp) {
            width: 1em;
            height: 1em;
          }
        }
      }

      .text {
        flex: 1 1 auto;
        font-size: 2em;
        //white-space: nowrap;
        padding: 0 1.5em;
        color: #fff;

        @include root.mq(sp) {
          padding: 0 0 0 0.8em;
          font-size: 1.8em;
        }
        a{
          color: #fff;
        }

        p {
          font-size: 0.6em;
          font-weight: 400;
        }
      }

      .page_name {
        font-size: 2.5em;
        padding-left: 0.8em;
      }

      .username,
      .usertitle {
        font-size: 2em;
      }

      .user_icon {
        margin-left: 2em;
        margin-right: 1.5em;
      }
    }

    .follow_wrapper {
      position: absolute;
      display: flex;
      right: 6em;
      bottom: 1.5em;
      font-size: 2em;
      color: #fff;
      @include root.mq(sp) {
        right: 0;
      bottom: 0.5em;
      font-size: 1.5em;
      }
    }

    .follower {
      width: fit-content;
      margin-left: auto;
      
      margin-left: 1.7em;
      @include root.mq(sp) {
        font-size: 1.2em;
      }

      &.white {
        color: #fff;
      }

      span {
        font-size: 2em;
        font-weight: bold;
        padding-right: 0.5em;

        @include root.mq(sp) {
          font-size: 1.6em;
        }
      }
    }

    .count {
      position: absolute;
      bottom: 3em;
      left: 3em;
      color: #fff;

      @include root.mq(sp) {
        font-size: 1.4em;
        bottom: 1.4em;
        left: 1.4em;
      }
    }
  }

  .facebook_header {
    padding-left: 0;
    @include root.mq(sp) {
      gap:2em;
    }
    .user_info{
      width: fit-content;
      padding-top: 1em;
      margin-left: auto;
      font-size: 0.8em;
      .image{
        width: 4em;
        height: 4em;
      }
    }
  }

  .fb_user_header {
    padding: 4em 2em 1em;
    @include root.mq(sp) {
      .user_info {
        display: grid;
        grid-template-columns: 9em auto;
        grid-template-rows: auto auto;
        row-gap: 1em;

        .usertitle {
          grid-row: 1 / 2;
          grid-column: 1 / 3;
        }
      }
    }
  }

  .instagram_header {
    justify-content: left;
    color: #fff;

    .user_info {

      //flex: 0 0 auto;
      .text {

        @include root.mq(sp) {
          width: 20em;
          padding: 0 1em;
        }
      }
    }
  }

  //モーダル式のコントロールボックス
  .modal_ctrl {
    position: fixed;
    width: 80%;
    //max-width: 1160px;
    display: flex;
    background-color: #E5E5E5;
    border-radius: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    padding: 4em 2em 2em;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 35;

    @include root.mq(sp) {
      width: 90%;
      padding: 3em 1em 2em;
      display: block;
    }

    .ctrl_wrapper {
      padding: 1em;
      margin-left: 3em;
      display: flex;
      column-gap: 3em;

      @include root.mq(sp) {
        margin-left: 0;
        display: block;
      }
    }

    .btn_wrapper {
      position: absolute;
      right: 6em;
      top: 50px;
      transform: translateY(-50%);

      @include root.mq(sp) {
        right: 2em;
        top: auto;
        bottom: 1em;
      }
    }

    .getin_postType {
      position: relative;
      padding-left: 20px;
      padding-right: 10px;
      background: transparent;
      margin-left: auto;
      margin-bottom: 1.1em;
      color: #2d2d2d;
      line-height: 1.3;
      border-bottom: solid 3px #28468C;
      width: fit-content;
      font-size: 1.8em;

      @include root.mq(sp) {
        font-size: 1.6em;
      }

      &::before {
        width: 99%;
        transform: skewX(345deg) translateX(7%);
        content: "";
        /*ボックスを作る*/
        position: absolute;
        /*ポジションで中央に配置*/
        top: 0;
        bottom: 0;
        left: -20px;
        right: 0;
        background-color: rgb(245, 241, 232);
        z-index: -1;
      }
    }
  }

  //スマホのみ改行
  .sp_br {
    display: none;

    @include root.mq(sp) {
      display: block;
    }
  }

  //PCのみ改行
  .pc_br {
    display: block;

    @include root.mq(sp) {
      display: none;
    }
  }

  //共通フレーム
  .editor_frame {
    max-width: root.$layout-width-inner;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    column-gap: 3em;
    margin-top: 5em;
    margin-bottom: 12em;

    @include root.mq(sp) {
      margin-top: 7.5em;
      display: block;
      padding: 0 20px;
    }
  }
}

//編集者トップメニュー
.sns-relate-login {
  .condition_area {
    width: 60%;
    margin: 5em auto 5em;

    @include root.mq(sp) {
      margin-top: 8em;
      width: 100%;
    }

    .inner_title {
      margin-bottom: 0.4em;
      background-color: root.$color-base;
      color: #fff;
      padding: 0.5em 0;
      text-align: center;
      border-radius: 10px 10px 0 0;
      font-size: 2.4em;

      @include root.mq(sp) {
        font-size: 2em;
      }
    }

    .instagram_header {
      color: #000;
    }
  }

  .wp_buttons,.tw_buttons,.fb_buttons,.insta_info  {
    margin-top: 5em;
    background-color: rgb(245 241 232);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    padding-bottom: 2em;

    @include root.mq(sp) {
      margin-top: 3em;
      
    }
  }

  .fb_buttons {
    
    margin-bottom: 5em;
    
    .fb_content {
      padding: 0 3em 2em;

      @include root.mq(sp) {
        padding: 0 2em 2em;
      }

      #status {
        font-size: 2.4em;

        @include root.mq(sp) {
          font-size: 2em;
        }
      }
    }
  }

  .command_area {
    width: 40%;
    margin: 5em auto;
    @include root.mq(sp) {
      width: 100%;
      margin: 3em auto;
    }
  }

  .command_list {
    margin: 5em auto 0;
    border-radius: 10px;
    background-color: rgb(245 241 232);
    padding: 3em;

    @include root.mq(sp) {
      margin-top: 3em;
    }

    li {
      width: 20em;
      margin: 0 auto;

      &:not(:first-child) {
        margin-top: 3em;
      }

      a {
        display: block;
        width: 100%;
        height: 100%;
        color: #000;
      }
    }
  }

  .option_area {
    margin-top: 5em;

    .post_select {
      width: 100%;
      margin: 3em auto 0;
      background-color: rgb(245, 241, 232);
      padding: 3em;
      border-radius: 10px;

      .custom_select {
        width: 80%;
        margin: 0 auto;
      }
    }
  }
}

//投稿一覧
.sns-relate-list {
  .scroll_wrapper {
    @include root.mq(sp) {
      //overflow-x: scroll;
      margin-bottom: 2em;
    }
  }

  table {
    width: 100%;
    margin: 3em auto;
    border-collapse: collapse;
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    table-layout: fixed;

    tbody {
      &:nth-child(odd) td {
        background: #F5F6F8;
      }

      &:nth-child(even) td {
        background: rgb(245, 241, 232);
      }
    }

    tr {
      height: 4em;

      @include root.mq(sp) {
        height: 12em;
      }
    }

    th,
    td {
      border: 3px solid rgba(0, 0, 0, .1);
      padding: .6em;

      @include root.mq(sp) {
        padding: 0.3em;
      }
    }

    th {
      background: root.$color-base;
      color: #fff;
      font-size: 2em;
      font-weight: bold;
      text-align: center;

      @include root.mq(sp) {
        font-size: 1.2em;
      }
    }

    thead {

      th {

        &:nth-child(1) {
          width: 12%;

          @include root.mq(sp) {
            width: 17%;
          }
        }

        &:nth-child(2) {
          width: 15%;

          @include root.mq(sp) {
            width: 27%;
          }
        }

        &:nth-child(3) {
          width: 10%;

          @include root.mq(sp) {
            display: none;
          }
        }

        &:nth-child(4) {
          width: 63%;

          @include root.mq(sp) {
            width: 55%;
          }
        }
      }
    }

    td {
      font-size: 1.8em;

      &.caution {
        font-weight: bold;
        color: red;
      }

      @include root.mq(sp) {
        font-size: 1.2em;

        &.status {
          display: none;
        }
      }

    }

    .ctrl {
      position: relative;

      .tr_toggle {
        position: absolute;
        left: 0.5em;
        top: 50%;
        transform: translateY(-50%);
        width: 3em;
        height: 3em;
        transition: all 0.3s ease 0s;

        @include root.mq(sp) {
          left: 50%;
          transform: translateX(-50%);
          top: auto;
          bottom: 0;
        }

        img {
          width: 100%;
          height: 100%;
        }

        &:hover {
          cursor: pointer;
        }

        &.is_open {
          transform: translateY(-50%) rotate(180deg);

          @include root.mq(sp) {
            transform: translateX(-50%) rotate(180deg);
          }
        }
      }

      .list_buttons {
        @include root.mq(sp) {
          white-space: nowrap;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 0.5em;
        }
      }


    }

    .hide_tr {
      display: none;

      div {
        display: none;
        padding: 0.6em;
        word-wrap: break-word;
      }

      height: 0;

      th {
        padding: 0;
      }

      td {
        padding: 0;
      }

      .status_err {
        background-color: #f8e0e0;
      }

      .status_reserve {
        background-color: #c5f1d4;
      }

      .status_wait {
        background-color: #dbe089;
      }
    }
  }

  .snslist_frame {
    padding-top: 2em;
    margin-bottom: 10em;
  }

  .snslist_inner {
    width: 75%;
    margin: 0 auto;

    @include root.mq(sp) {
      width: 100%;
      padding: 0;
    }
  }



  .snslist_post {
    overflow-wrap: break-word;
  }


  .snslist_pagination {
    ul {
      display: flex;
      justify-content: center;
      position: relative;

      @include root.mq(sp) {
        margin-bottom: 3em;
      }

      li {
        .page-numbers {
          display: block;
          width: 1.7em;
          height: 1.7em;
          font-size: 3em;
          text-align: center;
          line-height: 1.7em;
          background-color: root.$color-base;
          border-radius: 0.3em;
          color: #fff;
          transition: all 0.3s ease 0s;

          &:hover {
            opacity: 0.7;
          }

          &.long {
            padding: 0.12em 0.7em;
            width: fit-content;
            height: auto;
          }

          &.current {
            border: root.$color-base 1px solid;
            background-color: #fff;
            color: root.$color-base;
          }

          @include root.mq(sp) {
            width: 1.5em;
            height: 1.5em;
            font-size: 2em;
            line-height: 1.5em;
          }
        }

        &:not(:first-child) {
          margin-left: 1.7em;

          @include root.mq(sp) {
            margin-left: 0.5em;
          }
        }
      }
    }
  }
}

//投稿編集画面
.sns-relate-editor {
  .edit_snspost {
    width: 65%;
    margin: 5em auto 20em;
    padding: 0 4em;
    position: relative;

    @include root.mq(sp) {
      width: 100%;
      padding: 0;
      margin-top: 4em;
    }

    fieldset {
      width: 100%;
      margin-bottom: 3em;

      &:not(:first-of-type) {
        display: none;
      }
    }

    /*progressbar*/
    #progressbar {
      margin-bottom: 1.5em;
      overflow: hidden;
      /*CSS counters to number the steps*/
      counter-reset: step;

      li {

        color: #000;
        text-transform: uppercase;
        font-size: 1em;
        width: 33.33%;
        float: left;
        position: relative;
        letter-spacing: 1px;
        text-align: center;

        &::before {
          content: counter(step);
          counter-increment: step;
          width: 1.5em;
          height: 1.5em;
          line-height: 1.25em;
          text-align: center;
          display: block;
          font-size: 2em;
          color: #333;
          background: white;
          border: #000 solid 1px;
          border-radius: 50%;
          margin: 0 auto 10px auto;
        }

        &::after {
          content: '';
          width: 100%;
          height: 2px;
          position: absolute;
          left: -50%;
          top: 1em;
          background-image: linear-gradient(to right, rgb(12, 11, 11) 50%, #ee0979 50%);
          background-position: 0 0;
          background-size: 200% auto;
          transition: all 1s;
          z-index: -1;
          /*put it behind the numbers*/
        }

        &:first-child {
          &::after {
            /*connector not needed before the first step*/
            content: none;
          }
        }

        &.active {
          &::before {
            background: #ee0979;
            color: white;
            border: none;
          }

          &::after {
            background-position: -100% 0;
            color: #fff;
          }
        }
      }
    }

    .input_image_erea,
    .option_input_area,
    .text_input_area {
      padding: 6em 2em;
      border-radius: 10px;
      box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
      background-color: rgb(245, 241, 232);
      position: relative;
      @include root.mq(sp) {
        padding: 2em 1em;
      }

      .input_image {
        position: relative;
        display: flex;
        background-color: rgb(236, 236, 236);
        padding: 3em 2em;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 2em;
        row-gap: 3em;
        
        &:not(:first-child) {
          margin-top: 4em;
        }
        @include root.mq(sp) {
          padding: 2em 1em;
          display: block;
        }
        .group_title {
          position: absolute;
          font-size: 2em;
          padding: 0.25em 1em;
          background-color: #fff;
          width: fit-content;
          left: 0.5em;
          top: -1em;
          box-shadow: 0 4px 16px 0 rgb(22 42 90 / 12%);
          border-radius: 5px;
          z-index: 10;
    
          @include root.mq(sp) {
            font-size: 1.4em;
            padding: 0.5em;
            left: 0.5em;
            top: -1em;
          }
        }

        .media_item {
          width: 23%;
          background-color: #fff;
          position: relative;
          border-radius: 3px;

          //overflow: hidden;
          @include root.mq(sp) {
            //width: 48%;
            width: 100%;

            &:not(:first-child) {
              margin-top: 1.5em;
            }
          }

          &::after {
            content: "";
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            height: 8px;
            box-shadow: 0 40px 15px rgba(0, 0, 0, .5);
            background-color: transparent;
            border-radius: 80px / 4px;
          }

          .media_wrapper,
          .move_wrapper {
            position: relative;
            overflow: hidden;

            .img_frame {
              padding-top: 60%;
              transition: all 0.3s ease 0s;

              &:hover {
                cursor: pointer;
                transform: scale(1.2);
              }
            }
          }

          .media_wrapper {
            &.hide {
              opacity: 0;
            }
          }

          .move_wrapper {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transform-style: preserve-3d;
            box-shadow:
              1px 1px 0 1px #f9f9fb,
              -1px 0 28px 0 rgba(34, 33, 81, 0.01),
              28px 28px 28px 0 rgba(34, 33, 81, 0.25);
            transition:
              .5s ease-in-out transform,
              .5s ease-in-out box-shadow,
              .5s ease-in-out opacity;

            &.move {
              opacity: 0.5;
              transform:
                translate3d(0px, -16px, 0px);
              box-shadow:
                1px 1px 0 1px #f9f9fb,
                -1px 0 28px 0 rgba(34, 33, 81, 0.01),
                54px 54px 28px -10px rgba(34, 33, 81, 0.15);
            }

            .radio_list {
              display: none;
            }
          }
        }
      }

      .content_title.text {
        @include root.mq(sp) {
          margin-bottom: 2.2em;
        }


        &::after {
          background: transparent url('../img/note.png') no-repeat center center / cover;
        }
      }
    }

    .option_input_area {
      .content_title.option {
        &::after {
          background: transparent url('../img/option.png') no-repeat center center / cover;
        }
      }


    }

    .acf-label,
    .content_title {
      font-size: 2.2em;

      @include root.mq(sp) {
        font-size: 1.8em;

        .description {
          font-size: 0.78em;
        }
      }
    }

    .content_title {
      margin-bottom: 3em;
    }

    .acf-input {
      background-color: rgb(236, 236, 236);
    }

    .pict_wrapper,
    .movie_wrapper {
      background-color: rgb(245, 241, 232);

    }

    .movie_wrapper {
      margin-top: 4em !important;

    }

    .pict_wrapper>.acf-label>label,
    .movie_wrapper>.acf-label>label,
    .content_title {
      padding-left: 3em;
      position: relative;

      @include root.mq(sp) {
        padding-left: 4em;
      }

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0.5em;
        width: 1.5em;
        height: 1.5em;
      }
    }

    .pict_wrapper>.acf-label>label,
    .content_title.image {
      &::after {
        background: transparent url('../img/sns_pic.png') no-repeat center center / cover;
      }
    }

    .image_caution{
      font-size: 1.5em;
      color:red;
    }

    .movie_wrapper>.acf-label>label,
    .content_title.video {
      &::after {
        background: transparent url('../img/sns_movie.png') no-repeat center center / cover;
      }
    }

    .pict_item>.acf-input>.acf-fields,
    .movie_item>.acf-input>.acf-fields {
      display: flex;

      @include root.mq(sp) {
        display: block;
      }
    }

    .image_item,
    .video_item {
      width: 60%;

      @include root.mq(sp) {
        width: 100%;
      }
    }

    .image_item>.acf-label,
    .video_item>.acf-label {
      display: none;
    }

    .acf-fields>.acf-field {
      border-top: none;
    }

    .acf-image-uploader,
    .acf-file-uploader {
      .hide-if-value {
        font-size: 2.2em;

        @include root.mq(sp) {
          font-size: 1.4em;
        }

        p {
          background-color: #fff;

          a {
            margin-top: 1em;
            display: block;
          }
        }
      }

      .acf-button {
        width: 28em;
        height: 6em;
        text-align: center;
        background-color: rgb(110, 116, 202);
        color: #fff;
        padding: 1em 2em;
        margin-left: 3em;
        border-radius: 1em;

        @include root.mq(sp) {
          width: 12.5em;
          height: 2.5em;
          margin: 0 auto;
          font-size: 1.6em;
        }
      }
    }

    .acf-checkbox-list {
      li {
        font-size: 2em;
        padding: 0.5em 0.75em;

        @include root.mq(sp) {
          font-size: 1em;
        }
      }
    }

    .acf-form-submit {
      margin: 2em auto 0;
      width: 15em;
      height: 5em;
      border-radius: 5px;
      background-color: rgb(236, 236, 236);
      text-align: center;

      [type="submit"] {
        font-size: 3em;
      }
    }
  }

  //画像の操作ボタン等
  .img_close {
    width: 2.5em;
    height: 2.5em;
    top: 1em;
    right: 1em;

    @include root.mq(sp) {
      width: 3.5em;
      height: 3.5em;
      top: 0.5em;
      right: 0.5em;
    }
  }

  
  .snsSel_wrapper {
    position: relative;
    margin-top: 5em;

    @include root.mq(sp) {
      width: 100%;
    }

    .snsSel_title {
      position: absolute;
      font-size: 2em;
      padding: 0.25em 1em;
      background-color: #fff;
      width: fit-content;
      left: 0.5em;
      top: -1em;
      box-shadow: 0 4px 16px 0 rgb(22 42 90 / 12%);
      border-radius: 5px;
      z-index: 10;

      @include root.mq(sp) {
        font-size: 1.4em;
        padding: 0.5em;
        left: 0.5em;
        top: -1em;
      }
    }

    .radio_select {
      position: static;

      @include root.mq(sp) {
        width: 100%;
      }

      .radio_list {
        width: 100%;
        padding-top: 4em;
        padding-bottom: 2em;
        background-color: #fff;
        justify-content: space-around;

        @include root.mq(sp) {
          display: block;
          padding: 4em 2em 2em;
          margin-bottom: 2em;
        }

        .radio_btn {
          width: 30%;
          height: auto;
          background-color: rgb(219, 215, 215);
          border-radius: 10px;
          padding: 2em 3em 1em;

          @include root.mq(sp) {
            width: 100%;

            &:not(:first-child) {
              margin-top: 3em;
            }
          }

          .img_wrapper {
            position: relative;
            width: 5em;
            height: 5em;
            margin: 0 auto 3em;

            @include root.mq(sp) {
              width: 3em;
              height: 3em;
              margin-bottom: 1em;
            }
          }

          .bullet {
            width: 8em;
            height: 8em;
            left: -1.5em;
            top: -1.5em;

            @include root.mq(sp) {
              width: 5em;
              height: 5em;
              left: -1em;
              top: -1em;
            }
          }

          .user_info {
            display: flex;
            justify-content: center;
            align-items: center;
            column-gap: 2em;

            .image {
              width: 4em;
              height: 4em;
              position: relative;

              img {
                border-radius: 50%;
              }
            }
          }
        }
      }
    }
  }

  //投稿編集ページ用ボタン
  .sns_delete,
  .sns_exec {
    position: relative;
    padding-left: 35px;
    padding-right: 10px;
    width: 10em;
    height: 2.4em;
    font-size: 2.5em;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 8px;
      width: 1.2em;
      height: 1.2em;
      background: transparent url('../img/trash.png') no-repeat center center / cover;
    }

    @include root.mq(sp) {
      width: 9.375em;
      height: 2.5em;
      font-size: 1.6em;
      padding-left: 20px;

      &::after {
        width: 20px;
        height: 20px;
      }
    }
  }

  .sns_exec {

    &::after {
      background: transparent url('../img/add.png') no-repeat center center / cover;
    }
  }

  .sns_exec.modify {
    &::after {
      background: transparent url('../img/mod.png') no-repeat center center / cover;
    }
  }

  #sns-post {
    .acf-form-submit {
      display: none;
    }
  }

  //メディア拡大モーダル
  .modal_media {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    z-index: 50;
    display: none;

    &.port {

      img,
      video {
        width: auto;
        height: 80vmin;
      }
    }

    &.land {

      img,
      video {
        width: 95vmin;
        height: auto;
      }
    }

    .media_frame {
      position: relative;

      &::after,
      &::before {
        z-index: -1;
        position: absolute;
        content: "";
        bottom: 10px;
        left: 10px;
        width: 50%;
        top: 80%;
        max-width: 300px;
        background: #777;
        box-shadow: 0 15px 10px #777;
        transform: rotate(355deg);
      }

      &::after {
        transform: rotate(-355deg);
        right: 10px;
        left: auto;
      }
    }

    .modal_close {
      top: -3em;
      right: -12em;

      @include root.mq(sp) {
        right: -3em;
      }
    }
  }

  //編集確認用モーダル
  .modal_frame {
    position: fixed;
    width: 95vmin;
    height: 85vmin;
    background-color: #fff;
    //border-radius: 15px;
    border: 2px solid #28468C;
    overflow-y: scroll;
    padding: 2em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    z-index: 50;
    display: none;

    @include root.mq(sp) {
      width: 95%;
      height: 85%;
      padding: 2em 1em;
      //border-radius: 0;
    }

    // @include root.mq(pc-up){
    // 	font-size: 10px;
    // }
    .modal_title {
      font-weight: bold;
      font-size: 3em;
      color: #000;
      text-align: center;
      margin-top: 1em;
      margin-bottom: 0.7em;

      @include root.mq(sp) {
        font-size: 2em;
      }
    }

    .modal_message {
      padding-left: 3.125em;
      position: relative;
      font-size: 1.6em;

      @include root.mq(sp) {
        padding-left: 2.1875em;
      }

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0.5em;
        width: 1.875em;
        height: 1.875em;
        background: transparent url('../img/share.png') no-repeat center center / cover;

        @include root.mq(sp) {
          width: 1.25em;
          height: 1.25em;
        }
      }

      &.ignore {
        &::after {
          background: transparent url('../img/sns_err.png') no-repeat center center / cover;
        }
      }
    }

    .sns_section {
      margin-top: 2em;

      &:not(:first-child) {
        margin-top: 4em;
      }

      .content {
        border-radius: 10px;
        background: linear-gradient(315deg, #c7c9cd, #eceff4);
        box-shadow: -10px -10px 20px #e3e2e2, 20px 20px 20px #feffff;
        padding: 2em;
        opacity: 0.5;

        @include root.mq(sp) {
          padding: 1.5em 1em;
        }
      }

      .sns_title {
        margin-bottom: 1.5em;

        &::after {
          content: "【投稿除外】";
          white-space: nowrap;
          position: absolute;
          top: 0;
          right: 0;
          transform: translateX(100%);
          font-weight: 700;
          font-size: 1.2em;
          letter-spacing: 0.03em;

        }
      }

      &.select {
        .content {
          opacity: 1;
        }

        .sns_title {
          &::after {
            display: none;
          }
        }

      }
    }

    .sns_title {
      position: relative;
      padding-left: 20px;
      padding-right: 10px;
      //padding: 5px 26px 5px 42px;
      background: transparent;
      color: #2d2d2d;
      //margin-left: -33px;
      line-height: 1.3;
      border-bottom: solid 3px #28468C;
      width: fit-content;
      font-size: 2.5em;
      white-space: nowrap;

      @include root.mq(sp) {
        font-size: 1.8em;
      }

      &::before {
        width: 99%;
        transform: skewX(345deg) translateX(7%);
        content: "";
        /*ボックスを作る*/
        position: absolute;
        /*ポジションで中央に配置*/
        top: 0;
        bottom: 0;
        left: -8px;
        right: 0;
        background-color: rgb(245, 241, 232);
        z-index: -1;
      }
    }

    .top_section {
      display: flex;
      margin-top: 2em;
      flex-direction: column-reverse;

      .progress {
        width: 100%;

        @include root.mq(sp) {
          width: 100%;
        }

        .target_title {
          font-size: 1.8em;
        }

        .target_sns {
          padding: 1em 3em;

          @include root.mq(sp) {
            padding: 1em;
            padding-left: 2em;
          }

          .post_prg {
            font-size: 2em;
            position: relative;
            padding-left: 1em;

            @include root.mq(sp) {
              font-size: 1.6em;
              padding-left: 1em;
            }

            span {
              display: inline-block;
            }

            &::before {
              content: "";
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: -0.7em;
              width: 1.25em;
              height: 1.25em;

              @include root.mq(sp) {
                width: 1.25em;
                height: 1.25em;
              }
            }

            &.Twitter {
              &::before {
                background: transparent url('../img/x-black.png') no-repeat center center / cover;
              }
            }

            &.Facebook {
              &::before {
                background: transparent url('../img/facebook_b.png') no-repeat center center / cover;
              }
            }

            &.Instagram {
              &::before {
                background: transparent url('../img/instagram_logo.png') no-repeat center center / cover;
              }
            }

            &:not(:last-child) {
              margin-bottom: 0.8em;
            }

            &.ignore {
              opacity: 0.3;
            }

            &.pre {
              opacity: 0.8;

              span {
                position: relative;

                &::after {
                  content: "";
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  right: -2.5em;
                  width: 1.5em;
                  height: 1.5em;
                  background: transparent url('../img/loading.gif') no-repeat center center / cover;
                }
              }
            }

            &.conp {
              span {
                position: relative;
                font-weight: bold;
                color: #004680;
                border-left: solid 4px rgb(23, 190, 87);
                padding-left: 2.25em;
                margin-left: 1em;
                background-color: #def7f0;

                &::after {
                  content: "";
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  left: 0.5em;
                  width: 1em;
                  height: 1em;
                  background: transparent url('../img/check.png') no-repeat center center / cover;
                }
              }
            }

            &.error {
              span {
                position: relative;
                font-weight: bold;
                color: #004680;
                padding-left: 2.25em;
                margin-left: 1em;
                background-color: #fadce6;
                border-left: solid 4px rgb(245, 130, 153);

                &::after {
                  content: "";
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  left: 0.5em;
                  width: 1em;
                  height: 1em;
                  background: transparent url('../img/batu.png') no-repeat center center / cover;
                }
              }
            }
          }
        }

        .target_wrapper {
          border: 2px dotted #28468C;

          #btn_end {
            position: relative;
            width: 30em;
            padding: 2em 3em;
            margin: 1em auto;

            @include root.mq(sp) {
              width: 80%;
              font-size: 2em;
              white-space: nowrap;
            }

            &::after {
              position: absolute;
              content: "";
              height: calc(100% + 16px);
              width: calc(100% + 16px);
              top: -8px;
              left: -8px;
              border-radius: 10px;
              border: 1px solid rgba(132, 132, 164, 0.35);
              animation: 1.5s linear 0s normal none infinite focuse;
            }
          }
        }

        .return_box {
          padding: 2em 0;
          display: none;

          &.appear {
            display: block;
          }
        }
      }

      .exec {
        padding-left: 3em;
        width: 100%;
        display: flex;
        position: relative;

        @include root.mq(sp) {
          display: block;
          margin-top: 2em;
          margin-bottom: 2em;
          padding-left: 0;
          width: 100%;
        }

        #sns_entry {
          margin-left: 2em;
          width: 50%;
          height: 2.5em;
          line-height: 2.5em;
          padding: 0;

          @include root.mq(sp) {
            width: 90%;
            margin: 0 auto 1rem;
            font-size: 2em;
          }

          &.ignore {
            opacity: 0.3;

            &:hover {
              opacity: 0.3;
              cursor: auto;
            }
          }
        }

        .cansel_check {
          @include root.mq(sp) {
            width: 90%;
            margin: 0 auto 2rem;
            font-size: 0.6em;
            position: static;
            padding: 0;
          }
        }
      }
    }

    .content {
      margin-left: 2em;

      @include root.mq(sp) {
        margin-left: 0;
      }
    }

    .content_title {
      width: fit-content;
      white-space: nowrap;
      font-size: 2em;
      color: #000;
      border-bottom: double 5px #28468C;
      margin-bottom: 0.5em;
      position: relative;
      padding-left: 2em;
      padding-right: 1em;

      @include root.mq(sp) {
        font-size: 1.6em;
      }

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0.25em;
        width: 1.5em;
        height: 1.5em;

        @include root.mq(sp) {
          width: 1.125em;
          height: 1.125em;
        }
      }

      &.text {
        &::after {
          background: transparent url('../img/sns_memo.png') no-repeat center center / cover;
        }
      }

      &.image {
        &::after {
          background: transparent url('../img/sns_pic.png') no-repeat center center / cover;
        }
      }

      &.video {
        &::after {
          background: transparent url('../img/sns_movie.png') no-repeat center center / cover;
        }
      }
    }

    .text_description {
      font-size: 1.8em;
      font-family: root.$sns_font_mintyou;
      margin-bottom: 2.1875em;
      word-wrap: break-word;

      @include root.mq(sp) {
        font-size: 1.2em;
      }
    }

    .text_caption {
      font-size: 1.8em;
      font-family: root.$sns_font_mintyou;
      margin-bottom: 0.625em;
      word-wrap: break-word;

      @include root.mq(sp) {
        font-size: 1.2em;
      }
    }

    .empty_msg {
      font-size: 1.8em;
      font-family: root.$sns_font_mintyou;

      @include root.mq(sp) {
        font-size: 1.2em;
      }
    }

    .image_erea,
    .video_erea {
      margin-bottom: 3.5em;
    }

    .sns_image,
    .sns_video {
      display: flex;
      flex-wrap: wrap;
      column-gap: 2em;
      row-gap: 1.5em;

      @include root.mq(sp) {
        flex-wrap: wrap;
        row-gap: 1em;
        column-gap: 1em;
      }

      .img_item {
        width: 17%;
        position: relative;

        .err_list {
          position: absolute;
          left: 0;
          top: 0;
          display: flex;
          column-gap: 1em;

          .err_range {
            width: 3.5em;
            height: 3.5em;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .img_frame {
          padding-top: 85%;
        }

        @include root.mq(sp) {
          width: 17%;
          height: 6em;
        }
      }

      .empty_msg {
        width: fit-content;
      }
    }

    .err_msg {
      padding-top: 1em;
      padding-left: 3em;
      color: red;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-20%);
        left: 0.5em;
        width: 2em;
        height: 2em;
        background: transparent url('../img/sns_err.png') no-repeat center center / cover;

        @include root.mq(sp) {
          width: 1.5em;
          height: 1.5em;
        }
      }
    }

    .wp_save_mode {
      position: relative;
      margin-left: 8em;
      border-radius: 1em;
      border: 1px solid #000;
      padding: 0.5em 2em 0.5em 1em;
      width: 48%;

      @include root.mq(sp) {
        padding: 1em;
        width: 90%;
        margin: 0 auto 2rem;
      }

      .save_title {
        position: absolute;
        top: -1.67em;
        left: -0.56em;
        font-size: 1.8em;
        margin: 10px;
        padding: 0 10px;
        background-color: #fff;
        color: #000;
        box-shadow: 0 4px 16px 0 rgb(22 42 90 / 12%);
        border-radius: 5px;

        span {
          font-size: 0.8em;
          background-color: #f1f8ad;

          @include root.mq(sp) {
            font-size: 1.8em;
          }
        }

        @include root.mq(sp) {
          top: -1.67em;
          font-size: 1.2em;
          white-space: nowrap;
        }
      }

      .draft_radio {
        border-top: none;

        @include root.mq(sp) {
          padding: 0;
          padding-top: 0.5em;
          padding-left: 3rem;
        }

        label {
          align-items: center;

          @include root.mq(sp) {
            padding-left: 0;
          }

          input {
            margin: 0;
            width: 1.8em;
            height: 1.8em;
          }

          &.ignore {
            opacity: 0.5;
          }
        }

      }
    }
  }

  //投稿削除モーダル
  .modal_delete {
    position: fixed;
    width: 100em;
    background-color: #fff;
    border-radius: 15px;
    border: 2px solid #28468C;
    padding: 4em;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: none;

    @include root.mq(sp) {
      width: 95%;
      padding: 5em 1em 3em;
    }

    .del_msg {
      font-size: 2.5em;
      position: relative;
      padding-left: 2.6em;
      width: fit-content;

      @include root.mq(sp) {
        font-size: 1.6em;
      }

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 1.875em;
        height: 1.875em;
        background: transparent url('../img/trash.png') no-repeat center center / cover;
      }
    }

    .del_list {
      margin-top: 2em;
      border: #000 dotted 2px;
      padding-left: 2em;
      padding-bottom: 2em;

      @include root.mq(sp) {
        padding-left: 1em;
      }
    }

    .del_coution {
      margin: 1em 0;
      font-size: 2em;

      @include root.mq(sp) {
        font-size: 1.4em;
      }
    }

    .del_check {
      margin: 0;
      margin-top: 2em;
      display: flex;

      label {
        padding: 0;

        p {
          @include root.mq(sp) {
            font-size: 0.8em;
          }
        }

        span {
          @include root.mq(sp) {
            font-size: 0.6em;
          }
        }
      }

      .info {
        padding-left: 0.5em;
        font-size: 2em;
        position: relative;

        @include root.mq(sp) {
          font-size: 1.5em;
        }
      }

      &.ignore {
        label {
          color: #000;

          span {
            border: none;
            background: transparent url('../img/sns_err.png') no-repeat center center / cover;
          }
        }

        label:hover,
        label:has(input[type='checkbox']:focus) {
          cursor: auto;
        }
      }

      &.pre {
        opacity: 0.8;

        .info {
          position: relative;

          &::after {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: -2.5em;
            width: 1.5em;
            height: 1.5em;
            background: transparent url('../img/loading.gif') no-repeat center center / cover;
          }
        }
      }

      &.conp {
        .info {
          font-weight: bold;
          color: #004680;
          background-color: #def7f0;
          padding-left: 1.5em;
          margin-left: 1em;
          border-left: solid 4px rgb(27, 182, 13);

          &::after {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0.25em;
            width: 1em;
            height: 1em;
            background: transparent url('../img/check.png') no-repeat center center / cover;
          }
        }
      }

      &.error {
        .info {
          font-weight: bold;
          color: #004680;
          padding-left: 1.5em;
          margin-left: 1em;
          background-color: #fadce6;
          border-left: solid 4px rgb(245, 130, 153);

          &::after {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0.25em;
            width: 1em;
            height: 1em;
            background: transparent url('../img/batu.png') no-repeat center center / cover;
          }
        }
      }
    }
  }

  .fieldset_btn_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;

    @include root.mq(sp) {
      display: block;
      padding-bottom: 6em;
    }

    .btn_move {
      margin-left: 6em;
      display: flex;
      flex-direction: column;
      row-gap: 3.5em;

      @include root.mq(sp) {
        position: absolute;
        row-gap: 1.5em;
        width: fit-content;
        left: 2em;
        bottom: 2em;
        margin-left: 0;
        flex-direction: row;
        gap: 6em;
      }
    }

    .btn_exec {
      display: flex;
      column-gap: 3em;

      @include root.mq(sp) {
        justify-content: center;
      }
    }
  }
}

//投稿取り込み画面
.sns-relate-import {
  .sns_contents {
    margin: 0 auto 10em;
    width: 80%;
    padding: 0 4em 10em;

    @include root.mq(sp) {
      width: 100%;
      padding: 5em 0;
    }
  }

  .custom_select.selectMultiple {
    width: 50em;

    @include root.mq(sp) {
      margin: 0 auto;
      width: 90%;
    }

    &>div {
      padding: 0.8em 3em 0.8em 1.2em;
    }
  }

  .modal_post {
    position: fixed;
    width: 100em;
    background-color: #fff;
    border-radius: 15px;
    border: 2px solid #28468C;
    padding: 4em 2em 6em;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: none;

    @include root.mq(sp) {
      width: 95%;
      padding: 5em 1em 3em;
    }

    .modalpost_message {
      font-size: 2em;
      margin-left: 0.5em;

      @include root.mq(sp) {
        font-size: 1.4em;
        margin-left: 0;
      }

      span {
        font-size: 1.25em;
        font-weight: bold;
        padding-right: 0.2em;

        @include root.mq(sp) {
          font-size: 1.8em;
        }
      }
    }

    .modalpost_category {
      margin: 1em 1.5em 2.5em;
      font-size: 2em;
      padding: 0.5em 1em;
      border-radius: 8px;
      box-shadow: 0 4px 16px 0 rgb(22 42 90 / 12%);

      &.empty {
        opacity: 0;
      }

      .cat_title {
        width: fit-content;
        padding: 0.25em 0.5em;
      }

      ul {
        padding: 0.5em 2em;
        display: flex;
        flex-wrap: wrap;

        li {
          background: rgba(228, 236, 250, 0.7);
          position: relative;
          font-size: 0.9em;
          padding: 0.28em 1.1em 0.3em 2.2em;

          &:not(:first-child) {
            margin-left: 2em;
          }

          //img要素を入れる
          &::after {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0.28em;
            width: 1.1em;
            height: 1.1em;

            @include root.mq(sp) {
              width: 13px;
              height: 13px;
            }
          }

          &.post_item {
            &::after {
              background: transparent url('../img/post.png') no-repeat center center / cover;
            }
          }

          &.catg_item {
            &::after {
              background: transparent url('../img/category.png') no-repeat center center / cover;
            }
          }

          &.term_item {
            &::after {
              background: transparent url('../img/taxsonomy.png') no-repeat center center / cover;
            }
          }

          &.tag_item {
            &::after {
              background: transparent url('../img/tag.png') no-repeat center center / cover;
            }
          }
        }
      }

      @include root.mq(sp) {
        font-size: 1.4em;
        margin-left: 0;
      }
    }

    .modalpost_count {
      position: relative;
      font-size: 2em;
      width: fit-content;
      margin: 1em auto 1.5em;

      &.pre {
        position: relative;

        &::after {
          content: "";
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: -2.5em;
          width: 1.5em;
          height: 1.5em;
          background: transparent url('../img/loading.gif') no-repeat center center / cover;
        }
      }

      &.conp {
        font-weight: bold;
        color: #004680;
        background-color: #def7f0;
        padding-left: 1.5em;
        padding-right: 1.5em;
        border-left: solid 4px rgb(27, 182, 13);

        &::after {
          content: "";
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0.25em;
          width: 1em;
          height: 1em;
          background: transparent url('../img/check.png') no-repeat center center / cover;
        }
      }
    }

    #progress {
      position: absolute;
      bottom: 15em;
      left: 50%;
      width: 70%;
      transform: translateX(-50%);
      display: none;

      &.visible {
        display: block;
      }

      @include root.mq(sp) {
        top: 55%;
      }
    }
  }
}

/* datepicker土日祝日
===================================== */
.xdsoft_datepicker {
  .day-sunday {
    background: #ffc0c0 !important;
  }

  .day-saturday {
    background: #c0d0ff !important;
  }

  .day-holiday {
    background: #ffc0c0 !important;
  }
}

/* keyframes
===================================== */


@keyframes focuse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  75% {
    transform: scale(1.1);
    opacity: 0;
  }

  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}

@keyframes shrink-bounce {
  0% {
    transform: scale(1);
  }

  33% {
    transform: scale(.85);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes checkbox-check {
  0% {
    width: 0;
    height: 0;
    border-color: #212121;
    transform: translate3d(0, 0, 0) rotate(45deg);
  }

  33% {
    width: .8em;
    height: 0;
    transform: translate3d(0, 0, 0) rotate(45deg);
  }

  100% {
    width: .8em;
    height: 1.2em;
    border-color: #212121;
    transform: translate3d(0, -.8em, 0) rotate(45deg);
  }
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }

  25% {
    transform: scale(30, 30);
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(50, 50);
  }
}

@keyframes explode {
  0% {
    opacity: 0;
    transform: scale(10);
  }

  60% {
    opacity: 1;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes drop-zero {
  0% {
    opacity: 0;
    transform: translateY(20px);
    height: 10px;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translateY(-2px);
    height: 0px;
    opacity: 0;
  }
}

@keyframes drop-one {
  0% {
    opacity: 0;
    transform: rotate(-55deg) translate(-20px);
    width: 10px;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: rotate(-55deg) translate(9px);
    width: 0px;
    opacity: 0;
  }
}

@keyframes drop-two {
  0% {
    opacity: 0;
    transform: translate(-20px);
    width: 10px;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translate(9px);
    width: 0px;
    opacity: 0;
  }
}

@keyframes drop-three {
  0% {
    opacity: 0;
    transform: rotate(55deg) translate(-20px);
    width: 10px;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: rotate(55deg) translate(9px);
    width: 0px;
    opacity: 0;
  }
}

@keyframes drop-four {
  0% {
    opacity: 0;
    transform: rotate(55deg) translate(20px);
    width: 10px;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: rotate(55deg) translate(-9px);
    width: 0px;
    opacity: 0;
  }
}

@keyframes drop-five {
  0% {
    opacity: 0;
    transform: translate(20px);
    width: 10px;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translate(-9px);
    width: 0px;
    opacity: 0;
  }
}

@keyframes drop-six {
  0% {
    opacity: 0;
    transform: rotate(-55deg) translate(20px);
    width: 10px;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: rotate(-55deg) translate(-9px);
    width: 0px;
    opacity: 0;
  }
}

@keyframes drop-seven {
  0% {
    opacity: 0;
    transform: translateY(-20px);
    height: 10px;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translateY(2px);
    height: 0px;
    opacity: 0;
  }
}

/* sns_disp（ブロック）
===================================== */
.sns_contents {

  font-size: clamp(4.5px, 0.52vw, 15px);

  @include root.mq(sp) {
    font-size: calc(100vw / 39);
  }

  a {
    cursor: pointer;
    text-decoration: none;
    color: root.$color-text;
  }

  margin: 0 auto 10em;
  width: 80%;
  padding: 0 4em 10em;

  @include root.mq(sp) {
    width: 100%;
    padding: 0 2em;
  }

  .sns_wrapper
   {
    max-height: 700px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #ccc;
    position: relative; // 必須

    .sns_output_area{
      overflow-y: auto;
      flex: 1 1 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: stretch; // ✅ 高さを揃えるポイント
      gap: 2em; // optional: 行間・列間を空けたい場合
      padding: 2em;

      @include root.mq(sp) {
        display: block;
        .sns_item{
          &:not(:last-child){
            margin-bottom: 2em;
          }
        }
      }
      
    }
    
  }

  
  h1,
  h2 {
    font-size: 3.5em;
    font-weight: bold;
    padding-bottom: 2em;
  }

  h2 {
    font-size: 2.5em;
  }

  .description {
    padding-bottom: 4em;
  }

  .insta_item {
    position: relative;
    width: 30%;
    height: 80em;
    flex: 0 0 auto;
    padding: 0;
    overflow-y: scroll;

    @include root.mq(sp) {
      width: 100%;
      height: auto;

      &:not(:first-child) {
        margin-top: 2em;
      }
    }

    .wp_post_check {
      margin-top: 3em;
      padding-right: 2em;
    }

    .post_date {
      padding-right: 2em;
    }

    >a {
      display: block;
      height: 100%;
      margin-top: 2em;
      padding: 2em;

    }

    .post_image {
      img {
        width: 100%;
        height: 100%;
      }
    }

    .snsItem_footer {
      position: sticky;
      width: 100%;
      left: 0;
      bottom: 0;
      z-index: 30;
    }
  }

  .snsItem_footer {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
  }

  .sns_inner {
    padding-top: 8em;

    @include root.mq(sp) {
      display: block;
      padding-top: 0;
      margin-top: 4em;
    }
  }

  .twitter_area,
  .facebook_area {
    position: relative;
    padding: 0 10px 10px;
    //border: #6F6969 2px solid;
    max-height: 2000px;

    @include root.mq(sp) {
      margin-bottom: 4em;
      padding-top: 2em;
    }
  }

  .facebook_area {
    background-color: #315096;
  }

  .twitter_area {
    background-color: #55acee;
  }

  .instagram_area {
    margin-top: 5em;
    position: relative;
    grid-column: 1 / 3;
    padding: 0 2em 3em;
    z-index: 5;
    background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;

    /*グラデーション①*/
    @include root.mq(sp) {
      background: linear-gradient(270deg, #427eff 0%, #f13f79 70%) no-repeat;
      /*グラデーション①*/
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      /*全体を覆う*/
      height: 100%;
      /*全体を覆う*/
      background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
      background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
      z-index: -1;
    }

    @include root.mq(sp) {
      padding: 2em 1em;
    }
  }

  

  .fb_user_header {
    @include root.mq(sp) {
      .user_info {
        display: grid;
        grid-template-columns: 9em auto;
        grid-template-rows: auto auto;
        row-gap: 1em;

        .usertitle {
          grid-row: 1 / 2;
          grid-column: 1 / 3;
        }
      }
    }
  }

  .instagram_header {
    justify-content: left;
    color: #fff;

    .user_info {

      //flex: 0 0 auto;
      .text {

        @include root.mq(sp) {
          width: fit-content;
          padding: 0 1em;
        }
      }
    }
  }

  .sns_item {
    flex: 1 1 calc(32%); 
    position: relative;
    padding: 2em;
    padding-bottom: 13em;
    border-radius: 10px;
    background-color: rgb(247, 247, 248);
    box-sizing: border-box;
    
    .num {
      position: absolute;
      top: 1.25em;
      left: 1.25em;
      font-size: 1.6em;
      font-weight: bold;
    }

    .swiper {
      width: 100%;
      position: relative;
      .swiper-slide img {
        max-width: 100%;
        height: auto;
        border-radius: 6px;
      }
      &:hover {

        .swiper-button-prev,
        .swiper-button-next {
          transform: translateX(0);
          opacity: 1;
          visibility: visible;
        }
      }
      .swiper-button-prev,
      .swiper-button-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 3em;
        /* ボタンの幅 */
        height: 3em;
        /* ボタンの高さ */
        border-radius: 50%;
        background: linear-gradient(225deg, #b8c2d8, #dae6ff);
        box-shadow: -10px 10px 10px #adb7cc, 10px -10px 10px #ebf7ff;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease 0s;

        @include root.mq(sp) {
          width: 2em;
          height: 2em;
        }

        &::after {
          position: absolute;
          content: "";
          display: block;
          border-bottom: 2px solid #000;
          border-right: 2px solid #000;
          width: 0.3em;
          height: 0.3em;
          left: 50%;
          top: 50%;

          @include root.mq(sp) {
            width: 0.2em;
            height: 0.2em;
          }
        }
      }

      .swiper-button-prev {
        transform: translateX(50px);

        &::after {
          transform: translate(-30%, -50%) rotate(135deg);
        }
      }

      .swiper-button-next {
        transform: translateX(-50px);

        &::after {
          transform: translate(-70%, -50%) rotate(315deg);
        }
      }

      .swiper-pagination {
        position: absolute;
        bottom: 20px; // 画像の下に重ねる
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        text-align: center;
    
        .swiper-pagination-bullet {
          background-color: #f90; // オレンジ
          opacity: 0.5;
          transition: opacity 0.3s, transform 0.3s;
          width: 10px;
          height: 10px;
          margin: 0 4px;
        }
    
        .swiper-pagination-bullet-active {
          opacity: 1;
          transform: scale(1.2);
        }
      }
    }

    a {
      display: flex;
      flex-direction: column;
      gap: 12px;
      text-decoration: none;
      
      .post_text {
        flex: 1;
        font-size: 1rem;
        color: #333;
        line-height: 1.5;
        margin: 2em 0;
        a {
          display: inline;
          height: auto;
          color: #3c98e4;
          text-decoration: underline;
        }
      }

      .post_image {
        margin: 0 auto;
        flex-shrink: 0;
        max-width: 240px;
        max-height: 400px;
        position: relative;
        width:fit-content;
        height:fit-content;
        img {
          width: 100%;
          height: auto;
          border-radius: 6px;
          display: block;
        }
      }

      @media (max-width: 768px) {
        flex-direction: column;

        .post_image {
          max-width: 100%;
        }
      }
    }

    .post_date {
      text-align: right;
      font-size: 1.6em;
      padding-top: 1.875em;
    }


    .image_area {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      row-gap: 3em;
      justify-content: space-between;
      margin-bottom: 3em;

      .post_image {
        width: 45%;

        .img_frame {
          padding-top: 60%;
        }
      }
    }


    .ogp_area {
      display: block;
      border: 1px solid #ccc;
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
      margin: 10px 0;
      text-decoration: none;
      color: inherit;
      padding-bottom: 1.5em;
      transition: box-shadow 0.3s ease;
    
      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
    
      a {
        display: flex;
        flex-direction: row;
        text-decoration: none;
        color: inherit;
        flex-wrap: wrap;
    
        @media (max-width: 600px) {
          flex-direction: column;
        }
      }
    
      .ogp_image {
        flex: 0 0 200px;
        max-width: 200px;
        position: relative;
        overflow: hidden;
        background: #f0f0f0;
    
        .img_frame {
          width: 100%;
          padding-top: 52%; // 16:9 相当
          position: relative;
    
          img {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: none;
          }
        }
      }
    
      .ogp_title {
        font-weight: bold;
        font-size: 1rem;
        margin: 10px 10px 0;
      }
    
      .ogp_description {
        font-size: 0.9rem;
        color: #666;
        margin: 5px 10px 10px;
      }
    
      .ogp_title,
      .ogp_description {
        flex: 1 1 auto;
        min-width: 0;
      }
    }
    
  }


  .snsItem_footer {
    padding: 1.5em 5em;
    background-color: rgb(245, 241, 232);
    border-radius: 0 0 10px 10px;
    display: flex;
    box-sizing: border-box;

    @include root.mq(sp) {
      padding-left: 2em;
    }

    .item {
      display: flex;

      &:not(:first-child) {
        margin-left: 10em;

        @include root.mq(sp) {
          margin-left: 5em;
        }
      }

      &.favorite {
        .mark {
          background: transparent url('../img/favorite.png') no-repeat center center / cover;

          &.ready {
            background: transparent url('../img/destroy_fav.png') no-repeat center center / cover;
          }

          &::after {
            background-color: hsla(0, 49%, 89%, 0.7);
          }
        }
      }

      &.retweet {
        .mark {
          background: transparent url('../img/retweet.png') no-repeat center center / cover;

          &.ready {
            background: transparent url('../img/destroy_ret.png') no-repeat center center / cover;
          }

          &::after {
            background-color: hsla(197, 53%, 84%, 0.7);
          }
        }
      }

      .mark {
        width: 3em;
        height: 3em;
        position: relative;
        transition: all 0.3s ease 0s;

        @include root.mq(sp) {
          width: 2em;
          height: 2em;
        }

        &::after {
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%) scale(0);
          width: 4.5em;
          height: 4.5em;
          border-radius: 50%;
          transition: all 0.5s ease 0s;
        }

        // &:hover{
        //   cursor: pointer;
        //   &::after{
        //     transform: translate(-50%,-50%) scale(1);
        //   }
        // }
        &.ignore {
          &::after {
            display: none;
          }

          &:hover {
            opacity: 1;
            cursor: auto;
          }
        }
      }

      .count {
        padding-left: 1.5em;
        font-size: 2.5em;

        @include root.mq(sp) {
          font-size: 1.8em;
          line-height: 1.8em;
        }
      }
    }
  }

  .movie_button {
    position: absolute;
    left: 10%;
    bottom: 10%;
    font-size: 1.6em;
    font-weight: bold;
    color: red;
    cursor: pointer;
    transition: all 0.3s ease 0s;

    @include root.mq(sp) {

      font-size: 1.2em;
    }

    &:hover {
      opacity: 0.7;
    }

    &::after {
      content: "";
      position: absolute;
      top: -3em;
      left: 50%;
      transform: translateX(-50%);
      width: 3em;
      height: 3em;
      aspect-ratio: 1 / 1;
      background: transparent url('../img/play.png') no-repeat center center / cover;

      @include root.mq(sp) {
        top: -2em;
        width: 2em;
        height: 2em;
      }
    }

    &.pause {
      &::after {
        background: transparent url('../img/pause.png') no-repeat center center / cover;
      }

    }
  }

  .vol_button {
    position: absolute;
    right: 10%;
    bottom: 10%;
    width: 13%;
    aspect-ratio: 1 / 1;
    background: transparent url('../img/vol_off.png') no-repeat center center / cover;
    cursor: pointer;
    transition: all 0.3s ease 0s;

    &:hover {
      opacity: 0.7;
    }

    &.on {
      background: transparent url('../img/vol_on.png') no-repeat center center / cover;
    }
  }

  .twitter_footer,
  .facebook_footer,
  .instagram_footer {
    padding: 3em 5em;
    display: flex;
    justify-content: space-between;

    @include root.mq(sp) {
      padding: 2em 0;
      column-gap: 3em;
    }
  }

  #next_tw_btn,
  .to_sns_site,
  #next_fb_btn,
  #next_ig_btn,
  .load_more_btn {
    background: #dddfe4;
    box-shadow:
      -3px -3px 12px rgba(255, 255, 255, 0.7),
      3px 3px 12px rgba(17, 17, 17, 0.3),
      inset 3px 3px 12px transparent,
      inset -3px -3px 12px transparent;
    transition: box-shadow ease-in-out 0.5s;
    border-radius: 0.5em;
    font-size: 2em;
    padding: 0.5em 1em;
    text-align: center;
    color: #000;

    @include root.mq(sp) {
      font-size: 1.4em;
      padding: 0.7em;
      margin: 0 auto;
    }

    &:hover {
      //opacity: 0.7;
      cursor: pointer;
      background: #dddfe4;
      box-shadow:
        -3px -3px 12px transparent,
        3px 3px 12px transparent,
        inset 3px 3px 12px rgba(17, 17, 17, 0.3),
        inset -3px -3px 12px rgba(255, 255, 255, 0.7);
    }

    &.disable {
      opacity: 0.5;

      &:hover {
        box-shadow:
          -3px -3px 12px rgba(255, 255, 255, 0.7),
          3px 3px 12px rgba(17, 17, 17, 0.3),
          inset 3px 3px 12px transparent,
          inset -3px -3px 12px transparent;
        cursor: auto;
      }
    }
  }

  //チェックボックス
  .wp_post_check {
    margin-left: auto;
    margin-top: 3em;
    position: relative;
    width: fit-content;

    @include root.mq(sp) {
      padding-top: 1em;
      margin-top: 0;
    }

    input[type='checkbox'] {
      display: none;
    }

    label {
      font-size: 1.6em;
      position: relative;
      display: flex;
      padding: 0.3em 1em;
      align-items: center;
      color: #9e9e9e;
      transition: color 250ms cubic-bezier(.4, .0, .23, 1), background-position 0.3s;
      border-radius: 15px;
      background-image: linear-gradient(to right, rgb(247, 224, 174) 50%, rgb(243, 192, 223) 50%);
      background-position: 0 0;
      background-size: 200% auto;

      @include root.mq(sp) {
        padding: 0.3em 1em;
      }

      p {
        position: relative;

        @include root.mq(sp) {
          font-size: 1em;
        }

        &:before {
          content: attr(rel);
          position: absolute;
          top: 0;
          left: 0;
          color: #02350f;
          transition: opacity 300ms cubic-bezier(.4, .0, .23, 1);
          opacity: 0;
        }
      }

      span {
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 1em;
        width: 1.2em;
        height: 1.2em;
        background: transparent;
        border: 2px solid #9E9E9E;
        border-radius: 2px;
        position: relative;
        transition: all 250ms cubic-bezier(.4, .0, .23, 1);
        box-sizing: border-box;

        @include root.mq(sp) {
          width: 1.4em;
          height: 1.4em;
          margin-right: 0.5em;
        }
      }
    }

    label:hover {
      color: #000;
      cursor: pointer;

      span {
        background: rgba(255, 255, 255);
      }
    }

    input[type='checkbox']:checked {
      ~p {
        &::before {
          opacity: 1;
        }
      }

      ~span {
        border: 0.6em solid #FFEB3B;

        @include root.mq(sp) {
          border: .7em solid #FFEB3B;
        }

        animation: shrink-bounce 200ms cubic-bezier(.4, .0, .23, 1);

        &:before {
          content: "";
          position: absolute;
          top: -0.2em;
          left: -0.2em;
          border-right: 3px solid transparent;
          border-bottom: 3px solid transparent;
          transform: rotate(45deg);
          transform-origin: 0% 50%;
          animation: checkbox-check 125ms 250ms cubic-bezier(.4, .0, .23, 1) forwards;

          @include root.mq(sp) {
            top: -0.4em;
            left: -0.2em;
          }
        }

      }
    }
  }

  .wp_post_check {

    // label:has(input[type='checkbox']:checked) {
    //   background-position: -100% 0;
    // }
  }

  .wp_entry_info {
    margin-top: 0.625em;
    font-size: 1.6em;
    color: red;
    text-align: right;
    position: absolute;
    top: 5em;
    right: 1.25em;

    @include root.mq(sp) {
      top: 4em;
    }
  }

  .post_exec {
    width: fit-content;
    height: 5em;
    line-height: 5em;
    padding: 0 2em;
    margin: 0 auto;

    &.ignore {
      opacity: 0.3;

      &:hover {
        cursor: auto;
      }
    }
  }

  .follow_btn {
    font-size: 2em;
    padding: 0.5em 1em;

    @include root.mq(sp) {
      font-size: 1.4em;
      bottom: 0.8em;
      left: 0.8em;
    }
  }

  .masonry_list {
    margin: 0 auto;

    .masonry_item {
      width: 200px;
      margin-bottom: 5px;

      img,
      video {
        width: 100%;
        height: auto !important;
      }

      @include root.mq(sp) {
        width: 100%;
      }
    }
  }

}