.section__block--top-page {
  max-width: 1100px;
}

.slider {
  margin-top: 0;
}
.slider .bx-wrapper {
  margin-bottom: 0;
}
.slider .bx-wrapper .bx-caption {
  text-align: center;
  top: 0;
  bottom: auto;
}

#slider img {
  width: 100vw;
　margin-left: calc(50% - 50vw);
　background: #8FC1F0;
}

.banner__section {
  margin-top: 2px;
}

.news__lists {
  list-style-type: none;
  margin: 0 0 2em;
}

.news__list {
  margin-bottom: .5em;
}

.news__date {
  margin-right: 1em;
}


/*探す丸*/
/*フレックスボックス*/
.round {
  width:100%;
  display: flex;/*フレックスボックス*/
  flex-wrap: wrap;/*折返し*/
  justify-content: space-between;/*間隔*/
  padding:40px 0px 20px;
}

.round .search-round {
  width: 30%;
  margin:10px 0px 20px ;
}


/*フェードイン*/
.search-round1 {
    animation-name: fadein3;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

.search-round2 {
    opacity: 0;
    animation-name: fadein3;
    animation-duration: 5s;
    animation-delay:0.4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}
.search-round3 {
    opacity: 0;
    animation-name: fadein3;
    animation-duration: 5s;
    animation-delay:0.8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

/*フェードインcssアニメーション*/
@keyframes fadein3 {
from {
    opacity: 0;
    transform: translateY(30px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/*スマホサイズ*/
@media screen and (max-width: 750px) {
.round  {
  justify-content: center;
  padding:20px 0px 1px;
}


.round  .search-round {
  width: 42%;
  margin:10px 10px 10px 10px;
  }
}




/*お知らせ*/
.flexbox-news {
  display: flex;/*フレックスボックス*/
  flex-wrap: wrap;/*折返し*/
  justify-content: space-between;/*間隔*/
  padding:20px 0px;
  margin-top:-20px;
}

.flexbox-news .news {
  width: 49%;
  margin:10px 0px 20px ;
  align-self: stretch;
}


.news-img img{
  opacity: 1;/*白くなる濃度*/
  -webkit-transform: scale(1);/*画像が大きくなる原型*/
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.news-img:hover img {
  opacity: .9;/*白くなる濃度*/
  -webkit-transform: scale(1.05);/*画像が大きくなる大きさ*/
  transform: scale(1.05);
}


.news-img h1, p{
  font-size: 0.85em;
  color: #000;
  padding-top:3px;
  line-height: 1.2;
}


@media screen and (max-width: 480px) {
.flexbox-news {
  justify-content: space-between;
  padding:20px 0px;
}

.flexbox-news .news {
  width: 100%;
  margin:0px 0px 20px;
  
  }
    
.news-img img{
   max-width:100vw;
   width:110vw;
   margin-left: -20px;
  }    
}



/*再入荷*/
.restock {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
}
.restock:nth-child(odd) {
	flex-direction: row-reverse;
}

.restock-text {
	width: 60%; /*flex: 2;*/
}
.restock-img {
	width: 35%; /*flex: 1;*/
}

.restock-img {
  position: relative;
}
.restock-img .active {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: 0.5s; // ゆっくり
}
.restock-img:hover .active {
  opacity: 1;
}

.restock-text {
   margin-top: 3rem;
}

.restock-text h2 {
	margin-bottom: 2rem;
	font-size: 2.2rem;
    border-bottom: 2px solid #EEEEEE;
}

.restock-img img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 750px) {
.restock-text {
   margin-top: 0rem;
}  
.restock-text h2 {
	margin-bottom: 1rem;
	font-size: 1rem;
}
}


/*作家の紹介ムービー*/
.artist-movie {
 width: 100vw;
 margin-left: calc(50% - 50vw);
}



/*読みもの*/
.reading-wrap {
	display: flex;
	flex-wrap: wrap;
    margin: 0 0 2em;
    padding-top: 20px;
    padding-bottom: 60px;
}

.reading-box {
    background: #ADD8E6;
    margin: 0.6em;
	width: 32%;
    flex-grow: 1;
    border-radius: 25px 25px 25px 25px;
    transition-duration: 0.5s;
}

.reading-box a{
text-decoration: none ;
}

.reading-box img {
	display: block;
	margin-bottom: 3px;
	width: 100%;
	height: auto;
    border-radius: 25px 25px 0px 0px;
    cursor: pointer;
}

.reading-box img:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}

.reading-box h2 {
	margin: 10px 0 0px 20px;
	font-size: 1.2rem;
	text-align: left;
    color: black;
}

.reading-box p {
	margin: 2px 20px 20px 20px;
    line-height: 17px;
    color: black;
}

a.cp_btn {
	display: block;
	max-width: 96%;
    margin: -70px auto 100px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #008BBB;
	border: 2px solid #008BBB;
	border-radius: 3px;
	transition: .4s;
}
a.cp_btn:hover {
	background: #008BBB;
	color: #fff;
}



@media screen and (max-width: 750px){
	.reading-wrap {
		width:100%;
        flex-grow: 1;
	}

	.reading-box {
      　max-width: 49%;  　
	}
}


/*見出し*/
.midashi-img {
   padding:100px 0px 20px 0px;
   width:15%;
   margin-left:auto;
   margin-right:auto;
}
@media screen and (max-width: 750px) {
.midashi-img {
  padding:10px 0px;
  width:25%;
}
}




/*グループから探す*/
/*フレックスボックス*/
.search_works {
  width:100%;
  display: flex;/*フレックスボックス*/
  flex-wrap: wrap;/*折返し*/
  justify-content: space-between;/*間隔*/
  padding:20px 0px;
}

.search_works .worksitem {
  width: 30%;
  margin:10px 0px 20px ;
}

/*テキスト*/
.worksitem-body p {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  font-size:15px;
  font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Arial','Segoe UI',sans-serif;
  color: #000;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 1px #000;/*左線*/
　font-weight: normal;
}




/*スマホサイズ*/
@media screen and (max-width: 750px) {
.search_works {
  justify-content: space-between;
  padding:20px 0px;
}


.search_works .worksitem {
  width: 49%;
  margin:0px 0px 20px;
  }


.worksitem p {
  margin-top: -10px;
  font-size:13px;
}
}


/*TOPに戻るボタン*/
#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;
  z-index: 3;  
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
  outline:none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #3f98ef;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #3f98ef;
}