@charset "utf-8";


/* 導入アニメーション */
#intro { position: absolute; top: 0; left: 0; background-color: #FFF; overflow: hidden; width: 100%; zoom: 1; z-index: 100; }
#intro .photo { position: relative; opacity: 0; width: 100% }
#intro .mask { position: absolute; width: 100%; height: 100%; z-index: 200 }
#intro .mask li { position: relative; float: left; overflow: hidden; width: 20%; height: 100%; z-index: 210 }
#intro .mask li span { position: absolute; background-color: #FFF; display: block; width: 100%; height: 100%; z-index: 211 }
#intro .bg { position: absolute; top: 0; left: 100%; background-color: #FFF; width: 100%; height: 100%; z-index: 220 }
#intro .msg { position: absolute; top: 20%; left: 0; width: 100%; z-index: 230 }
#intro h1 { margin-bottom: 0.5em; font-family: 'Sawarabi Gothic', sans-serif; font-weight: bold; font-size: 220%; text-align: center }
#intro h1 > span { position: relative; display: inline-block }
#intro h1 span span { position: absolute; background-color: #FFF; display: block; width: 100%; height: 100%; z-index: 231 }
#intro h2 { position: relative; color: #878767; font-family: "Sawarabi Mincho", sans-serif; font-weight: normal; font-size: 270%; text-align: center; opacity: 0; }
#intro h2 span { position: absolute; top: 0; left: 0; background-color: #FFF; display: inline-block; width: 100%; height: 100%; z-index: 232 }


@media screen and (max-width: 800px) {
#intro h1 { margin-bottom: 0.3em; font-size: 100% }
#intro h2 { font-size: 140% }
}