@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:#2d2b2a;
margin:0;
background:url(../images/bokutokanojo/back.jpg) no-repeat top center;
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;
}




@media screen and (max-width: 1280px) {
 
body{
color:#2d2b2a;
margin:0;
background:url(../images/bokutokanojo/back_sp.jpg) no-repeat top center;
background-size:cover;
background-attachment:fixed;
 }
 
}
	
	
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{
	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%; 
	}

}


.content{
	margin:0 auto; 
 padding: 20px 0;
 overflow: hidden;
 width: 1280px;
 position: relative;
}

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

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

.content{
	margin:0 auto; 
 padding: 40px 5%;
	width:100%; 
 box-sizing: border-box;
}

}

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

.content{
 margin: 0 0;
 padding: 5% 5%;
}

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


h1{
display:inline-block; 
 vertical-align: middle;
 margin-right: 15.62%;
 margin-bottom: 10px;
}
h2{
display:inline-block; 
 vertical-align: middle;
 margin-right: 15.62%;
 margin-bottom: 10px;
}
h3{
display:inline-block; 
 vertical-align: middle;
 margin-bottom: 10px;
}
h1 img,h2 img,h3 img{
 max-width: 100%;
 height: auto;
}
 
 
.date{
 width: 215px;
 height: 50px;
 background: #57527a;
 font-size: 22px;
 font-weight: bold;
 color: #fff;
 text-align: center;
 display: inline-block;
 line-height: 50px
}

.sign_back{
 width: 100%;
 overflow: hidden;
 padding-bottom: 20px;
 background: rgba(255,255,255,0.6);
 
}
.sign_back p{
 color: #3b3376;
 font-size: 16px;
 line-height: 1.8;
 margin-top: 25px;
 text-align: left;
 font-weight: bold;
 padding-left: 45px;
}
.sign_back img{
 position: absolute;
 right: 45px;
 top: 20px;
 
}

.smartnews{
 background: rgba(98,87,25,0.35);
 color: #fff;
 text-align: left;
 margin-bottom: 60px;
}
.smartnews h4{
 font-size: 22px;
 font-weight: bold;
 line-height: 1.4;
 padding-left: 45px;
}
.smartnews p{
 font-size: 18px;
 line-height: 1.4;
 margin-top: 25px;
 text-align: left;
 font-weight: bold;
 padding-left: 45px;
}
.smartnews p span{
 font-size: 14px;
}
.app{
 width: 320px;
 position: absolute;
 top:70px;
 right: 45px;
}
.app img{
 max-width: 100%;
 height: auto;
}
.app dt{
 width: 290px;
 margin: 0 auto 18px;
 text-align: center;
}
.app dd{
 display: inline-block;
 margin: 0 10px;
 left: -.4em;
}




@media screen and (max-width: 1280px) {
 
h1{
 margin-right: 15.62%;
 margin-bottom: 10px;
 width: 42.18%;
}
h2{
 margin-right: 15.62%;
 margin-bottom: 10px;
 width: 13.67%;
}
h3{
 margin-bottom: 10px;
 width: 6.32%;
}
 
 
}


@media screen and (max-width: 1180px) {
 
 .smartnews h4{
 font-size: 19px;
 font-weight: bold;
 line-height: 1.4;
 padding-left: 45px;
}
.smartnews p{
 font-size: 15px;
 line-height: 1.4;
 margin-top: 22px;
 text-align: left;
 font-weight: bold;
 padding-left: 45px;
}
 
 .app{
 right: 15px;
}
 
 
}


