@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .checkbox:checked+.checkbox-label {
    @apply border-orange-500;
    @apply text-orange-500;
  }

  .checkbox:not(:checked)+.checkbox-label {
    @apply border-gray-200;
  }
}


input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

[type='text']:focus,
[type='checkbox']:focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='search']:focus,
[type='tel']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
  --tw-ring-color: transparent;
  border-color: #d4d4d1;
}

[type='checkbox'] {
  border-radius: 3px;
  border-width: 2px;
  border-color: #d4d4d1;
}

.feature_check input {
  margin-right: 5px;
  color: #888;
}

select {
  width: 100%;
  border-radius: 0.25rem;
  border-color: #d4d4d1;
}

/* kaminariデザイン */
.page.current {
  font-weight: 600;
}

.active {
  margin-left: 0;
}

/* 検索予測ワードデザイン */
.ui-widget.ui-widget-content {
  z-index: 60000;
}

.ui-autocomplete {
  position: absolute;
}

.ui-menu .ui-menu-item {
  border-top: 1px solid #d4d4d1;
  margin: 0;
  cursor: pointer;
}

.ui-menu .ui-menu-item:first-child {
  border-top: none;
}

.ui-state-active {
  color: #faaf00;
}

.ui-menu .ui-menu-item .ui-menu-item-wrapper {
  position: relative;
  padding: 14px;
  font-size: 14px;
}

.ui-menu .ui-menu-item .ui-menu-item-wrapper::after {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 2px #ccc;
  border-right: solid 2px #ccc;
  position: absolute;
  top: 50%;
  right: 14px;
  margin-top: -4px;
  transform: rotate(45deg);
}

.ui-widget-content {
  background: #fff !important;
  border-bottom: 1px solid #d4d4d1 !important;
  border-right: 1px solid #d4d4d1 !important;
  border-left: 1px solid #d4d4d1 !important;
  border-top: 1px solid #d4d4d1 !important;
  color: #555 !important;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 比較ボタンデザイン */
.comparison_btn {
  display: none;
  position: fixed;
  z-index: 100;
  animation: fluffy 3s ease infinite;
}

@keyframes fluffy {
  0% {
    transform: translateY(0)
  }

  5% {
    transform: translateY(0)
  }

  10% {
    transform: translateY(0)
  }

  20% {
    transform: translateY(-15px)
  }

  25% {
    transform: translateY(0)
  }

  30% {
    transform: translateY(-15px)
  }

  50% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(0)
  }
}

.filter_content {
  animation-fill-mode: forwards;
}

/* 共通のモーダルスタイリング */
.modal-form {
  z-index: 1000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

/* アクティブ時のスタイリング */
.is-active {
  opacity: 1;
  visibility: visible;
}

.modal-background {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 800;
}

.modal-background.is-active {
  display: block;
}

.side_menu {
  animation-fill-mode: forwards;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: fit-content;
  margin: auto;
  text-align: left;
  z-index: 50000;
}

@media screen and (max-width: 767px) {
  .modal {
    width: fit-content;
    width: 90%;
  }
}

.name_content {
  margin-top: 5px;
}

.name_content:first-child {
  margin-top: 0px;
}

@media (min-width: 768px) {
  body a img:hover {
    -webkit-transition: .3s;
    transition: .3s;
  }

  body a:hover {
    -webkit-transition: .3s;
    transition: .3s;
  }
}

img {
  image-rendering: -webkit-optimize-contrast;
}

.under {
  background: linear-gradient(transparent 60%, #f2dd61 60%);
}

.slick-dots {
  bottom: -12px !important;
}

/* slickデザイン */
.slick_pc_img .slick-dots li button:before {
  font-size: 0.7rem !important;
}

.slick_pc_img .slick-dots li {
  width: 1rem !important;
}

.slick_sp_img .slick-dots li button:before {
  line-height: 15px;
  font-size: 0.5rem !important;

}

.slick_sp_img .slick-dots li {
  width: 12px !important;
}

.slick_sp_img {
  opacity: 0;
  transition: opacity .3s linear;
}

.slick_sp_img.slick-initialized {
  opacity: 1;
}

.slick_pc_img {
  opacity: 0;
  transition: opacity .3s linear;
}

.slick_pc_img.slick-initialized {
  opacity: 1;
}

/* アコーディオンメニューデザイン */
.accordion-title::after {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 2px #ccc;
  border-right: solid 2px #ccc;
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -6px;
  transform: rotateZ(135deg);
  transition: 0.3s;
}

.accordion-title.open::after {
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
  top: 50%;
  transition: 0.3s;
}

.ad_content {
  width: 300px;
}

.pc_ad ins {
  width: 300px;
}

.footer-ad-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
}

.footer-ad-container ins {
  width: 728px;
  height: 90px;
}

@media (max-width: 768px) {

  .footer-ad-container ins {
    width: 320px;
    height: 100px;
  }
}

.product-ad ins{
  width: 320px;
  height: 100px;
  position: relative;
  text-align: center;
  overflow: hidden;
}


.sp_ad ins {
  width: 100%;
  height: 250px;
  position: relative;
  text-align: center;
  overflow: hidden;
}

.pr-link a img {
  margin: 0 auto;
}

.gretel a:hover {
  text-decoration: underline;
}

/* アニメーション前のメニューの状態 */

.search_menu {
  position: fixed;
  z-index: 999;
  display: none;
  width: 100%;
  height: 100%;
  margin-top: 54px;
  padding-bottom: 3rem;
  z-index: 700;
}

.search_menu.is-active {
  display: block;
}

.main_menu {
  position: fixed;
  z-index: 999;
  left: -110%;
  top: 0;
  width: 80%;
  height: 100%;
  transition: all 0.3s;
  z-index: 1000;
}

.main_menu.is-active {
  left: 0;
}

.user_menu {
  display: none;
  position: absolute;
  transition: all 0.3s;
  z-index: 1000;
}

.user_menu.is-active {
  display: block;
}

img#img_prev {
  object-fit: cover;
  width: 150px;
  height: 150px;
  border: 1px solid #d4d4d1;
  border-radius: 100%;
  padding: px;
}

