@charset "UTF-8";
/* CSS Document */

 /*=========== bottomバナー ============*/
#toppage .bottomBnn {
  width: 100%;
  max-width: 600px;
  position: fixed;
  right: 0;
  top:100%;
  z-index: 111;
  transition: 0.5s ease-out;
  transform: translateY(-50px);
}
  #toppage .bottomBnn.active {
    transform: translateY(-100%);
  }
  #toppage .bottomBnn .flex {
    background-color:rgba(232,60,95,0.6);
    display: flex;
    height: 50px;
    border-radius: 15px 0px 0px 0px;
  }
  #toppage .bottomBnn .flex p {
    flex: 1;
    font-size: 20px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    line-height: 1.2;
    padding: 0 0.5em;
  }
  #toppage .bottomBnn .flex .close {

    background-color: #000;
    color: #fff;
    font-size: 24px;
    width: 50px;
    height: 50px;
     display: flex;
justify-content: center;
align-items: center;
    z-index: 112;
    cursor: pointer;
  }
  @media screen and (max-width: 959px){
    
  }
@media screen and (max-width: 599px){
  #toppage .bottomBnn .flex p {
    font-size: clamp(13px, 4.3vw, 18px);
  }
  #toppage .bottomBnn .flex {
    border-radius: 0px 0px 0px 0px;
  }
  }
  
  
  

#toppage #bnnWrap {
  width: 95%;
max-width: 768px;
position: static;
  margin: 0px auto 30px;

}
  #illstWrap {
    display: none;
  }
@media screen and (max-width: 959px){
  #toppage #mainWrap {
    padding-bottom: 0;
  }
  #toppage #mainWrap .flow00,
    #toppage #newartWrap h2{
    display: none;
  }
    #toppage #bnnWrap {
    width: 95%;
      margin: 0 auto;
      padding: 5% 0 2%;
  }
  #illstWrap {
    display: flex;
    align-items: center;
  }
  #illstWrap .flow00 {
    width: 50%;
  }
  #illstWrap h2 {
    width: 46%;
  }
}
@media screen and (max-width: 599px){
  #toppage #bnnWrap {
    /*max-width: 300px;*/
    padding: 30px 0 15px;
  }
}


/*================= present Bnn ===============*/
#toppage #bnnWrap {
  width: 95%;
	/*max-width: 580px;*/
	max-width: 800px;
	position: static;
  margin: 0px auto 30px;
}
#toppage #bnnWrap div a {
	/*width: 48%;*/
	width: 100%;
	/*max-width: 580px;*/
}
#toppage #bnnWrap div a:hover {
	opacity: 0.6;
}

@media screen and (max-width: 599px){
  #toppage #bnnWrap {
		width: 90%;
    max-width: 450px;
    padding: 10px 0;
  }
	#toppage #bnnWrap div a {
	width: 100%;
		margin-top: 15px;
}
}