@charset "utf-8";
.wapper{
background-color:hsla(0,0%,100%,1);
background-image:
radial-gradient(at 0% 0%, hsla(0,0%,100%,1) 0px, transparent 50%),
radial-gradient(at 0% 100%, hsla(323,90%,93%,1) 0px, transparent 50%),
radial-gradient(at 76% 12%, hsla(355,0%,100%,1) 0px, transparent 50%),
radial-gradient(at 100% 0%, hsla(340,100%,89%,1) 0px, transparent 50%),
radial-gradient(at 0% 98%, hsla(12,0%,100%,1) 0px, transparent 50%),
radial-gradient(at 29% 0%, hsla(332,61%,88%,1) 0px, transparent 50%),
radial-gradient(at 59% 98%, hsla(338,0%,100%,1) 0px, transparent 50%);
  z-index: -1;
  line-height: 1.2;
}
header{
    width: 80%;
    margin: auto;
  display: block;

}
.inner{
  width: 80%;
  margin: auto;
  display: block;
}
.top_title{
  font-weight: bold;
  display: block;
  font-size: 2.5em;
  margin: 10% 0 5% 15%;
  color:rgba(135,16,18,1.00);
}
.logomain{
    z-index: 998;
    position: absolute;
    top: 7px;
    left: 20px;
    width: 300px;
}
.logomain img{
}

.mainimage{
    width: 80%;
    margin-left: 10%;
  display: block;
	/* じわっと画像が表示される */
 	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}
/* じわっと画像が表示される ---------　一度追加していたら不要*/
@keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
    0% {opacity: 0} /* 始め */
    100% {opacity: 1} /* 終わり */
}
/*古いブラウザ用　---------　一度追加していたら不要*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.lead{
    width: 80%;
    margin: auto;
    display: block;
    margin-top: 5%
}
#info{
margin-top: 5%;
    text-align: center;
    line-height: 1.5em;
    background-image: url(../img/info_image01.jpg);
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0.87);
    background-blend-mode: lighten;
    background-size: cover;
}
#info h2 {
  padding-top: 4%;
  text-align: center;
  margin-top: 10%;
  
}
.info_inner{
  margin-top: 3%;
  text-align: center;
}
 a{
   color:#333;
   text-decoration: none;
    transition: color 0.3s;
  }
a:hover{
    color: #a1834c;
    text-decoration: underline;
  
  }
#QandA {
    text-align: right;
    margin-top: 8%;
    margin-right: 5%;
    padding-bottom: 4%
}
.pc-none{
  display: none;
}

.longurl{
  word-break: break-all;
}

@media screen and (max-width:1204px){
  .top_title{
    width: 100%;
    margin: 10% 0 5% 10%;
  }
}
@media screen and (max-width:767px){
  .top_title{
    font-size: 2em;
    margin: 20% 0 5% 0%;
  }
.mainimage {
  width: 90%;
    margin-left: 0%;
  }
.lead {
    width: 90%;
  }
}
@media screen and (max-width:424px){
  .top_title{
    font-size: 1.8em;
  }
  .pc-none{
  display: block;
}
  .mainimage {
  width: 100%;
  }
.inner{
  width: 98%;
}
.lead {
    width: 98%;
  }

}
@media screen and (max-width:375px){
  .top_title{
    font-size: 1.3em;
    margin: 30% 0 10% 0;
  }
}