/* カスタムスタイルシート */

p   { color : #ccc ; } 


a {color: #fff;}

a img {border-style:none;} 

header {
    text-align:center;
    padding:1px;
 background: #000 url('../img/title03ss.png') no-repeat center top ;
border: ridge 0px #ccc;

}

body, html {
     
         padding:0; 
         
         width:100%;
      height: auto;
         margin: 0 auto;
	font-size: 100%;
         text-align: center;

background: #000000 url(../imgD/sample05c.jpg) no-repeat center 0px ;

color : #ccc;
min-width:900px;
overflow: auto;
 /*消し（スクロールバー）*/


/* ボタン */
 font-family: meiryo,Arial,sans-serif;
}



li {
margin-left:10px;
list-style-type: none;
}


header, nav, section, footer {
   
    box-shadow: 0px 0px 0px #666666;
    margin:0px;
    text-align: left;

}


header {
    text-align:center;
    padding:1px;
 background: #000 url('../img/title03ss.png') no-repeat center top ;
border: ridge 0px #ccc;

}

/* ヘッダーサイズ↓ */
header {
   min-width: 100%;

    height:40px;
}

nav {
    float: left;

    padding: 0px; 
   text-align:center;
background:  url(../img/2015LLHP06leftD9.png) no-repeat center top ;

width: 250px; 
 height:760px;

}


#backA {   
float: center;
background: #fff  ;
width: 95%; 
 height: 700px;
 padding: 0px 0px 0px 50px;
 text-align:left;
color: #555;
}

 /* 2016新春↓↓↓ */


#topwinter1 {
    background: #000 url(../imgD/snowA001chara3aaaa2.jpg) no-repeat center top ;}
#topwinter2 {
    background: #eee  ;}


   /* 追加2↓↓↓ */

.nav-top3 {
 
 background:  url(../img/2015LLHP06leftD9.png) no-repeat center top ;
 float: left;
clear: both;
    padding: 0px; 
   text-align:center;

width: 250px; 
 height:760px;
}
   
.nav-top3 a {
  color: #ecf0f1;
}

/* ALL DEMO */
h1 {
  color: #eee;
 
   
}

body 
   .nav-top3 {
  position: absolute; 
  z-index: 11;
  padding-top: 0;
}

body 

  .nav-top3 {
  margin-bottom: 0px;
  position: relative;
  z-index: 10;
  padding-top: 0px;
  padding-bottom: 0;
}



 /* 追加2↑↑↑ */
article {
 
clear: both;
 width: 300px;
height: 300px;
  padding: 0px 20px 0px 20px;
 text-align:center;
}



section {  
 background:  ;

  width: auto;
 margin-left: 250px;

height: auto;
 padding: 0px 0px 0px 0px;
 text-align:center;


 overflow: auto; /*自動（スクロールバーが表示される）*/

}

section {overflow-x:hidden;}
#section1a {
    background: #000  ;}
#section1 {
    background: #111 url(../img/2015LLHP06right03.png) repeat-x left top ;}
#section2 {
    background: #000 ;
  width: auto;
 height: auto;
 padding: 0px 0px 0px 20px;
 text-align:center;
color: #ccc;
}

#sectionCharacter {
float: center;

background: linear-gradient( #467, #210);
text-align:center;
margin: 0 auto;  /*真ん中に配置*/
}
}#characterS {
 text-align:right;

margin: -150px 6%;  /*配置*/
}
#mail {
 text-align:center;
 width: 650px;
height: 800px;
margin: 0 auto;  /*真ん中に配置*/
}

#characterStext {  
background: linear-gradient(rgba(0, 21, 0, .5), rgba(20, 0, 10, .5)),;

  width: 400px;
 height: 600px;
 padding: 0px 10px 0px 10px;
 text-align:left;
color: #fff;

}
#characterStext2 {  

position: absolute; top: 30px; left:20%; width: 400px; z-index: 11
 

}


#sectionR {  
 background:   url(../img/2015LLHP06right03.png) repeat-x left top  ;
float: right;
  width: 60px;
 height: 95%;
 padding: 0px 0px 0px 0px;
 text-align:right;
color: #fff;

}
#sectionR2 {  
 background:   url(../img/2015LLHP06right03mini.png) repeat left top  ;
float: right;
  width: 160px;
 height: 90px;
 padding: 0px 0px 0px 0px;
 text-align:center;
color: #fff;

}
.text13 {font-size: 13px; }

#sectionR3 {  
  
float: right;
  width: 50px;
 height: 90px;
 padding: 0px 0px 0px 0px;
 text-align:center;

 
}
#sectionR4 {  
 background:   ;
float: right;
  width: 60px;
 height: 95%;
 padding: 0px 0px 0px 0px;
 text-align:right;
color: #fff;
}

#sectionB {  

  width: 100%;
 height: 670px;
 padding: 0px 0px 0px 0px;
 text-align:center;
botom: 0;
}

#sectionP {  
background: #000 url(../img/2015LLHP06right03.png) repeat left top  ;
  width: 100%;
 height: 670px;
 padding: 0px 0px 0px 70px;
 text-align:left;
color: #fff;

}
#sectionI {  
background:  ;
  width: 100%;
 height: 515px;
 padding: 0px 0px 0px 20px;
 text-align:center;
color: #fff;

}

#sectionI2 {
    clear:both;
    text-align:center;
    color: #aaa;
  font-size: 12px;
    background: #000 url(../img/2015LLHP06botom1.png) repeat left top  ;
    height:60px;
 width: 100%;
  
    bottom: 0; /*一番下に配置*/
z-index: 12;


}

#sectionI3 {
    clear:both;
    text-align:center;
    color: #aaa;
  font-size: 12px;
    background: #000   ;
    height:65px;
 width: 100%;
  
    bottom: 0; /*一番下に配置*/
z-index: 12;


}

#lulu {  
 background:   url(../img/2015LLHP06right03mini.png) repeat left top  ;

  width: 95%;
 padding: 0px 0px 0px 30px;
 text-align:center;
color: #fff;
}
#lulu2 {  
 background:  #fff ;
 font-size: 12px;
  width: 80%;
 padding: 0px 30px 20px 20px;
 text-align:left;
color: #333;

}
　　　
aside {
 clear:both;
 float: right;
  width: 50px;
  height: 700px;
  padding: 0px 20px 0px 20px;
  text-align:right;

}


#wrapper{
     
     
    position: relative;/*フッターの位置設定の基準*/
    min-height: 100%;/*最低値を100％にしておけばコンテンツ量が増えた分だけ伸びる*/
    height: auto !important;/*ie6用（今いるかな？）*/
    height: 100%;   

}



