@charset "UTF-8";

/* ==================================================================
CSS information
style info :「beginning」 用
================================================================== */

/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
#contents { background: #000311 url(../_img/beginning/bg.jpg) top center no-repeat;}
#visual { position: absolute; top: 0px; left: 50%; margin-left: -500px; text-align: center;}
#visual img { position: relative;}
#ttl { margin-bottom: 14px;}


/* --------------------------------------------------------
#readtext
-------------------------------------------------------- */
#readtext { text-align: center; margin-bottom: 515px; position: relative;}

.btnplay { position: absolute; top: 0; left: 0;}


/* --------------------------------------------------------
#c1
-------------------------------------------------------- */
#c1 { height: 374px;}

#c1 .hl { margin-bottom: 17px; }
#c1 .video-box { position: absolute; top: 4px; right: 20px; text-align: center;}
#c1 .video-box a { display: block; position: relative;}
#c1 .video-box a .pic { position: relative;}

#c1 #video-box { width: 838px; height: 471px; background: url(../_img/videos/yt_bg.png) top center no-repeat; margin: 0 auto 25px; padding: 5px;}

#c1 .thumb_list { position: relative; width: 100%; letter-spacing: -.45em; text-align: center; }
#c1 .thumb_list li { letter-spacing: normal; display: inline-block; position: relative; margin: 0 10px;}
#c1 .thumb_list li .new { position: absolute; top: 0; right: 0;}
#c1 .thumb_list li .on { position: absolute; top: 0; left: 0; opacity: 0;}
#c1 .thumb_list li a:hover .on { opacity: 1;}


/* --------------------------------------------------------
#c2
-------------------------------------------------------- */
#c2 { height: 862px;}
#c2 .inner-cont { }

#c2 .hl { margin-left: 506px; margin-bottom: 20px; }
#c2 .text { margin-left: 506px; }
#c2 .video-box { position: absolute; top: 4px; left: 20px; text-align: center;}
#c2 .video-box a { display: block; position: relative;}
#c2 .video-box a .pic { position: relative;}
#c2 .pair { margin-top:60px; margin-bottom:40px; }


/* --------------------------------------------------------
#c3
-------------------------------------------------------- */
#c3 { background: url(../_img/beginning/c3_bg.jpg) top center no-repeat; padding-top: 36px; padding-bottom: 45px;}
#c3 .inner-cont { }

#c3 .hl { margin-bottom: 26px; text-align: center; }
#c3 .pic01 { text-align: center; position: relative;}
#c3 .text { text-align: center; margin-bottom: 6px;}
#c3 .more { padding-top:24px; padding-bottom:24px; text-align:center; }

#c3 .picList { position: relative; width: 100%; letter-spacing: -.45em; text-align: center; }
#c3 .picList li { letter-spacing: normal; display: inline-block; position: relative; margin: 0 5px 13px; vertical-align: top; width: 438px;}
#c3 .picList li img { position: relative;}


/* --------------------------------------------------------
#c4
-------------------------------------------------------- */
#c4 { background: url(../_img/beginning/c4_bg.jpg) top center no-repeat; padding-top:22px; height:829px; }
#c4 .inner-cont { }

#c4 .hl { margin-bottom: 0px; text-align: center; }
#c4 .more { margin-top:5px; text-align:center; }

#c4 .picList { position: relative; top:-48px; width: 100%; letter-spacing: -.45em; text-align: center; position: relative; }
#c4 .picList li { letter-spacing: normal; display: inline-block; position: relative; vertical-align: top; position: absolute; top: 0px; left: 0px; }
#c4 .picList li img { position: relative;}

#c4 .picList li.li01 { top: -47px; left: -30px;}
#c4 .picList li.li02 { top: 5px; left: 579px;}
#c4 .picList li.li03 { top: 131px; left: 151px;}
#c4 .picList li.li04 { top: 61px; left: 387px;}

#c4 .picList li.li05 { top: 526px; left: -2px;}
#c4 .picList li.li06 { top: 526px; left: 726px;}
#c4 .picList li.li07 { top: 526px; left: 241px;}
#c4 .picList li.li08 { top: 526px; left: 484px;}