デイトラweb制作上級編パターン2　 DAY31~44⑨

<div class="p-reservation__form-item">
    <dt class="p-reservation__form-label">
        <label>希望日</label>
    </dt>
    <dd class="p-reservation__form-input">
        <label class="p-reservation__form-date">
            <input name="" type="date" placeholder="年 / 月 / 日">
        </label>
        <label class="p-reservation__form-date">
            <input name="" type="date" placeholder="年 / 月 / 日">
        </label>
        <label class="p-reservation__form-date">
            <input name="" type="date" placeholder="年 / 月 / 日">
        </label>
    </dd>
</div>

.p-reservation__form-item {
    display: flex;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #DDDDDD;

    @include mq('sp') {
        display: block;
        padding: 21px 0;
    }

    &:first-child {
        border-top: 1px solid #DDDDDD;
    }
}

// 左側（希望日）
.p-reservation__form-label {
    width: 32.967032967%;
    line-height: 2.25;

    @include mq('sp') {
        width: 100%;
        margin-bottom: 8px;
    }
}

// 右側（年 / 月 / 日）
.p-reservation__form-input {
    width: 100% - 32.967032967%;

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

    input:-webkit-autofill {
        transition: background-color 5000s ease-in-out 0s !important;
    }

    // input type の設定
    [type="date"] {
        box-shadow: none;
        border: none;
        background: #F6F6F6;
        padding: 10px 13px;
        appearance: none;
        border-radius: 4px;
        font-family: inherit;
        font-size: 16px;
        font-weight: inherit;
        width: 100%;
        position: relative;

        @include mq('sp') {
            font-size: inherit;
            padding: 13px 17px;
        }

        &::before {
            position: absolute;
            content: "";
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background: url(../img/reservation/icon-calendar.png) no-repeat center center / contain;
        }
    }

    // デフォルトのアイコン
    [type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        // 見えなくして機能だけ残す
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}