body{margin:0;}
a{text-decoration: none;}
/**header*/
header{ margin: 0px; position:absolute; width:100%; height:100px; top:0; left:0; z-index: 20;
    display:flex; justify-content: space-between; background-color: #FDE8E9;}
  .header-lis{display:flex; list-style-type: none; width:35%; justify-content: space-around; padding: 0 2%;}
  .logo{height:calc(100% + 60px); background-color: #fde8e9; width:15%; text-align: center;}
  .logo img{width:80%; padding-top:10px;}
  .header-lis li a img{width:40px;}
  .header-lis li a img:hover{width:50px; transition: 0.5s;}
  .mask{visibility: hidden; padding:2; text-align: center;}
  .header-lis li a img:hover +.mask{visibility: visible; position: relative; width:100%; background-color: rgba(0,0,0,0.3);
     color:white; opacity:1; top:-20px;}

/**body**/
main{padding-top:100px; background-color: aliceblue;}
.top{position:relative;}
.top img{z-index:1;
opacity:0.3;
width:100%;}
.top h1{position:absolute;
top:110px;
z-index:10;
left: 50%;
transform: translate(-50%, -50%);
font-size:40px;}
.tour{padding:0;
display:flex;
flex-direction:row;
justify-content: space-between;
width:90%;
margin:0 auto;
flex-wrap:wrap;}
#tour1{border:solid black 2px;
width:30%;
margin-bottom:15px;}
#tour1 img{width:100%;}
#tour1 div h2, #tour1 div p{color:black;}
#tour1 div p,#tour1 div h2{width:80%; margin:0 auto;}
.description{text-align:left;}

.none{padding:0;}
.none h2, .none p{text-align: center; color:blue}
.none p{margin-bottom:0; padding-bottom:30px;}

/**footer**/
#copy{margin-top:0; text-align: center;}
  footer{margin:0; background-color: #FDE8E9; height:80px;}
  .footer-lis{list-style-type: none; display:flex; justify-content: space-around; width:30%;
  margin:0 auto; padding-left: 0;}
  .footer-lis li img{width:35px;}
  .footer-lis li img:hover{width:40px; transition: all 0.5s ease;}


/**リスポンシブたいおう**/
@media screen and (max-width:1024px){
    .logo{width:20%;}
    .header-lis li a img{width:45px;}
    .header-lis li a img:hover{width:45px;}
   
  }
  @media screen and (max-width:896px){}
  @media screen and (max-width:736px){
    .logo{width:24%;}
    .top h1{top:70px;
    font-size:30px;}
    .tour{display:block;}
    #tour1{width:50%;
    margin:10px auto;}
    .none h2{font-size:medium;}

  }
  @media screen and (max-width:667px){
    .logo{height:calc(100% + 50px);}
    .header-lis li a img{width:40px;}
    .header-lis li a img:hover{width:40px;}
    li{font-size: large;}
  }
  @media screen and (max-width:568px){
    .top h1{top:50px;}
    .logo{width:28%;}
    .header-lis li a img{width:35px;}
    .header-lis li a img:hover{width:35px;}
  }
  @media screen and (max-width:480px){
    .logo{width:30%; height:calc(100% + 40px);}
    .header-lis li{padding:0 12px;}
    .footer-lis{width:50%;}
  }
  @media screen and (max-width:412px){
    .logo{width:35%; height:calc(100% + 35%);}
    .img{visibility: hidden;}
    .header-lis li a img{width:40px;}
    .header-lis li a img:hover{width:40px;}
    .header-lis{margin-right:30px;}
  }