@charset "Shift_JIS";
html {
  height:100%;
}

body {
  margin:0;
   font-family:  "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
}

section{
   margin:1%;
}

h1{
   font-size:220%;
   margin-left:12%;
   margin-top:15%;
   width:30%;
   color: #ff0000;
   padding: 0.5em;
   text-align:center;
   letter-spacing:4px;
   font-weight:bold;
   background-image: url(bg_1.png);
   background-size:100% 100%;
   background-repeat:  no-repeat; 
}

.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #ff69b4 50%, #7b68ee 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

.content {
  background-color:rgba(255,255,255,.8);
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
  padding:10vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}
.tit p{
 font-size:400%;
  color: #ff0000;
  font-weight: bold;
  letter-spacing:0.2em;
  font-family: fantasy;
  margin-left:15%;
  margin-top:3%;
  width:15%;
  padding-left:1%;
  border-radius:.25em;
  text-align:center;
  background-color:#ffff00;
  -webkit-animation:blink 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
.tit-1{
 font-size:400%;
  color: #ffffff;
  font-weight: bold;
  letter-spacing:0.2em;
  text-shadow: 2px 2px 0 #ff0000,3px 3px 0 #ff0000,-2px -2px 0 #ff0000;
  font-family: fantasy;
  margin-left:20%;
  margin-top:3%;
}
.tit-1 span{
  font-size:180%;
  color: #9400d3;
  text-shadow: 1px 1px 0 #fff,2px 2px 0 #fff,-1px -1px 0 #fff;
  font-family: 游明朝;
}

.cal{
  text-align:center;
}
.cal_pc{
  width:62%;
  margin:0 auto;
}
}
.cal_pc 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;
       width:60%;
       margin:0 auto;
}
.flow{
     width:98%;
     margin:0 auto;
     overflow-x: hidden;
     margin-bottom:10%;
}
.flow div img{
       width:30%;
       -webkit-box-shadow: 0px 1px 10px #666;
	-moz-box-shadow: 0px 1px 10px #666;
	box-shadow: 0 10px 25px 0 #666;
	border: 1px solid #808080;  
       border-radius:5px;
       vertical-align: top;
       display: inline-block;
}
.flow div{
       margin-bottom:2%;
       display:flex;
       color:#000000;
       width: 100%;
       height: 300px;
}
.flow span{
       display: inline-block;
       width:25%;
       font-size:150%;
       font-weight:bold;
       padding:2%;
       background-image: url(wb.jpg);
       background-size:100% 100%;
       background-repeat:  no-repeat;
       box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}
.flow b{
       color:#0000ff;
}

.fadeIn{
animation-name:fadeInAnime;
animation-duration:2.0s;
animation-fill-mode:forwards;
opacity:0;
}

.top{
    margin-bottom:5%; 
}
.top-com{
     font-size:210%;
     width:70%;
     float:right;   
}
.top-com p{
     font-weight:bold;
     font-family:serif;
     color:#000000;
     text-shadow: 1px 2px 3px #ffffff;
     line-height: 150%;
}
.deta{
     font-size:200%;
     font-weight:bold;
     width:60%;
     margin:0 auto;
     line-height: 200%;
}
.deta table{
     margin:0 auto;
}
.deta th{
     text-align:center; 
     border-bottom: 1px #808080 solid;
     width:20%;                  
}
.deta td{
     border-bottom: 1px #808080 solid;                  
}
.deta td img{
     width:5%;
     vertical-align:middle;
     margin-left:10%;
}


@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media only screen and (min-width: 1021px){

.cal_sp iframe{
    display:none;
}
}


@media only screen and (max-width: 900px){
.tit{
   font-size:140%;
   overflow-x: hidden;
   width:90%;
   float:right;   
}

.tit p{
   font-size:65%;
   margin-right:4%;
}
.tit-1{
   font-size:155%;
}

.flow{
     width:90%;
     margin:2 5 2 0;
     overflow-x: hidden;
}
.flow div{
       margin-bottom:2%;
       display:flex;
       color:#ffff00;
       width: 100%;
       height: 50%;
}
.flow span{
       width:20%;
       display: inline-block;
       font-size:80%;
       background-image:none;
       padding:0%;
       border-radius:5px;
       padding:1%;
}
.flow div img{
       width:50%;
       margin-left:0;
}

.top-com{
     font-size:150%;
     width:98%;
     float:center;   
}
.top-com p{
     color:#ffffff;
     text-shadow: 1px 2px 3px #000000;
}
.fadeIn{
    width:85%;
    overflow: hidden;
    font-size:130%;
    text-align:2% 0% 2% 0%; 
    margin-bottom:3%;
    margin-left:2%;
    background-size:100% 110%;
}
.deta{
     font-size:100%;
     font-weight:bold;
     width:98%;
     margin:0 auto;
     line-height: 200%;
     color:#ffffff;
     text-shadow: 3px 3px 3px #000000;
}
.deta th{
     width:35%;
}
.deta td img{
     width:10%;
     margin-left:10%;
}

}

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

.tit{
   font-size:250%;
   overflow-x: hidden;
   width:90%;
}

.flow{
     width:100%;
     overflow-x: hidden;
}
.flow span{
       width:45%;       
}
.flow div img{
       width:48%;
       margin-left:0;
       height:80%;
}

.cal_pc iframe{
    display:none;
}
.tit-1{
    overflow:hidden;
    margin-left:2%;
}
.deta{
    width:95%;
    margin:0 auto;
}
body{
    overflow-x:hidden;
}
h1{
      display:none;
      font-size:150%;
      width:60%;
      background-size:80% 80%;
      margin-top:20%;     
      padding: 0em;
      text-align:center;
     letter-spacing:0px;
   
}
.deta th{
     width:28%;
}
.fadeIn b{
     width:120%;
}

}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}