/* ==========================================================================
HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
========================================================================== */
html,button,input,select,textarea{color:#222;}
::-moz-selection{background:#b3d4fc;text-shadow:none;}
::selection{background:#b3d4fc;text-shadow:none;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
img{vertical-align:middle;width:100%}
fieldset{border:0;margin:0;padding:0;}
textarea{resize:vertical;}
.chromeframe{margin:0.2em 0;background:#ccc;color:#000;padding:0.2em 0;}
/* ==========================================================================
Author's custom styles
========================================================================== */
html{font-family:"Merriweather Sans","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;font-size:1em;line-height:1.75}
@media (min-width:48em){html{font-size:100%}}
@media (min-width:80em){html{font-size:112.5%}}
body{background-color:#faf8f5;color:#20215c}
a{color:#20215c;text-decoration:none;}
a:hover{color:#ec008c;text-decoration:underline;}
h1,h2,h3{font-family:"GravurCondensed-Bold","Trade Gothic Condensed Bold","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo","Arial Narrow",sans-serif;text-transform:uppercase;font-weight:normal;letter-spacing:-0.01em;overflow:hidden;}
h1{font-size:50px;line-height:50px;}
h2{color:#ec008c;}
h3{font-size:1em}
header,article,footer{max-width:500px;margin:2rem auto 6rem;padding-right:160px}
#romain{position:absolute;left:68%;top:14%;/*left:55%;top:0;*/}
ul,ol,dl{}
#contents .resultsList{margin:0 0 30px 0;padding:0}
#contents .resultsList>li{margin:0 0 4rem 0}
dd{margin:0}
#contents .resultsList dl dd .site-url{float:right;font-size:14px}
#contents .resultsList dl dt{overflow:hidden;display:block;position:relative;width:100%;margin-bottom:0.5rem;}
#contents .resultsList dl dd span.site-name{font-weight:400;}
#contents .resultsList dl dd a,.links a{color:#20215c;opacity:0.4;filter:alpha(opacity=40);-webkit-transition:opacity 0.3s ease-in-out;-moz-transition:opacity 0.3s ease-in-out;-o-transition:opacity 0.3s ease-in-out;transition:opacity 0.3s ease-in-out;font-family:"Helvetica Neue",Arial,sans-serif;}
#contents .resultsList dl dt a:hover,.links a:hover{opacity:1;filter:alpha(opacity=100);text-decoration:none;}
#index article ol{padding:0}
#index article ol li{list-style-type:none;margin-bottom:2.4%}
#index article ol li small{opacity:0.6}
.links a{margin:20px 6px 0 0}
footer p{font-weight:normal;font-style:normal;opacity:0.5}
#lesson .area h3{margin-bottom:0}
#lesson .area ul{margin-top:0.5rem}
/* ==========================================================================
Media Queries
========================================================================== */
@media only screen and (max-width:480px){
    #romain{position:relative;left:0;margin:0 auto}
    header,article,footer{padding-right:1rem;padding-left:1rem;}
    header{margin-bottom:1rem}
}
@media print,(-o-min-device-pixel-ratio:5/4),(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){
}
/* ==========================================================================
Helper classes
========================================================================== */
.ir{background-color:transparent;border:0;overflow:hidden;*text-indent:-9999px;}
.ir:before{content:"";display:block;width:0;height:150%;}
.hidden{display:none!important;visibility:hidden;}
.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto;}
.invisible{visibility:hidden;}
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
/* ==========================================================================
Print styles
========================================================================== */
@media print{
    *{background:transparent!important;color:#000!important; /* Black prints faster:h5bp.com/s */
    box-shadow:none!important;text-shadow:none!important;}
    a,a:visited{text-decoration:underline;}
    a[href]:after{content:" (" attr(href) ")";}
    abbr[title]:after{content:" (" attr(title) ")";}
    /* * Don't show links for images,or javascript/internal links */
    .ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}
    pre,blockquote{border:1px solid #999;page-break-inside:avoid;}
    thead{display:table-header-group; /* h5bp.com/t */}
    tr,img{page-break-inside:avoid;}
    img{max-width:100%!important;}
    @page{margin:0.5cm;}
    p,h2,h3{orphans:3;widows:3;}
    h2,h3{page-break-after:avoid;}
}
/* ==========================================================================
icomoon
========================================================================== */
@font-face{font-family:'icomoon';src:url('//kiske.jp/fonts/icomoon.eot');src:url('//kiske.jp/fonts/icomoon.eot?#iefix') format('embedded-opentype'),url('//kiske.jp/fonts/icomoon.ttf') format('truetype'),url('//kiske.jp/fonts/icomoon.woff') format('woff'),url('//kiske.jp/fonts/icomoon.svg#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class*="icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1; /* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.icon-facebook:before{content:"\e600";}
.icon-instagram:before{content:"\e601";}
.icon-lastfm:before{content:"\e602";}
.icon-soundcloud:before{content:"\e603";}
/* ==========================================================================
define header font
========================================================================== */
@font-face{font-family:"GravurCondensed-Bold";src:url("//kiske.jp/files/gravurcondensed-bold-webfont.eot?") format("eot"),url("//kiske.jp/files/gravurcondensed-bold-webfont.woff") format("woff"),url("//kiske.jp/files/gravurcondensed-bold-webfont.ttf") format("truetype"),url("//kiske.jp/files/gravurcondensed-bold-webfont.svg#svgFontName") format("svg");font-weight:normal;font-style:normal;}