@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* 不要なスタイルをリセット
************************************/
#container {
  max-width: 100%;
  margin: 0;
  padding: 0;
  transition: all 0.5s;
}
#container .wrap {
  width: min(100%, 1024px);
}
#content #main {
  z-index: auto;
  width: 100%;
  margin: 0;
  padding: 0em 1.5em;
  border: none;
  border-radius: 0;
  outline: none;
  background-color: #000;
}
#content,
#content .article,
#content .entry-content,
#content .entry-content > * {
  margin: 0;
}
header.article-header {
  display: none;
}

/* 共通
************************************/
:root {
  --cocoon-default-text-size: 16px;
}
@media screen and (max-width: 480px) {
  :root {
    --cocoon-default-text-size: 14px;
  }
}
body #main a {
  color: #8453f6 !important;
}
body #main a:hover,
body #main a:focus {
  color: #6122f3 !important;
}
body #main .flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ヘッダーメニュー
************************************/
#header-container .header-container-in {
  display: block;
}
#header-container .header-in {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
#header-container .tagline,
#header-container .logo-text {
  margin: 0;
  padding: 0;
}
#header-container .site-name-text {
  font-weight: bold;
}
#header-container .logo-header img {
  max-height: 80px;
}
#header-container .add-header-contents {
  width: min(65vw, 400px);
  margin-left: auto;
}
@media screen and (max-width: 480px) {
  #header-container .site-name-text {
    font-size: 22px;
  }
  #header-container .add-header-contents {
    width: auto;
  }
}
#header-container .dropdown > a {
  color: #fff;
}
#header-container .dropdown-menu {
  width: min(100vw - 1.5em, 1024px - 1.5em);
  border: 1px solid #fff;
}
#header-container .dropdown-menu legend {
  font-size: inherit;
}

/* モバイルメニュー
************************************/
.mobile-menu-buttons,
.mobile-menu-buttons .menu-button > a,
#navi-menu-content {
  background-color: #222529;
  color: #fff;
}
.mobile-menu-buttons .fas.fa-my-research {
  color: transparent;
  background-image: url("/wp-content/uploads/2024/03/footer-icon-research.png");
  background-repeat: no-repeat;
  background-size: contain;
}

/* 会員ページ
************************************/
#main #wpmem_login,
#main #wpmem_msg,
#main #wpmem_reg,
#main .wpmem_msg,
#main #wpmem_reg + div {
  width: auto;
  max-width: 600px;
  margin: 0 auto;
  border: inherit;
  color: inherit;
}
#main #wpmem_msg,
#main .wpmem_msg {
  background: #fff;
  color: #000;
}
#main #wpmem_login legend,
#main #wpmem_msg legend,
#main #wpmem_reg legend,
#main .wpmem_msg legend {
  margin-bottom: 1.5rem;
  font-size: 1.2em;
  text-align: center;
}
#main #wpmem_login .button_div,
#main #wpmem_login .link-text,
#main #wpmem_restricted_msg {
  text-align: center;
}
#main #wpmem_login .div_text,
#main #wpmem_reg .div_checkbox,
#main #wpmem_reg .div_date,
#main #wpmem_reg .div_file,
#main #wpmem_reg .div_image,
#main #wpmem_reg .div_multicheckbox,
#main #wpmem_reg .div_multiselect,
#main #wpmem_reg .div_number,
#main #wpmem_reg .div_radio,
#main #wpmem_reg .div_select,
#main #wpmem_reg .div_text,
#main #wpmem_reg .div_textarea,
#main #wpmem_reg .div_url,
#main #wpmem_login .button_div,
#main #wpmem_reg .button_div,
#main #wpmem_login .link-text {
  width: auto;
  height: auto;
  margin-bottom: 1.5rem;
}
#main .div_text input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
}
#main input[type="submit"] {
  display: block;
  margin: auto;
  padding: 2% 10%;
  width: fit-content;
  background-color: #8453f6;
  border-color: #8453f6;
  color: #fff;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
#main input[type="submit"]:hover {
  background-color: #6b31f4;
  border-color: #6122f3;
  color: #fff;
}

/* スニーカー一覧
************************************/
/* 検索フォーム */
.sneaker-header form {
  max-width: 1000px;
  margin: auto;
}
.sneaker-header .form-control {
  border-color: var(--bs-border-color);
}

/* スニーカーリスト */
.sneaker-container .alert {
  width: fit-content;
  margin: auto;
  padding: 20px 20px 20px 72px;
}
@media screen and (max-width: 480px) {
  .sneaker-container .alert {
    padding: 28px 14px 14px;
  }
}
.sneaker-container .go-to-top-page {
  margin-top: 2em;
  text-align: center;
}

.sneaker-container .card {
  width: 100%;
  border: none;
  background-color: #000;
  color: #fff;
  font-size: min(3vw, 16px);
  transition: all 0.5s;
}
.sneaker-container .card:hover {
  box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px;
  transform: scale(1.02);
}
.sneaker-container .card > .row {
  align-items: center;
  width: -webkit-fill-available;
}
.sneaker-container .card-body {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}
.sneaker-container .card-title {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
  font-size: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sneaker-container .card-text .strong {
  color: #61D3A4;
}
.sneaker-container .card-text .strong-vip {
  color: #ee82ee;
}
.sneaker-container .card-text .circle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  width: 3em;
  aspect-ratio: 1;
  border-radius: 100%;
  background-color: #c00;
}
.sneaker-container .card-text .circle::before {
  display: block;
  content: '';
  padding-top: 100%;
}