.img_update input[type="file"] {
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}


.second_flash_messages {
  text-align: center;
  display: inline-block;
  position: fixed;
  width: 36rem;
  bottom: 30px;
  right: 0;
  left: 0;
  z-index: 10000;
  margin: 0 auto;
}

.flash_messages .notice {
  color: #fff;
  padding: 1rem 0;
  background-color: #0aa466;
}

.flash_messages .alert {
  color: #fff;
  padding: 1rem 0;
  background-color: #ff333f;
}

.second_flash_messages .notice {
  color: #00b379;
  font-size: 1rem;
  padding: 1rem 0;
  border: 1px solid #00b379;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.second_flash_messages .alert {
  color: #ff333f;
  font-size: 1rem;
  padding: 1rem 0;
  border: 1px solid #ff333f;
  background-color: #f9f9f9;
  border-radius: 5px;
}

@media only screen and (max-width: 959px) {
  .second_flash_messages {
    text-align: center;
    position: fixed;
    bottom: 20px;
    width: 95%;
    margin-bottom: 0rem;
    z-index: 10000;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .second_flash_messages .notice {
    color: #00b379;
    font-size: 14px;
    padding: 10px 0;
    border: 1px solid #00b379;
    background-color: #f9f9f9;
    border-radius: 5px;
  }

  .second_flash_messages .alert {
    color: #ff333f;
    font-size: 14px;
    padding: 10px 0;
    border: 1px solid #ff333f;
    background-color: #f9f9f9;
    border-radius: 5px;
  }

}


/* Select2 コンテナのスタイルをカスタマイズ */
.select2-container .select2-selection--single {
  padding: 1rem;
  /* 余白を1remに設定 */
}

/* Select2 ドロップダウンアイテムのスタイルをカスタマイズ */
.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 1.5rem;
  /* テキストの行の高さを調整 */
}

.select2-container .select2-selection--single {
  height: 56px !important;
}


.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #444;
  line-height: 22px !important;
  overflow: hidden !important;
}

.select2-container--default .select2-selection--single {
  border: 1px solid #d4d4d1 !important;
  border-radius: 0.375rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  display: none;
}

.select2-dropdown {
  border: 1px solid #d4d4d1 !important;
  border-radius: 0.375rem !important;
}

.select2-container .select2-selection--multiple {
  border: 1px solid #d4d4d1 !important;
  border-radius: 0.375rem !important;
  min-height: 50px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 13px 16px 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #d4d4d1 !important;
  border: 1px solid #d4d4d1 !important;
  border-radius: 0.375rem !important;
  margin: 5px !important;
}

.select2-container {
  width: 100% !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #ddd !important;
  border-radius: 0.375rem !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #fff !important;

}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
  color: #888 !important;
  overflow: hidden !important;
}

.select2-container--default .select2-results__group {
  border-bottom: 1px solid #d4d4d1 !important;
  padding: 10px 1rem !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #faaf00 !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #111 !important;
}

@media (max-width: 768px) {

  .admin_menu_view {
    position: fixed;
    z-index: 1000;
    bottom: -110%;
    width: 100%;
    transition: all 0.3s;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin_menu_view.is-active {
    bottom: 0;
  }

  .menu-background {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 400;
  }

  .menu-background.is-active {
    display: block;
  }
}

.box-shadow {
  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, .04);
}

.hidden-product {
  display: none;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: #111 !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */