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

body {
	background-color: #f7ddbe;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	line-height: 1.5em;
	color: #000;
    padding: :0;
    margin:0;
    
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00a4ff+0,8fd7ff+100 */
background: rgb(0,164,255); /* Old browsers */
background: -moz-linear-gradient(top, rgb(0,164,255) 0%, rgb(143,215,255) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgb(0,164,255) 0%,rgb(143,215,255) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgb(0,164,255) 0%,rgb(143,215,255) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4ff', endColorstr='#8fd7ff',GradientType=0 ); /* IE6-9 */
}



a{
	text-decoration: none;
	border:none;
    color:#f90;
}

a:hover{opacity: 0.7 ;}
a img:hover{position: relative; top:2px;}

/********************* PC/スマホ　オンオフ *****************************/

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


#contents, #book{
	width:960px;
    height: auto;
	margin: 0 auto;
    overflow: hidden;
    background-color: #fff;
    padding:0;
}



#contents{
background-image: url(images/main_illust.jpg); background-repeat:no-repeat;
background-attachment: fixed;
background-position:top center;
}


.info{width: 740px; 
margin:1em auto;
background-color: rgba(255,255,255,0.8);
padding-bottom:1em;
}
.info h2{padding-top:1em}
.info h2 img{display: block; margin:auto;}
.info p{padding:1em}
.auther{color:#007b5b; font-size:1.4em;}
.imp{padding:1em; border:solid 3px #85ceff; margin:1em; background: #fff;
  border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
font-size:0.9em}

.imp strong{ font-size:1.2em; font-weight: bold;}

.imp .age{display: block; text-align: right; color:#666}




.timeline{width:36%; display: inline-block}

#book{background: rgb(0,164,255); /* Old browsers */
background: -moz-linear-gradient(top, rgb(0,164,255) 0%, rgb(143,215,255) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgb(0,164,255) 0%,rgb(143,215,255) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgb(0,164,255) 0%,rgb(143,215,255) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4ff', endColorstr='#8fd7ff',GradientType=0 ); /* IE6-9 */
    overflow: hidden;
    margin-bottom:2em;
}


.bookinfo{width:740px; margin:1em auto;}
.bookinfo img.cover{margin:0 1em; display: block; float: left;}


.bookinfo h3{color:#fff; font-size:1.6em; padding:1em 0}
.bookinfo p{padding-left:1em; overflow: hidden}

a.buy_btn img{width:280px; height: auto; display: block; overflow: hidden; padding-left:1em;}


.page_top {
	position:fixed;
	bottom:10px;
	right:10px;
}


.sns{ 
margin:5px auto;
text-align:right;
}

.sns span{ display:inline-block; width:82px;}

.copy_right{text-align: center; font-size:x-small}

footer {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #FFF;
	background-color: #666;
	width: 100%;
	text-align: center;
}
  @media screen and (min-width: 768px) {
    footer {
      width: 100%;
      margin: -2px auto 0; } }
	  
  @media screen and (max-width: 767px) {
    footer {
      margin-top: -2px; } }
  footer .footer_nav {
	background-color: #fff;
}
    footer .footer_nav ul {
      text-align: center;
      padding: 10px 0; }
      footer .footer_nav ul li {
        display: inline-block;
        font-size: 12px;
        padding: 0 10px;
        border-left: 1px solid #ccc; }
        footer .footer_nav ul li:last-child {
          border-right: 1px solid #ccc; }


@media screen and (max-width: 767px) {
          footer .footer_nav ul li:nth-child(1) {
            margin-bottom: 10px; }
          footer .footer_nav ul li:nth-child(2) {
            margin-bottom: 10px;
            border-right: 1px solid #666; } }
        footer .footer_nav ul li a {
	color: #000;
	text-decoration: none;
}

footer .copyright {
    font-size: 10px;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 15px; }
	
	
a{
	text-decoration: none;
	border:none;
}

#home {
	text-align: center;
	font-size: 14px;
}

#home a {
	color: #000;
	text-decoration: none;
}

	
#additional {
	width: 60%;
	margin: 1em auto;
    text-align: center
}



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

#contents, #book{
	width:100%;
}

#contents{
background-image: url(images/main_illust2.jpg); background-repeat:no-repeat;
background-position:top center;
}
    
  

#contents h1 img{width:100%; height:auto;}
#contents  h2 img{width:100%; height:auto;}  
    
.info{width:100%;}

.bookinfo{width:100%; text-align: center}
.bookinfo img.cover{margin:0 auto; float: none;}

.bookinfo p{padding:1em; overflow: hidden}

a.buy_btn img{margin:0 auto; padding:1em;}



}

/*ボタン装飾*/
.info label {
    padding: 15px;
    font-weight: bold;
    background: #ff9;
    border-radius: 5px;
    cursor :pointer;
    transition: .5s;
    margin:15px auto;
    width:80%;
    display: block;
    text-align: center;
}

/*アイコンを表示*/
.info label.open:before {
    display: inline-block;
    content: '\f0d7  他の感想を読む';
    font-family: "Font Awesome 5 Free";
    padding-right: 5px;
    transition: 0.2s;
}

/*ボタンホバー時*/
.info label:hover {
    background: #ffc;
}

/*アイコンを切り替え*/
.info label:checked ~ label:before {
     content: '\f0d8  感想を隠す';
}

/*チェックは見えなくする*/
.info input {
    display: none;
}

/*中身を非表示にしておく*/
.info .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.info input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}


/*アイコンを表示*/
.info label.close:before {
    display: inline-block;
    content: '\f0d8  感想を隠す';
    font-family: "Font Awesome 5 Free";
    padding-right: 5px;
    transition: 0.2s;
}

/*アイコンを切り替え*/
.info label.close:checked ~ label:before {
     content: '\f0d8  感想を隠す';
}