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

/* @import "./custom-base-styles.css"; */
@layer base {
  /* Alpine.js x-cloak - 初期化前のチラつきを防ぐ */
  [x-cloak] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* モーダル用の追加スタイル */
  .modal[x-cloak] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body {
    @apply min-h-[100vh] bg-gray-100/90 text-gray-500;
    display: flex;
    flex-direction: column;
  }

  /* CTAが存在する場合のフッターパディング */
  body.has-cta #footer {
    @apply pb-20;
  }

  body>.container {
    @apply w-full max-w-[560px] mx-auto bg-gray-50 drop-shadow-lg;
  }

  #main {
    @apply py-[50px] flex-1;
  }

  #main .container {
    @apply px-3;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply text-gray-800;
  }

  article {
    @apply leading-7;
  }

  .static-article {
    @apply text-sm md:text-base leading-7;
  }

  .static-article .article-header {
    @apply text-xl md:text-2xl font-bold text-gray-800 text-center my-4;
  }

  .static-article .section {
    @apply py-5;
  }

  .static-article .title {
    @apply text-lg md:text-xl font-bold text-gray-800 mb-4;
  }

  .static-article ul,
  .static-article ol {
    @apply ps-5 mb-[1em];
  }

  .static-article ul+p,
  .static-article ol+p {
    @apply mb-[1em];
  }

  .static-article p {
    @apply mb-[1em];
  }

  a {
    @apply text-primary;
    @apply hover:text-primary-dark;
    @apply transition ease-in-out duration-300;
  }

  a>* {
    @apply transition ease-in-out duration-300;
  }

  button {
    @apply transition ease-in-out duration-300;
  }

  button:disabled {
    @apply opacity-50 pointer-events-none;
  }

  form {
    @apply w-full m-0 p-0;
  }

  [type='text'],
  [type='email'],
  [type='url'],
  [type='password'],
  [type='number'],
  [type='date'],
  [type='datetime-local'],
  [type='month'],
  [type='search'],
  [type='tel'],
  [type='time'],
  [type='week'],
  [multiple],
  textarea,
  select {
    @apply block p-2.5 w-full rounded-lg border border-gray-300 ring-1 ring-transparent text-gray-800 focus:border-primary focus:ring-primary placeholder:text-gray-400;
  }

  [type='file'] {
    @apply p-0 file:bg-gray-300;
  }

  [type='file'] {
    background: unset;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: unset;
    line-height: inherit;
  }

  [type='file']:focus {
    outline: 1px auto inherit;
  }

  [type='file']::file-selector-button {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity));
  }

  input[type='file']::file-selector-button {
    color: white;
    background: #1F2937;
    border: 0;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    padding-left: 2rem;
    padding-right: 1rem;
    margin-inline-start: -1rem;
    margin-inline-end: 1rem;
  }

  input[type='file']::file-selector-button:hover {
    background: #374151;
  }

  :is([dir=rtl]) input[type='file']::file-selector-button {
    padding-right: 2rem;
    padding-left: 1rem;
  }

  [type='checkbox'],
  [type='radio'] {
    @apply text-primary w-[1.25rem] h-[1.25rem];
  }

  [type='checkbox']:focus,
  [type='radio']:focus {
    @apply ring-primary;
  }

  [type='checkbox'] {
    @apply rounded-[0.25rem];
  }

  select {
    /* セレクトボックスのアイコン位置調整 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}

/* @apply components; */
@layer components {
  header {
    @apply fixed top-0 w-full transition-transform ease-in-out duration-300 delay-300 z-[99];
  }

  header.hide {
    @apply -translate-y-[50px];
  }

  header+.container {
    @apply flex-1;
    display: flex;
    flex-direction: column;
  }

  .has-icon {
    @apply items-center gap-1;
    display: inline-flex;
  }

  .star-rating .star-icon {
    @apply text-gray-200;
  }

  .star-rating.rate-1 .star-icon:nth-child(1) {
    @apply text-primary;
  }

  .star-rating.rate-2 .star-icon:nth-child(-n + 2) {
    @apply text-primary;
  }

  .star-rating.rate-3 .star-icon:nth-child(-n + 3) {
    @apply text-primary;
  }

  .star-rating.rate-4 .star-icon:nth-child(-n + 4) {
    @apply text-primary;
  }

  .star-rating.rate-5 .star-icon:nth-child(-n + 5) {
    @apply text-primary;
  }

  .star-rating.black.rate-1 .star-icon:nth-child(1) {
    @apply text-gray-800;
  }

  .star-rating.black.rate-2 .star-icon:nth-child(-n + 2) {
    @apply text-gray-800;
  }

  .star-rating.black.rate-3 .star-icon:nth-child(-n + 3) {
    @apply text-gray-800;
  }

  .star-rating.black.rate-4 .star-icon:nth-child(-n + 4) {
    @apply text-gray-800;
  }

  .star-rating.black.rate-5 .star-icon:nth-child(-n + 5) {
    @apply text-gray-950;
  }

  .badge {
    @apply items-center rounded-full px-1 py-0 ms-auto text-xs font-medium text-white;
    display: inline-flex;
  }

  .navbar-nav li {
    @apply border-b border-gray-300 first:border-t first:border-gray-300;
  }

  .navbar-nav li a,
  .navbar-nav li button {
    @apply justify-between items-center gap-2 w-full px-3 py-2 text-gray-800 bg-gray-200;
    @apply hover:text-primary hover:bg-gray-100;
    display: flex;
  }

  .navbar-nav li a .badge,
  .navbar-nav li button .badge {
    @apply bg-gray-400;
  }

  .mypage-nav .navbar-nav a,
  .mypage-nav .navbar-nav button {
    @apply bg-transparent py-4;
  }

  .overlay-container:not(.is-open) .overlay {
    @apply hidden;
    @apply transition ease-in-out duration-300;
  }

  .overlay-container.is-open .overlay {
    @apply block;
  }

  .btn {
    @apply justify-center items-center;
    @apply transition ease-in-out duration-300;
    display: inline-flex;
  }

  .btn-primary {
    @apply gap-x-3 w-full md:max-w-[500px] mx-auto bg-primary border border-primary rounded-md text-white shadow-lg;
    @apply hover:bg-primary-dark hover:text-white hover:border-primary-dark hover:translate-y-0.5 hover:drop-shadow;
  }

  .btn-primary:disabled {
    @apply bg-gray-400 border-gray;
    @apply text-opacity-50;
  }

  .btn-tertiary {
    @apply gap-x-3 w-full md:max-w-[500px] mx-auto py-2 px-3 bg-tertiary rounded-md text-white font-bold text-base;
    @apply hover:bg-tertiary-dark hover:text-white;
  }

  .cta-wrapper .btn-primary {
    @apply flex-1 hover:translate-y-0 hover:drop-shadow-none;
  }

  .btn-outline-primary {
    @apply gap-x-3 w-full md:max-w-[500px] mx-auto bg-white border border-primary rounded-md text-primary;
    @apply hover:bg-primary hover:text-white;
  }

  .btn-outline-gray {
    @apply gap-x-3 w-full md:max-w-[500px] mx-auto bg-white border border-gray rounded-md text-gray;
    @apply hover:border-gray-800 hover:text-gray-800 hover:bg-gray-50;
  }

  .btn-outline-tertiary {
    @apply gap-x-3 mx-auto bg-white border border-slate rounded-md text-slate;
    @apply hover:bg-stone-200;
  }

  .btn-sm {
    @apply py-2 px-2 text-sm font-normal;
  }

  .btn-md {
    @apply py-2 px-3 text-base font-medium w-full md:max-w-[500px];
  }

  .btn-lg {
    @apply py-3 px-4 text-lg font-bold w-full md:max-w-[500px];
  }

  .btn-shadow {
    @apply shadow-lg;
    @apply hover:translate-y-0.5 hover:drop-shadow;
  }

  .avator {
    @apply rounded-full object-cover;
  }

  .avator-sm {
    @apply w-[24px] h-[24px];
  }

  .avator-md {
    @apply w-[40px] h-[40px];
  }

  .avator-lg {
    @apply w-[80px] h-[80px];
  }

  .avator-xl {
    @apply w-[160px] h-[160px];
  }

  .pagination {
    @apply justify-center;
    display: flex;
  }

  .pagination .page-item {
    @apply justify-center items-center w-[10%] max-w-9 px-3 py-2 border border-gray-300 first:rounded-l-md last:rounded-r-md [&:not(:first-child)]:border-l-0 bg-white text-gray-500 text-xs md:text-sm hover:text-primary [&.active]:border-primary [&.active]:bg-primary [&.active]:text-white [&.disabled]:opacity-50 [&.disabled]:pointer-events-none;
    display: inline-flex;
  }

  .bg-gradient-primary {
    background: linear-gradient(135deg, rgba(253, 124, 79, 1) 0%, rgba(253, 124, 79, 1) 59%, #eb0084 100%);
  }

  .accordion-menu.tw-element .accordion-item {
    @apply overflow-hidden;
    display: flex;
    flex-direction: column;
  }

  .accordion-menu.tw-element .accordion-item .accordion-button {
    @apply relative w-full justify-between items-center bg-transparent py-3 px-4 text-left [overflow-anchor:none];
    @apply transition ease-in-out duration-300;
    @apply hover:text-gray-800 hover:bg-gray-300/10 hover:mix-blend-overlay focus:outline-none;
    display: flex;
  }

  .accordion-menu.tw-element>.accordion-item:last-child {
    @apply rounded-b-lg;
  }

  .accordion-menu.tw-element .nav-item {
    @apply border-b;
  }

  .accordion-menu.tw-element .nav-item .accordion-button {
    @apply ps-6;
  }

  .accordion-menu.tw-element .nav-item:last-child {
    @apply border-b-0;
  }

  .accordion-menu.tw-element.primary .accordion-heading {
    @apply bg-primary;
  }

  .accordion-menu.tw-element.primary [class*="border"] {
    @apply border-primary;
  }

  .accordion-menu.tw-element.primary .accordion-item:not([data-te-collapse-collapsed]),
  .accordion-menu.tw-element.primary .nav-item:not([data-te-collapse-collapsed]) {
    @apply border-primary/75;
  }

  .accordion-menu.tw-element.primary .accordion .accordion-item:not([data-te-collapse-collapsed]),
  .accordion-menu.tw-element.primary .accordion .nav-item:not([data-te-collapse-collapsed]) {
    @apply bg-primary/10;
  }

  .accordion-menu.tw-element.primary .accordion-item .accordion-button {
    @apply hover:bg-primary/10;
  }

  .accordion-menu.tw-element.tertiary .accordion-heading {
    @apply bg-slate;
  }

  .accordion-menu.tw-element.tertiary [class*="border"] {
    @apply border-slate;
  }

  .accordion-menu.tw-element.tertiary .accordion-item:not([data-te-collapse-collapsed]),
  .accordion-menu.tw-element.tertiary .nav-item:not([data-te-collapse-collapsed]) {
    @apply border-slate/75;
  }

  .accordion-menu.tw-element.tertiary .accordion .accordion-item:not([data-te-collapse-collapsed]),
  .accordion-menu.tw-element.tertiary .accordion .nav-item:not([data-te-collapse-collapsed]) {
    @apply bg-slate/10;
  }

  .accordion-menu.tw-element.tertiary .accordion-item .accordion-button {
    @apply hover:bg-slate/10;
  }

  .accordion-menu.tw-element ul li {
    @apply justify-between;
    display: flex;
  }

  .accordion-menu .accordion-heading {
    @apply py-2 px-4 text-white text-center font-bold;
  }

  .accordion-menu .accordion-title {
    @apply justify-between items-center;
    display: flex;
  }

  .accordion-menu .accordion-button {
    @apply justify-between items-center relative w-full;
    @apply bg-transparent py-3 px-4 text-left [overflow-anchor:none];
    @apply transition ease-in-out duration-300;
    @apply hover:text-gray-800 hover:bg-gray-300/10 hover:mix-blend-multiply focus:outline-none;
    display: flex;
  }

  .accordion-menu .accordion-button i {
    @apply transition ease-in-out duration-300;
  }

  .accordion-menu .accordion-button.collapsed {
    @apply bg-white;
  }

  .accordion-menu .accordion-body.show {
    @apply border-t-0;
  }

  .accordion-menu .navbar-nav .accordion-button {
    @apply ps-8;
  }

  .accordion-menu .navbar-nav.collapsed {
    display: none;
  }

  .accordion-menu.primary {
    @apply border-primary;
  }

  .accordion-menu.primary .accordion-heading {
    @apply bg-primary;
  }

  .accordion-menu.primary [class*="border"],
  .accordion-menu.primary [class*="border"] {
    @apply border-primary;
  }

  .accordion-menu.primary .accordion-item:not(.collapsed),
  .accordion-menu.primary .nav-item:not(.collapsed) {
    @apply border-primary/75;
  }

  .accordion-menu.primary .accordion-item.collapsed,
  .accordion-menu.primary .nav-item.collapsed {
    @apply border-b;
  }

  .accordion-menu.primary .accordion .accordion-item:not(.collapsed),
  .accordion-menu.primary .accordion .nav-item:not(.collapsed) {
    @apply bg-primary/10;
  }

  .accordion-menu.primary .accordion-item .accordion-button {
    @apply hover:bg-primary/10;
  }

  .accordion-menu.primary .accordion-item:not(.collapsed) .navbar-nav .nav-item {
    @apply first:border-t-0;
  }

  .accordion-menu.tertiary .accordion-heading {
    @apply bg-slate;
  }

  .accordion-menu.tertiary [class*="border"],
  .accordion-menu.tertiary [class*="border"] {
    @apply border-slate;
  }

  .accordion-menu.tertiary .accordion-item:not(.collapsed),
  .accordion-menu.tertiary .nav-item:not(.collapsed) {
    @apply border-slate/75;
  }

  .accordion-menu.tertiary .accordion .accordion-item:not(.collapsed),
  .accordion-menu.tertiary .accordion .nav-item:not(.collapsed) {
    @apply bg-slate/10;
  }

  .accordion-menu.tertiary .accordion-item .accordion-button {
    @apply hover:bg-slate/10;
  }

  .accordion-menu .accordion-item {
    @apply overflow-hidden;
    @apply flex flex-col;
  }

  .modal {
    @apply flex place-items-center h-screen absolute top-0 left-0 right-0 bottom-0 z-[100];
  }

  .modal-dialog {
    @apply justify-center w-full absolute top-[50%] -translate-y-[50%];
    display: flex;
  }

  .modal-header {
    @apply justify-between items-baseline;
    display: flex;
  }

  .logo-lg {
    @apply min-w-[50%] min-h-[50px] max-w-[80%] max-h-[320px] mx-auto;
  }

  a.card,
  .has-streched-link {
    @apply border border-gray-100 bg-white shadow-md rounded-lg;
    @apply hover:shadow-lg;
  }

  a.card .user-name,
  .has-streched-link .user-name {
    @apply text-sm;
  }

  .service-list {
    @apply flex-col gap-4;
    display: flex;
  }

  .card .thumbnail img {
    @apply rounded-md;
  }

  .card-title {
    @apply font-bold;
  }

  .card-title+.category {
    @apply mt-1;
  }

  .service-price {
    @apply text-primary inline-flex items-baseline gap-1 font-bold;
  }

  .service-price.yen::before {
    content: '¥';
    font-size: 0.85em;
    font-weight: normal;
  }

  .shop-list .thumbnail img {
    @apply max-h-[60px] w-auto;
  }

  .shop-detail .media {
    width: min(80%, 300px);
  }

  .shop-detail .shop-name .japanese::before {
    content: '[';
    margin-right: 0.25em;
  }

  .shop-detail .shop-name .japanese::after {
    content: ']';
    margin-left: 0.25em;
  }

  .shop-detail .shop-name .japanese>span+span::before {
    content: '/';
    margin-left: 0.25em;
    margin-right: 0.25em;
  }

  .tag {
    @apply items-center justify-center text-xs py-1 px-2 rounded-sm bg-black/10 hover:bg-black/15 text-gray hover:text-gray-dark min-w-10;
    display: inline-flex;
  }

  .tag a {
    @apply text-gray hover:text-gray-dark;
  }

  ul.has-separater li:not(:last-child)::after,
  ol.has-separater li:not(:last-child)::after {
    content: "/";
    margin-left: 0.5em;
    margin-right: 0.5em;
  }

  .tab-header {
    @apply font-medium text-center text-gray-500 border-b-2 border-gray-300;
  }

  .tab-header ul {
    @apply flex-1 items-center;
  }

  .tab-header ul a {
    @apply inline-block w-full p-3 text-gray border-b-2 border-transparent hover:text-gray-800;
  }

  .tab-header ul a.active {
    @apply text-gray-800 border-gray-800;
  }

  .histogram {
    @apply flex-col gap-1;
    display: flex;
  }

  .histogram-item {
    @apply justify-between items-center gap-3;
    display: flex;
  }

  .histogram-item .label {
    @apply text-primary flex-none;
  }

  .histogram-item .progressbar {
    @apply flex-auto h-3 bg-gray-200 rounded-full overflow-hidden;
  }

  .histogram-item .progressbar .metar {
    @apply bg-primary h-3 rounded-s-full;
  }

  .histogram-item .subtotal {
    @apply w-[20%] text-end;
  }

  .post-data p {
    @apply text-sm md:text-base [&:not(:last-child)]:mb-[1em];
  }

  .post-data h3 {
    @apply text-lg text-gray-800 font-bold bg-gray-100 p-1 mt-6 mb-2;
  }

  .post-data h4 {
    @apply text-gray-800 font-bold mt-4 mb-2;
  }

  .post-data strong {
    @apply text-gray-800 font-bold;
  }

  .form-wrapper {
    @apply flex-col gap-4;
    display: flex;
  }

  .form-wrapper li {
    @apply flex-col gap-2;
    display: flex;
  }

  .form-wrapper label,
  .form-wrapper legend {
    @apply block text-gray-800 text-sm font-bold;
  }

  .help-text {
    @apply text-xs md:text-sm text-gray;
  }

  .selector-item {
    @apply border-2 border-gray-400 rounded-lg p-3 bg-white hover:border-primary;
  }

  .selector-item.active {
    @apply border-primary;
  }

  .status-nav {
    display: flex;
  }

  .status-nav .nav-item {
    @apply flex-1 px-2 py-1.5 relative text-xs md:text-sm text-gray-800 bg-white border border-gray-400 [&:not(:first-child)]:border-l-0 first:rounded-s-lg last:rounded-e-lg hover:text-gray-800 focus:z-10;
  }

  .status-nav.user .nav-item {
    @apply hover:bg-primary-200 focus:bg-primary-300;
  }

  .status-nav.user .nav-item.active {
    @apply bg-primary-200;
  }

  .status-nav.buyer .nav-item {
    @apply hover:bg-secondary-200 focus:bg-secondary-300;
  }

  .status-nav.buyer .nav-item.active {
    @apply bg-secondary-200;
  }

  .status-nav .nav-item:focus .status-nav.user .nav-item:focus,
  .status-nav.buyer .nav-item:focus {
    outline: none
  }

  .status-nav .badge,
  #page-header .fa-bars+.badge {
    @apply absolute top-2 right-2 md:top-2.5 md:right-2.5 w-1.5 h-1.5 md:w-2 md:h-2 p-0 rounded-full bg-primary ring-1 ring-white/50 -translate-y-[50%] translate-x-1;
  }

  #page-header .btn {
    position: relative;
  }

  #page-header .fa-bars+.badge {
    @apply top-0 md:top-0;
  }

  .btn-group {
    display: flex;
  }

  .step-flow {
    display: flex;
  }

  .step-flow li {
    @apply flex-1 px-2 py-1.5 relative text-xs md:text-sm text-gray-800 bg-white border border-gray-400 [&:not(:first-child)]:border-l-0 first:rounded-s-lg last:rounded-e-lg hover:text-gray-800 focus:z-10;
  }

  .message-box .message-item {
    @apply py-3 px-3 border-t border-gray-200 last:border-b bg-white hover:bg-gray-100;
  }

  .message-box .message-item:link {
    @apply text-gray-800 font-bold;
  }

  .message-box .message-item:visited {
    @apply font-normal;
  }

  .message-box .message-media {
    @apply w-10;
  }

  .message-box .message-body {
    @apply flex-1 flex-col gap-2;
    display: flex;
  }

  .message-box .message-body .header {
    @apply justify-between items-start gap-3;
    display: flex;
  }

  .message-box .message-body .name {
    @apply flex-auto text-sm md:text-base;
  }

  .message-box .message-body .time {
    @apply text-xs;
  }

  .message-box .message-body .meta {
    @apply justify-between items-center gap-3;
    display: flex;
  }

  .message-box .message-body .status-label {
    @apply bg-black text-white text-2xs rounded-md px-2 py-0.5;
  }

  .message-box .message-body .message-subject {
    @apply line-clamp-1;
  }

  .message-box.list .message-item>.flex {
    @apply items-center;
  }

  .message-box.list .message-media {
    @apply w-6;
  }

  .message-box.list .message-body .header {
    @apply items-center;
  }

  .message-box.list .message-body .name {
    @apply line-clamp-1 flex-[70%];
  }

  .message-box.list .message-detail {
    @apply p-3 ps-9;
  }

  .message-item+.form-wrapper {
    @apply mt-4;
  }

  .message-wrapper .messege-box:not(.list) .message-item {
    @apply mb-4;
  }

  .message-wrapper .messege-box:not(.list) .message-item>.flex {
    @apply items-center;
  }

  .message-wrapper .message-media {
    @apply w-10;
  }

  .message-wrapper .message-body {
    @apply flex-auto;
  }

  .message-wrapper .message-body .header {
    @apply justify-between items-center gap-3;
    display: flex;
  }

  .message-wrapper .message-body .time {
    @apply text-xs;
  }

  .message-wrapper .message-detail {
    @apply text-gray ps-0 md:ps-12 mt-2 md:mt-0;
  }

  .avator {
    @apply rounded-full;
  }

  .posted-message .posted-message-body {
    @apply px-3 pt-4;
  }

  .progress-step {
    @apply justify-between overflow-hidden;
    display: flex;
  }

  .progress-step .item {
    @apply flex-1 block relative text-nowrap text-gray-800 font-bold text-xs md:text-sm;
  }

  .progress-step .item:first-of-type span {
    @apply border-s rounded-s-md;
  }

  .progress-step .item:last-of-type span {
    @apply border-e rounded-e-md;
  }

  .progress-step .item:last-of-type span::before,
  .progress-step .item:last-of-type span::after {
    @apply hidden;
  }

  .progress-step .item:nth-of-type(1) {
    @apply z-50;
  }

  .progress-step .item:nth-of-type(2) {
    @apply z-40;
  }

  .progress-step .item:nth-of-type(3) {
    @apply z-30;
  }

  .progress-step .item:nth-of-type(4) {
    @apply z-20;
  }

  .progress-step .item:nth-of-type(5) {
    @apply z-10;
  }

  .progress-step .item span {
    @apply justify-center items-center bg-white py-1 border-t border-b border-gray-400 ps-[8px];
    display: flex;
  }

  .progress-step .item span::before {
    @apply content-[''] block w-[8px] h-[calc(100%-2px)] absolute top-[1px] -right-[7px] bg-white z-10;
    clip-path: polygon(0% 0%, 15% 0, 100% 50%, 15% 100%, 0 100%);
  }

  .progress-step .item span::after {
    @apply content-[''] block w-[8px] h-[calc(100%+2px)] absolute -top-[1px] -right-[8px] bg-gray-400;
    clip-path: polygon(0% 0%, 2% 0, 100% 50%, 2% 100%, 0 100%);
  }

  .progress-step .item.active span {
    @apply bg-gray-800 text-primary;
  }

  .progress-step .item.active span::before {
    @apply bg-gray-800;
  }

  .progress-step .item.done span {
    @apply bg-gray-100 text-gray-400;
  }

  .progress-step .item.done span::before {
    @apply bg-gray-100;
  }

  .progress-step.buyer .item.active span {
    @apply text-secondary;
  }

  .img-upload .img-item:empty {
    @apply relative bg-gray-100/50;
  }

  .img-upload .img-item:empty::before {
    @apply grid w-full h-full text-gray-300 absolute top-0 left-0 z-0;
    place-content: center;
    font: var(--fa-font-light);
    content: '\f03e';
    font-size: 1.5em;
  }

  .img-upload .img-item img {
    @apply relative;
  }

  .path-group li:not(:last-child)::after {
    content: '/';
    margin-left: 0.5em;
  }

  .flow-simple .item {
    position: relative;
  }

  .flow-simple .item:not(:last-child)::after {
    @apply text-primary;
    position: absolute;
    right: -14px;
    font: var(--fa-font-solid);
    content: '\f0da';
  }

  .bg-gradient-primary .flow-simple .item:not(:last-child)::after {
    @apply text-white;
  }

  .published-date {
    @apply text-gray-400;
  }

  .announcement .list-item {
    @apply border-t border-gray-300;
  }

  .announcement .list-item:last-child {
    @apply border-b;
  }

  .announcement .list-item>a {
    @apply block py-2 text-gray-800 hover:text-primary;
  }

  .announcement .list-item time {
    @apply text-gray-500;
  }

  .announcement .media img {
    @apply border border-gray-200 rounded-lg;
  }

  .announcement.grid {
    @apply flex-col gap-3;
    display: flex;
  }

  .announcement.grid .list-item {
    @apply border-0;
  }

  .announcement.grid .card {
    @apply gap-4;
    display: flex;
  }

  .announcement.grid .card-media {
    flex: 1 0 40%;
  }

  .announcement.grid .card-body {
    @apply flex-col gap-2;
    display: flex;
  }

  .announcement.grid .card-body p {
    @apply text-gray-500 text-xs md:text-sm line-clamp-3;
  }

  .toast {
    @apply items-center w-full max-w-xs md:max-w-sm mb-4 text-white bg-gray-500 rounded-md shadow;
    display: flex;
  }

  .toast-success {
    @apply bg-green-500;
  }

  .toast-danger {
    @apply bg-red-500;
  }

  .toast-warning {
    @apply bg-amber-500;
  }

  .toast-info {
    @apply bg-sky-500;
  }

  .page-top {
    @apply fixed bottom-[10px] right-[10px] md:right-[calc(50%-330px)] z-[99] justify-center items-center bg-primary text-white w-[40px] h-[40px] rounded-full;
    @apply hover:bg-primary-dark;
    display: flex;
  }

  .page-top i {
    @apply text-white;
  }

  .progress-bar {
    --circle-size: 30px;
    @apply w-full m-0 p-0;
  }

  .progress-bar .section {
    @apply relative flex-col items-center min-h-[60px];
    display: flex;
    padding-top: 10px !important;
  }

  .progress-bar .section .progress-circle {
    @apply absolute top-0 left-1/2 -translate-x-1/2;
    @apply justify-center items-center bg-gray-400 text-white border-2 border-white rounded-full;
    display: flex;
    z-index: 2;
    width: var(--circle-size);
    height: var(--circle-size);
    line-height: var(--circle-size);
  }

  .progress-bar .section a {
    @apply w-full h-full;
    @apply flex-col items-center;
    @apply pt-8;
    @apply text-gray-800 hover:text-primary;
    display: flex;
    z-index: 1;
  }

  .progress-bar .section:nth-child(1) .progress-circle::before {
    content: '1';
  }

  .progress-bar .section:nth-child(2) .progress-circle::before {
    content: '2';
  }

  .progress-bar .section:nth-child(3) .progress-circle::before {
    content: '3';
  }

  .progress-bar .section.done .progress-circle::before {
    content: '\f00c';
    font: var(--fa-font-regular);
  }

  .progress-bar .section.done .progress-circle {
    @apply bg-green-600;
  }

  .progress-bar .section.current .progress-circle {
    @apply bg-green-600 ring-2 ring-green-600;
  }

  .progress-bar-wrapper .status-bar {
    @apply relative top-[18px] my-0 mx-auto h-[2px] bg-gray-400;
    width: calc(100% / 3 * 2);
  }

  .progress-bar-wrapper .current-status {
    @apply w-0 h-[2px] bg-green-600 rounded-[1px];
  }

  .writing-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1;
  }

  .payment-options-container {
    @apply relative overflow-hidden;
    min-height: 0px !important;
    max-height: 45px !important;
  }

  @media screen and (min-width: 768px) {
    .payment-options-container {
      max-height: 55px !important;
    }
  }

  .payment-consent-checkbox-container {
    @apply transition-all duration-300 ease-in-out;
  }

  .payment-consent-checkbox-container.disabled {
    @apply opacity-40 cursor-not-allowed;
  }

  .payment-consent-checkbox-container.disabled input[type="checkbox"] {
    @apply cursor-not-allowed opacity-40;
    filter: grayscale(100%) !important;
  }

  .payment-consent-checkbox-container.disabled .checkbox-label {
    @apply text-gray-400 cursor-not-allowed;
  }

  .payment-consent-checkbox-container.enabled .checkbox-label {
    @apply text-gray-900 font-semibold cursor-pointer;
  }

  .payment-consent-checkbox-container.enabled input[type="checkbox"] {
    @apply cursor-pointer opacity-100;
    filter: none !important;
  }

  .payment-consent-checkbox-container.disabled input[type="checkbox"]:disabled {
    @apply opacity-30;
    filter: grayscale(100%) !important;
  }

  .payment-options-container.disabled {
    @apply opacity-40 pointer-events-none relative;
    filter: grayscale(70%) !important;
    transition: all 0.3s ease !important;
  }

  .payment-options-container.disabled::after {
    @apply absolute inset-0 rounded;
    content: '' !important;
    background: rgba(128, 128, 128, 0.1) !important;
  }

  .form-select {
    @apply block p-2.5 w-full rounded-lg border border-gray-300 ring-1 ring-transparent text-gray-800 focus:border-primary focus:ring-primary placeholder:text-gray-400;
    /* カスタムセレクトボックスのアイコン位置調整 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.75rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .form-select.custom-icon {
    background-position: right 1rem center;
    padding-right: 3rem;
  }

  .form-select.small-icon {
    background-size: 1em 1em;
    background-position: right 0.5rem center;
    padding-right: 2rem;
  }

}

/* @import "./custom-utilities.css"; */