@charset "utf-8";

/* 共通 */
a {transition: .2s;}
a:hover {opacity:.6;}
#book h2,#book h3,#book p,#book table tr{text-align: left;}


/* header */
#book header h1 img{width: 13%; margin-left: 16rem;}
#book header h1 img.kansyo{width: 7%; margin-left: 8rem;}
#book header {
	position: fixed;
	width: 100%;
    top:0;
    left: 0;
	padding: 5rem 0 0.5rem;
	z-index: 1000;
   }

@media only screen and (max-width:640px){
    #book header h1 img{width: 30%; margin: 0 auto;}
    #book header h1 img.kansyo{width: 15%; margin: 0 auto;}
    #book header {
	position: fixed;
	width: 100%;
    top:0;
    left:0;
	padding: 1rem 0 0.5rem;
	z-index: 1000;
   }  
}


/* main共通 */
#book .main{
    display: flex; 
    justify-content: flex-end; 
    margin-top: 150px;
}
#book .hi{margin-top: 200px;}
#book .main_img{
    width: 50%; 
    height: 100%; 
    position: fixed; 
    top:0; 
    left: 1%; 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: center; 
    align-content: center;
}
#book .main_img img{width: 63%; box-shadow: 0 5px 7px 0 rgba(3,3,3,.12), 0 5px 7px 0 rgba(3,3,3,.22);}
#book .main_title h2{line-height: 1.3; margin-top: 20px;}
#book .oarai .main_title h2{margin-top: 50px;}
#book .main p{margin-top: 20px;}

@media only screen and (max-width:640px){
    #book .main{display: block;  margin-top: 50px;}    
	#book .hi{margin-top: 70px;}
    #book .main_img{
    width: 100%; 
    height: 100%; 
    position: static; 
    top:0; 
    left: 0; 
    display: block; 
}
    #book .main_img img{width: 80%;}
    #book .oarai .main_img img{margin-top: 20px;}
    #book .main_title h2{line-height: 1.15; margin-top: 10px;}
}


/* contents共通 */
#book .main .contents{width: 50%;}
#book .contents img{width: 100%; border-radius: 10px; margin: 20px 0;}
#book hr{margin-top: 100px;}
#book hr.top{margin: 30px auto 50px;}
#book .contents .narabi{display: flex; justify-content: space-between; }
#book .contents .narabi img{width: 49%;}

@media only screen and (max-width:640px){#book hr.top{margin: 30px auto 30px;}}


/* scene */
#book .main .contents .slick-dots li:hover button, #book .main .contents .slick-dots li.slick-active button {background: none;}

@media only screen and (max-width:640px){
    #book .main .contents{
        width: 90%; 
        overflow-wrap: anywhere;  
        margin: 0 auto;
    } 
    #book hr{margin-top: 50px;}
    #book .contents .narabi{display: block; margin: 20px 0 0;}
    #book .contents .narabi img{width: 100%; margin: 0;}
}


/* naiyo */
#book .contents .naiyo{margin-top: 50px;}
#book .contents .naiyo h3{margin-bottom:-8px; font-weight: bold; line-height: 1.4;}
#book .contents h3.sub{font-size: 1rem; color: #909090; padding:10px 0;}


@media only screen and (max-width:640px){
    #book .contents .naiyo h3{line-height: 1.35;}
    #book .contents h3.sub{line-height: 3;}
}


/* summary */
#book table th{text-align: left;}
#book table td{text-align: left; padding-left: 10px;}
#book .link{margin: 50px auto; width: 100%;}
#book .link a {
    text-decoration: none; 
    transition: .2s ease-in-out; 
    color: #231815;
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: 400px;
    font-weight: 500;}
#book .link a.base {
    color: #fff;
    background: #231815;
    width: 200px;
    padding: 20px 0 20px 20px;
    border-radius: 10px;}
#book .link a.top {
    color: #fff;
    background: #231815;
    width: 150px;
    padding: 20px 0 20px 20px;
    border-radius: 10px;}
#book .link a:hover {opacity:.6;}
#book .link a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 5rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-10%) rotate(45deg);
}
#book .link a:hover:after {right: 4rem;}
#book .link a.base:after {right: 3rem;}
#book .link a.base:hover:after {right: 2rem;}
#book .link a.top:after {right: 2.5rem;}
#book .link a.top:hover:after {right: 2rem;}

@media only screen and (max-width:640px){
    #book .summary_contents{display: block;}
    #book .summary_contents table{width: 100%;}
    #book .link{width: 100%; margin: 0 auto; padding: 20px 0;}
    #book .link a {
    text-decoration: none; 
    transition: .2s ease-in-out; 
    color: #231815;
    position: relative;
    display: flex;
    justify-content: left;
    width: 100%;
    padding: 0 15px 0 0;
    font-weight: 500;}
    #book .link a.base,#book .link a.top {
    color: #fff;
    background: #231815;
    width: 90%;
    padding: 20px 0 20px 20px;
    border-radius: 10px;}
    #book .link a:after {right: 2rem;}
    #book .link a:hover:after {right: 1rem;}
}


/* footer */
#book footer{padding:50px 0 10px 280px;}

@media only screen and (max-width:640px){
#book footer{padding:30px 0 10px;}
}