@charset 'utf-8';

/*↓reset↓*/
*, :before, :after {
box-sizing:border-box;
font-weight:normal;
padding:0; margin:0;
}
/*↑reset↑*/

/*↓body↓*/
body,
body > .inner {
position:relative;
width:100vw; overflow-x:hidden;
}
body {
background:#151A24;
font-size:0; line-height:1; -webkit-text-size-adjust:100%;
}
body > .inner { background:#CCC;}
/*↑body↑*/

/*↓ヘッダ・フッタ共通↓*/
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;}
/*↑フッタ↑*/

/*↓side↓*/
section .side ul {
list-style:none;
padding:4px;
}
section .side li { padding:4px;}
section .side a {
display:block;
font-size:14px; text-decoration:none;
}
/*↑side↑*/

/*↓section↓*/
section {
position:relative; z-index:2;
display:flex; justify-content:center;
max-width:768px; width:100%;
background:#FFF;
color:#666;text-shadow:0 1px 1px rgba(0,0,0,25%); text-align:center;
padding:16px; margin:0 auto;
}
section .main { width:100%; padding:8px; margin:0 auto;}
section .side { max-width:256px;}
section .main { max-width:auto;}
section .side + .main { max-width:512px;}
section .side,

section .main > * { padding:8px;}
section .main > h1 { font-size:24px;}
section .main > h2 { font-size:20px;}
section .main > h3 { font-size:16px;}
section .main > p { font-size:14px; line-height:1.5;}
section .main > img { display:inline-block; max-width:100%; width:auto;}
@media screen and ( max-width:768px ){
section { padding:0;}
section .main > h1 { font-size:20px;}
section .main > h2 { font-size:16px;}
section .main > h3 { font-size:14px;}
section .main > p { font-size:12px;}
}
/*↑section↑*/