@charset "utf-8";
body{overflow-x:hidden;}
#wrap{width: 100%;}

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,300);

* {
    box-sizing: border-box;
}

body {margin: 0;}

/*text*/
h3{
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    font-size: 36pt;
    font-weight: 300;
    color: white;
    letter-spacing: 4px;
    text-shadow: 2px 2px 8px #000;
    padding-top: 300px;
}

h4 {
    font-family: 'Titillium Web', sans-serif;
    font-size: 24pt;
    font-weight: 300;
    letter-spacing: 4px;
}

h5 {
    font-family: 'Titillium Web', sans-serif;
    font-size: 20pt;
    font-weight: 300;
    letter-spacing: 2px;
}

h6 {
    font-family: 'Titillium Web', sans-serif;
    font-size: 16pt;
    font-weight: 300;
    letter-spacing: 1px;
}

p{
    font-family: 'Titillium Web', sans-serif;
    font-size: 14pt;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 140%;
}



.row:after {
    content: "";
    clear: both;
    display: block;
}

[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}




/*desktop--------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1200px) {

            /*top button*/
            .pageup {
                position: fixed;
                right: 50px;
                bottom: 50px;
                width: 44px;
                height: 44px;
                background: #c42127; border: 1px solid #efefef;
                display: none;
                cursor: pointer;
                z-index: 100000;
                transition: all 0.3s ease 0s;
            }

            .pageup:hover {
                background: #1a1a1a; border: 1px solid #333;
            }

            .pageup p {
                color: #efefef; text-align: center;
                font-size: 10pt; margin-top: 27%; letter-spacing: 2px;
            }

            /*navigation*/
            #header {  
                width: 100%;
                height: 80px;
                background-color: #1a1a1a;
            }

            #header > .nav {
                width: 1200px;
                height: 80px;
                margin: 0 auto;
                position: relative;
            }

            #header > .nav > ul {
                float: right;
                list-style-type: none;
                margin: 0;
                padding-right: 50px;
                position: relative;
                top: 30px;
            }

            #header > .nav > ul > li {
               float: left; 
               display: block;
            }

            #header > .nav > ul > li~li {
                margin-left: 25px;
            }

            #header > .nav > ul > li > a {
                display: block;
                text-align: left;
                text-decoration: none;
                font-family: 'Titillium Web', sans-serif;
                font-size: 12pt;
                color: white;
                letter-spacing: 2px;
                transition: all 0.3s ease 0s;
            }

            #header > .nav > ul > li a:hover {
                color: #c42127; /*navi mouse over color change*/
            }

            #header > .nav li.icon {
                display: none;
            }





            /*drop down*/
            .dropdown {
                position: relative;
                display: inline-block;
                height: 50px;
            }

            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #1a1a1a;
                padding: 10px 15px;
                top: 50px; 
                width: 300px;
            }

            .dropdown-content a {
                color: white;
                text-decoration: none;
                display: block;
                height: 30px;
                font-family: 'Titillium Web', sans-serif;
                font-size: 12pt;
                color: #fff;
                letter-spacing: 2px;
                transition: all 0.3s ease 0s;
            }

            .dropdown:hover .dropdown-content {
                display: block; 
            }





            /*header logo*/
            #header > .nav > .t_logo{
                height: 23px;
                padding-left: 50px;
                position: absolute;
                top:29px; z-index: 100;
            }



            /*main visual*/
            #main_vis h3{
                text-align: center;
                font-family: 'Titillium Web', sans-serif;
                font-size: 36pt;
                font-weight: 300;
                color: white;
                letter-spacing: 4px;
                text-shadow: 2px 2px 8px #000;
                padding-top: 300px; 
            }

            #main_vis .button {
                width: 296px;
                height: 46px;
                border: 2px solid #efefef;
                overflow: hidden;
                margin: 0 auto;
                margin-top: 270px;

            }

            #main_vis .button:hover{
                border-color: #c42127;
            }

            #main_vis .button a{
                display: block;
                width: 0;
                height: 44px;
                -webkit-transition: width 0.2s; /* For Safari 3.1 to 6.0 */
                transition: width 0.2s;
            }

            #main_vis .button a:hover{
                text-decoration: none;
                background: #c42127;
                width: 294px;
            }

            #main_vis .button span{
                display: block;
                width: 292px;
                height: 42px;
                font-family: 'Titillium Web', sans-serif;
                font-size: 13pt;
                color: #efefef;
                letter-spacing: 1px;
                padding-top: 9px; text-align: left; padding-left: 20px;
                background: url(../img/arrow_down.png) no-repeat 93% 48%;
            }

            #main_vis .button span:hover{
                color: white;
                background: url(../img/arrow_down.png) no-repeat 93% 48%;
            }




            /*footer*/
            #footer {  
                width: 100%;
                height: 140px; 
                margin-top: 150px;
                background-color: #1a1a1a;
            }

            #footer > .foot_cont{
                width: 1200px;
                height: 140px;
                margin: 0 auto;
                position: relative;
            }

            #footer > .foot_cont > ul.links {
                position: absolute;
                top: 50px;
                left: 50px;
            }

            #footer > .foot_cont li {
                float: left;
            }

            #footer > .foot_cont li a {
                font-family: 'Titillium Web', sans-serif;
                font-size: 10pt; 
                letter-spacing: 1.5px;
                color: white;
                opacity: 0.5;
                text-decoration: none;
                transition: all 0.3s ease 0s;
            }

            #footer > .foot_cont li a:hover{
                opacity: 1;
            }

            #footer > .foot_cont > ul.links > li~li {
                margin-left: 25px;
            }

            #footer > .foot_cont > ul.sns > li~li {
                margin-left: 10px;
            }

            #footer > .foot_cont h2 {
                position: absolute;
                bottom: 45px;
                left: 50px;
                opacity: 0.8;
            }

            #footer > .foot_cont > ul.sns {
                width: 76px;
                position: absolute;
                bottom: 45px;
                right: 50px;
            }

            #footer > .foot_cont > ul.sns > li img {
               display: block; width: 32px; 
            }

}




