/*↓ヘッダ・フッタ共通↓*/
header, header *,
footer, footer * {
box-sizing:border-box;
margin:0; padding:0;
}
header,
footer {
background:#151A24;
font-size:0; line-height:1; text-shadow:0 1px 1px rgba(0,0,0,75%);
}
header > div,
footer > div {
max-width:1024px; width:100%;
margin:0 auto;
}
header a:link, header a:visited,
header a:hover, header a:active { color:#FFF; text-decoration:none;}
header ul,
footer ul { list-style-type:none;}
header li,
footer li { padding:8px;}
/*↑ヘッダ・フッタ共通↑*/
/*↓ヘッダ↓*/
header > div { display:flex; align-items:center; justify-content:space-between;}
header .logo { width:160px; padding:16px;}
header .logo a {
display:block; width:128px; height:48px;
background:url('/img/header/logo_ac.png') no-repeat center center / contain;
}
header .logo a:hover { animation:header-logo-a 1s forwards;}
@keyframes header-logo-a { 0% { filter:drop-shadow(0 0 4px #FFF);}}
header .menu {
width:calc(100% - 160px);
text-align:right;
padding:8px;
}
header .menu li { display:inline-block;}
header .menu a {
position:relative;
display:block; width:96px; height:64px;
background:#2F4989;
border-radius:4px;
text-align:center; text-decoration:none;
padding:8px;
}
header .menu a:hover { animation:header-menu-a 1s forwards;}
@keyframes header-menu-a { 0% { filter:saturate(200%);}}
header .menu a:before {
display:inline-block;
width:64px; height:32px;
background:no-repeat center top / cover;
content:'';
filter:drop-shadow(0 1px 1px rgba(0,0,0,50%));
}
header .menu a.aff:before { background-image:url( /img/header/icon_aff.png );}
header .menu a.acp:before { background-image:url( /img/header/icon_acp.png );}
header .menu a.myp:before { background-image:url( /img/header/icon_myp.png );}
header .menu a.car:before { background-image:url( /img/header/icon_car.png );}
header .menu p {
position:absolute; left:0; right:0; bottom:0;
overflow:hidden;
font-size:12px; white-space:nowrap;
padding:6px;
}
/*↑ヘッダ↑*/
/*↓フッタ↓*/
footer {
background:#151A24;
color:#566; font-size:16px; line-height:1; text-align:center;
padding:24px;
}
footer a:link, footer a:visited { color:#BCC; text-decoration:none;}
footer a:hover, footer a:active { color:#FFF; text-decoration:underline;}
footer .menu { font-size:14px; padding:8px;}
footer .copy { font-size:12px; padding:8px;}
/*↑フッタ↑*/