*{margin:0;padding:0}
div,h1,h2,h3,p,ul,li,input,textarea,table,tr,th,td{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
a{text-decoration:none;outline:none}
a img{border-style:none}
ul,li{list-style-type:none}

html {
font-size:62.5%;
height:100%
}
body {
background:#fff url(image/back02.png) repeat-y 100% 0; /* 背景 */
color:#444; /* 文字色 */
font-size:1.4em;/* 文字の大きさ */
font-family:Verdana,Roboto,'游ゴシック','Yu Gothic','游ゴシック体','YuGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
letter-spacing:2px;
padding:20px 80px 20px 20px;
overflow-wrap:break-word;
word-wrap:break-word; /* IE、FF用 */
}
a{
color:#553960;
text-decoration:underline
}
a:hover{
color:#ccc
}


.snow-fall div {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  background: url(image/star4.gif) no-repeat;
  z-index: 100;
  opacity: 0;
  transform-origin: 0 0;
  animation-name: snowfall;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.snow-1 {
  left: 20px;
  animation-duration: 20s;
  animation-delay: 4s;
}
.snow-2 {
  left: 200px;
  animation-duration: 30s;
  animation-delay: 50s;
 
}
.snow-3 {
  left: 400px;
  animation-duration: 40s;
  animation-delay: 8s;
}
.snow-4 {
  left: 600px;
  animation-duration: 20s;
  animation-delay: 20s;
}
.snow-5 {
  left: 710px;
  animation-duration: 40s;
  animation-delay: 1s;
}

@keyframes snowfall {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(1000px);
    opacity: 0.3;
  }
  100% {
    transform: translateY(1500px);
    opacity: 0.0;
  }
}



.snow-fall2 div {
  position: absolute;
  top: 0;
  width: 200px;
  height: 200px;
  background: url(image/star3.gif) no-repeat;
  z-index: 99;
  opacity: 0;
  transform-origin: 0 0;
  animation-name: snowfall2;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.snow-11 {
  left: 100px;
  animation-duration: 25s;
  animation-delay: 30s;
}
.snow-12 {
  left: 300px;
  animation-duration: 50s;
  animation-delay: 5s;
 
}
.snow-13 {
  left: 500px;
  animation-duration: 20s;
  animation-delay: 6s;
}
.snow-14 {
  left: 220px;
  animation-duration: 28s;
  animation-delay: 20s;
}
.snow-15 {
  left: 650px;
  animation-duration: 40s;
  animation-delay: 3s;
}

@keyframes snowfall2 {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(1000px);
    opacity: 0.3;
  }
  100% {
    transform: translateY(1500px);
    opacity: 0.0;
  }
}


.img-bound{
  padding:-10 !important;
}
.img-bound img{
  animation: bound .3s ease infinite alternate;
}
@keyframes bound{
  0%    {transform: translateY(0px);}
  100%  {transform: translateY(-5px);}
}



/*--------------------------------------------------------
メニュー
--------------------------------------------------------*/
#menupage{ 
background:#fff; /* 背景 */
padding:0;
text-align:center;
height:100%;min-height:100%
}
#menupage-inner{
background:#fff url(image/back01.png);
border-left:1px dashed #aaa697;
border-right:1px dashed #aaa697;
margin:0 auto;
padding:20px;
height:100%;min-height:100%;
width:300px
}
body > #menupage-inner{
height:auto
}
#menu{
background:#fff;
margin:20px -20px;
padding:5px 20px;
display:block
}
#nav li {
display:inline-block;
margin:5px 0
}
#nav li a{
color:#444;/* メニューの文字色 */
display:block;
letter-spacing:1px;
padding:0 5px;
text-decoration:none
}
#nav li a:hover{
background:rgba(238,234,214,.6);
color:#fe9099
}


/*--------------------------------------------------------
index
--------------------------------------------------------*/
#index {
background:#fff;
padding:0;
text-align:center;
height:100%;min-height:100%
}
#indexbox {
background:#fff url(image/back01.gif);
border-left:1px dashed #444;
border-right:1px dashed #444;
margin:0 auto;
padding:20px;
height:100%;min-height:100%;
width:300px
}
#index-bg,#menupage-bg{

