@charset "UTF-8";

/*CSSDocument*/

/* main_layout.css
--------------------------------------------------------------

:: CSS Index

 1 : html body base
        
 2 : body base
        
 3 : header
     �Emenu

 4 : footer
       
 5 : TOP Page
 
 6 : Contents Page
       


-------------------------------------------------------------- */



/* html body base
===============================================================*/

/*
html ----------------------------------------------------------*/


*{ margin: 0px; padding: 0px;}

html,body{ height:100%; }



body{
color:#000;
margin:0;
background:#fff;
background-size:cover;
background-attachment:fixed;
font-family:Helvetica, Arial, YuGothic, "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
padding:0px;
text-align:center;
line-height:22px;
font-size:12px;
}



	
	
a:link{ color:#0061b4;text-decoration:underline;}
a:visited{ color:#0061b4;text-decoration:none;}
a:hover{ color:#0061b4;text-decoration:none;}
a:active{ color:#8b4242;text-decoration:underline;}



a:hover img {
filter: alpha(opacity=70);
-moz-opacity:0.60;
opacity:0.60;
	transition: all 0.4s ease-in-out;
}

img{
	margin:0;
	padding:0;
	vertical-align:top;
	}


input, select, textarea {
font-size: 12px;
}

ul, ol {
list-style: none;
}


/*
html ----------------------------------------------------------*/


/*
Module --------------------------------------------------------*/

 
.clear{
clear:both;
height:1px;
margin:-1px 0 0 0;
font-size:1px;
display: inline-block;
}

.access_log{ height:1px; margin:-1px 0 0 0; font-size:1px; clear:both;}


.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */


span.caution{  line-height:16px;}

a:hover img{
	opacity:0.6;
	}


img{
	margin:0;
	padding:0;
	border:0;
	}

/*
Module --------------------------------------------------------*/



/* html body base
===============================================================*/

/*
body base -----------------------------------------------------*/

#main{
	background: rgba(255,255,255,0.9);
	width: 100%;
	z-index: 998;
	position: relative;
	}

#pageContent{ 
	width:1280px; 
	margin:0 auto; 
	text-align:left; 
	padding-top:20px;
	z-index: 999;
}


@media screen and (max-width: 1280px) {

#pageContent{ 
	width:100%; 
	}

}


@media screen and (max-width: 800px) {
.sp_menu{
position:fixed;
top:2%;
left:2%;
z-index:9999;
	width: 50px;
	height: 50px;
	border-radius: 10px;
	background-color: rgba(255,255,255,0.8);
border:2px solid #e61964;
}


.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 34px;
  height: 34px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #e61964;
  border-radius: 2px;
}
.menu-trigger span:nth-of-type(1) {
  top: 12px;
}
.menu-trigger span:nth-of-type(2) {
  top: 22px;
}
.menu-trigger span:nth-of-type(3) {
  top: 32px;
}


.menu-trigger.active {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  -webkit-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
.menu-trigger.active span:nth-of-type(3) {
  opacity: 0;
}


aside{
	display:block;
	width:300px; 
	position:fixed;
	top:0;
	left:-300px;
	height:100%;
	background:rgba(230,25,100,0.8);
	z-index:999;
	box-sizing:border-box;
	 transition-property: left;
  transition-duration: .22s;
  transition-timing-function: ease-in;
	}

aside ul{
	padding:100px 8px 0;
	text-align:left;
	}
aside li{
	font-size:16px;
	margin-bottom:25px;
	}


aside.open{
	left:0;
	}




}



/* header
===============================================================*/

#header_wrap{
	


	}


	
#header_wrap h1{


	}




/* header
-------------------------------------------------------------- */

.movie{
	width:100%;
	height:100%;
	text-align:center;
	position: relative;
	}

.mov_base{
	position: relative;
	height:100%;
	overflow: hidden;
	z-index:1;
	}


.movie_01{
	margin: auto;
	text-align:left;
	z-index:1;
	background: url(../images/hanasaki/back.jpg) no-repeat center top;
	background-size: cover;
	 position: fixed;
    left: 0;
	right:0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
	display:block;
	}

.movie_02.pc{
	margin: auto;
	text-align:left;
	z-index:1;
	background: url(../images/hanasaki/back2.jpg) no-repeat center top;
	background-size: cover;
	 position: fixed;
    left: 0;
	right:0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
	display:block;
	}
.movie_03.pc{
	margin: auto;
	text-align:left;
	z-index:1;
	background: url(../images/hanasaki/back3.jpg) no-repeat center top;
	background-size: cover;
	 position: fixed;
    left: 0;
	right:0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
	display:block;
	}