footer {
    clear:both;
    text-align:center;
    color: #aaa;
  font-size: 12px;
    background-color: #000;
    height:60px;
 min-width: 100%;
 bottom: 0; /*一番下に配置*/
border: ridge 1px #ccc;
z-index:1000;
}
a {color: #5a56998;}


/* ページトップへ */
 
.pagetop {
  text-align: right;
  margin: 0 auto;
}
 
.pagetop a {
  display: inline-block;
  color: #fff;
  font-size: 1.2em;
  padding: 6px 2em 4px;
  border-radius: 4px 4px 0 0;
  background: #000;
}
 


/* 揺れるミニランタン */

  
       .swing {
    -moz-animation: swing linear 2s infinite;
    -moz-transform-origin: center -20px 0;
    -webkit-animation: swing linear 2s infinite;
    -webkit-transform-origin: center -20px 0;
    -ms-animation: swing linear 20s infinite;
    -ms-transform-origin: center -20px 0;
    -o-animation: swing linear 20s infinite;
    -o-transform-origin:center -20px 0;
    animation: swing linear 20s infinite;
    transform-origin: center -20px 0;
    display: block;
    float:right;

}


 
@-moz-keyframes swing {
    0% { -moz-transform: rotate(0deg) }
    25% { -moz-transform: rotate(3deg); }
    50% { -moz-transform: rotate(0deg); }
    75% { -moz-transform: rotate(-3deg); }
    100% { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes swing {
    0% { -webkit-transform: rotate(0deg); }
    25% { -webkit-transform: rotate(3deg); }
    50% { -webkit-transform: rotate(0deg); }
    75% { -webkit-transform: rotate(-3deg); }
    100% { -webkit-transform: rotate(0deg); }
}    
@-o-keyframes swing {
    0% { -o-transform: rotate(0deg); }
    25% { -o-transform: rotate(3deg); }
    50% { -o-transform: rotate(0deg); }
    75% { -o-transform: rotate(-3deg); }
    100% { -o-transform: rotate(0deg); }
}
@-ms-keyframes swing {
    0% { -ms-transform: rotate(0deg); }
    25% { -ms-transform: rotate(3deg); }
    50% { -ms-transform: rotate(0deg); }
    75% { -ms-transform: rotate(-3deg); }
    100% { -ms-transform: rotate(0deg); }
}
@keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}

/* 揺れるミニランタン↑ */


/* ウィンドウサイズに合わせて画像を拡大・縮小する↓ */

img {
    max-width: 95%;
    height: auto;
}

/* <div id="mainbooth">で文字位置 */
#mainbooth { text-align:left;}


/* BOX配置<div= id"">で */


#container {
    width: 100%;
    display: -webkit-box;　/* Safari,Google Chrome用 */
    display: -moz-box;　/* Firefox用 */
}


#main {
    width: 300px;
    background: #EEE;
    min-height: 500px;
}



#leftBox {
    width: 200px;
    background: #999;
    min-height: 400px;
}


#chara {
background:  #fff ;
   height:auto;
 width: auto;
margin: 0px;
text-align:center;
}

#illustmenu {
   height:40px;
background: #000;
margin: 0px;
text-align:center;
 padding: 0px 0px 0px 0px;
  padding:1px;
font-size:10px;
   
color: #fff;
}

#illustmenu1 {
height:40px;
margin: 0px;
text-align:center;
 padding: 0px 0px 0px 0px;

  padding:1px;
font-size:10px;
   
color: #fff;
/* グラデーション↓ */
    background-image: -moz-linear-gradient(top, #33e3ed, #00f6dc);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #dddddd),color-stop(1.0, #aaf3aa));
border-radius: 0px;
 
}

#illustmenu2 {
height:40px;
margin: 0px;
text-align:center;
 padding: 0px 0px 0px 0px;

  padding:1px;
font-size:10px;
   
color: #fff;
/* グラデーション↓ */
    background-image: -moz-linear-gradient(top, #33e3ed, #00f6dc);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #dddddd),color-stop(1.0, #F3D5E5));
border-radius: 0px;
 
}


#illustmenu3 {
height:40px;
margin: 0px;
text-align:center;
 padding: 0px 0px 0px 0px;

  padding:1px;
font-size:10px;
   
color: #fff;
/* グラデーション↓ */
    background-image: -moz-linear-gradient(top, #33e3ed, #00f6dc);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #dddddd),color-stop(1.0, #E4D5F3));
border-radius: 0px;
 
}


#illustbox {
height:auto;
margin: 0px;
text-align:center;
 padding: 3px 0px 0px 0px;

color: #fff;
background: url(../img/2015LLHP06right03.png) repeat left top ;


}



/* divで配置 */


#site-box {
   
width: 100%; 
 height:100%;
clear: both;

}


#a-box {
    float: left;
    padding: 0px; 
   text-align:center;

 height:100%;
position: absolute; width: 280px; left: 0;
clear: both;
background: #000000 ;
}


#b-box {  
  float: right;
position: absolute; width: 50%; right: 0;
 background: #000000 ;
clear: both; /* ←レイアウトを崩さないコード */
  width: 500px;
height: 95%;
 padding: 0px 20px 0px 20px;
 text-align:center;
 
}



/* 背景色透過 */

#back90 {filter:alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;

background: #000000  ;

}

#back90f {filter:alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;

background: #fff  ;

}

#back90fil {filter:alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;

background: #000000  ;
filter: blur(10px);
-webkit-filter: blur(0px);

}




/* クリックで画像チェンジ */





/* フリックできるスライドショー 無し*/

/* #flickscroll
--------------------------- */
#flickscroll {
    margin: 0 auto;
    width: 400px;
    height: 360px;
    text-align: left;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
#flickscroll ul {
    top: 0;
    left: 0;
    height: 360px;
    position: absolute;
    overflow: hidden;
}
#flickscroll ul li {
    width: 400px;
    height: 360px;
    float: left;
    display: inline;
    overflow: hidden;
}
 
/* #flickthumb
--------------------------- */
#flickthumb {
    margin: 10px auto;
    width: 400px;
    height: 60px;
    text-align: center;
}
#flickthumb ul {
    width: 400px;
    height: 60px;
}
#flickthumb ul li {
    width: 100px;
    height: 60px;
    float: left;
    cursor: pointer;
    display: inline;
}
#flickthumb ul li.active {
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
}
 
 
/* =======================================
    ClearFixElements
======================================= */
#flickscroll ul:after,
#flickthumb ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
#flickscroll ul,
#flickthumb ul {
    display: inline-block;
    overflow: hidden;
}




/* =======================================
   ボタンエフェクト
======================================= */




/* base */
a.btn {
 text-decoration: none;
    display:block;
    text-align: center;
    outline: none;
    margin: 0 auto;
    width: 80px;
    border-radius: 30px;
    line-height: 60px;
    color: #fff;
    background-color: #333;

}

a.btn:before,
a.btn:after {
    position: absolute;
    z-index: -1;
    content: '';
}

a.btn,
a.btn:before,
a.btn:after {
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

/* effect 1 */

a.effect-1:hover {
    background-color: #0070a5;
}

/* base2 */
a.btn2 {
 text-decoration: none;
    
    text-align: center;
    outline: none;
    margin: 0 auto;
    width: 80px;
    border-radius: 30px;
    line-height: 60px;
    color: #fff;
    background-color: #333;

}

a.btn2:before,
a.btn2:after {
    position: absolute;
    z-index: -1;
    content: '';
}

a.btn2,
a.btn2:before,
a.btn2:after {
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

/* effect 2 */

a.effect-2:hover {
    background-color: #0070a5;
}


/* ボタン */
 font-family: meiryo,Arial,sans-serif;
}






/* イラストコンテンツ */


/* 文字 */



/* ローディングバー */

#loadingSection {
    position:relative;
    top:60px;
    left: 30px;
}

#bar {
    display: block;
    width: 400px;
    height: 6px;
    background-color: #000;
}

#bar span {
    display: block;
    width: 0;
    height: 4px;
    background-color: #fff;
} 


#download {
    float: left;
    margin-right: 6px;
}

p {
    font-family: Arial;
    font-weight: bold;
    font-size:12px;   
}​

#loadText {
    font-size:14px;
}



/* スライドショー */
.slider-pro {
    font-family: 'Open Sans', Arial;
}

/* Example 3 */



#example3 
.sp-selected-thumbnail {

	border: 4px solid #000;
}

}



<!-- 横から画像↓ -->





<!-- ulやli↓ -->


ul  { margin: 0; padding: 0; }  
li  {  
    list-style-type: none;  
    display: inline;  
    margin:0;  
    padding:0;  
    
    color: #ccc;  
}  



<!-- 振り子↓ -->

/* 文字エフェクト↓  */


ul#nav5 {
   
    padding: 20px 40px;
    
}
ul#nav5 li a {
    float: center;
    margin-right: 15px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.3s ease;
