@charset "UTF-8";
/* CSS Document */
body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
#wrapper {
	background-color:#fff;
}
/*************** common ***************/
/* reset */
body {
  margin: 0;
  padding: 0;
  word-break:break-all;
}
dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, input, p, blockquote, fieldset, div {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}
ul li, ol li {
  list-style: none;
}
table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  font-size: 100%;
}
caption {
  text-align: left;
}
table, pre, code, select, textarea, kbd, var, ins, del, samp {
  font-size: 100%;
}
address, cite, dfn, em, strong, var, th, ins, del, samp {
  font-weight: normal;
  font-style: normal;
}
a img {
	border: 0;
	vertical-align:bottom;
}
hr.separation {
  display: none;
}
fieldset {
  border: none;
}
header, section, nav, aside, footer, article {
  display: block;
}
a {
  color: rgb(0, 160, 212);
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
  -webkit-tap-highlight-color: rgba(255,255,255,0.5);
  display:block;
}
.cf:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
}
/* initialize */
body {
  -webkit-text-size-adjust: none;
  color: #333333;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

#content {
	height:auto;
	margin:0 auto;
  padding-top: 5%;
	clear:both;
	overflow:hidden;
/*	max-width: 800px; */
  background: url(https://s.yimg.jp/images/bookstore/ebook/app/function/images/bg_cont.png) repeat-x;
  background-size: 50%;
}
/* #title */
#title .minititle {
	margin: 5% auto ;
	width: 50%;
	display: block;
}
#title h1 {
	width:100%;
	color: #333;
	font-size: 6.5vw;
	font-weight: bold;
	text-align: center;
  letter-spacing: 0.2vw;
  line-height: 150%;
}
#title h1 .emphasis{
	color: #f7576c;
	font-size: 8vw;
}
#title .label{
	display: inline-block;
	padding: 5% 7% 0;
}
#title .label p{
	display: block;
	padding: 0.2em 0.8em; /*4px 12px:*/
	margin: 0.5em 1em 0.3em 0em; /* margin-right: 10px; */
	font-size:  3.0vw;
	font-weight: bold;
	color: #fff;
	background: #bbb;
	border-radius: 30px;
	float: left;
}

/*************** #content.detail ***************/
/* #cont */
#cont {
	margin-bottom: 10%;
}
#cont p {
	color: #555;
	font-size: 3.7vw;
	letter-spacing: 0.1vw;
	padding:2% 7%;
	line-height: 170%;
}
#cont h2 {
	width:100%;
	color: #333;
	font-size: 3.7vw;
	font-weight: bold;
	text-align: left;
    letter-spacing: 0.2vw;
	padding: 2% 7% 0% 7% ;
}
#cont li .emphasis,#cont p .emphasis {
	color: #f7576c;
}
#cont ul,ol{
	color: #555;
	font-size: 3.7vw;
	letter-spacing: 0.1vw;
	padding:2% 10% 0 10%;
	line-height: 150%;
}
#cont ul li{
	list-style-type:disc;
}
#cont ol li{
	list-style-type:decimal;
}
#cont .image {
	margin: 5% auto;
	width: 78%;
	display: block;
}

/* cont recommend-box */
#cont .recommend_box .booklist{
	margin:15px 0;
	padding:0;
}
#cont .recommend_box .booklist li{
	list-style:none;
	margin-bottom: 10%;
}
#cont .recommend_box .booklist li h2{
	font-size: 130%;
	width:auto;
}
#cont .recommend_box .booklist li h3{
	width: auto;
	color: #333;
	font-size: 3.7vw;
	font-weight: bold;
	text-align: left;
	letter-spacing: 0.2vw;
	padding: 2% 7% 0% 7%;
	line-height:1.3;
}
#cont .recommend_box .booklist li .thum{
	text-align:center;
}
#cont .recommend_box .booklist li .thum img{
	margin-top:2%;
	width:80%;
}
#cont .recommend_box .booklist li .thum.book img{
	width:50%;
}
#cont .recommend_box .note{
	border: 4px solid #efefef;
	padding: 2% 3%;
	margin: 0 5%;
	color: #777;
}

/* h2 icon 20200818*/
#cont h2 .icon_image{
	margin: 0%;
	width: 5%;
	vertical-align: middle;
	display: inline-block;
}
/* p icon 20210906*/
#cont p .btn_image{
	margin: 0%;
	width: 25%;
	vertical-align: middle;
	display: inline-block;
}
/* #postscript */
#postscript {
	margin-bottom: 10%;
}
#postscript p{
	padding:5% 7% ;
	color: #bbb;
	font-size: 3.0vw; 
}
#postscript .faq {
	text-align: center;
}
#postscript .faq a {
	font-size: 3.7vw;
    letter-spacing: 0.1vw;
	color: #00a0d4;
    display: inline-block;
    padding: 1vw;
}

/*OS FAQ Separate added 20200403 */	
#faqlink {	
	width:100%;	
	margin: 0;	
	padding:0;	
}	
.ios #faqlink .btaos {	
	display: none;	
}	
.android #faqlink .btios {	
	display: none;	
}	