.movie_02.sp,
.movie_03.sp{
	display:none;
opacity:0;
}


.movie_01_txt{
	position:absolute;
	bottom:0;
	left:10%;
	z-index:2;
	width: 26.041%;
	min-width: 350px;
	vertical-align: bottom;
	}
.movie_01 img,
.movie_02 img,
.movie_03 img{
	height: auto;
	width: 100%;
		
}

@media screen and (max-width: 800px) {

		.movie_02.sp{
	margin: auto;
	text-align:left;
	z-index:1;
	background: url(../images/hanasaki/back2_sp.jpg) no-repeat center top;
	background-size: cover;
	 position: fixed;
    left: 0;
	right:0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
	display:block;
opacity:1;
	}
.movie_03.sp{
	margin: auto;
	text-align:left;
	z-index:1;
	background: url(../images/hanasaki/back3_sp.jpg) no-repeat center top;
	background-size: cover;
	 position: fixed;
    left: 0;
	right:0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
	display:block;
opacity:1;
	}
.movie_02.pc,
.movie_03.pc{
	display:none;
}
	
	
}

@media screen and (max-width: 540px) {

	.movie_01_txt{
	position:absolute;
	bottom:0;
	left:5%;
	z-index:2;
	width: 26.041%;
	min-width: 250px;
	vertical-align: bottom;
	}
	
}



.movie_02_txt,
.movie_03_txt{
	position:absolute;
	bottom:0;
	left:0;
	right: 0;
	top: 0;
	margin: auto;
	height: 100px;
	width:58.33%;
	z-index:4;
	}
.movie_03_txt{
	height: 500px;
	}
.movie_03_txt img{
	margin-bottom:10px;
	}


@media screen and (max-width: 540px) {
	

.movie_02_txt,
.movie_03_txt{
	position:absolute;
	bottom:0;
	left:0;
	right:auto;
	top: 0;
	margin: auto;
	height: 100px;
	width:100%;
	z-index:4;
	}	
.movie_03_txt{
	height: 200px;
	}	
	
}



.movie_04_txt{
	position:absolute;
	bottom:0;
	left:0;
	right: 0;
	top: 0;
	margin: auto;
	height: 363px;
	width:58.33%;
	z-index:4;
	}

.movie_04_txt img{

	position:absolute;
	bottom:0;
	left:0;
	right: 0;
	top: 0;
	margin: auto;
	z-index:4;	
}



.movie_05_txt{
	position:absolute;
	bottom:0;
	left:0;
	right: 0;
	top: 0;
	margin: auto;
	height: 363px;
	width:58.33%;
	z-index:4;
	}



.movie_06_txt{
	position:absolute;
	bottom:0;
	left:0;
	right: 0;
	top: 0;
	margin: auto;
	height: 363px;
	width:58.33%;
	z-index:4;
	}

.movie_04_txt img,
.movie_05_txt img,
.movie_06_txt img{
	position:absolute;
	bottom:0;
	left:0;
	right: 0;
	top: 0;
	margin: auto;
	z-index:4;	
}



@media screen and (max-width: 540px) {
	
	.movie_04_txt,
	.movie_05_txt,
	.movie_06_txt{
	width:90%;
	}
	
}


.movie_07_txt{
	position:absolute;
	bottom:0;
	left:3%;
	margin: auto;
	width:8.5%;
	z-index:4;
	}
.movie_08_txt{
	position:absolute;
	bottom:0;
	left:45%;
	margin: auto;
	width:27.39%;
	z-index:4;
	}
.movie_09_txt{
	position:absolute;
	top:5%;
	right:3%;
	margin: auto;
	width:17.27%;
	z-index:5;
	}
.movie_10_txt{
	position:absolute;
	bottom:0;
	left:0%;
	margin: auto;
	width:65.20%;
	z-index:3;
	}
.movie_11_txt{
	position:absolute;
	bottom:5%;
	left:0;
right:0;
	margin: auto;
	width:22%;
/*height:65px;*/
    height: 136px;
	z-index:5;
	}	

.movie_03.sp .movie_07_txt,
.movie_03.sp .movie_08_txt,
.movie_03.sp .movie_09_txt,
.movie_03.sp .movie_10_txt{
disply:none;
opacity:0;
}




.pc{
	display: block;
}
.sp{
	display: none;
}

