body{
    margin: 0;
}



.sp a{
     /* background-color:rgba(255,0,0,0.7); */
     color:rgba(255,255,255,1);
     /* text-decoration: none; */
    
}
/* #pic_src{
     background-color:rgba(255,0,0,0.7);
     
} */
 .sp{
    /* background-color:rgba(255,0,0,0,7);
     color:white; */
     width:100%;
     font-family:sans-serif;
     font-size: 2vw;
     text-align:center;
     background-color:rgba(0,0,0.1);
     padding:1%;
     color: rgba(170,170,255,1);
     /* background-color:linear-gradient(90deg, #78b0a0, #efdab9); */
     /* background-color:linear-gradient(to bottom, rgb(233,171,234), rgb(116,29,118)); */
     display:flex;
     border-radius:5px;
     position:fixed;
     top:0px;
     left:0px;
     text-align: center;
     text-decoration: none;
     font-weight:1000;
     animation-name: sp;
     animation-duration:2s;
     animation-delay:0s;
     animation-iteration-count: 1;

 }
 @keyframes sp{
    0%{
        padding: 100%;
        opacity:0;
    }
    100%{
        padding: 1%;
        opacity: 1

    }
 }
  .sp2{
    /* background-color:rgba(255,0,0,0,7);
     color:white; */
     width:80%;
     text-align:center;
     /* background-color:rgba(0,0,0,1); */
     padding:1%;
     /* color: rgba(170,170,255,1); */
     /* background-color:linear-gradient(90deg, #78b0a0, #efdab9); */
     /* background-color:linear-gradient(to bottom, rgb(233,171,234), rgb(116,29,118)); */
     display:flex;
     /* border-radius:5px; */
     position:fixed;
     top:70px;
     left:0px;
     text-align: center;
     text-decoration: none;
     font-weight:500;
     font-size:17px;
     z-index:110;
     background-color: rgba(255,255,255, 0.7);
     /* padding:10px; */
     width:auto;
 }
 .sp2 a{
    margin-top:7px;
    color:black;
 }
 .title{
     margin-top: 100px;
     display:flex;
     margin-left: 30px;
     text-align: center;
    
 }
 .title1{
     color:rgb(255,255,255);
     background-color:rgba(200,50,255,0.7);
     font-size: 10px;
     padding:2px;
     transform:rotate(-15deg);
     border-radius:2px;
     height:20px;
     /* width:60px; */
     position:relative;
     top: 10px;
     left: 20px;
 }
 .title2{
     color:rgba(0,0,255,0.7);
     font-size: 30px;
     font-weight:1000;
     letter-spacing: 0.7em;
     margin-top:20px;
 }
 .title3{
     color:rgba(255,0,0,0.7);
     font-size: 30px;
     font-weight:1000;
      letter-spacing: 0.7em;
    margin-top:20px;
    }

 .syusai{
     width:70%;
     background-color: rgba(255,0,0,0.7);
     color: rgb(255,255,255);
     margin-top:20px;
     margin-left:5px;
     font-size: 13px;
     padding:3px;
     text-align:center;

 }
 .syusai span{
     font-size: 13px;
 }
 
 .sp a{
    text-decoration: none;
    letter-spacing:0.3em;
 }
 /* .sp .ichiran{
    font-weight:500;
    font-size:12px;
    text-decoration: underline;
 } */

 .syamei{
    background: linear-gradient(transparent 70%, rgba(255,0,0,0.2) 70%);
    /* background: linear-gradient(transparent 70%, rgb(0,0,255), 50%); */
 }
 .syusaisya{
    margin-left:30px;
    margin-bottom:20px;
 }
 .syusai1{
    font-size: 2vw;
    font-weight:bold;
    color:rgba(0,0,0,0.7)
 }
 .syusai2{
    font-size: 2vw;
    font-weight:bold;
    color:rgba(0,0,0,0.7)
 }

 .items{
    display:grid;
    grid-template-columns: 10px 1fr 10fr;
    grid-template-rows: 100%;
    width: 100%;
    /* height:300px; */
    grid-template-areas:
    "area1 area2 area3"
    
    ;
    gap: 30px 0px;
    
 }
 .item1{
    /* background-color:red; */
    grid-area: area1;
    /* border: solid 1px rgba(255,230,230, 1); */
    
 }
 .item2{
    /* background-color:blue; */
    background-color:rgba(255,0,0,1);
    grid-area: area2;
    border: solid 3px rgba(255,0,0, 1);
    text-align: center;
    color:rgba(255,255,255,1);
    padding:3%;
    font-size: 2vw;
    font-weight:bold;
    padding-top:15px;
 }
 .item3{
    /* background-color:yellow; */
    grid-area: area3;
    border: solid 3px rgba(255,0,0, 1);
    color:rgba(255,0,0,1);
    padding-left:20px;
    padding-top:10px;
    padding-bottom: 7px;
    font-size: 2vw;
    /* font-weight:bold; */
    font-family:Arial, Helvetica, sans-serif;
    
 }
 
 img{
   margin-top:100px;
   width:100%;
   /* align:center; */
 }
 .titlebg{
   margin-top: 0.7em;
   position:relative;
   width:100%;
  
 }
 .titlebg .hanabitaikai{
   position:absolute;
   color: rgba(255,255,255,1);
   top: 60%;
   left: 20%;
   font-size:7vw;
   letter-spacing:0.5em;

 }

 .naiyou{
    display:grid;
    grid-template-columns: 1fr 1px 5fr;
    grid-template-rows: 30px ;
    width: 100%;
    /* height:300px; */
    grid-template-areas:
    "narea1 narea1 narea1"
    "narea2 narea3 narea3"
    "narea2 narea4 narea4"
    
    ;
  
    
 }
 .naiyou1{
    /* background-color:red; */
    grid-area: narea1;
    background-color:rgba(255,255,255,1);
    margin-left:20px;
    

    /* border: solid 1px rgba(255,230,230, 1); */
    
 }

 .kaisainaiyou{
background: linear-gradient(transparent 60%, rgba(136,72,152, 0.4) 40%);
 }
 .naiyou2{
    /* background-color:blue; */
    background-color:rgba(255,255,255,1);
    grid-area: narea2;
    border: solid 1px rgba(255,255,255, 1);
    text-align: center;
    font-size: 2vw;
    
    
 }
 .naiyou3{
    /* background-color:yellow; */
    grid-area: narea3;
    border: solid 1px rgba(255,255,255, 1);
    font-size: 2vw;
 }
 .naiyou3a{
   font-size: 1.5vw;
 }
 .naiyou3b{
   font-size: 2vw
 }
 .naiyou4{
   grid-area: narea4;
    border: solid 1px rgba(255,255,255, 1);
    font-size: 2vw;

 }

 .syousai{
    display:grid;
    grid-template-columns: 1fr 1px 5fr;
    grid-template-rows: 30px ;
    width: 100%;
    /* height:300px; */
    grid-template-areas:
    "narea1 narea1 narea1"
    "narea2 narea3 narea3"
    
    ;
  
    
 }
 .syousai1{
    /* background-color:red; */
    grid-area: narea1;
    background-color:rgba(255,255,255,1);
    margin-left:20px;
    

    /* border: solid 1px rgba(255,230,230, 1); */
    
 }

 .kaisainaiyou{
background: linear-gradient(transparent 60%, rgba(136,72,152, 0.4) 40%);
font-size:2vw;
 }
 .syousai2{
    /* background-color:blue; */
    background-color:rgba(255,255,255,1);
    grid-area: narea2;
    border: solid 1px rgba(255,255,255, 1);
    text-align: center;
    font-size:2vw;
    
    
 }
 .syousai3{
    /* background-color:yellow; */
    grid-area: narea3;
    border: solid 1px rgba(255,255,255, 1);
    font-size: 2vw;
 }

 .foot{
   position:fixed;
   bottom: 0px;
   width: 100%;
   text-align:center;
   background-color:rgba(200,100,255,1);
 }

 @media screen and (max-width: 794px){
   .sp{
    /* background-color:rgba(255,0,0,0,7);
     color:white; */
     width:100%;
     font-family:sans-serif;
     font-size: 4vw;
     text-align:center;
     background-color:rgba(0,0,0,1);
     padding:4%;
     color: rgba(170,170,255,1);
     /* background-color:linear-gradient(90deg, #78b0a0, #efdab9); */
     /* background-color:linear-gradient(to bottom, rgb(233,171,234), rgb(116,29,118)); */
     display:flex;
     border-radius:5px;
     position:fixed;
     top:0px;
     left:0px;
     text-align: center;
     text-decoration: none;
     font-weight:1000;
     animation-name: sp;
     animation-duration:2s;
     animation-delay:0s;
     animation-iteration-count: 1;

 }
 .sp2{
    /* background-color:rgba(255,0,0,0,7);
     color:white; */
     width:80%;
     text-align:center;
     /* background-color:rgba(0,0,0,1); */
     padding:1%;
     /* color: rgba(170,170,255,1); */
     /* background-color:linear-gradient(90deg, #78b0a0, #efdab9); */
     /* background-color:linear-gradient(to bottom, rgb(233,171,234), rgb(116,29,118)); */
     display:flex;
     /* border-radius:5px; */
     position:fixed;
     top:50px;
     left:0px;
     text-align: center;
     text-decoration: none;
     font-weight:500;
     font-size:12px;
     z-index:110;
     background-color: rgba(255,255,255, 0);
     /* padding:10px; */
     width:auto;
 }
 .syousai{
    display:grid;
    grid-template-columns: 1fr 1px 5fr;
    grid-template-rows: 30px ;
    width: 100%;
    /* height:300px; */
    grid-template-areas:
    "narea1 narea1 narea1"
    "narea2 narea3 narea3"
    
    ;
  
    
 }
 .syousai1{
    /* background-color:red; */
    grid-area: narea1;
    background-color:rgba(255,255,255,1);
    margin-left:20px;
    

    /* border: solid 1px rgba(255,230,230, 1); */
    
 }

 .kaisainaiyou{
background: linear-gradient(transparent 60%, rgba(136,72,152, 0.4) 40%);
font-size:4vw;
 }
 .syousai2{
    /* background-color:blue; */
    background-color:rgba(255,255,255,1);
    grid-area: narea2;
    border: solid 1px rgba(255,255,255, 1);
    text-align: center;
    font-size:4vw;
    
    
 }
 .syousai3{
    /* background-color:yellow; */
    grid-area: narea3;
    border: solid 1px rgba(255,255,255, 1);
    font-size: 4vw;
    line-height: 2.5em;
    padding-bottom: 100px;
 }
.items{
    display:grid;
    grid-template-columns: 10px 1fr 10fr;
    grid-template-rows: 100%;
    width: 100%;
    /* height:300px; */
    grid-template-areas:
    "area1 area2 area3"
    
    ;
    gap: 30px 0px;
    
 }
 .item1{
    /* background-color:red; */
    grid-area: area1;
    /* border: solid 1px rgba(255,230,230, 1); */
    
 }
 .item2{
    /* background-color:blue; */
    background-color:rgba(255,0,0,1);
    grid-area: area2;
    border: solid 3px rgba(255,0,0, 1);
    text-align: center;
    color:rgba(255,255,255,1);
    padding:3%;
    font-size: 3.3vw;
    font-weight:bold;
    padding-top:15px;
 }
 .item3{
    /* background-color:yellow; */
    grid-area: area3;
    border: solid 3px rgba(255,0,0, 1);
    color:rgba(255,0,0,1);
    padding-left:20px;
    padding-top:10px;
    padding-bottom: 7px;
    font-size: 3.3vw;
    /* font-weight:bold; */
    font-family:Arial, Helvetica, sans-serif;
    
 }

  .naiyou{
    display:grid;
    grid-template-columns: 1fr 1px 5fr;
    grid-template-rows: 30px ;
    width: 100%;
    /* height:300px; */
    grid-template-areas:
    "narea1 narea1 narea1"
    "narea2 narea3 narea3"
    "narea2 narea4 narea4"
    
    ;
  
    
 }
 .naiyou1{
    /* background-color:red; */
    grid-area: narea1;
    background-color:rgba(255,255,255,1);
    margin-left:20px;
    

    /* border: solid 1px rgba(255,230,230, 1); */
    
 }

 .kaisainaiyou{
background: linear-gradient(transparent 60%, rgba(136,72,152, 0.4) 40%);
 }
 .naiyou2{
    /* background-color:blue; */
    background-color:rgba(255,255,255,1);
    grid-area: narea2;
    border: solid 1px rgba(255,255,255, 1);
    text-align: center;
    font-size: 4vw;
    
    
 }
 .naiyou3{
    /* background-color:yellow; */
    grid-area: narea3;
    border: solid 1px rgba(255,255,255, 1);
    font-size: 4vw;
    line-height: 2em;
 }
 .naiyou3a{
   font-size: 3vw;
 }
 .naiyou3b{
   font-size: 4vw;
 }

 .naiyou4{
   grid-area: narea4;
    border: solid 1px rgba(255,255,255, 1);
    font-size: 5vw;
 }

 .syusaisya{
    margin-left:5px;
    margin-bottom:20px;
 }
 .syusai1{
    font-size: 3vw;
    font-weight:bold;
    color:rgba(0,0,0,01)
 }
 .syusai2{
    font-size: 3.5vw;
    font-weight:bold;
    color:rgba(0,0,0,1)
 }
 .titlebg{
   margin-top: -5px;
   position:relative;
   width:100%;
  
 }
.foot{
   position:fixed;
   bottom: 0px;
   width: 100%;
   text-align:center;
   background-color:rgb(75, 1, 114);
   font-size:10px;
   padding: 5px;
   color: rgba(255,255,255,1);
   
 }

 }