/*--------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1200px) {

            /*top button*/
            .pageup {
                position: fixed;
                right: 10px;
                bottom: 10px;
                width: 44px;
                height: 44px;
                background: #c42127; border: 1px solid #efefef;
                display: none;
                cursor: pointer;
                z-index: 100000;
                transition: all 0.3s ease 0s;
            }

            .pageup:hover {
                background: #1a1a1a; border: 1px solid #333;
            }

            .pageup p {
                color: #efefef; text-align: center;
                font-size: 10pt; margin-top: 27%; letter-spacing: 2px;
            }

            /*navigation*/
            #header {  
                width: 100%;
                height: 80px;
                background-color: #1a1a1a;
            }

            #header > .nav {
                width: 80%
                height: 80px; 
                margin: 0 auto;
                position: relative;
            }

            #header > .nav > ul {
                float: right;
                list-style-type: none;
                margin: 0;
                padding-right: 50px;
                position: relative;
                top: 30px;
            }

            #header > .nav > ul > li {
               float: left; 
               display: block;
            }

            #header > .nav > ul > li~li {
                margin-left: 25px;
            }

            #header > .nav > ul > li > a {
                display: block;
                text-align: left;
                text-decoration: none;
                font-family: 'Titillium Web', sans-serif;
                font-size: 12pt;
                color: white;
                letter-spacing: 2px;
                transition: all 0.3s ease 0s;
            }

            #header > .nav > ul > li a:hover {
                color: #c42127; /*navi mouse over color change*/
            }

            #header > .nav li.icon {
                display: none;
            }





            /*drop down*/
            .dropdown {
                position: relative;
                display: inline-block;
                height: 50px;
            }

            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #1a1a1a;
                padding: 10px 15px;
                top: 50px; 
                width: 300px;
            }

            .dropdown-content a {
                color: white;
                text-decoration: none;
                display: block;
                height: 30px;
                font-family: 'Titillium Web', sans-serif;
                font-size: 12pt;
                color: #fff;
                letter-spacing: 2px;
                transition: all 0.3s ease 0s;
            }

            .dropdown:hover .dropdown-content {
                display: block; 
            }





            /*header logo*/
            #header > .nav > .t_logo{
                height: 23px;
                padding-left: 50px;
                position: absolute;
                top:29px; z-index: 100;
            }



            /*main visual*/
            #main_vis h3{
                text-align: center;
                font-family: 'Titillium Web', sans-serif;
                font-size: 30pt;
                font-weight: 300;
                color: white;
                letter-spacing: 4px;
                text-shadow: 2px 2px 8px #000;
                padding-top: 260px; 
            }

            #main_vis .button {
                display: none;
            }



            /*footer*/
            #footer {  
                width: 100%;
                height: 140px;
                margin-top: 150px;
                background-color: #1a1a1a;
            }

            #footer > .foot_cont{
                width: 100%; 
                height: 140px;
                margin: 0 auto;
                position: relative;
            }

            #footer > .foot_cont > ul.links {
                position: absolute;
                top: 50px;
                left: 50px;
            }

            #footer > .foot_cont li {
                float: left;
            }

            #footer > .foot_cont li a {
                font-family: 'Titillium Web', sans-serif;
                font-size: 10pt; 
                letter-spacing: 1.5px;
                color: white;
                opacity: 0.5;
                text-decoration: none;
            }

            #footer > .foot_cont li a:hover{
                opacity: 1;
            }

            #footer > .foot_cont > ul.links > li~li {
                margin-left: 25px;
            }

            #footer > .foot_cont > ul.sns > li~li {
                margin-left: 10px;
            }

            #footer > .foot_cont h2 {
                position: absolute;
                bottom: 45px;
                left: 50px;
                opacity: 0.8;
            }

            #footer > .foot_cont > ul.sns {
                width: 76px;
                position: absolute;
                bottom: 45px; 
                right: 50px;
            }

            #footer > .foot_cont > ul.sns > li img {
               display: block; width: 32px; 
            }
}