font-weight: ligher; 
color: #ddd ;

}
ul#nav5 li a:hover {
    text-shadow: -1px 1px 5px #FFCC00;   
 font-weight:bold; 

}

a {
text-decoration: none;
}

h1 {color: #ddd ;
 text-shadow: -1px 1px 5px #FFCC00;

}

/*  */
#logo {
    float: left;
    padding: 0px; 
   text-align:left;

}




/* キャラクター */
#sectionCharacter {
float: center;

background: linear-gradient( #467, #210);
text-align:center;
margin: 0 auto;  /*真ん中に配置*/

}



/* 画像マウスオーバーfilter  */
a .hover_img1{
	transition:all 0.5s ease; /*0.5秒かけて要素を変化させる*/
	}
a:hover .hover_img1{
	opacity: 0.7;/*要素の透明度を指定*/
	filter: alpha(opacity=70); /*ie6、7の透明度指定*/
	/*ちなみにie8の透明度指定はこれ→ -ms-filter: "alpha(opacity=70)";*/
	}

/* バツを描く */
#batsu {
    /* 大きさの設定(全体ではなく、線1本の大きさ) */
	width: 50px;
    height: 10px;

    /* 色の設定 */
    background-color: #eee;

	/* 45度回転 */
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);

	/* 位置調整 */
    margin: 3% 90%;
}

/* :afterを使って、バツのもう1本の線を描く */
#batsu:after {
	/* :afterをblockとして表示する */
	content: "";
    display: block;
    
	/* 大きさの設定(親要素=#batsuと全く同じ) */
    width: 100%;
    height: 100%;

	/* 色の設定(親要素と同じ) */
    background-color: inherit;

    /* まわす */
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
}

/* イラストボード */
#ill {  

height: 97%;
 padding: 0px 0px 0px 30px;
 text-align:center;
color: #fff;

}
#ill2 {  
 text-align:center;
color: #fff;

}

/* 文字 */
h3 { font-size: 4ex;
	color: #FFF;
	-webkit-text-stroke: 1px black; 
}
h2 {
font-size: 18px;
color: #ddd ;
 text-shadow: -1px 1px 5px #55ccaa;
}
h5 {
font-size: 14px;
color: #222 ;
 text-shadow: -1px 1px 5px #ffccff;
}
h4 {
font-size: 12px;
color: #ddd ;
 text-shadow: -1px 1px 5px  #a0a6a6;
}
h1 {
font-family: "ＭＳ 明朝",serif; 
}

/* ハロウィン */

#halloween {  

 background: #000 url('../imgD/halloweenB001.jpg') no-repeat center top;


overflow: hidden;
 /*消し（スクロールバー）*/
}


a:hover	{ top:1px; left:1px; position:relative; }

a:hover:after {
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  border: 10px solid rgba(0,0,0,.3);
}


/* NEW新着の吹き出し */

.arrow_box{
  position: absolute;    /* relative → absoluteに記述変更 */
  background: #d50606;
  border: 1px solid #d50606;
    
  width:30px;
  color:#fff;
  padding:2px;
  text-align:center;
  font-weight:bold;
  font-size:10px;
  top: 0px;           /* 記述追加 重ねたい Y位置を指定 */
  left: 0px;          /* 記述追加 重ねたい X位置を指定 */
}
.arrow_box:after, .arrow_box:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.arrow_box:after {
  border-color: rgba(213, 6, 6, 0);
  border-top-color: #d50606;
  border-width: 7px;
 margin-left: -7px;
}
.arrow_box:before {
  border-color: rgba(213, 6, 6, 0);
  border-top-color: #d50606;
  border-width: 8px;
  margin-left: -8px;
}
  
/* ↓↓記述追加 画像、吹き出しの外側のBOXについて記述 */
.item-box {
    position: relative;
    color: #fff;
    display: inline-block;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    margin-top:0px;
    overflow: hidden;
}
   
.item-box p {
    display: inline;  
}