@charset "Shift_JIS";
body{
	font-family: "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
       background: linear-gradient(#7b68ee, #FFFFFF);
       text-aligen:center;
}

#top{
      width:98%;
      overflow: hidden;
}
#top-1{
       width:46%;
       background: linear-gradient(#000000,#696969,#808080,#a9a9a9);
       color:#ffff00;
       padding:1% 2% 0 2%;
       margin:4.5% 2% 0 0;
       border-radius:10px;
       font-family:serif;
       font-weight:bold;
       font-size:160%;
       float:left;
       overflow: hidden;
       }

#top-1 img{
       width:100%;
}
#top-1 b{
       color:#ff0000;
}

#top-2 {
       width:47%;
       display: inline-block;
       margin:1% 1% 0 0;
       
}
#top-2 iframe{
       -webkit-box-shadow: 0px 1px 10px #666;
	-moz-box-shadow: 0px 1px 10px #666;
	box-shadow: 0px 1px 10px #666;
	border: 1px solid #808080;
       margin-top:5%;
}
#midle{
       border: solid 5px #d3d3d3;
       width:99%;
       margin:0 auto;
}


#midle p{
       font-size:150%;
       color:#ff0000;
       margin-left:1%;
}

#bottom{
       margin-top:3%;
       font-size:105%;
}

#bottom h2{
       text-align:center;
       width:50%;
       margin:0 auto;
       font-size:200%;
       color:#a52a2a;
       border-bottom:solid 2px #a52a2a;
       margin-bottom:2%;
}
.step{
       width:20%;
       border:solid 3px #000000;
       background-color:#ff0000;
       font-size:200%;
       font-weight:bold;
       color:#ffff00;
       text-align:center;
       border-radius:30px;
       margin:1% 1% 1% 1%;
       padding-top:6px;
}

.bag01{
       background-color:#fffff0;
       padding-top:1%;
}

.bag02{
       background-color:#f0ffff;
       padding-top:1%;
}

.bag03{
       background-color:#fff0f5;
       padding-top:1%;
}

.img01 img{
       width:5%;
       margin-right:1%;
       margin-left:1%;
       vertical-align: middle;
}


.img02 img{
       width:48%;
       margin:1% 1% 1% 1%;
}

.fon01{
       font-size:200%;
       font-weight:800;
       color:#0000ff;
       margin:0 1% 1% 1%;
       padding:1% 1% 1% 1%;
       border:solid 2px #a9a9a9;
       background-color:#ffa500;
       width:20%;
       text-align:center;
       border-radius:100px 0px 100px 0px;
}

.fon02{
       font-size:150%;
       font-weight:600;
       color:#000000;
       margin:0% 1% 1% 1%;
}

.fon03{
       font-size:200%;
       font-weight:600;
       color:#000000;
       margin:0% 1% 1% 1%;
}

.fon04{
       font-size:150%;
       font-weight:800;
       color:#ffa500;
       margin:0% 1% 1% 1%;
}

.fon05{
       font-size:200%;
       font-weight:800;
       color:#0000ff;
       margin:0 1% 1% 1%;
       padding:1% 1% 1% 1%;
       border:solid 2px #a9a9a9;
       background-color:#fff0f5;
       width:40%;
       text-align:center;
       border-radius:8px;
}

.step span{
       color:#ffffff;
       margin-right:5%;
}

.step01{
      width:30%;
      border:solid 3px #a9a9a9;
      background-color:#00bfff;
      border-radius:10px;
      font-size:180%;
      text-align:center;
      font-weight:bold;
      letter-spacing: 5px;
      margin:0 auto;
      margin-top:3%;
      margin-bottom:3%;
}

.step01 a{
     text-decoration : none;
}

.step01 :hover{
      background-color:none;
      color:#ff0000;
      border:none;
}
.ten{
      animation: flash 8s linear infinite;
}
@keyframes flash {
  0%,20%,40%,60%,80%,100%{
  }

  20%{
    opacity: 1;
    color:#ff0000;
  }
  
  40%{
    opacity: 1;
    color:#ffff00;
  }
  
  60%{
    opacity: 1;
    color:#008000;
  }

  80%{
    opacity: 1;
    color:#0000cd;
  }

  100%{
    opacity: 1;
    color:#8a2be2;
  }
  
}