@media screen and (max-width: 800px) {
.pc{
	display: none;
}
.sp{
	display: block;
}
.movie_03.sp .movie_07_txt,
.movie_03.sp .movie_08_txt,
.movie_03.sp .movie_09_txt,
.movie_03.sp .movie_10_txt{
disply:block;
opacity:1;
}
.movie_07_txt{
	position:absolute;
	bottom:0;
	left:3%;
	margin: auto;
	width:13%;
	z-index:4;
	}
.movie_08_txt{
	position:absolute;
	bottom:0;
	left:0;
	margin: auto;
	width:80.0%;
	z-index:2;
	}
.movie_09_txt{
	position:absolute;
	top:5%;
	right:3%;
	margin: auto;
	width:24.27%;
	z-index:5;
	}
.movie_10_txt{
	position:absolute;
	bottom:auto;
	top: 0;
	left:0%;
	margin: auto;
	width:95%;
	z-index:3;
	}

	
	
}


@media screen and (max-width: 540px) {
.pc{
	display: none;
}
.sp{
	display: block;
}
.movie_07_txt{
	position:absolute;
	bottom:0;
	left:3%;
	margin: auto;
	width:18%;
	z-index:4;
	}
.movie_08_txt{
	position:absolute;
	bottom:0;
	left:0;
	margin: auto;
	width:100.0%;
	z-index:4;
	}
.movie_09_txt{
	position:absolute;
	top:5%;
	right:3%;
	margin: auto;
	width:35.27%;
	z-index:5;
	}
.movie_10_txt{
	position:absolute;
	bottom:auto;
	top: 0;
	left:0%;
	margin: auto;
	width:100%;
	z-index:3;
	}
.movie_11_txt{
	position:absolute;
	bottom:2%;
	left:auto;
right:3%;
	margin: auto;
	width:40%;
height:auto;
	z-index:5;
	}	
	
	
	
}



/* header
===============================================================*/

.ill{
	/*font-size:16px;*/
	font-size:20px;	
	color: #a50842;
	margin-bottom: 60px;
}



ul.menu{
	margin-bottom: 60px;
	overflow: hidden;
}

ul.menu li{
	width:calc( 100% / 4);
	display: inline-block;
	float: left;
	box-sizing: border-box;
	padding: 0 10px;
	font-family:Midashi Min MA31, YuMincho, '游明朝',"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	position: relative;
}

ul.menu li a{
	color: #e61964;
	border: 2px solid #e61964;
	border-radius: 8px;
	background: #faf9f9;
	display: block;
	font-size: 18px;
	padding: 15px 10px 15px 10px;
	font-weight: bold;
    position: relative;
	transition: all 0.4s ease-in-out;
	text-decoration: none;
	}

    .arrow{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
	padding-left: 34px;
    }
    .arrow::before,
    .arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
    }

    .arrow2::before{
    width: 24px;
    height: 24px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
	border: 1px solid #e61964;
    }
    .arrow2::after{
    width: 0;
height: 0;
		left: 7px;
border-style: solid;
border-width: 8px 6px 0 6px;
border-color: #e61964 transparent transparent transparent;
    }


ul.menu li a:hover{
	color: #fff;
	background: #e61964;
	display: block;
	text-decoration: none;
	
	}



@media screen and (max-width: 940px) {
	
ul.menu li{
	width:calc( 100% / 2);
	margin-bottom: 15px;
}

	ul.menu li a{
	font-size: 18px;
	padding: 12px 10px 12px 10px;
	}
	
}

.tb{
display:none;
}

@media screen and (max-width: 800px) {

.tb{
display:block;
}


ul.menu li{
	width:calc( 100%);
	margin-bottom: 10px;
}
	ul.menu li a{
	font-size: 16px;
	padding: 12px 10px 12px 10px;
	}	
}


.dramacover_wrap{
    width: 1100px;
    max-width: calc(100% - 2rem);
	margin: 0 auto 60px;
    background-color: #fff;
    border: 1px solid #F22880;
    border-radius: 10px;
    padding: 20px 40px;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    .dramacover_wrap{
        width: 100%;
        margin: 0 auto 30px;
        box-sizing: border-box;
        padding: 0 2%;
        
    }
}

.dramacover_wrap img{
    max-width: 100%;
    height: auto;
}

.dramacover_about{
    display: flex;
}
@media screen and (max-width: 768px) {
    .dramacover_about{
        display: block;
    }
}

.dramacover_about_left{
    padding-right: 20px;
    position: relative;
}
@media screen and (max-width: 768px) {
    .dramacover_about_left{
        padding-right: 0;
    }
}