display:table-cell;
vertical-align:middle;
text-align:center;
margin:0 auto;

}
body > #indexbox{
height:auto
}
/* 画面幅の50%の幅で画像を表示 */
.image-vw {
  width : 85vw ; 
  z-index: -8;
}
/* 画面幅の50%の幅で画像を表示 */
.image-vw2 {
  width : 7vw ; 
}


	
.image-fed{
    animation-name: fadein;
    animation-duration: 1s;
	z-index: -10;
}
@keyframes fadein{
    from{
    opacity: 0;
    transform: translatey(-10px);
    }
    to{
    opacity: 1;
    transform: translatey(0);
    }
}
.image-fed2{
    animation-name: fadein;
    animation-duration: 3s;
	z-index: -9;
}
@keyframes fadein{
    from{
    opacity: 0;
    transform: translatex(-100px);
    }
    to{
    opacity: 1;
    transform: translatey(0);
    }
}
.image-fed3{
    animation-name: fadein;
    animation-duration: 5s;
	z-index: -8;
}
@keyframes fadein{
    from{
    opacity: 0;
    transform: translatey(-30px);
    }
    to{
    opacity: 1;
    transform: translatey(0);
    }
}




/*--------------------------------------------------------
ページ上部へのリンク、著作権表示
--------------------------------------------------------*/
#pagetop{
background:#D3CFE6;
border:3px solid #9681B0;
border-radius:30px;
height:40px;width:40px;
position:fixed;
bottom:30px;right:23px
}
.arrow{
border-left:2px solid #9681B0;
border-top:2px solid #9681B0;
position:absolute;
top:40%;left:30%;
height:14px;width:14px;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg)
}
#pagetop:hover{
background-color:rgba(255,255,255,0.8)
}
#fl a{
display:inline-block;
margin:2em 0
}
/*--------------------------------------------------------
見出し、枠、線
--------------------------------------------------------*/
h1 {
display:none
}
#index h1,#menupage h1{
display:block;
font-size:1.6em;
letter-spacing:.1em;
margin:0 0 5px
}
h1 a{
color:#444
}
h2 {
background:url(image/icon01.png) no-repeat 0 50%;
font-size:1.1em;
letter-spacing:5px;
margin:1em 0;
padding:0.2em 0.2em 0.2em 15px;
line-height:15px;
text-shadow:2px 2px 3px #fff
}
#menupage h2{
background-position:50% 50%
}
h3 {
border-bottom:1px dashed #ccc;
font-size:1.1em;
margin:20px 0
}
dt {
background:#695897;
border-radius:5px;
color:#fff;
font-weight:700;
float:left;
clear:both;
margin:0 0 5px;
padding:3px;
width:10em
}
dd {
border-bottom:1px dashed #ccc;
margin:0 0 5px 12em;
padding:3px
}
em {
background:#ffe796; /* Ie9 */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.49, #fff), color-stop(0.5, #ffe796), color-stop(1, #ffe796));
background: -webkit-linear-gradient(transparent 50%, #ffe796 0%);
background:linear-gradient(transparent 50%, #ffe796 0%);
font-weight:700
}
input,textarea {
background:#fffff3;
border:1px solid;
margin:3px 0;
width:200px
}
textarea {
height:50px
}
hr {
display:block;
border:0;  
border-top:1px solid #ccc;
margin:1em 0;
padding:0;
height:1px
}
.marker {
background:#ed827e;
background:-webkit-linear-gradient(transparent 50%, #ed827e 0%);
background:linear-gradient(transparent 50%, #ed827e 0%);
padding:1px 5px
}
.dcline{
border-left:8px solid #ffc0bb;
margin:5px 0;
padding:3px
}
.textbox{
border:1px solid;
margin:10px 0;
padding:3px;
text-align:center
}
.title {
color:#eb759a;
font-size:1.5em;
font-weight:700;
margin:2em 0;
text-align:right
}
.txt {
border-left:1px dotted;
color:#999;
margin:1em;
padding:0 0 0 1em
}
.cf:before,.cf:after{content:" ";display:table}
.cf:after{clear:both}



/* twitter画像をホバーした */
img.twitter_button:hover{
 
	/* 透明度を上げることで、画像の色を薄く見せる。*/
	opacity:0.5;
 
	/* リンクをホバーしたときのカーソルにする。*/
	cursor: pointer;
}
 
/* twitter画像をクリックした瞬間 */
img.twitter_button:active{
 
	/* 要素を若干下に下げることで、押した感じを出す。*/
 
	/* 今いる位置から相対的に3px下に配置する。*/
	position: relative;
	top: 2px;
 
}

/* 文字中央 */
h4
{
	font-size: 15px;
	color: #411445;
	font-weight: bolder;
	vertical-align: middle;
}
h4 img
{
	vertical-align: middle;
}



.snow-fall3 div {
  position: absolute;
  top: 0;
  width: 80px;
  height: 80px;
  background: url(image/d-1.png) no-repeat;
  opacity: 0;
  transform-origin: 0 0;
  animation-name: snowfall;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.snow-31 {
  left: 10px;
  animation-duration: 50s;
  animation-delay: 40s;
}

@keyframes snowfall {
  0% {
    transform: translateY(0);
    opacity: 0.0;
  }
  70% {
    transform: translateY(20px);
    opacity: 1;
  }
  90% {
    transform: translateY(1200px);
    opacity: 0.0;
  }
}


.snow-fall4 div {
  position: absolute;
  top: 0;
  width: 80px;
  height: 80px;
  background: url(image/d-2.png) no-repeat;
  opacity: 0;
  transform-origin: 0 0;
  animation-name: snowfall;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.snow-41 {
  left: 80px;
  animation-duration: 30s;
  animation-delay: 70s;
}

@keyframes snowfall {
  0% {
    transform: translateY(0);
    opacity: 0.0;
  }
  70% {
    transform: translateY(20px);
    opacity: 1;
  }
  100% {
    transform: translateY(1200px);
    opacity: 0.0;
  }
}




.snow-fall5 div {
  position: absolute;
  top: 0;
  width: 80px;
  height: 80px;
  background: url(image/d-3.png) no-repeat;
  opacity: 0;
  transform-origin: 0 0;
  animation-name: snowfall;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.snow-51 {
  left: 160px;
  animation-duration: 30s;
  animation-delay: 110s;
}

@keyframes snowfall {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(680px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(1200px);
    opacity: 0.0;
  }
}



.snow-fall6 div {
  position: absolute;
  top: 0;
  width: 80px;
  height: 80px;
  background: url(image/d-4.png) no-repeat;
  opacity: 0;
  transform-origin: 0 0;
  animation-name: snowfall;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.snow-61 {
  left: 200px;
  animation-duration: 20s;
  animation-delay: 150s;
}

@keyframes snowfall {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(680px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(1200px);
    opacity: 0.0;
  }
}

.snow-fall7 div {
  position: absolute;
  top: 0;
  width: 80px;
  height: 80px;
  background: url(image/d-5.png) no-repeat;
  opacity: 0;
  transform-origin: 0 0;
  animation-name: snowfall;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.snow-71 {
  left: 300px;
  animation-duration: 30s;
  animation-delay: 90s;
}

@keyframes snowfall {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(680px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(1200px);
    opacity: 0.0;
  }
}





body {
    background-image: url("image/back.png");
    background-size: cover;
	background-repeat: no-repeat;
	 background-attachment: fixed;
   }

::-webkit-scrollbar {
  width: 5px;
  height: 1px;
}




body {
  padding: 0;
  margin: 0;
}

.container{
  position: relative;
}

#image-1 {
  position: absolute;
  top: 0;
  left: 0;
}
#image-2 {
  position: absolute;
  top: 10;
  left: 10;
}
#image-3 {
  position: absolute;
  top: 10;
  left: 10;
}

.yt-wrapper {
  position: relative;
  width: 100%;
}
.yt-wrapper:before {
  content:"";
  display: block;
  padding-top: 56.25%;
}
.yt-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  height: 85%;
}

h5 {
  background: #664C7D; /*背景色*/
  padding: 0.2em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  border-radius: 0.5em;/*角の丸み*/
}



header {
  display: flex;
  width: 100%;
  height: 240px;
  background-color: white;
  align-items: center;
  position: fixed;
  opacity: 0.9;
}
 
p {
  padding: 20px 0px;
  height: 3px;
}
 
.title {
  margin-right: auto;
}
 
.menu-item {
  list-style: none;
  display: inline-block;
  padding: 1px;
}