.clear{
	clear:both;
}

.br_sp,
.br_sp500{
  display: none;
}

.mv_heading img,
.mv_image img,
.book_link img{
  width: 100%;
}

.book_link,
.book_link:hover,
.website,
.website:hover,
.pamphlet a,
.pamphlet a:hover{
  cursor: pointer;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

div#header_wrap{
  position: relative;
  margin: 0 auto 100px;
  width: 1000px;
	box-sizing: border-box;
}

div#header_wrap::before, div#header_wrap::after {
  position: absolute;
  top: 0;
  content:'';
  width: 245px;
  height: 100%;
  display: inline-block;
  box-sizing: border-box;
}

div#header_wrap::before {
  border-left: solid 10px #6e80ba;
  border-top: solid 10px #6e80ba;
  border-bottom: solid 10px #6e80ba;
  left: 0;
}

div#header_wrap::after {
  content: '';
  border-top: solid 10px #6e80ba;
  border-right: solid 10px #6e80ba;
  border-bottom: solid 10px #6e80ba;
  right: 0;
}

.mv{
  margin: 0 auto;
  width: 800px;
  display: flex;
  justify-content: space-between;
	
}

.mv_text{
  padding-top: 80px;
}

.mv_heading{
  margin-bottom: 55px;
  width: 465px;
}

.mv_text p{
  font-size: 22px;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  line-height: 1.5em;
  font-weight: bold;
}

.mv_image{
  margin: 30px 0;
  width: 240px;
}

	
.contents_wrap{
	margin:0 auto;
	background-image: url("../../sub-img/page-5078/BackGround.png");
  background-repeat: repeat;
  background-size: 290px;
}

.contents_inner{
	padding-top: 35px;
}

.contents_column_wrap{
	margin: 0 auto 20px;
	width: 1000px;
}

.contents_heading {
  position: relative;
  display: inline-block;
  margin-bottom: 60px;
  width: 100%;
  text-align: center;
  font-size: 30px;
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
  font-weight: bold;
  color: #4d4d4d;
}

.contents_heading::before, .contents_heading::after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 35%;
  height: 6px;
  background-color: #ffd188;
}

.contents_heading::before {
  left:0;
}
.contents_heading::after {
  right: 0;
}

.blue_line::before, .blue_line::after {
  background-color: #a4e9fc;
}

div.book_sumb_top_wrap{
	width:30%;
	float:left;
	margin-top:8%;
}

div.book_sumb_top_wrap a{
}

img.book_sumb_top{
	width:100%;
	height:auto;
}

div.book_info_wrap{
	width:66%;
	height:auto;
	padding:0 2%;
	float:left;
}

div.book_info_wrap p{
	padding:0 0 0 5%;
	font-size:26px;
	color:#502700;
	line-height:35px;
	letter-spacing:3px;
}

.dottedborder{
	border-bottom:#502700 dashed 1px;
}

h3.book_info_title{
	text-align:center;
	font-size:30px;
	color:#F9C;
	font-weight: bold;
	text-shadow:
		3px 3px 3px #FFFFFF,
		-3px 3px 3px #FFFFFF,
		3px -3px 3px #FFFFFF,
		-3px -3px 3px #FFFFFF;
}

a.book_title_button{
	width:80%;
	padding:2px;
	margin:0 auto;
	font-size:10px;
	display:block;
	text-align:center;
}

ul#book_list{
  display: flex;
  margin: 0 auto 30px;
  width: 800px;
  justify-content: space-between;
  flex-wrap: wrap;
}

ul#book_list::after {
  content: "";
  display: block;
  width: 27.5%;
}

ul#book_list li{
	margin-bottom: 70px;
	width: 27.5%;
}

ul#book_list li img{
  position: absolute;
  bottom: 0;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, .5);
}

.book_link{
  display: block;
  position: relative;
  margin-bottom: 30px;
  height: 315px;
}

.book_link:hover{
  opacity: 0.5;
}

.booktitle_text{
	display:table-cell;
  vertical-align:middle;
  padding: 0 18px;
  width: 220px;
  height: 75px;
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
}

.booktitle_text a{
	display: block;
	text-align: center;
  line-height: 1.5em;
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
text-decoration :none;

}

.website{
	display: block;
  position: relative;
  margin-top: 20px;
  padding: 5px 0;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  color: #666666;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #ffd188 50%, #ffd188 100%);
}

.website a{
	display: block;
	text-decoration :none;
}

.website:hover {
  color: #000;
  letter-spacing: 0.15em;
}

.blue_Underline{
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #a4e9fc 50%, #a4e9fc 100%);
}