.sneaker-container .modal {
  z-index: 999999;
}
@media screen and (max-width: 480px) {
  .sneaker-container .modal {
    font-size: 0.85em;
  }
}
.sneaker-container .modal-header {
  border-bottom: none;
  width: 80%;
  margin: auto;
  padding-bottom: 0;
}
.sneaker-container .modal-body {
  padding-top: 0.5rem
}
.sneaker-container .modal-text-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 2px solid;
}
.sneaker-container .modal-text-title h5 {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
  font-size: inherit;
}
.sneaker-container .modal-body dl > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sneaker-container .modal-body dt {
  font-weight: normal;
}
.sneaker-container .modal-body dd {
  margin: 0;
  font-weight: bold;
  text-align: right;
}
.sneaker-container .modal-text .strong {
  color: #61D3A4;
}
.sneaker-container .modal-text .strong-vip {
  color: #ee82ee;
}
.sneaker-container .modal-text .circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em;
  aspect-ratio: 1;
  border-radius: 100%;
  background-color: #c00;
}
.sneaker-container .modal-text .circle-copy {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 2px;
  width: 2em;
  aspect-ratio: 1;
  border: none;
  border-radius: 100%;
  background-color: #8453f6;
  color: #ddd;
}
.sneaker-container .modal .overflow-scroll {
  max-height: 20vh;
}
.sneaker-container .modal .table {
  table-layout: fixed;
}
.sneaker-container .modal .table th:first-of-type {
  width: 12%;
  text-align: center;
}
.sneaker-container .modal table:not(.has-border-color) :where(th, td) {
  border-color: initial;
}
.sneaker-container .modal .table > :not(caption) > * > * {
  padding: 0.2rem 0.5rem;
}

/* ページネーション */
ul.pagination {
  flex-wrap: wrap;
  padding: 0;
}
ul.pagination .page-item {
  margin: 0;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px) {
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
}


/************************************
** COLOR primary
************************************/
body .alert-primary {
  color: #420ac4;
  background-color: #fff;
  border-color: #fff;
}
body .alert-primary hr {
  border-top-color: #efe9fd;
}
body .alert-primary .alert-link {
  color: #310793;
}

body .badge-primary {
  color: #fff;
  background-color: #8453f6;
}
body .badge-primary[href]:hover,
body .badge-primary[href]:focus {
  color: #fff;
  background-color: #6122f3;
}

body .bg-primary {
  background-color: #8453f6 !important;
}
body a.bg-primary:hover,
body a.bg-primary:focus,
body button.bg-primary:hover,
body button.bg-primary:focus {
  background-color: #6122f3 !important;
}

body .border-primary {
  border-color: #8453f6 !important;
}

body .btn-primary {
  color: #fff;
  background-color: #8453f6;
  border-color: #8453f6;
}
body .btn-primary:hover {
  color: #fff;
  background-color: #6b31f4;
  border-color: #6122f3;
}
body .btn-primary:focus,
body .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(132, 83, 246, 0.5);
}
body .btn-primary.disabled,
body .btn-primary:disabled {
  color: #fff;
  background-color: #8453f6;
  border-color: #8453f6;
}
body .btn-primary:not(:disabled):not(.disabled):active,
body .btn-primary:not(:disabled):not(.disabled).active,
body .show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #6122f3;
  border-color: #5613f2;
}
body .btn-primary:not(:disabled):not(.disabled):active:focus,
body .btn-primary:not(:disabled):not(.disabled).active:focus,
body .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(132, 83, 246, 0.5);
}

body .btn-outline-primary {
  color: #8453f6;
  background-color: transparent;
  border-color: #8453f6;
}
body .btn-outline-primary:hover {
  color: #fff;
  background-color: #8453f6;
  border-color: #8453f6;
}
body .btn-outline-primary:focus,
body .btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(132, 83, 246, 0.5);
}
body .btn-outline-primary:disabled,
body .btn-outline-primary.disabled {
  color: #8453f6;
  background-color: transparent;
}
body .btn-outline-primary:not(:disabled):not(.disabled):active,
body .btn-outline-primary:not(:disabled):not(.disabled).active,
body .show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #8453f6;
  border-color: #8453f6;
}
body .btn-outline-primary:not(:disabled):not(.disabled):active:focus,
body .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
body .show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(132, 83, 246, 0.5);
}

body .list-group-item-primary {
  color: #420ac4;
  background-color: #100101ff;
}
body .list-group-item-primary.list-group-item-action:hover,
body .list-group-item-primary.list-group-item-action:focus {
  color: #420ac4;
  background-color: #efe9fd;
}
body .list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #420ac4;
  border-color: #420ac4;
}

body .table-primary,
body .table-primary > th,
body .table-primary > td {
  background-color: #100101ff;
}
body .table-hover .table-primary:hover {
  background-color: #efe9fd;
}
body .table-hover .table-primary:hover > td,
body .table-hover .table-primary:hover > th {
  background-color: #efe9fd;
}

body .text-primary {
  color: #8453f6 !important;
}
body a.text-primary:hover,
body a.text-primary:focus {
  color: #6122f3 !important;
}

body a.page-link,
body a.page-link:hover {
  color: #8453f6;
}
body .active .page-link {
  background-color: #8453f6;
  border-color: #8453f6;
}