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


.pc{
	display:none;
}
#ch02,#ch03{
	margin-top:30%;
}
header{
	background:#FFF100;
	display:table;
	
}
header h1 img{
	width:100%;
	vertical-align:middle;
}
header h1 {
	display:table-cell;
	width:75%;
	vertical-align:middle;
	padding-left:5%;
}
header > div{
	display:table-cell;
	width:20%;
	text-align:right;
}
#sp_menu{
	text-align:right;
	cursor:pointer;
	
}



#panel-btn{
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
}

#panel-btn-icon{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: #000;
  transition: .2s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background: #000;
  transition: .3s;
}
#panel-btn-icon:before{
  margin-top: -6px;
}
#panel-btn-icon:after{
  margin-top: 4px;
}
#panel-btn .close{
  background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after{
  margin-top: 0;
}
#panel-btn .close:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#panel-btn .close:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}







#sb-site .inner{
	padding:5%;
}

#sb-site img{
	max-width:100%;
}

#title_img{
	position:relative;
}
#title_img #link{
	position:absolute;
	right:0;
	bottom:15px;
	font-size:0.6rem;
	background:#FFF100;
	width:43%;
	border-radius:5px 0  0 5px;
}
#title_img #link a{
	display:block;
	padding:5%;
	color:#000;
	
}

#box_name h2{
	text-align:center;
	margin-bottom:8px;
}

#box_name {
    margin:10px 0 30px 0;
}
#sb-site nav{
	margin:20px 0 40px 0;
}
#sb-site nav ul{
	width:100%;
}
#sb-site nav ul li{
	width:33.3%;
	float:left;
	text-align:center;
}
#sb-site nav ul li img{
	width:80%;
}
.chapter_image{
	margin-bottom:5%;
}
#sb-site .chapter_icon{
	text-align:center;
}
#sb-site .chapter_icon img{
	width:20%;
}
#sb-site h3{
	margin:2% 0 6% 0;
	text-align:center;
}
#sb-site h3 img{
	width:90%;
}
#sb-site h4{
	margin-bottom:2%;
}

#box01 p{
	margin-bottom:5%;
}
#sb-site section{
	margin-bottom:20%;
}

#box02 p{
	margin-bottom:5%;
}
#box02 img{
	margin-bottom:5%;
}

#next{
	text-align:center;
	margin-bottom:10%;
}
#next img{
	margin-bottom:10px;
	width:65px;
}


#pagetop{
	border-top:1px solid #eee;
	border-bottom:1px solid #eee;
	width:112%;	
	margin-left:-6%;
	text-align:center;
	margin-bottom:6%;
	font-size:1rem;
}
#pagetop a{
	display:block;
	padding:6% 0;
	color:#333;
 position: relative;
 text-decoration:none;
 font-weight:bold;
}
#pagetop a:hover{
	text-decoration:none;
}

#pagetop  a::after{
 border-right: 3px solid #000;
 border-top: 3px solid #000;
 border-radius: 2px;
 content: "";
 margin: 0 0 0 10px;
 height: 8px;
 left: 18px;
 position: absolute;
 transform: rotate(315deg);
 -webkit-transform: rotate(315deg);
 top: 45%;
 width: 8px;
}


footer{
	text-align:center;
	padding:10px 0;
}
footer img{
	width:92px;
}

@media screen and (min-width: 569px){
.sp{
		display:none;
}
.pc{
	display:block;
}

#ch02,#ch03{
	margin-top:150px;
}

.top-padding{
	padding-top:0!important;
}

#sb-site .wrapper{
	width:1100px;
	margin:0 auto;
}


#sb-site .inner{
	padding:0;
}

#title_img #link{
	bottom:30px;
	font-size:1rem;
	background:#FFF100;
	width:360px;
	border-radius:10px 0  0 10px;
}
#title_img #link a{
	padding:10px 10px 10px 20px;
	color:#000;
}
#title_img a:hover{
	text-decoration:none;
	opacity:0.8;
}
	


#box_name{
	display:table;
    margin:20px 0;
}
#box_name h2{
	padding-right:30px;
	padding-left:20px;
	display:table-cell;
	vertical-align:middle;
}
#box_name h2 img{
	width:auto;
	vertical-align:middle;
}
#box_name p{
	font-family: "HGS明朝B","ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝","MS PMincho", "MS 明朝", serif;
	display:table-cell;
	border-left:#000 1px solid;
	padding-left:30px;
	line-height:1.5;
	white-space:nowrap;

}

.content_pc{
	width:1100px;
	position:relative;
}


#sb-site nav ul{
	width:100%;
}
#sb-site nav ul li{
	width:33.3%;
	float:left;
	text-align:center;
}
#sb-site nav ul li img{
	width:auto;
}

#sb-site .chapter_icon img{
	width:auto;
}
#sb-site h3 img{
	width:auto;
}


#next img{
	margin-bottom:20px;
	width:auto;
}


#sb-site h4 {
    overflow: hidden;
    text-align: center;
	font-size:1.2rem;
	margin-bottom:20px;
	letter-spacing:2px;
	font-weight:normal;
}

h4 span {
    display: inline-block;
    padding: 0 0.5em;
    position: relative;
}

h4 span:before,
h4 span:after {
    border-top: 1px dashed;
    content: "";
    position: absolute;
    top: 50%;
    width: 99em;
}

h4 span:before {
    right: 100%;
}

h4 span:after {
    left: 100%;
}

#menu_left{
	position:fixed;
	padding:20px;
	z-index:100;
	background:#FFFFFF;
	text-align:center;
}
#menu_left a{
	display:block;
	margin-bottom:40px;
}

#leftArea{
	width:800px;
	float:left;
}
#rightArea{
	width:200px;
	float:right;
	padding-top:20px;
}

#navi {
  width: 200px;
}

.fixed {
  position: fixed;
  top:20px;
}

footer{
	padding:20px 0;
}
footer img{
	width:auto;
}
