/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* コピペ用コード */
.font-size-dummy {
    font-size: .75rem;   /* 12px */
    font-size: .8125rem; /* 13px */
    font-size: .875rem;  /* 14px */
    font-size: 1rem;     /* 16px */
    font-size: 1.125rem;     /* 18px */  
    font-size: 1.25rem;  /* 20px */
    font-size: 1.5rem;  /* 24px */
    font-size: 2rem;  /* 32px */
    font-size: 2.25rem;  /* 36px */
 
}

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap');

body {
  width: 100%;
  margin: 0px;
 font-family:  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro" ,"メイリオ", "Noto Sans JP", Meiryo,sans-serif ;
  font-size:16px;
  background:#efefef;
}
.container {
  max-width: 1200px;
  margin: 20px auto 0;
  background:#fff;
  padding:30px 50px;
}
.container p,.container li{
  font-size:1.125rem;
  line-height:1.7;
}
.container p{
  margin-bottom:30px;
}

.container a{
  color:#fd5102;
  text-decoration:none;
}
.keyVis img{
width:100%;
}
h2.head-1{
 font-size: 2rem;  /* 20px */
  text-align:center;
  margin-top:50px;
}
.author{
display:flex;
  justify-content: space-between;
}
.author div{
width:380px
}
.author .author_name{
font-weight:bold;
font-size: 1.5rem; 
margin-bottom:15px;
}
.author .author_name a{
font-size: 1rem;

}
.author .author_prof{
font-size: 1rem;
}
.bookContent{
display:flex;
  justify-content: space-between;
}

.bookContent div{
width:48%
}
.bookContent p{
  font-size: .875rem;
}
.bookContent .chapter{
font-weight:bold;
  padding:5px;
  margin-bottom:3px;
  font-size: 1rem;
}

.bookContent .chapter.ch-1{
background:#f5e5e5;
}
.bookContent .chapter.ch-2{
background:#edf5f5;
}
.bookContent .chapter.ch-3{
background:#e4edbf;
}
.bookContent .chapter.ch-4{
background:#faecd0;
}
.bookContent .chapter.ch-5{
background:#dfede2;
}
.bookContent .chapter.ch-6{
background:#ebe3f0;
}
.bookContent .chapter.ch-7{
background:#ede5c2;
}
.bookContent .chapter.ch-8{
background:#e4e7f4;
}
.content-btn{
display:flex;
margin:20px auto 80px;
align-items: center;
  justify-content: center;
}
.content-btn div.img{
width:100px;
margin-right:30px
}
.content-btn a{
background:#333;
color:#fff;
font-size: 1.5rem;     /* 18px */  
padding:10px 25px;
 border-radius:50px; 
}

.buy{
display:flex;
justify-content: space-around;
align-items:center;
background:#efefef;
  padding:30px;
}
.buy div.text{
width:75%
}
.buy h2{
margin-bottom:40px;
}
.buy .img{

  height:250px;
}
.buy .img p{
  margin:0;
}
.buy .img img{
  height:250px;
  margin-bottom:0;
}
.buy a.btn{
background:#000;
  font-size: 2.25rem;
  color:#fff;
  padding:20px 100px;
  border-radius:50px;
}

.footer{
background:#000;

}
.footer div {
  max-width: 1300px;
  margin: 20px auto 0;
  padding:30px 20px;
  display:flex;
  color:#fff;
  justify-content: space-between;
}
.footer div p{
font-size: .75rem;   /* 12px */
  font-family:"Lexend Deca", "Helvetica";
}
.footer div a img{
width:40px;
}
.pc{
display:block;
}


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

  margin: 20px auto 0;
  background:#fff;
  padding:10px 20px 30px;
}  
 
.container p,.container li{
  font-size:1rem;
  line-height:1.7;
} 
.pc{
display:none;
}
 h2.head-1{
 font-size: 1.5rem;  /* 20px */
} 
 
.footer  {
  width: 100%;
  padding:20px 0px;
}  
.footer div {
  width: 100%;
  padding:0;
  margin:0;
  justify-content: space-around;
  }

.bookContent .chapter{
font-weight:bold;
  padding:5px;
  margin-bottom:3px;
  font-size: 1rem;
}  
.author{
display:flex;
  justify-content: normal;
  flex-direction: column;
}
.author div{
width:100%;
}  
.author div img{
width:75%;
  margin:0 auto;
}  
  
  .bookContent{
display:flex;
  justify-content: space-between;
  flex-direction: column;
}
.bookContent div{
width:100%
}  
.buy{
 flex-direction: column-reverse; 
   padding:30px 10px;
  text-align:center;
  }  
