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

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

.highLight {
    h2 {
        line-height: px2rem(160);
        color: #f3493d;
        text-align: center;
        font-size: px2rem(38);
    }
    .form {
        padding: 0 px2rem(25);
    }
    table {
        width: 100%;
        tr {
            margin-bottom: px2rem(70);
        }
        td {
            &:nth-of-type(2n+1) {
                font-size: px2rem(32);
                font-weight: bold;
                span {
                    display: inline-block;
                    line-height: px2rem(65);
                    width: px2rem(175);
                    vertical-align: middle;
                    margin: px2rem(35) 0;
                }
            }
        }
    }
    .select {
        margin: px2rem(35) 0;
        width: px2rem(520);
        line-height: px2rem(65);
        text-indent: 1em;
        @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;
                }
            }
        }
        select {
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        
    }
    .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%);
    }
    .font-opt {
        @include clearfix;
        span {
            display: block;
            float: left;
            position: relative;
            margin: px2rem(35) px2rem(35) px2rem(35) 0;
            
            @include border;
            width: px2rem(65);
            input[type=checkbox] {
                display: none;
            }
            input[type=checkbox]:checked+label {
                background-color: #f5f5f5;
            }
            label {
                display: block;
                width: 100%;
                font-size: px2rem(26);
                line-height: px2rem(65);
                text-align: center;
            }
        }
        .color {
            width: px2rem(150);
            position: relative;
            
            .checked {
                display: block;
                width: px2rem(70);
                height: px2rem(50);
                margin: px2rem(9);
            }
            .color-picker {
                position: absolute;
                width: px2rem(150);
                left: 0;
                top: px2rem(100);
                background-color: #666666;
                z-index: 10;
                border-radius: 5px; 
                display: none;
                box-shadow: 0 0 5px #333;
                animation: show 0.2s ease;
                &.show {
                    display: block;
                }
                &:before {
                    content:"";
                    display: block;
                    position: absolute;
                    @include triangle-up(px2rem(20), #666);
                    top: -px2rem(30);
                    right: px2rem(25);
                    z-index: 20;
                }
                p {
                    width: px2rem(134);
                    margin:  0 auto;
                    border-bottom: 1px solid #999;
                    @include clearfix;
                    margin-top: 1px;
                    &:last-child {
                        border: none;
                    }
                    em {
                        display: block;
                        float: left;
                        width: px2rem(70);
                        height: px2rem(50);
                        margin: px2rem(9) 0;
                    }
                }
            }
        }
        .bold {
            font-weight: bold;
        }
        .ita {
            font-style: italic;
        }
        .ul {
            text-decoration: underline;
        }
    }
    textarea {
        width:px2rem(700);
        height: px2rem(300);
        margin: px2rem(40) auto;
        @include border; 
        font-size: px2rem(26);
        padding: px2rem(20);
        line-height: px2rem(50);
        resize: none;
    }
    .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);        
    }
}