.dramacover_about_fukidashi{
    position: absolute;
    top: -70px;
    left: 40%;
    transform: translateX(-40%);
}
@media screen and (max-width: 768px) {
    .dramacover_about_fukidashi{
        top: -18vw;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media screen and (max-width: 540px) {
    .dramacover_about_fukidashi{
        top: -25vw;
        width: 60vw;
    }
}

.dramacover_about_dekimashita{
    margin-top: 80px;
    margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
    .dramacover_about_dekimashita{
        margin-bottom: 20px;
    }
    .dramacover_about_dekimashita img{
        width: 100%;
    }
}

.dramacover_about_txt dl{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}
@media screen and (max-width: 540px) {
    .dramacover_about_txt dl{
        display: block;
    }
}

.dramacover_about_txt dl dt{
    background: #DB2168;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 5px 1rem;
    text-align: center;
    width: 6rem;
    box-sizing: border-box;
}
@media screen and (max-width: 540px) {
    .dramacover_about_txt dl dt{
        margin-right: 0;
        margin-bottom: 10px;
    }
}

.dramacover_about_txt dl dt.drama_link{
    margin-bottom: 10px;
    width: auto;
}

.dramacover_about_txt dl dd{
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 20px;
    width: calc(100% - 6rem - 2rem);
}
@media screen and (max-width: 540px) {
    .dramacover_about_txt dl dd{
        font-size: 20px;
        margin-bottom: 16px;
        width: 100%;
    }
}

.dramacover_about_txt dl dd span{
    font-size: 16px;
    font-weight: normal;
}
.dramacover_about_txt dl dd.drama_link{
    font-size: 20px;
    width: 100%;
}
.dramacover_about_txt dl dd.drama_link a{
    font-size: 20px;
    width: 100%;
    word-break: break-word;
}

.dramacover_about_right{
    flex-shrink: 0;
}
@media screen and (max-width: 768px) {
    .dramacover_about_right{
        text-align: center;
        padding: 2% 0 4%;
    }
}

.story_wrap{
    width: 1100px;
    max-width: calc(100% - 2rem);
	margin: 0 auto 60px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.story_txt p{
    font-size: 20px;
    line-height: 2;
}
.story_txt p + p{
    margin-top: 20px;
}
@media screen and (max-width: 540px) {
    .story_wrap{
        flex-direction: column;
        margin-bottom: 20px;
    }
    .story_txt{
        order: 1;
    }
    .story_txt p{
        font-size: 16px;
    }
    .story_img{
        text-align: center;
        order: 2;
    }
    .story_img img{
        width: 80%;
        height: auto;
    }
}

/*------------------------ book-area ------------------------ */
.book_sotre_list {
    margin: 1.5rem 0 0;
    max-width: 575px;
    list-style: none;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  @media screen and (max-width: 920px) {
    .book_sotre_list {
      max-width: 420px;
      width: 100%;
      margin: 3rem auto 0;
    }
  }
  @media screen and (max-width: 480px) {
    .book_sotre_list {
      justify-content: space-between;
      margin-top: 2rem;
      max-width: none;
    }
  }
  .book_sotre_list li {
    width: 44%;
    margin-right: 10px;
    text-align: center;
    margin-bottom: 10px;
  }
  @media screen and (max-width: 920px) {
    .book_sotre_list li {
      width: 46%;
    }
  }
  @media screen and (max-width: 768px) {
    .book_sotre_list li {
      width: 44%;
    }
  }
  @media screen and (max-width: 480px) {
    .book_sotre_list li {
      width: 48%;
      margin: 0 0 10px;
    }
  }
  .book_sotre_list li a {
    padding: 7px 15px;
    background: #fff;
    border: solid 1px #dcdcdc;
    box-sizing: border-box;
    display: block;
  }
  @media screen and (min-width: 481px) and (max-width: 914px) {
    .book_sotre_list li a {
      padding: 7px 5px;
    }
  }
  @media screen and (max-width: 480px) {
    .book_sotre_list li a {
      padding: 7px 5px;
    }
  }
  .book_sotre_list li a img {
    width: 100%;
    max-width: 100%;
    vertical-align: bottom;
  }
  .book_sotre_list li a:hover {
    opacity: 0.4;
    transition: opacity 0.3s ease-out;
  }
  @media screen and (max-width: 768px) {
    .book_sotre_list li a:hover {
      opacity: 1;
      transition: none;
    }
  }
  .book_sotre_list li:nth-child(7), .book_sotre_list li:nth-child(8) {
    margin-bottom: 0;
  }

.book-area {
    position: relative;
    background-color: #fff;
  }
  .book-area * {
    box-sizing: border-box;
  }
  .book-area-inner {
    transition: all 0.5s ease;
    padding: 2rem 0;
    box-sizing: border-box;
    width: 95%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;
  }
  @media screen and (max-width: 920px) {
    .book-area-inner {
      flex-wrap: wrap;
      width: auto;
      max-width: none;
      padding: 3rem 0 2rem;
    }
  }
  @media screen and (max-width: 480px) {
    .book-area-inner {
      padding: 1rem 0 0;
    }
  }
  .book-area-inner-wrap {
    padding: 2rem 0 5rem;
    margin: 0 auto;
    position: relative;
  }
  .book-area-inner-wrap.fadein {
    animation: fadein_anime 1s ease-out forwards;
  }
  @media screen and (max-width: 920px) {
    .book-area-inner-wrap {
      padding: 1rem 0 3rem;
      width: auto;
    }
  }
  @media screen and (max-width: 480px) {
    .book-area-inner-wrap {
      padding: 2rem 0 4rem;
    }
  }
  .book-area-inner-item {
    padding: 4rem 3rem;
    display: flex;
  }
  @media screen and (max-width: 920px) {
    .book-area-inner-item {
      flex-wrap: wrap;
    }
  }
  @media screen and (max-width: 480px) {
    .book-area-inner-item {
      padding: 1rem;
    }
  }
  .book-area-inner-book {
    width: 43%;
    max-width: 400px;
    margin-right: 2em;
    flex-shrink: 0;
  }
  @media screen and (max-width: 920px) {
    .book-area-inner-book {
      width: 100%;
      margin: 0 auto 2em;
    }
  }
  @media screen and (max-width: 480px) {
    .book-area-inner-book {
      margin: 0 auto 1rem;
      max-width: 280px;
    }
  }
  .book-area-inner-book img {
    vertical-align: bottom;
    max-width: 100%;
    width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
  }
  .book-area-inner-detail {
    width: 100%;
    color: #000;
  }
  @media screen and (min-width: 921px) {
    .book-area-inner-detail {
      width: 53%;
      flex-shrink: 1;
    }
  }
  @media screen and (max-width: 480px) {
    .book-area-inner-detail {
      padding: 0;
    }
  }
  .book-area-inner-title {
    font-size: 45px;
    font-size: 2.8125rem;
    line-height: 1.2;
  }
  @media screen and (max-width: 920px) {
    .book-area-inner-title {
      text-align: center;
    }
  }
  @media screen and (max-width: 480px) {
    .book-area-inner-title {
      font-size: 38px;
      font-size: 2.375rem;
      line-height: 1.2;
    }
  }
  .book-area-inner-title span {
    display: block;
    font-size: 24px;
    font-size: 1.5rem;
  }
  @media screen and (max-width: 480px) {
    .book-area-inner-title span {
      font-size: 18px;
      font-size: 1.125rem;
    }
  }
  .book-area-inner-writer {
    font-size: 25px;
    font-size: 1.5625rem;
    margin-top: 1.5rem;
  }
  @media screen and (max-width: 920px) {
    .book-area-inner-writer {
      text-align: center;
      font-size: 20px;
      font-size: 1.25rem;
    }
  }
  @media screen and (max-width: 480px) {
    .book-area-inner-writer {
      font-size: 18px;
      font-size: 1.125rem;
    }
  }
  .book-area-inner-writer span {
    font-size: 16px;
    font-size: 1rem;
  }
  @media screen and (max-width: 480px) {
    .book-area-inner-writer span {
      font-size: 13px;
      font-size: 0.8125rem;
    }
  }
  .book-area-inner-text {
    line-height: 1.8;
    margin-top: 1.5rem;
  }
  @media screen and (max-width: 480px) {
    .book-area-inner-text {
      font-size: 14px;
      font-size: 0.875rem;
    }
  }
  .book-area-inner-info {
    margin-top: 1.5rem;
  }
  @media screen and (max-width: 920px) {
    .book-area-inner-info {
      text-align: center;
    }
  }
  .book-area-inner-info span {
    display: block;
    line-height: 1.8;
    font-size: 13px;
    font-size: 0.8125rem;
  }
  
  .book-area.book-area-top {
    opacity: 0;
    transform: translateY(20px);
  }
  .book-area.book-area-top.fadein {
    animation: fadein_anime 0.5s ease-out 1 forwards;
  }

/*------------------------ book-area ------------------------ */



.content{
	clear: both;
	padding-top: 50px;
	padding-bottom: 50px;
	overflow: hidden;
}

.content h2{
	font-size: 44px;
	color: #e61964;
	font-family:Midashi Min MA31, YuMincho, '游明朝',"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	line-height: 1.6;
	background: url(../images/hanasaki/tit_back_l.png) no-repeat left 50%,
		url(../images/hanasaki/tit_back_r.png) no-repeat right 50%;
	text-align: center;
	font-weight: bold;
	padding: 45px 0;
	margin-bottom: 15px;
}



@media screen and (max-width: 540px) {
	
.content{
	clear: both;
	padding-top: 30px;
	padding-bottom: 30px;
	overflow: hidden;
}	

	
.content h2{
	font-size: 24px;
	color: #e61964;
	font-family:Midashi Min MA31, YuMincho, '游明朝',"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	line-height: 1.6;
	background: url(../images/hanasaki/tit_back_l.png) no-repeat left 50%,
		url(../images/hanasaki/tit_back_r.png) no-repeat right 50%;
	text-align: center;
	background-size:100px;
	font-weight: bold;
	padding: 25px 20px;
	margin-bottom: 15px;
}

	
	
	
}



.hanasaki_book{
	background: #faf9fa;
	width:100%;
	overflow: hidden;
position:relative;
z-index:998;
	
}

.hanasaki_book_in{
	width: 1280px;
	margin: 0 auto;
	text-align: left;
	padding: 70px 20px 70px;
	box-sizing: border-box;	
}

.author_prof {
	margin-bottom: 50px;
	
}

.author_prof dt{
	font-size: 18px;
	margin-bottom: 10px;
	line-height: 1.8;
	font-weight: bold;
	
}
.author_prof dd{
	font-size: 16px;
	line-height: 1.8;
	
}


.book{
	float: left;
	margin: 0 30px 40px 0;
	
}
.hanasaki_book h3{
	font-size: 24px;
	margin-bottom: 15px;
	
}

.hanasaki_book p{
	font-size: 18px;
	margin-bottom: 15px;
	line-height: 1.5;
	
}



@media screen and (max-width: 1280px) {
	
.hanasaki_book_in{
	width: 100%;
	padding: 50px 2% 50px;
	box-sizing: border-box;	
}

}


@media screen and (max-width: 800px) {
	
.book{
	float: left;
	padding: 0 20px 40px 0;
margin:0;
width:30%;
box-sizing:border-box;
	}
.book img{
max-width:100%;
height:auto;
}


}


@media screen and (max-width: 540px) {
	


.hanasaki_book_in{
	width: 100%;
	margin: 0 auto;
	text-align: left;
	padding: 20px 2%x 20px;
	box-sizing: border-box;	
}

.author_prof {
	margin-bottom: 20px;
	
}

.author_prof dt{
	font-size: 16px;
	margin-bottom: 10px;
	line-height: 1.5;
	font-weight: bold;
	
}
.author_prof dd{
	font-size: 12px;
	line-height: 1.5;
	
}


.book{
	float: none;
	display: block;
	margin: 0 auto 20px auto;
	width: 60%;
	
}
	.book img{
		width: 100%;
		height: auto;
		
	}
	
.hanasaki_book h3{
	font-size: 18px;
	margin-bottom: 15px;
	
}

.hanasaki_book p{
	font-size: 12px;
	margin-bottom: 15px;
	line-height: 1.5;
	
}


	
	
}






/* footer
===============================================================*/

/* footer
-------------------------------------------------------------- */


#footer{ 
	clear:both; 
	width:100%; 
	text-align:center; 
	margin:0 auto;
	background:#ed6295;
	padding:20px;
	box-sizing: border-box;
	overflow: hidden;
	pointer-events: stroke;
	z-index: 999;
	position: relative;
	}

.footer_logo{ 
	float:left; 
	display:inline;
	}
.footer_copy{ 
	float:right; 
	display:inline; 
	color:#fff;
	font-size: 12px;
}



@media screen and (max-width: 540px) {
	

#footer{ 
	padding:10px;
	}
	
.footer_logo{ 
	float:left; 
	display:inline;
	}
	.footer_logo img{
		width:100%;
		height: auto;
	} 	
	
.footer_copy{ 
	float:right; 
	display:inline; 
	color:#fff;
	font-size: 9px;
}
	
	
}



/* footer
-------------------------------------------------------------- */