/* ---------------------------------------------------------- */
/* font-face */
/* ---------------------------------------------------------- */

@font-face{
    font-family: 'europa';
    font-weight: 400;
    src: url(/fonts/europa-regular-webfont.woff) format('woff'), url(/fonts/europa-regular-webfont.woff2) format('woff2');
}

@font-face{
    font-family: 'europa';
    font-weight: 700;
    src: url(/fonts/europa-bold-webfont.woff) format('woff'), url(/fonts/europa-bold-webfont.woff2) format('woff2');
}

@font-face{
    font-family: 'europa';
    font-weight: 300;
    src: url(/fonts/europa-light-webfont.woff) format('woff'), url(/fonts/europa-light-webfont.woff2) format('woff2');
}

/* ---------------------------------------------------------- */
/* common */
/* ---------------------------------------------------------- */

body,html{
    width: 100%;
    height: 100%;
}

html{
    font-size: 62.5%;
}

body{
    font-family: 'europa', 'Titillium Web', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2.1rem;
    background-color: #C6CCD1;
    position: relative;
    /* min-width: 1000px; */
}

*{
    box-sizing: border-box;
}

img{
    vertical-align: bottom;
}

a, a *{
    text-decoration: none;
    color: inherit;
}

input, textarea, select{
    font-family: inherit;
}

#reg-world{
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------- */
/* header */
/* ---------------------------------------------------------- */

#reg-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 120px 0 60px;
    width: 100%;
}

#zone-logo{}

#zone-logo img{
    width: auto;
    height: 90px;
}

/* ---------------------------------------------------------- */
/* menu */
/* ---------------------------------------------------------- */

#reg-menu-btn{
    display: flex;
    position: fixed;
    top: 30px;
    right: 60px;
    z-index: 11;
}

#reg-menu-btn a{
    display: block;
}

#reg-menu-btn img{
    width: 30px;
    height: auto;
}

body#home #reg-menu-btn{
    right: 30px;
}

#reg-menu-cover{
    position: fixed;
    top: 0;
    right: 100%;
    z-index: 12;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.0;
    transition: opacity 0.2s;
}

body.menu-on #reg-menu-cover{
    right: 0;
    opacity: 0.5;
}

#reg-navi{
    font-family: 'europa', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.03em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    position: fixed;
    top: 0;
    right: -600px;
    z-index: 100;
    width: 600px;
    height: 100%;
    padding: 26px 40px;
    background-color: #202020;
    transition: all 0.6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

body.menu-on #reg-navi{
    right: 0px;
}

#zone-navi{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#zone-navi li{
    text-align: right;
}

#zone-navi a{
    color: #ffffff;
    opacity: 0.8;
    text-decoration: none;
    transition: opacity 0.25s;
}

#zone-navi a:hover{
    opacity: 1.0;
    border-bottom: solid 3px #D88383;
}

#btn-menu-close{
    width: 100%;
    text-align: right;
}

#btn-menu-close a{
    display: block;
}

#btn-menu-close img{
    width: auto;
    height: 24px;
}

#reg-navi .zone-sns{
}

/* ---------------------------------------------------------- */
/* main */
/* ---------------------------------------------------------- */

#reg-main{
    width: 100%;
    padding: 0 60px;
    margin: 0 auto;
}

#zone-ttl{
    font-family: 'europa', sans-serif;
    font-size: 4.2rem;
    font-weight: 300;
    line-height: 5.0rem;
    margin: 40px 0 0 0;
    padding: 22px 0 2px 0;
    border-bottom: solid 4px #FFFFFF;
    background-color: #C6CCD1;
    position: sticky;
    top: 0px;
}

#zone-cont{
    max-width: 1480px;
}

/* ---------------------------------------------------------- */
/* footer */
/* ---------------------------------------------------------- */

#reg-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000000;
    width: 100%;
    height: 60px;
    padding: 0 60px;
    font-size: 1.4rem;
    transition: all 0.4s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