@media only screen and (max-width: 820px) {

                /*top button*/
                .pageup {
                    position: fixed;
                    right: 20px;
                    bottom: 30px;
                    width: 44px;
                    height: 44px;
                    background: #c42127; border: 1px solid #efefef;
                    display: none;
                    cursor: pointer;
                    z-index: 100000;
                    transition: all 0.3s ease 0s;
                }

                .pageup:hover {
                    background: #1a1a1a; border: 1px solid #333;
                }

                .pageup p {
                    color: #efefef; text-align: center;
                    font-size: 10pt; margin-top: 27%; letter-spacing: 2px;
                }

                #header {
                    height: 50px;
                }

                #header > .nav {
                    width: 100%;
                }

                #header > .nav > h1 { 
                    margin-top: -15px; margin-left: -30px;
                }

                #header > .nav > h1 img{
                    width: 160px; 
                }

                #header > .nav .topnav {
                    width: 100%; margin-top: -15px;
                }

                #header > .nav a.first {
                    margin-top: 40px; 
                }

                #header > .nav li:not(:first-child) {display: none;}

                #header > .nav li.icon {
                    float: right;
                    display: inline-block;
                    position: absolute;
                    right: 20px;
                    top: 0;
                }

                #header > .nav .responsive {
                    width: 100%; z-index: 90;
                    position: relative; height: 290px; border-bottom: 4px solid #c42127;
                    background-color: #1a1a1a; padding: 0; padding-right: 20px;
                }

                #header > .nav .responsive li.icon {
                    position: absolute;
                    right: 20px;
                    top: 0; 
                }

                #header > .nav .responsive li{
                    float: none;
                    display: inline; 
                }

                #header > .nav .responsive li a {
                    display: block;
                    width: 100%; height: 30px;
                    text-align: right; 
                }

                #header > .nav .dropdown-content {
                    display: none;
                }

                #header > .nav .responsive a~a{
                    margin-top: 50px;
                }

                /*footer*/
                #footer {  
                    width: 100%;
                    height: 300px;
                    margin-top: 0;
                    background-color: #1a1a1a;
                }

                #footer > .foot_cont{
                    width: 100%;
                    height: 300px;
                    margin: 0 auto;
                    position: relative;
                }

                #footer > .foot_cont > ul.links {
                    position: absolute;
                    top: 50px;
                    left: 20px;
                }

                #footer > .foot_cont > ul.links li {
                    float: none;
                }

                #footer > .foot_cont li a {
                    font-family: 'Titillium Web', sans-serif;
                    font-size: 10pt; 
                    letter-spacing: 1.5px;
                    line-height: 22px;
                    color: white;
                    opacity: 0.5;
                    text-decoration: none;
                }

                #footer > .foot_cont li a:hover{
                    opacity: 1;
                }

                #footer > .foot_cont > ul.links > li~li {
                    margin-left: 0;
                }

                #footer > .foot_cont > ul.sns > li~li {
                    margin-left: 10px;
                }

                #footer > .foot_cont h2 {
                    position: absolute;
                    top: 250px;
                    left: 20px;
                    opacity: 0.8;
                }

                #footer > .foot_cont > ul.sns {
                    width: 76px;
                    position: absolute;
                    top: 185px;
                    left: 20px;
                }

                #footer > .foot_cont > ul.sns > li img {
                   display: block; width: 32px; 
                }

                


                /*text*/

                h4 {
                    font-family: 'Titillium Web', sans-serif;
                    font-size: 20pt;
                    font-weight: 300;
                    letter-spacing: 4px;
                }

                h5 {
                    font-family: 'Titillium Web', sans-serif;
                    font-size: 16pt;
                    font-weight: 300;
                    letter-spacing: 2px;
                }

                h6 {
                    font-family: 'Titillium Web', sans-serif;
                    font-size: 14pt;
                    font-weight: 300;
                    letter-spacing: 1px;
                }

                p{
                    font-family: 'Titillium Web', sans-serif;
                    font-size: 12pt;
                    font-weight: 400;
                    letter-spacing: 1px;
                    line-height: 140%;
                }

                /*main visual*/
                #main_vis h3{
                    text-align: center;
                    font-family: 'Titillium Web', sans-serif;
                    font-size: 26pt;
                    font-weight: 300;
                    color: white;
                    letter-spacing: 3px;
                    text-shadow: 2px 2px 8px #000;
                    padding-left: 0;
                    padding-right: 0;
                    width: 300px; 
                    margin: 0 auto;
                }
}