.step01 p{
       text-align:center;
       
}

.sec{
       font-size:110%;
       font-weight:bold;
       color:#ff0000;
       border: solid 1px #000000;
       width:10%;
       text-align:center;
       background-color:#ffff00;
       margin:1% 1% 1% 1%;
}
 
.come{
       border: solid 1px #ffc0cb;
       margin:0 0 1% 0;      
       background-color:#ffefd5;
       padding:1% 1% 1% 1%;
       font-size:120%;
}
.come img{
      width:20%;
      margin-right:1%;
}
.come01{
        padding:1% 1% 1% 1%;
}
.come02{
        padding:1% 1% 1% 1%;
}
.end{
       text-align:center;
}

.end01{
       font-size:200%;
       font-weight:800;
}

.end01 a{
       text-decoration : none;
}


.end01 img{
       width:4%;
       vertical-align:middle;
       margin-right:1%;
}


.end p {
       font-size:200%;
       font-weight:bold;
       text-align:center;
       width:100%;
}

.end01 p {
       font-size:200%;
       color:#228b22;
}
}

#midle .img01 img{
       width:10%;
}

.youtube{
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 56.25%;
}

.youtube iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /*境界線の打ち消し*/
}
.img02{
       margin:0 auto;
}
.img02 img{
       -webkit-box-shadow: 0px 1px 10px #666;
	-moz-box-shadow: 0px 1px 10px #666;
	box-shadow: 0px 1px 10px #666;
	border: 1px solid #808080;
       width:47.5%;
}

.sec01{
       font-size:120%;
       font-weight:bold;
       margin-left:3%;
}
.sec01 td{
       padding:4 4 4 4;
       text-align:center;  
}
.t-0{
       font-size:130%;
       color:#ff3366;
}

.t-1{
       text-align:center;
       background:#ffcc66;  
}
.t-2{
       background:#99ffff;
}


@media only screen and (max-width: 1400px){

#midle .fon01{
       width:50%;
}

.step{
       width:40%;
       font-size:200%;
}


.sec{
        width:30%;
}


.step01{
       width:80%;
       font-size:200%;
}

.fon05{
       width:60%;
       font-size:150%;
}
}
@media only screen and (max-width: 1200px){
       #top{
              display: flex;
              flex-direction: column;
              margin:0 auto;
}
       #top-1{
              width:93%;
              margin:0 auto;
}
       #top-2{
              width:98%;
              margin:0 auto;
}

       .midle{
              margin:0 auto;
}

}

@media only screen and (max-width: 900px){
       body{
              min-width: initial;
}
       #top-1{
              width:90%;
              padding:0 auto;
              margin-left:3%;
}
       #top-1 span{
              color:#ffffff;
}
       .step{
              width:35%;
              font-size:100%;
}
       .come {
              padding:2%;
}
       .come p{
              font-size:130%;
}
       .come01 {
              padding:2%;
}
       .come01 p{
              font-size:130%;
}
       .come02 {
              padding:2%;
}
       .come02 p{
              font-size:130%;
}
        .step01{
              width:80%;
}
        .step01 a{
              font-size:180%;
}
        .sec01{
              margin-left:0%;
}
        .sec01 td{
              font-sizie:110%;
}
        .ta-0{
              width:13%;
}
        .end p {
              width:96%;
              margin:0 auto;
}

        .footer-button {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background:#f0ffff; /* 任意の色 */
      padding: 5px;
      text-align: center;
    }

.yo-2 {
      padding: 5px 10px;
      margin-left:5px;
      font-size:160%;
      font-weight:bold;
      background-color:#ffff00;
      border: none;
      border-radius:7px;
      cursor: pointer;
    }

.footer-button a{
      text-decoration: none;
}
        
}

@media only screen and (min-width: 1080px){
       body{
              max-width: initial;
}
}
@media only screen and (min-width: 901px){
.footer-button {
     display:none;
}

}