@extends('user.layouts.app')

@section('title', 'サポート料について')

@section('header')
    <p><a href="{{ route('user.my_account.index') }}">＜</a></p>
    <h1 id="title">サポート料について<a class="question-mark modal-open" data-target="use_flow"><img src="{{ asset('assets/user/img/question_mark.png') }}"></a></h1>
@endsection

@section('content')
    <main>
        <div id="wrapper" class="contents">
            {{--<section id="other">
                <p>取引終了後、サポーターの口座にサポート料が入ります。</p>
                <ul>
                    <li>大型：40,000円</li>
                    <li>中型：30,000円</li>
                    <li>小型：20,000円</li>
                </ul>
                <p>※ウシトラに委任した場合は、事務手数料として上記の金額から<em>5,000円</em>引かれます。</p>
            </section>--}}


            <article id="reward">
                <section>
                    <div class="content">
                        <h2 class="box slideUp">アプリの使用料は<span>無料！</span><br>
                            登録したトラックの売買が決まると、<br class="pc">
                            トラックの大きさによってサポート料がもらえます！</h2>
                        <ul>
                            <li class="box slideUp">
                                <div class="pic"><img src="{{ asset('assets/user/img/lp/truck1.svg') }}" alt="小型トラック"></div>
                                <div class="text">
                                    <h3>［ 小型トラック ］</h3>
                                    <p><em>¥20,000</em>/台</p>
                                    <p class="pc"><small>※税込・振込手数料込</small></p>
                                </div>
                            </li>
                            <li class="box slideUp">
                                <div class="pic"><img src="{{ asset('assets/user/img/lp/truck2.svg') }}" alt="中型トラック"></div>
                                <div class="text">
                                    <h3>［ 中型トラック ］</h3>
                                    <p><em>¥30,000</em>/台</p>
                                    <p class="pc"><small>※税込・振込手数料込</small></p>
                                </div>
                            </li>
                            <li class="box slideUp">
                                <div class="pic"><img src="{{ asset('assets/user/img/lp/truck3.svg') }}" alt="大型トラック"></div>
                                <div class="text">
                                    <h3>［ 大型トラック ］</h3>
                                    <p><em>¥40,000</em>/台</p>
                                    <p class="pc"><small>※税込・振込手数料込</small></p>
                                </div>
                            </li>
                        </ul>
                        <p class="sp box slideUp"><small>※税込・振込手数料込</small></p>
                        <p class="addition">※ただし、査定後の手続きをウシトラ(サポートセンター)に一任する場合は、サポート料から代行手数料：5000円が減額されます。</p>
                    </div>
                </section>
            </article>
        </div>
    </main>
@endsection

<style>
    section#other em {
        margin-left: 3px;
        margin-right: 3px;
    }
    ul li {
        font-size: 13px;
    }
</style>