@media screen and (max-width: 1028px) {
 
 .sign_back{
 width: 100%;
 overflow: hidden;
 padding-bottom: 20px;
 background: rgba(255,255,255,0.6);
 
}
.sign_back p{
 color: #3b3376;
 font-size: 15px;
 line-height: 1.8;
 margin-top: 25px;
 padding-left: 0;
}
.sign_back img{
 position: absolute;
 right: 1%;
 top: 20px;
}
  .smartnews h4{
 padding-left: 0;
}
.smartnews p{
 font-size: 15px;
 margin-top: 20px;
 padding-left: 0;
}
 
 .app{
 width: 240px;
 position: absolute;
 top:50px;
 right: 2%;
}
.app img{
 max-width: 100%;
 height: auto;
}
.app dt{
 width: 240px;
 margin: 0 auto 0;
 text-align: center;
}
.app dd{
 display: inline-block;
 margin: 0 7px;
 left: -.4em;
 width: 100px;
}

 
 
}

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

 .sign_back p{
 color: #3b3376;
 font-size: 14px;
 line-height: 1.6;
 margin-top: 15px;
 padding-left: 0;
  text-align: center;
}
 
 .sign_back img{
 position: relative;
 right: 1%;
 top: 20px;
}

  .app{
 width: 240px;
 position: relative;
 top:auto;
 right: auto;
   margin: 20px auto;
}
 
 
}



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

 
}

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

 h1{
  margin: 0 auto 30px;
  display: block;
  text-align: center;
 width: 80.18%;
}
h2{
  margin: 0 auto 30px;
  display: block;
  text-align: center;
 width: 30.67%;
}
h3{
  margin: 0 auto 30px;
  display: block;
  text-align: center;
 width: 10.32%;
}
 
 .sign_back p{
 color: #3b3376;
 font-size: 12px;
 line-height: 1.6;
 margin-top: 15px;
 padding-left: 0;
  text-align: center;
}
.sign_back img{
 width: 40%;
 height: auto;
}

.smartnews h4{
 padding-left: 0;
    font-size: 16px;
}
.smartnews p{
 font-size: 12px;
 margin-top: 20px;
 padding-left: 0;
}
.smartnews p span{
 font-size: 10px;
}
 
}


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







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

#slider1 img{
 min-height: 100%;
 width: auto;
 
}


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





.book{
	float: left;
	margin: 0 60px 60px 0;
 text-align: left;
 width:252px;
 box-sizing: content-box;
 padding: 0 0 0 77px;
	
}

	.book img{
		max-width: 100%;
		height: auto;
  box-shadow: 0 0 15px #193b84;
		
	}
.book_info{
 float: right;
 width: calc(100% - 390px);
 text-align: left;
 color: #fff;
 text-shadow: 0 0 4px #03102c;
 
}


.book_info h3{
	font-size: 20px;
	margin-bottom: 12px;
 line-height: 1.5;
 width: auto;
	
}
.book_info h3 span{
 font-size: 18px;
 
}


.book_info p{
	font-size: 15px;
	margin-bottom: 20px;
	line-height: 1.5;
 font-weight: bold;
}
.book_info p strong{
	font-size: 18px;
}

.book_info p.info{
	font-size: 14px;
	line-height: 2;
 font-weight: bold;
}


ul.buy_btn li{
	float: left;
	margin: 0 5px 5px;
 width: calc(100% / 3.2);
	
}

ul.buy_btn li img{
 width:100%;
 height: auto;
}



ul.buy_btn{
	overflow: hidden;
	margin-bottom: 5px;
}

p.buy_last{
	font-size: 12px;
	
}

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


}

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

.book{
	float: none;
	display: block;
	margin: 0 auto 20px auto;
	width: 60%;
 padding: 0;
	
}
	

.book_info{
 float: none;
 width: calc(100%);
 font-size: 16px;
 
}


.book_info h3{
	font-size: 18px;
	margin-bottom: 15px;
}
.book_info h3 span{
	font-size: 14px;
	margin-bottom: 5px;
}

 .book_info p{
	font-size: 12px;
}
.book_info p.info{
	font-size: 16px;
}
 .book_info p strong{
	font-size: 16px;
}

ul.buy_btn li{
	float: left;
	width:48%;
	margin: 0 1% 1%;
	
}
ul.buy_btn li img{
	width: 100%;
	height: auto;
}	
	
ul.buy_btn{
	overflow: hidden;
	margin-bottom: 5px;
}

p.buy_last{
	font-size: 10px;
	
}


	
	
	
	
}



@media screen and (max-width: 540px) {
 
 .book_info p{
	font-size: 12px;
}
 .book_info p strong{
	font-size: 15px;
}
 
}


.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


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

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


#footer{ 
	clear:both; 
	width:100%; 
	text-align:center; 
	margin:0 auto;
	background:#fff;
	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;
	font-size: 12px;
 color: #0a4388;
}



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

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





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