.buy h2 {
    margin-bottom: 20px;
}  
 .buy a.btn{
background:#000;
  font-size: 1.125rem;
  color:#fff;
  padding:20px 30px;
  border-radius:50px;
}
.buy div.text {
    width: 100%;
   font-size: 1.25rem;  /* 20px */
}  
  .special-image{
  width:100%;
  }  
  
.content-btn div.img{
width:70px;
margin-right:10px
}
.content-btn a{
background:#333;
color:#fff;
font-size: 1.25rem;     /* 18px */  
padding:10px 25px;
 border-radius:50px; 
}  
}

.howto h3{
 font-size: 1.5rem;  /* 24px */
 color:#2e465b;
}
.howto h3 span{
  font-size: 1.125rem;  /* 24px */
  background:#fd5102;
  color:#fff;
  padding:3px 8px;
}
}

@media screen and (max-width : 800px ){
  .buy a.btn{
  font-size: 1rem;
} 
}
@media screen and (max-width : 500px ){
  .buy a.btn{
  font-size: .875rem;
} 
}


/*****************************************/
/* スペシャルコンテンツ   */
/*****************************************/

h1.special{
border-bottom:3px solid #ccc;
  padding:20px 0;

}

div.special1,
div.special2,
div.special3{
display:flex;
  justify-content: space-around;
    padding:40px 0;
}
div.special1{
  border-bottom:3px solid #ccc;
}
div.special1 div,
div.special2 div{
width:48%;
}

div.special1 div h2,
div.special2 div h2{
  font-size: 2rem;
}

div.special1 div h2 span,
div.special2 div h2 span{
display:inline-block;
  color:#fff;
  background:#fd5100;
  padding:5px 10px;
  font-size: 1rem; 
  margin-bottom:15px;
}
.btn_special a{
background:#333;
  color:#fff;
  font-size: 1.125rem; 
  padding:20px 40px;
  border-radius:50px;
}
.btn_special{
  margin-top:50px;
}
div.special2-1{
  padding-right:20px;
}
div.special2-3{
  border-left:2px solid #ccc;
  padding-left:30px;
}


form input{
padding:10px;
  margin-top:5px;
  border: 2px solid #666;
  border-radius: 5px;
  font-size: 1rem;     /* 16px */
}
form fieldset{
margin-top:40px!important;
  max-width:650px!important;


}
form fieldset div > label{
font-weight:bold;

}
form .actions input{
margin-top:30px;
  background:#000;
  color:#fff;
  padding:10px 30px;
  border-radius:5px;
  border:0;
}
form ul.hs-error-msgs{
list-style-type:none;
  color:red;
   font-size: .875rem;  /* 14px */
  padding-left:0;
}
form ul.hs-error-msgs li{
   font-size: .875rem;  /* 14px */
}
form .legal-consent-container .hs-richtext p{
  font-size: .875rem;  /* 14px */
  }
form .legal-consent-container .inputs-list{
  font-size: .875rem;  /* 14px */
  padding-left:0;
  list-style-type:none;
  }
form .legal-consent-container .inputs-list li p{
  font-size: .875rem;  /* 14px */
  padding-left:0;
  vertical-align:middle;
  }
form .hs-form-required{
 color:red;
}
form .hs-field-desc{
margin:10px 0;
}
form .inputs-list {
  list-style-type:none;
  margin-left:0;
  padding-left:0;
}


@media screen and (max-width : 800px ){
div.special1, div.special2, div.special3 {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    flex-direction: column;
}
div.special1 div,
div.special2 div{
width:100%;
}
div.special2-1{
  padding-right:0px;
   border-bottom:3px solid #ccc;
}
div.special2-3{
  border-left:0;
  padding-left:0px;
}  
.btn_special a{
background:#333;
  color:#fff;
  font-size: 1rem; 
  padding:20px 20px;
  border-radius:50px;
}

}




/***************************************************/
/* スペシャルコンテンツ - Youtube まるわかりTips動画  */
/***************************************************/

.bookContent.video{
display:flex;
  justify-content: space-between;
  flex-direction: column;
}

.bookContent.video div{
width:100%
}

