@charset "UTF-8";
/* Reset Stylesheet Based on - html5doctor.com Reset Stylesheet http://html5doctor.com/html-5-reset-stylesheet/ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
table { border-collapse: collapse; border-spacing: 0; }
input, select { vertical-align: middle; }
ul, li { list-style: none; }

/*-------------------------------------
clearfix
-------------------------------------*/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/*-------------------------------------
basic
-------------------------------------*/
body { font: 75%/1.5 "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; }
a { text-decoration: none; cursor: pointer; color: rgb(0,100,210); }
a:hover { text-decoration: underline; }
h1 { font-size: 110px; line-height: 1.2; font-family: 'Cormorant Garamond', serif; font-weight: 300; }
h2 { font-size: 70px; line-height: 1.2; font-family: 'Cormorant Garamond', serif; font-weight: 300; }
h3 { font-size: 24px; line-height: 2; font-weight: 700; }
h4 { font-size: 20px; line-height: 2; font-weight: 500; }
p { font-size: 16px; line-height: 2; font-weight: 300; }
ul, dl, table, input, select, address, span { font-size: 16px; line-height: 2; font-weight: 300; }
img { vertical-align: bottom; }

/*-------------------------------------
header
-------------------------------------*/
header { position: absolute; top: 0px; left: 0px; z-index: 2; }
header .logo { width: 100%; background: rgb(0,0,0); font-size: 0; }
header .logo a { width: 100%; max-width: 240px; padding: 40px 30px; display: block; }

header .menu { position: relative; }
header .menu a { width: 100%; max-width: 300px; height: 100px; display: block; background: rgb(255,255,255); }
header .menu a:hover { background: rgb(0,0,0); }
header .menu .menu-icon { display: block; position: absolute; top: 50%; left: 50%; width: 42px; height: 6px; margin: -3px 0 0 -21px; background: rgb(0,0,0); transition: .2s; }
header .menu .menu-icon:before { display: block; content: ""; position: absolute; top: 50%; left: 50%; width: 42px; height: 6px; margin-top: -18px; margin-left: -21px; background: rgb(0,0,0); transition: .3s; }
header .menu .menu-icon:after { display: block; content: ""; position: absolute; top: 50%; left: 50%; width: 42px; height: 6px; margin-top: 12px; margin-left: -21px; background: rgb(0,0,0); transition: .3s; }
header .menu a:hover .menu-icon { background: rgb(255,255,255); }
header .menu a:hover .menu-icon:before { background: rgb(255,255,255); }
header .menu a:hover .menu-icon:after { background: rgb(255,255,255); }
header .menu .close { background: transparent; }
header .menu .close:before { margin-top: 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
header .menu .close:after { margin-top: 0; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
header .menu a:hover .close { background: none; }

header .menu-list { display: none; }
header .menu-list li { margin-top: 1px; text-align: center; background: rgb(255,255,255); }
header .menu-list li a { width: 300px; padding: 15px 0px; display: block; color: rgb(0,0,0); position: relative; z-index: 2; overflow: hidden; transition: .2s; }
header .menu-list li a:before { position: absolute; z-index: -1; display: block; content: ''; transition: .2s; }
header .menu-list li a:after { position: absolute; z-index: -1; display: block; content: ''; transition: .2s; top: 0%; left: -100%; width: 100%; height: 100%; }
header .menu-list li a:hover { color: rgb(255,255,255); text-decoration: none; }
header .menu-list li a:hover:after { top: 0; left: 0; background: rgb(0,0,0); }

/*-------------------------------------
contents
-------------------------------------*/
#contents { text-align: center; overflow: hidden; }

/*-------------------------------------
footer
-------------------------------------*/
footer { width: 90%; padding: 5%; color: rgb(255,255,255); background: rgb(0,0,0); overflow: hidden; }
footer address { float: left; margin-right: 100px; }
footer address a { color: rgb(255,255,255); }
footer ul { float: left; border-left: 2px solid rgb(255,255,255); margin: 20px 0px; }
footer li { margin-left: 20px; }
footer li a { color: rgb(255,255,255); }
footer p { float: right; }