html{
  color:white;
  text-align:center;
}

#space {
    background-image: url("space.png");
    background-position: top center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: repeat;
}

/* PC
--------------------------------------------------*/
@media only screen and (min-width: 780px) {
.hp{display: none;}

  iframe{
    border-color:black;
    width: 720px;
    height: 405px;
  }

  body{
    width: 720px;
    display: inline-block;
    margin-top:0em;
  }

  h1{
  	padding-left:0.25em;
  	margin: -5px -10px 0px -5px;
  	border-left: 10px solid #AD002D;
    background-color: #222;
    text-align: left;
  	}

  p {
    display: inline-block;
  	text-align: left;
    margin: 5px;
    }

  h3{
    color:white;
    padding: 5px 0px 5px 0px;
    font-size: 1.5em;
    margin: 7em;
    background-color: #ed514e;
    border-radius: 0.5em;
  }
  h3.ap1:hover{background-color: #d72500;}
  h3.ap1:hover:before{content:"▶ ";}

  h4{
    color:white;
    padding: 5px 0px 5px 0px;
    font-size: 1.5em;
    margin: 7em;
    background-color: #ce3337;
    border-radius: 0.5em;
  }

  h3.ap2{
    display:inline;
      color:white;
      padding: 0.5em 2em 0.5em 2em;
      font-size: 1em;
      margin: 1em;
      background-color: #ed514e;
      border-radius: 0.5em;
  }
  h3.ap2:hover {background-color: #d72500;}
  h3.ap2:hover:before{content:"▶ ";}
}

/* phone
--------------------------------------------------*/
@media screen and (max-width: 779px) {
#menubar { padding-bottom: 10px; }
.pc{display: none;}

  body{
    width: 85%;
    font-size: 95%;
    display: inline-block;
    vertical-align: top;
  	text-align: center;
    color:white;
  }

  h1{
  	font-size: 5vmin;
  	padding-left:10px;
  	margin: -5px -10px 0px -5px;
  	border-left: 10px solid #AD002D;
    background-color: #222;
    text-align: left;
  }

  h2{font-size: 5vmin;}

  iframe{border-color:black;}

  h3{
    color:white;
    padding: 5px 10px 5px 10px;
    font-size: 1em;
    margin: 1em;
    background-color: #ed514e;
    border-radius: 0.5em;
  }
  h3.ap1:active {background-color: #d72500;}
  h3.ap1:active:before{content:"▶ ";}

  h4{
    color:white;
    padding: 5px 10px 5px 10px;
    font-size: 1em;
    margin: 1em;
    background-color: #ce3337;
    border-radius: 0.5em;
  }

  h3.ap2{
    display:inline;
      color:white;
      padding: 0.5em 1em 0.5em 1em;
      font-size: 1em;
      margin: 1em;
      background-color: #ed514e;
      border-radius: 0.5em;
  }
  h3.ap2:active {background-color: #d72500;}
  h3.ap2:active::before{content:"▶ ";}

}

/*------------------------------------------------*/

body{
  background-color: #111111;
  padding:1em;
}

article{
  margin:0 0 30 0;
  margin-bottom:5em;
}

p.br{margin-top:-10;}

p{ line-height:normal;}

hr{border-color:#292929;}

select::-ms-expand {display:none;}

h2{padding-top: 10px;}
.after{padding-top: 1em;}

.button{padding:1em;}

h5{
	padding-left:1.5em;
	margin: -5px -10px 0px -5px;
  text-align: left;
  border-top: 1em solid #111111;
  padding-top:1em;
}
.h5{
  background-color: #191919;
  text-align: left;
  padding-bottom:0.5em;
}
.h5 p{padding-left:2em;}

footer{
  margin:1em;
  color:white;
}

/**************************************************/
.out{
    margin-top:2em;
    position: relative;
}

.out img{
  opacity: 0;
  width:100%;
}

.in img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .5s;
    z-index: 0;
}
.in img{
    display: block;
    width: 100%;
    height: auto;
}
input{display: none;}
.in{
    display: flex;
    justify-content: center;
}
label span{
    display: block;
    width: 15px;
    height: 15px;
    padding: 7px;
    margin: -40px 0 0;
    margin-top:1em;
    border-radius: 100%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
label span::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #4287f5;
    opacity: 0.5;
    border-radius: 100%;
}
input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before,
input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before,
input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before,
input:nth-of-type(4):checked ~ .in label:nth-of-type(4) span::before,
input:nth-of-type(5):checked ~ .in label:nth-of-type(5) span::before{
    background: #e6e6fa;
    opacity: 1;
}
label span::before{animation: slidebutton 17.5s infinite;}
@keyframes slidebutton{/*[3]*/
    0%{opacity: 0.5;background: #4287f5;}
    3.0%{opacity: 1;background: #e6e6fa;}/* b÷x×100=y */
    20%{opacity: 1;background: #e6e6fa;}/* 100÷c=z */
    23.0%{opacity: 0.5;background: #4287f5;}/* y+z */
}/*[1]*/
label:nth-of-type(2) span::before,label:nth-of-type(2) img{
    animation-delay: 3.5s;
}
label:nth-of-type(3) span::before,label:nth-of-type(3) img{
    animation-delay: 7s;
}
label:nth-of-type(4) span::before,label:nth-of-type(4) img{
    animation-delay: 10.5s;
}
label:nth-of-type(5) span::before,label:nth-of-type(5) img{
    animation-delay: 14.0s;
}
input:nth-of-type(1):checked ~ .in label:nth-of-type(1) img,
input:nth-of-type(2):checked ~ .in label:nth-of-type(2) img,
input:nth-of-type(3):checked ~ .in label:nth-of-type(3) img,
input:nth-of-type(4):checked ~ .in label:nth-of-type(4) img,
input:nth-of-type(5):checked ~ .in label:nth-of-type(5) img{
    opacity: 1;
    z-index: 1;
}
.in img{/*[2]*/
    animation: slide 17.5s infinite;/* (a+b)×c=x */
    opacity: 0;
}
@keyframes slide{
    0%{opacity: 0;}
    3.5%{opacity: 1;z-index: 1;}/* b÷x×100=y */
    25%{opacity: 1;}/* 100÷c=z */
    28.5%{opacity: 0;z-index: 0;}/* y+z */
}
input:checked ~ .in img,input:checked ~ .in span::before{animation: none;}
.in:hover img,.in:hover span::before{animation-play-state:paused;}/* マウスを載せると一時停止 */

/*計算が必要なので以下の定義をもとに数式を当てはめてください。

1枚表示させたい時間=a秒
切り替え時間=b秒
画像の数=c枚
画像の順＝n番目
なお下記例では以下の数値となっています。

1枚表示させたい時間=3秒
切り替え時間=0.5秒
画像の数=4枚

[1]
animation-delay: ○s（前のスライドが終わるまで待つ）
○＝（ 1枚表示させたい時間 + 切り替え時間 ）×（ 画像の順 - 1）

[2]
animation:△s（スライド1周の時間）
△ ＝（ 1枚表示させたい時間 + 切り替え時間 ）× 画像の数

[3]
@keyframes　2個目の%は切り替え時間の割合
切り替え時間 秒 ÷ △秒 × 100%
@keyframes　3個目の%は1つ目のスライド終了の割合
100％ ÷ 画像の数
@keyframes　4個目の%は上記2つの合計
（ 切り替え時間 秒 ÷ △秒 × 100% ）+（ 100％ ÷ 画像の数 ）

*/

#bg {
background-image:url("space.png");
background-position:center center;
background-size:500px 320px;
width:100%;
height:300%;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
	-webkit-animation:infinitescroll 60s linear infinite;
	-moz-animation:infinitescroll 60s linear infinite;
	-ms-animation:infinitescroll 60s linear infinite;
	-o-animation:infinitescroll 60s linear infinite;
	animation:infinitescroll 60s linear infinite;
z-index:-10;
}

@-webkit-keyframes infinitescroll {
	0% {-webkit-transform:translate3d(0, 0, 0);}
	100% {-webkit-transform:translate3d(0, -720px, 0);}
}
@-moz-keyframes infinitescroll {
	0% {-moz-transform:translate3d(0, 0, 0);}
	100% {-moz-transform:translate3d(0, -720px, 0);}
}
@-ms-keyframes infinitescroll {
	0% {-ms-transform:translate3d(0, 0, 0);}
	100% {-ms-transform:translate3d(0, -720px, 0);}
}
@-o-keyframes infinitescroll {
	0% {-o-transform:translate3d(0, 0, 0);}
	100% {-o-transform:translate3d(0, -720px, 0);}
}
@keyframes infinitescroll {
	0% {transform:translate3d(0, 0, 0);}
	100% {transform:translate3d(0, -720px, 0);}
}