.bookContent.video h2{
font-size: 1.25rem; 
  padding:10px 0 10px 15px;
}
.bookContent.video h3{
 font-size: 1rem;
 padding:0px 0 0px 15px;
}
.bookContent.video li {
 font-size: 1rem;
}
.bookContent.video li a{
margin-left:10px;
}
.bookContent.video li a:link{
margin-left:10px;
}
.bookContent.video li span.add{
background:#fd5100;
  margin-left:10px;
  font-size: .875rem;  /* 14px */
  color:#fff;
  padding:3px 5px;
}
.bookContent.video li span.new{
background:red;
 margin-left:10px;
 font-size: .875rem;  /* 14px */
  color:#fff;
  padding:3px 5px;
}
.bookContent p{
  font-size: .875rem;
}




/***************************************************/
/* スペシャルコンテンツ - アップデート  */
/***************************************************/

.bookContent.video.update ul li{
margin-bottom:10px;
}



/***************************************************************/
/* 初版無料ダウンロードページ    */
/***************************************************************/

.book-main{
margin:-50px -50px 20px;
padding:50px;
background-image:url(https://4542895.fs1.hubspotusercontent-na1.net/hubfs/4542895/book/background2.png);
  background-color:rgba(255,255,255,0.4);
background-blend-mode:lighten;
  
}
.book-main h1{
font-size:40px;
  color:#333;
  line-height:1.4;
  text-align:center;
   margin:0 0 10px;
  padding:0;
}
.book-main h1 span{
font-size:42px;

}
.book-main h1 sup{
vertical-align: top;
position: relative;
top: 1em;
}
.book-main p{
font-size:14px;
 margin:0 0 30px;
 text-align:right;
}
.book-main-2clm{
display:flex;
}
.book-main-2clm > div{
width:50%;
text-align:center;
padding:0 50px;
}

.head-1 span {
background:linear-gradient(transparent 50%, #ffcc66 0%);
  font-size:2.5rem;
}

form .hsfc-DataPrivacyField {
font-size:14px;
}
ul.book-points {
  list-style-type: none;
  margin-top:50px;
  margin-left:30px;
}
ul.book-points li {
  position: relative;
  margin-bottom:8px;
  font-size:1.5rem;
}
ul.book-points li::after {
  content: '';
  display: block;
  position: absolute;
  top: .5em;
  left: -1.5em;
  width: 16px;
  height: 8px;
  border-left: 5px solid #58bd7c;
  border-bottom: 5px solid #58bd7c;
  transform: rotate(-45deg);
}
.merit ol {

}
.merit ol li{
margin-bottom:25px;
}
.merit ol li span{
font-size:20px;
  font-weight:bold;
}
.merit ol li span {
background:linear-gradient(transparent 50%, #f5c8cb 0%);
  font-size:1.5rem;
}

.book-review{
margin:20px -50px;
padding:50px;
background:#fff7e6;
  
}

.book-review-2clm{
display:flex;
}
.book-review-2clm h3{
margin-top:0;
}
.book-review-2clm p{
margin:0;
}
.book-review-2clm ul {
padding-left:0;
}
.book-review-2clm ul li{
list-style-type:none;
  background:#fff;
  padding:25px;
  margin-bottom:25px;
  border-radius:25px;
}

@media screen and (max-width : 800px ){
.book-main{
margin:20px 0px;
  padding:20px;
}
.book-main h1{
font-size:36px;
  color:#333;
  line-height:1.4;
}
.book-main h1 span{
font-size:38px;

}
.book-main-2clm{
display:flex;
  flex-direction:column;
  align-items: center;
}  
.book-main-2clm > div{
width:100%;
text-align:center;
  padding:0 20px;
} 
.book-main-2clm > div > img{
width:80%;
}  
.book-main-2clm div h1 {
margin-top:30px;
}  
.book-dl  h2.head-1 span{
 font-size:2.0rem; 
  }
.book-review{
margin:20px 0px;

} 
ul.book-points {
  margin-left:0px;
}  
ul.book-points li {
  font-size:1.3rem;
}  
.book-review{
margin:20px 0px;
padding:20px;
background:#fff7e6;
 
}  
.book-review ul{
margin-left:0;
  padding-left:0;
}  
.merit ol li span{
font-size:18px;
  font-weight:bold;
}    
  .buy .text h2{
  font-size:18px;
    padding-bottom:15px;
  }

}


@media screen and (max-width : 500px ){
.book-main h1{
font-size:20px;
  color:#333;
  line-height:1.4;
}
  .book-main h1 span{
font-size:20px;

}
  .pc{
  display:none;
  }
}