.pamphlet{
  margin: 0 auto;
  padding-top: 60px;
  width: 1000px;
  text-align: center;
  border-top: solid 2px #000;
}

.pamphlet p{
  margin-bottom: 50px;
  font-size: 26px;
  font-weight: bold;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  line-height: 1.5em;
}

.pamphlet a{
  display: inline-block;
  margin-bottom: 100px;
  padding: 30px;
  font-size: 36px;
  font-weight: 500;
  font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
  color: #666666;
  background-color: #fff;
  border: solid 4px #999999;
  box-sizing: border-box;
	text-decoration :none;
}

.pamphlet a:hover{
  background-color: #eee;
}

/*レイアウトチェンジ*/

/*#########################1000px以下#########################*/
@media only screen and (max-width: 1000px){

  div#header_wrap,
	.contents_column_wrap,
	.pamphlet{
    width: 100%;
  }

  div#header_wrap{
    margin-bottom: 10vw;
  }

  .mv{
    width: calc(70vw + 100px);
  }

  ul#book_list{
    width: 80vw;
  }

  .mv_heading{
    margin-bottom: 5.5vw;
    width: 46.5vw;
  }

  .mv_text p{
    font-size: 20px;
  }

  .mv_image{
    width: 24vw;
  }

  .contents_heading{
    margin-bottom: 6vw;
    font-size: 26px;
  }

  .book_link{
    height: 31.5vw;
  }

  .booktitle_text{
    padding: 0;
  }

  .pamphlet p{
    font-size: 22px;
  }

  .pamphlet a{
    font-size: 30px;
  }
}

/*#########################768px以下#########################*/
@media only screen and (max-width: 768px){

  .br_pc{
    display: none;
  }

  .br_sp{
    display: inline;
  }

  div#header_wrap{
    border: solid 10px #6e80ba;
    box-sizing: border-box;
  }

  div#header_wrap::before, div#header_wrap::after {
    display: none;
  }

  .mv{
    position: relative;
    display: block;
    width: 90vw;
  }

  .mv_heading{
    margin-bottom: 10.42vw;
    width: 100%;
  }

  .mv_text p{
    padding-bottom: 18.23vw;
    font-size: 3.91vw;
  }

  .mv_image{
    position: absolute;
    right: 0;
    bottom: 50px;
    margin: 0;
    width: 30vw;
  }


  .contents_heading{
    margin-bottom: 5.21vw;
    font-size: 22px;
  }

  .contents_heading::before, .contents_heading::after {
    width: 33%;
  }

  ul#book_list{
    display: flex;
    width: 90vw;
  }

  ul#book_list li{
    width: 30.5%;
  }

  .book_link{
    height: 39vw;
  }

  .booktitle_text a{
    font-size: 14px;
  }

  .pamphlet a{
    font-size: 26px;
  }
}

/*#########################500px以下#########################*/
@media only screen and (max-width: 500px){
	.ib{
		width:90%;
	}
	.h_tx{
		width:100%;
	}
	
	div.book_sumb_top_wrap{
		width:90%;
		float:none;
		margin:0 auto;
	}
	
	div.book_info_wrap{
		width:100%;
		float:none;
		padding:0;
		margin:0 auto;
	}
	
	div.book_info_wrap p{
		padding:0px;
		font-size:14px;
		line-height:17px;
	}
	
	.pc_icon{
		display:none;
	}
	
	h3.book_info_title{
		font-size:20px;
	}

  .br_sp500{
    display: inline;
  }

  div#header_wrap{
    border: solid 5px #6e80ba;
  }

  .mv_image{
    bottom: 30px;
  }

  .contents_heading{
    margin-bottom: 10.67vw;
  }

  .contents_heading::before, .contents_heading::after {
    width: 28%;
    height: 3px;
  }

  .content_text{
    height: 55px;
  }

  ul#book_list{
    margin-bottom: 10px;
  }

  ul#book_list li{
    width: 42.67vw;
  }

  .book_link{
    height: 60vw;
  }

  .website{
    margin-top: 15px;
    font-size: 16px;
  }

  .pamphlet{
    padding-top: 30px;
  }

  .pamphlet p{
    margin-bottom: 30px;
  }

  .pamphlet a{
    margin-bottom: 50px;
    padding: 15px 0;
    width: 90%;
    line-height: 1.5em;
  }
}

/*#########################400px以下#########################*/
@media only screen and (max-width: 400px){
	
  .contents_inner{
    padding-top: 20px;
  }

  .mv_text p{
    font-size: 14px;
  }

  .pamphlet p{
    font-size: 18px;
  }
}