/* Firefox用 */
#in_ymd:invalid {
  color: transparent;
}
#in_ymd:invalid::before {
  content: attr(placeholder);
  color: #9ca3af;
}

/* 1) 既定の黒アイコンを透明化（クリック領域は残す） */
#in_ymd::-webkit-calendar-picker-indicator {
  opacity: 0;     /* Chrome / Safari / Edge */
}

input[type="date"]::-webkit-date-and-time-value {
    margin: 0px;
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
}
  
input[type="date"]::-webkit-datetime-edit {
    margin: 0px;
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
}

/* 見た目アイコンは装飾のみ（クリックは受けない） */
.input-wrap .i-calendar.icon {
  position:absolute; 
  right:15px; 
  top:60%; 
  transform:translateY(-50%);
  width:20px; 
  height:20px; 
  pointer-events:none; 
  color:#1061D7;
  background: white;
  cursor:pointer;
  line-height:1;
}

/* 透明ボタン */
.input-wrap {
  position: relative;
  display:inline-block;
}

#in_ymd {
  height:40px;
}
.input-wrap .icon-btn {
  position:absolute; top:0; right:0; height:100%; width:280px;
  background:transparent; border:0; padding:0; margin:0; 
}

/* 既定アイコンは非表示（見た目）。ヒットは上の .icon-btn が受ける */
#in_ymd::-webkit-calendar-picker-indicator {
  opacity:0;
}

/* --- プレースホルダ・ラベルの共通スタイル --- */
.date-field {
}

/* ラベルを入力欄の内側に重ねる */
.date-field .ph-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa0a6;               /* プレースホルダっぽい色 */
  pointer-events: none;         
  font-size: 1.0em;
  background: white;
  line-height:28px;
  height:28px;
  width:100px;
}

/* 値あり or フォーカス時は非表示 */
.date-field input.has-value + div .ph-label {
  display: none;
}

/* iOS Safari 等で input 内のテキストがセンター寄せになるのを防ぐ場合 */
.date-field input[type="date"] {
  text-align: left;
}

.input-wrap {
  position: relative;
  display: inline-block;
}

.input-wrap input {
  min-width: 20rem;   /* 任意 */
  padding: 0 2.5rem 0 1rem;  /* 右側にアイコン分の余白 */
}

select.disabled{
    background-color: var(--ui-button-background-disabled);
}

textarea:disabled{
    background-color: var(--ui-button-background-disabled);
}

.textarea-error{
    background-color: var(--semantics-error-1-default) !important;
    border-color: var(--semantics-error-2-default) !important;
}

body.lock-scroll{
    overflow: hidden;  /* スクロールロック */
}

body{
	-webkit-text-size-adjust: 100%; /* iOSの自動文字サイズ調整を無効化 */
}

/* モーダルCSS */
.modal-area {
    display: none;
    position: fixed;
    z-index: 9999; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal-bg {
    width: 100%;
    height: 100%;
    background-color: #050F1A80;
}

.modal-wrapper {
    position: absolute;
    transform: translate(-50%, -40%);
    top: 28%;
    left: 47.8%;
    height: 60%;
    background-color: #fff;
    width: 95%
}

.item-color {
    color: var(--ui-link-1-text-default);
    cursor: pointer;
}

.cursor-pointer{
    cursor: pointer;
}

.scrollbar-x-none {
    overflow-x: hidden;
}

.slide-in-left {
    animation: slideInLeft 200ms ease-out forwards;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
.slide-out-Right {
    animation: slideOutRight 200ms ease-out forwards;
 }
 
@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.slide-in-Right {
    animation: slideInRight 200ms ease-out forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
.slide-out-Left {
    animation: slideOutLeft 200ms ease-out forwards;
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@media screen and (max-width: 768.9px) {
    body .modal {
        margin:117px 8px 0;
        padding:24px 16px;
        height: 80%
    }
}

@media screen and (max-width: 768.9px) {
    .sp-mb-x-2 {
        margin-bottom: 8px !important;
    }
}

@media screen and (max-width: 768.9px) {
    .sp-mb-x-4 {
        margin-bottom: 16px !important;
    }
}
@media screen and (min-width: 768.9px) {
    .pc-mr-x-5 {
        margin-right: 24px !important;
    }
}
    
@media screen and (min-width: 768.9px) {
    .pc-pt-x-5 {
        padding-top: 31px !important;
    }
}