@charset 'UTF-8';
@import 'mixins';

@mixin border {
    border: 1px solid #dedede;
    border-radius:  5px;
}

.report {
    h2 {
        line-height: px2rem(160);
        color: #f3493d;
        text-align: center;
        font-size: px2rem(38);
    }
    .form {
        padding: 0 px2rem(25);
        .row {
            width: 100%;
            @include clearfix;
        }
        .radio {
            width: 50%;
            float: left;
            input[type=radio] {
                display: none;
            }
            input[type=radio]:checked+label em {
                &:after {
                    content:"";
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: #ff2b68;
                    border-radius: 50%;
                    left: 0;
                    top: 0;
                    border: 1px solid #fff;
                    box-sizing: border-box;
                    // transform: translate(-50%,-50%);
                }
            }
            label {
                font-size: px2rem(32);
                font-weight: bold;
                line-height: px2rem(50);
                
                em {
                    display: inline-block;
                    border-radius: 50%;
                    border: 2px solid #000;
                    width: px2rem(28);
                    height: px2rem(28);
                    margin-right: px2rem(30);
                    position: relative;
                }
            }
        }
        .text {
            margin: px2rem(40) 0;
            p {
                line-height: px2rem(55);
                font-size: px2rem(24);
                &.hl {
                    color: #f3493d;
                }
            }   
        }
        .key {
            width: px2rem(170);
            font-size: px2rem(32);
            font-weight: bold;
            float: left;
            line-height: px2rem(65);
        }
        .select {
            width: px2rem(520);
            line-height: px2rem(65);
            text-indent: 1em;
            float: right;
            @include border;
            font-size: px2rem(26);
            color: #666;
            position: relative;
            p {
                
                width: px2rem(452);
                &.label {
                    @include ellipsis;
                }
            
            }
            select {
                opacity: 0;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }

            .reason-list {
                position: absolute;
                width: 100%;
                padding: 0 px2rem(12);
                top: px2rem(85);
                background: #666;
                border-radius: 5px;
                z-index: 10;
                animation: show 0.2s ease;
                &:before {
                    content:"";
                    display: block;
                    position: absolute;
                    @include triangle-up(px2rem(15), #666);
                    top: -px2rem(28);
                    right: px2rem(20);
                    
                }
                .list-wrap {
                    max-height: px2rem(600);
                    overflow-y: scroll;
                }
                
                p {
                    text-indent: 0;
                    margin-left: 1em;
                    padding: px2rem(20) 0;
                    line-height: px2rem(35);
                    font-size: px2rem(26);
                    color:#fff;
                    border-bottom:1px solid #999;
                    &:last-child {
                        border: none;
                    }
                }
            }
            
        }
        .icon-down:after {
            content: "";
            position: absolute;
            width: px2rem(20);
            height: px2rem(12);
            background: url(../../img/icon-down.png) no-repeat;
            background-size: 100% 100%;
            right: px2rem(25);
            top: 50%;
            transform: translateY(-50%);
        }
        textarea {
            margin-top: px2rem(60);
            resize: none;
            width: 100%;
            height: px2rem(300);
            @include border; 
            font-size: px2rem(26);
            padding: px2rem(20);
            line-height: px2rem(50);
        }
        .submit {
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            background: #ff2b68;
            color: #fff;
            font-size: px2rem(40);
            font-weight: bold;
            line-height: px2rem(80);
            letter-spacing: px2rem(20);
            &:active {
                background-color: #e6275d;
            }
        }
    }
}

@keyframes show {
    from {
        transform-origin: center 0;
        transform: scaleY(0);
    }

    to {
        transform-origin: center 0;
        transform: scaleY(1);        
    }
}