@charset "utf-8";
/* ------------------------------------------------------------ common */

a { color: #5A5A5A; text-decoration: none;}

/* フェードインアニメーション */

.logo_fadein { background: #FFF; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 999;}
.logo_fadein img { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; z-index: 9999;}

/* header */

header { position: fixed; z-index: 10; width: 100%; }
header .h_inner { position: relative; z-index: 1; width: 100%; text-align: right; padding: 30px 46px; transition: 0.5s;}
header nav { margin-right: 100px;}
header nav a { font-size: 21px; color: #D9005E; margin-left: 40px; transition: 0.5s; font-family: "futura-pt", sans-serif; font-weight: 300;}


/* footer */

footer { text-align: center;}

footer .gray { background-color: #DBDBDB; padding: 18px 0;}
footer .gray a { border-right: 1px solid #5A5A5A; padding: 0 24.5px;}
footer .gray a:last-child { border-right: 0px;}

footer .black { background-color: #000; padding: 20px 0;}
footer .black p { color: #fff; font-size: 14px;}


/* モーダルメニュー */

.modal_menu { display: none;}


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




/* header */

header .h_inner { padding: 40px 46px;}
header .h_inner.scroll_nav.modal_on  { background-color: #fff;;}

/* footer */

footer { }

footer .gray { background-color: #DBDBDB; padding: 21.5px 0 16.5px;}
footer .gray a { font-size: 10px; padding: 0 9px;}
footer .gray a:nth-of-type(3) { border-right: 0px;}
footer .gray a:last-child { border-right: 0px; border-left: 1px solid #5A5A5A;}

footer .black { padding: 14px 0;}
footer .black p { font-size: 11px;}


/* ハンバーガーメニュー */

header .h_inner .menu { display: block; position: fixed; width: 35px; height: 29px; cursor: pointer; z-index: 50; top: 26px; right: 21px;}
header .h_inner .menu span { position: absolute; display: block; width: 100%; height: 3px; background-color: #D9005E; border-radius: 10px; transition: 0.5s;}
header .h_inner .menu span:nth-of-type(1) { top: 0;}
header .h_inner .menu span:nth-of-type(2) { top: 13px;}
header .h_inner .menu span:nth-of-type(3) { bottom: 0;}

header .h_inner .menu.close span {}
header .h_inner .menu.close span:nth-of-type(1) { transform: translate(0%,8px) rotate(45deg); background-color: #D9005E;}
header .h_inner .menu.close span:nth-of-type(2) { opacity: 0;}
header .h_inner .menu.close span:nth-of-type(3) { transform: translate(0%,-17px) rotate(-45deg); background-color: #D9005E;}




/* モーダルメニュー */

.modal_menu { position: fixed; top: 0; width: 100%; height: 100vh; background-color: #fff; box-sizing: border-box; padding: 20px 0; z-index: 9;}
.modal_inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; margin: 0 auto; text-align: center;}
.modal_menu h2 {  margin-bottom: 60px;}
.modal_menu h2 img { width: 100%; height: auto;}
.modal_menu ul li { margin-bottom: 43px; display: block; font-size: 17px; letter-spacing: 0.1em;}
.modal_menu ul li a { color: #D9005E;}


}