/* #otherlist */
#otherlist {
	margin-bottom: 10%;
}
#otherlist h2 {
	width:100%;
	color: #333;
	font-size: 6.5vw;
	font-weight: bold;
	text-align: left;
    letter-spacing: 0.2vw;
	padding: 5% 7% 0%;
    line-height: 150%;
}
#otherlist ul, li{
  margin: 0%;
  padding: 0%;
}
#otherlist li:nth-child(4){
	display:none;
}
#otherlist .image {
	margin: 5% auto;
	width: 78%;
	display: block;
	border-radius:2vw;
}
#otherlist .link {
	padding:0% 7%;
	text-align: center;
}
#otherlist .link a {
	font-size: 3.7vw;
    letter-spacing: 0.1vw;
	color: #00a0d4;
    display: inline-block;
    padding: 1vw;
}

/* .dlbt */
.dlbt {
	margin: 5% auto 15%;
	width: 90%;
}
.dlbt a,.dlbt img {
	display: block;
}

/* #bottomAtt */
#bottomAtt {
	width:100%;
	background:#f5f5f5;
	clear:both;
	padding-top: 10%;
	padding-bottom: 15%;
}
#bottomAtt p {
	color: #555;
	font-size: 3.7vw;
	text-align: center;
	padding:0%  10% 0%;
    line-height: 170%;
}
.ios #bottomAtt .nojs,.android #bottomAtt .nojs {
	display: none;
}

.ios #bottomAtt .btaos {
	display: none;
}
.android #bottomAtt .btios {
	display: none;
}


/*************** #content.update ***************/
.update {
	padding-bottom:3vw;
}
.update #title {
  font-size: 3.7vw;
  padding: 8vw 7% 3vw;
}
.update #title h1{
	text-align:center;
	margin-bottom: 2vw;
}
/* .catlist */
.update .catList {
  padding: 0;
  color:#555;
}
.update .catList .entryTitle {
 font-size:3.7vw; /*4.0vw*/
}
.update .catList > li{
 padding: 3% 7%;
}
.update .catList li .label {
	display: inline-block;
}
.update .catList li .label li {
   display: inline-block;
   padding: 0.2em 0.8em;
   margin: 0.5em 1em 0.3em 0;
   font-size: 3.0vw;
   font-weight: bold;
   color: #fff;
   background: #bbb;
   border-radius: 30px;
	 float: left;
}
.update .catList li .date{
 font-size: 3vw;
 color:#555;
}
.update .catList li .entryThum{
 margin:2vw auto 0.5vw;
}
.update .catList li .entryThum img{
 width:100%;
 border-radius:2.0vw;
}
/* .pagenation */
.pagenation{
 display: flex;
 width:86vw;
 padding:5vw 7vw 12vw;
 font-size:4.4vw;
}
.pagenation span{
 flex: 1;
 line-height: 0.7em;
}
.pagenation .next{
 text-align:right;
}
.pagenation a:before{
 content:" ";
 display: block;
 width: 0.6em;
 height: 0.6em;
 border-top: solid 0.1em #ccc;
 border-right: solid 0.1em #ccc;
}
.pagenation .before a:before{
 -webkit-transform: rotate(225deg);
 transform: rotate(225deg);
 float:left;
}
.pagenation .next a:before{
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 float:right;
}

/*************** os  ***************/
.iosOnly,
.androidOnly{
    display:none;
}
body.ios .iosOnly,
body.android .androidOnly{
    display:block;
}

/*************** over768 ***************/
/* 表示領域が768px以上の場合に適用するスタイル */
@media screen and (min-width: 768px) {
/*1番大きい見出し*/
#title h1 .emphasis{
	font-size: 5.0vw; 
}
/*2番目大きい見出し*/
#title h1,#otherlist h2,
.update #title h1{
	font-size: 4.0vw;
}
/*普通の文字*/
#cont p,#postscript .faq ,#postscript .faq a,#bottomAtt p,#otherlist .link a,#cont h2,#cont ul,#cont ol,
.update #title ,.update .catList .entryTitle{
	font-size: 2.2vw; 
}
#cont li{
	padding:0;
}
/*小さい文字*/
#postscript p,
.update .catList li .date{
	font-size: 2.0vw;
}
/*ラベルの文字*/
#title .label p {
	font-size: 1.8vw;
	margin: 0.5em 1em 0em 0em;
}
/*ラベルの文字  画像対応*/
.update .catList li .label li {
	font-size: 1.6vw;
	margin: 0.5em 1em 0em 0em;
}
/*機能のお知らせ　image */
#title .minititle {
    margin: 2% auto;
    width: 30%;
    display: block;
}
/*説明　image */
#cont .image {
    margin: 5% auto;
    width: 65%;
    display: block;
}
/* h2 icon 20200818 */
#cont h2 .icon_image{
	margin: 0% ;
	width: 4%;
	vertical-align: middle;
	display: inline-block;
}
/* p icon 20210906 */
#cont p .btn_image{
	margin: 0% ;
	width: 20%;
	vertical-align: middle;
	display: inline-block;
}
/* uodate button image */
.dlbt img {
	width: 50%;
	margin: 0 auto;
	display: block;
}
/* tablet banner image */
#otherlist ul, li{
  margin: 0%;
  padding: 0% 5%;
}
#otherlist .image {
	display: inline;
	float: left;
	margin: 2% ;
	width: 46%;
	border-radius:2vw;
}
.under-element{
  clear: both;
}
.update .catList > li{
 	display: inline;
 	float: left;
 	width: 36%;
}
.update .catList .entryTitle{
	height: calc( 2.8vw * 2 );
	line-height: 2.8vw;
}
.update .catList li .entryThum{
	margin:1vw auto 0.5vw;
 }
 /* .pagenation */
.update .pagenation{
	font-size:2.5vw;
}
}