body.footer-on #reg-footer{
    bottom: 0;
}

#zone-copyright{
    display: flex;
    align-items: center;
    gap: 12px;
    color: #DDDDDD;
}

#area-footer-logo-je img,
#area-footer-logo-gt img{
    width: auto;
    height: 44px;
}

/* ---------------------------------------------------------- */
/* sns */
/* ---------------------------------------------------------- */

.zone-sns{
    display: flex;
    align-items: center;
    gap: 20px;
}

.zone-sns a img{
    width: 32px;
    height: auto;
    opacity: 0.85;
}

#zone-copyright a,
.zone-sns a{
    transition: all 0.25s;
}

#zone-copyright a:hover,
.zone-sns a:hover{
    opacity: 0.4;
}


/* ////////////////////////////////////////////////////////// */
/* Tablet */
/* ////////////////////////////////////////////////////////// */

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

	#reg-header{
		padding: 3px 25px;
	}
    
    #zone-logo img{
        height: 64px;
    }

    #reg-header .zone-sns{
        display: none;
    }
    
    /* Menu */

    #reg-menu-btn,
    body#home #reg-menu-btn{
        top: 20px;
        right: 30px;
    }

    #reg-menu-btn img,
    body#home #reg-menu-btn img{
        padding: 2px;
    }

    #reg-navi{
        width: 100%;
        right: -100%;
    }

    body.menu-on #reg-navi{
        right: 0px;
    }

    #btn-menu-close{
        text-align: right;
    }

    /* Main */

    #reg-main{
        width: 100%;
        padding: 0 30px;
    }

    #zone-ttl{
        font-size: 3.4rem;
        line-height: 3.4rem;
        margin : 0 0 0 0;
        padding: 19px 0 8px 0;
        border-bottom: solid 3px #FFFFFF;
    }
    
    #zone-cont{
        margin: 30px 0 0 0;
        padding: 0 0 50px 0;
    }

    /* Footer */

    #zone-copyright{
        gap: 16px;
    }
    
	#reg-footer{
		justify-content: center;
	}

    #reg-footer .zone-sns{
        display: none;
    }

}


/* ////////////////////////////////////////////////////////// */
/* Smart Phone */
/* ////////////////////////////////////////////////////////// */

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

	#reg-header{
		padding: 3px 15px;
	}
    
    #zone-logo img{
        height: 68px;
        padding: 6px;
    }

    #reg-header .zone-sns{
        display: none;
    }
    
    /* Menu */

    #reg-menu-btn,
    body#home #reg-menu-btn{
        top: 20px;
        right: 20px;
    }

    #reg-menu-btn img,
    body#home #reg-menu-btn img{
        padding: 2px;
    }

    #reg-navi{
        width: 100%;
        right: -100%;
        align-items: flex-start;
        padding: 26px 25px;
        font-size: 2.2rem;
    }

    body.menu-on #reg-navi{
        right: 0px;
    }

    #zone-navi{
        gap: 20px;
    }

    #zone-navi li{
        text-align: left;
    }
    
    #reg-navi .zone-sns{
        display: inline-flex;
        flex-wrap: wrap;
        width: 220px;
    }

    #btn-menu-close{
        text-align: right;
    }

    /* Main */

    #reg-main{
        width: 100%;
        padding: 0 20px;
    }

    #zone-ttl{
        font-size: 3.0rem;
        line-height: 3.2rem;
        margin : 0 0 0 0;
        padding: 19px 0 8px 0;
        border-bottom: solid 3px #FFFFFF;
    }
    
    #zone-cont{
        margin: 30px 0 0 0;
        padding: 0 0 50px 0;
    }

    /* Footer */

	#reg-footer{
		padding: 0 0px;
		font-size: 1.1rem;
		justify-content: center;
	}

    #zone-copyright{
        gap: 10px;
    }

    #reg-footer .zone-sns{
        display: none;
    }

    #area-footer-logo-je img,
    #area-footer-logo-gt img{
        width: auto;
        height: 36px;
    }

}