/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    line-height: 1.2;
    -webkit-text-size-adjust: 100%;
    word-break: break-all;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img {
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}


input[type="radio"], input[type="checkbox"], input[type="submit"], input[type="button"], label {
    cursor: pointer;
}

a, canvas {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    overflow: hidden;
}

.left {
    float: left;
}

.right {
    float: right;
}

a {
    color: inherit;
}

    a:not(.hover) {
        color: #239ecf;
        text-decoration: underline;
    }

        a:not(.hover):hover {
            text-decoration: none;
        }

.hover {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 1;
}

    .hover:hover {
        opacity: 0.75;
    }

.sp-show {
    display: none;
}
/* public ----------------------------------------*/
body {
    font-family: Hiragino Kaku Gothic Pro, Osaka, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;
    background: #ffffff;
    position: relative;
    padding-top: 130px;
}

html, body {
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

    body * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

.container {
    max-width: 960px;
    margin: 0 auto;
}

#header {
    position: absolute;
    width: 100%;
    top: 30px;
    z-index: 100;
    margin-top: 53px;
}

    #header.fixed {
        position: fixed;
        top: 0;
    }

    #header .container {
        display: table;
        width: 100%;
        background: rgb(230, 230, 230);
    }

        #header .container > * {
            display: table-cell;
            vertical-align: middle;
        }

        #header .container h1 {
            width: 9em;
            font-size: 120%;
            color: #fff;
            font-weight: bold;
            padding-left: 1.5em;
            line-height: 1.6;
        }

            #header .container h1 span {
                display: inline-block;
            }

        #header .container ul {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        #header .container li {
            display: table-cell;
            vertical-align: middle;
            height: 60px;
            line-height: 1.4;
            color: #999;
            font-size: 110%;
            font-weight: bold;
            text-align: center;
            padding-left: 10px;
            border-left: 5px solid rgb(255, 255, 255);
            border-right: 5px solid rgb(255, 255, 255);
            position: relative;
            background: rgb(230, 230, 230);
        }

            #header .container li:last-child {
                width: 6em;
                background: none;
            }

            #header .container li:before,
            #header .container li:after {
                content: "";
                display: block;
                position: absolute;
                width: 0;
                height: 0;
                top: 0;
                border-width: 30px 30px 30px 30px;
                border-style: solid;
                border-color: transparent;
            }

            #header .container li:after {
                right: -60px;
                border-left-color: rgb(230, 230, 230);
            }

            #header .container li:before {
                left: 0;
                border-left-color: rgb(255, 255, 255);
            }

            #header .container li:first-child:before {
                content: none;
            }

            #header .container li:last-child:after {
                content: none;
            }

            #header .container li:nth-child(1) {
                z-index: 10;
            }

            #header .container li:nth-child(2) {
                z-index: 9;
            }

            #header .container li:nth-child(3) {
                z-index: 8;
            }

            #header .container li:nth-child(4) {
                z-index: 7;
            }

            #header .container li.complete {
                background: rgb(245, 185, 182);
            }

                #header .container li.complete:after {
                    border-left-color: rgb(245, 185, 182);
                }

            #header .container li.current {
                background: rgb(245, 185, 182);
                color: black;
            }

                #header .container li.current:after {
                    border-left-color: rgb(245, 185, 182);
                }


            #header .container li .num {
                font-size: 80%;
            }

#footer {
    text-align: center;
}

    #footer .logo-iso {
        margin-bottom: 1em;
    }

    #footer .copyright {
        line-height: 2;
        font-size: 90%;
    }


/*sp view------------------------------------*/
@media screen and (max-width: 768px) {
    /*-------------------------------------*/
    /*768px--------------------------------*/
    /*-------------------------------------*/
    .sp-hidden {
        display: none !important;
    }

    .sp-show {
        display: block;
    }

    input, select, option {
        font-size: 16px !important;
    }

    /* public ----------------------------------------*/
    body {
        padding-top: 100px;
    }

    .container {
        padding: 0 15px;
    }
    
    #header {
        top: 0px;
    }

        #header .container {
            display: block;
            padding: 10px 15px;
            border-radius: 0;
        }

            #header .container > * {
                display: block;
            }

            #header .container h1 {
                width: auto;
                text-align: center;
                margin-bottom: .5em;
            }

            #header .container ul {
                display: table;
            }

            #header .container li {
                height: 40px;
            }

                #header .container li:before,
                #header .container li:after {
                    border-width: 20px 15px 20px 15px;
                }

                #header .container li:after {
                    right: -30px;
                }

    #footer {
        margin-top: 50px;
    }

    /*-------------------------------------*/
    /*768px--------------------------------*/
    /*-------------------------------------*/
}
#form-order {
    padding-top:120px;
}
@media (max-width: 992px) {
   #header{
       margin-top:45px;
   }
   body{
      padding-top:105px;
   }
   #form-order{
       padding-top:50px;
   }
}

@media screen and (max-width: 480px) {
    /*-------------------------------------*/
    /*480px--------------------------------*/
    /*-------------------------------------*/
    body {
        font-size: 3.2vw;
    }


    /*-------------------------------------*/
    /*480px--------------------------------*/
    /*-------------------------------------*/
}