:root {

/*
--primary: #424B87;
--secondary: #DB2B39;
--accent: #FFD23F;
*/

/*
--primary: #607196;
--secondary: #FF7B9C;
--accent: #FFC759;
*/


--primary: #2d82b7;
--secondary: #ff8552;
--accent: #85ffc7;

--primary-light: #5BA8D7;
--primary-dark: #246994;

--light: #e6e6e6;
--lighter: #f6f6f6;
--dark: #39393a;
--grey: #69696a;
--bg-main-color: var(--primary);
--bg-second-color: var(--light);
--main-gradient: linear-gradient( 180deg, var(--bg-main-color) 15vh, var(--primary-light) 45vh, var(--primary-light) 50vh, var(--bg-main-color) 60vh);
}

.pad, .phone{
    display: none;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/subset-OpenSans.eot');
    src: url('fonts/OpenSans/subset-OpenSans.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSans/subset-OpenSans.woff2') format('woff2'),
        url('fonts/OpenSans/subset-OpenSans.woff') format('woff'),
        url('fonts/OpenSans/subset-OpenSans.ttf') format('truetype'),
        url('fonts/OpenSans/subset-OpenSans.svg#OpenSans') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/subset-OpenSans-Bold.eot');
    src: url('fonts/OpenSans/subset-OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSans/subset-OpenSans-Bold.woff2') format('woff2'),
        url('fonts/OpenSans/subset-OpenSans-Bold.woff') format('woff'),
        url('fonts/OpenSans/subset-OpenSans-Bold.ttf') format('truetype'),
        url('fonts/OpenSans/subset-OpenSans-Bold.svg#OpenSans-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/subset-OpenSans-Light.eot');
    src: url('fonts/OpenSans/subset-OpenSans-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSans/subset-OpenSans-Light.woff2') format('woff2'),
        url('fonts/OpenSans/subset-OpenSans-Light.woff') format('woff'),
        url('fonts/OpenSans/subset-OpenSans-Light.ttf') format('truetype'),
        url('fonts/OpenSans/subset-OpenSans-Light.svg#OpenSans-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: block;
}


/*
@font-face {
    font-family: 'M+ 1mn';
    src: url('fonts/Mplus/subset-mplus-1mn-bold.eot');
    src: url('fonts/Mplus/subset-mplus-1mn-bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Mplus/subset-mplus-1mn-bold.woff2') format('woff2'),
        url('fonts/Mplus/subset-mplus-1mn-bold.woff') format('woff'),
        url('fonts/Mplus/subset-mplus-1mn-bold.ttf') format('truetype'),
        url('fonts/Mplus/subset-mplus-1mn-bold.svg#mplus-1mn-bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'M+ 1mn';
    src: url('fonts/Mplus/subset-mplus-1mn-thin.eot');
    src: url('fonts/Mplus/subset-mplus-1mn-thin.eot?#iefix') format('embedded-opentype'),
        url('fonts/Mplus/subset-mplus-1mn-thin.woff2') format('woff2'),
        url('fonts/Mplus/subset-mplus-1mn-thin.woff') format('woff'),
        url('fonts/Mplus/subset-mplus-1mn-thin.ttf') format('truetype'),
        url('fonts/Mplus/subset-mplus-1mn-thin.svg#mplus-1mn-thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'M+ 1m';
    src: url('fonts/Mplus/subset-mplus-1m-regular.eot');
    src: url('fonts/Mplus/subset-mplus-1m-regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Mplus/subset-mplus-1m-regular.woff2') format('woff2'),
        url('fonts/Mplus/subset-mplus-1m-regular.woff') format('woff'),
        url('fonts/Mplus/subset-mplus-1m-regular.ttf') format('truetype'),
        url('fonts/Mplus/subset-mplus-1m-regular.svg#mplus-1m-regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
*/


*{
    margin: 0px;
    padding: 0px;
}

body {    
    padding: 0px;
    margin: 0px;
    justify-content: center;
    font-family: 'Open Sans', Sans;
    font-weight: normal;
    font-style: normal;        
    background: var(--main-gradient);    
    background-repeat: no-repeat;
    min-height: 100vh;
}

header {
    padding-left: 1em;
    padding-top: 1em;    
    font-size: 20px;       
}




nav {            
    text-align: right;    
    margin-right: 1em;    
    margin-top: 1em;
    margin-bottom: 1em;

}

nav ul {
    margin: 0px;
}

nav ul li {
    display: inline;
}

a{
    text-decoration: none;    
    color: var(--dark);
}

a:hover{
    text-decoration: underline;
}

main {        
    font-size: 20px;
    font-weight: 300;
    color: var(--dark);
    text-shadow: 1px 1px 1px var(--lighter);
}

main h1{
    font-size: 130%;
    margin-top: 1em;
}

main h2{
    font-size: 125%;
    margin-top: 1em;
}
main h3{
    font-size: 120%;
    margin-top: 1em;
}
main h4{
    font-size: 115%;
    margin-top: 1em;
}
main h5{
    font-size: 110%;
    margin-top: 1em;
}
main h6{
    font-size: 105%;
    margin-top: 1em;
}

p {
    margin-top: .5em;
}

footer {    
    color: var(--dark);        
    text-align: right;    
}

.nav-item-active{    
}

.nav-item{
    margin-left: .3em;
    color: var(--dark);
}

.logo-title{        
    font-size: 200%;
    color: var(--dark);
    text-shadow: .02em .02em .02em var(--grey);
    white-space: nowrap;
}

.logo-claim{   
    margin-left: .5em; 
    color: var(--dark);
    text-shadow: .02em .02em .02em var(--grey);
    white-space: nowrap;
    
}

.logo-bracket{    
    font-size: 200%;
    font-weight: bold;
    color: var(--secondary);

}

.footer-link{    
}

/*pad*/
@media only screen and (max-width: 1024px) {
    .phone, .pc{
        display: none;
    }

    .pad{
        display: inline;
    }

    .header-title{
        display: block;
    }

}

/*phone*/
@media only screen and (max-width: 600px) {
    
    nav{        
                     
    }

    nav ul{

    }

    nav li{        

    }
    
    .pad, .pc{
        display: none;
    }

    .phone{
        display: inline;
    }

    .header-title{
        display: block;
    }

}