@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}


@font-face{
    src: url(../font/Train_One/TrainOne-Regular.ttf);
    font-family: Train_One;
}

@font-face {
    src: url(../font/Noto_Sans_JP\,Train_One/);
    font-family: Noto_Sans_JP;
}

@font-face {
    src: url(../font/M_PLUS_Rounded_1c/);
    font-family: M_PLUS_Rounded_1c;
}




header {
    width: 100%;
    height: 10vh;
    display: flex;
    background-color: rgba(245,245,245,0.7);
    position: fixed;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10; 
    padding-top: 1vw;   
    padding-bottom: 1vw;   
}

h1 {
    width: 15%;   
    margin-left: 4%;
    
    
}

h1 a {   
    text-decoration: none; 
    font-size: 0.8vw;
}





h1 .logo img {
    display: block;
    width: 90%;
    
}



nav {
    width: 40%;
    margin-left: auto;
    
}

nav .two {
    display: flex;
}

nav .two .two-risuto {
    width: calc( 100% / 3 );
    list-style-type: none;
}

nav .two .two-risuto a {
    display: block;
    margin-left: 3vw;
    color: #808080;
    font-size: 1.1vw;
    text-decoration: none;
    transition: 1s;
}

nav .two .two-risuto a:hover {
    color: #101010;
    transition: 1s;
}

nav .two .two-risuto a:hover::before {
    width: 7%;
    transition: 0.5s;
}

nav .two .two-risuto a::before {
    position: absolute;
    bottom: 1vw;
    display: block;
    width: 0%;
    height: 0.05vw;
    content: "";
    background-color:#808080;
    transition: 0.5s;
    margin-bottom: 1.5vw;
}


h2 {
    text-align: center;
    margin-top: 10vw;
    font-size: 2.5vw;
    background-color: #dad6d6;
    padding: 2vw;
}

.ulflex {
    display: flex;
    list-style: none;
    margin-top: 1vw;
    margin-left: 5vw;
}

.ulflex li {
    font-size: 1vw;
}

.ulflex li a {
    text-decoration: none;
    color: #101010;
    font-size: 1vw;
    border-bottom:1px dotted #808080;
    transition: 1s;
}

.ulflex li a:hover {
    color: #808080;
    border-bottom:none;
    transition: 1s;
}

.poli {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

h3 {
    width: 50%;
    margin-top: 3vw;
    font-size: 2vw;
    color: #101010;
    border-bottom: 1px dotted #808080;
}

p {
    font-size: 1.3vw;
    margin-top: 1vw;
}

ol {
    margin-top: 1vw;
    margin-left: 3vw;
    font-size: 2vw;
}



footer {
    margin-top: 10vw;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    
    
}


footer .footerflex .footer-l {
    width: 60%;
}




.f-logo {
    border-bottom: 1px dotted #808080;
    width: 50%;

}

.f-logo a {
    display: block;
}

.f-logo a img {
    width: 60%;
}
    


footer .footerflex .footer-l h3 a:hover {
    color: #101010;
    transition: 1s;
}

address {
    font-size: 1.3vw;
    color: #808080;
    margin-top: 1vw;
}

footer .footerflex .footer-r {
    width: 40%;
}

footer .footerflex .footer-r ul {
    list-style-type: none;
}

footer .footerflex .footer-r ul li {
    width: 100%;
    margin-top: 2vw;
    
}

footer .footerflex .footer-r ul li a {
    display: block;
    text-decoration: none;
    font-size: 1.3vw;
    color: #808080;
    transition: 1s;
}

footer .footerflex .footer-r ul li a:hover {
    color: #101010;
    transition: 1s;
}


.copyright {
    text-align: center;
    font-size: 1vw;
    color: #808080;
    padding-bottom: 5vw;
}