@charset "UTF-8";
@import url("/cnt_kids/font-awesome/css/font-awesome.min.css");

/* -----------------------------------
    汎用クラス
   ----------------------------------- */
* {
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Verdana, "メイリオ", Meiryo, sans-serif;
}	

body {
	color: #555555;
	line-height: 1.8;
	text-align: justify;
	text-justify: inter-ideograph;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-feature-settings: "palt";
}
input,
select,
textarea,
button {
	font-family: inherit;
	font-size: inherit;
}

.mt-0px { margin-top: 0px !important; }
.mt-5px { margin-top: 5px !important; }
.mt-8px { margin-top: 8px !important; }
.mt-10px { margin-top: 10px !important; }
.mt-15px { margin-top: 15px !important; }
.mt-20px { margin-top: 20px !important; }
.mt-30px { margin-top: 30px !important; }
.mt-40px { margin-top: 40px !important; }
.mt-50px { margin-top: 50px !important; }
.mt-70px { margin-top: 70px !important; }
.mb-10px { margin-bottom: 10px !important; }
.mb-20px { margin-bottom: 20px !important; }
.mb-30px { margin-bottom: 30px !important; }
.mb-50px { margin-bottom: 50px !important; }
.ml-10px { margin-left: 10px !important; }
.ml-20px { margin-left: 20px !important; }
.ml-50px { margin-left: 50px !important; }
.mr-10px { margin-right: 10px !important; }
.mr-20px { margin-right: 20px !important; }
.pl-30px { padding-left: 30px !important; }
.plpr-10px { padding-left: 10px !important; padding-right: 10px !important; }

.width1em { width: 1em !important; }
.width5em { width: 5em !important; }
.width7em { width: 7em !important; }
.width8em { width: 8em !important; }
.width9em { width: 9em !important; }
.width10em { width: 10em !important; }
.width15em { width: 15em !important; }
.width20em { width: 20em !important; }
.width25em { width: 25em !important; }
.width30em { width: 30em !important; }
.width40em { width: 40em !important; }
.width50em { width: 50em !important; }
.width15per { width: 15% !important; }
.width30per { width: 30% !important; }
.width50per { width: 50% !important; }
.width70per { width: 70% !important; }
.width80per { width: 80% !important; }
.width100per { width: 99% !important; }
.width-auto { width: auto !important; }
@media screen and (max-width: 640px) {
.width15per { width: 100% !important; }
.width30per { width: 100% !important; }
.width50per { width: 100% !important; }
.width70per { width: 100% !important; }
.width80per { width: 100% !important; }	
}

.text-large{
	font-size: 200%;
	font-weight: bold;
}
.text-small{font-size: 85%;}
.text-bold{font-weight: bold;}

.text-left{text-align: left !important}
.text-right{text-align: right !important}
.text-center{text-align: center !important}
.text-sub{
	font-size: 75.5%;
	vertical-align: bottom;
	position: relative;
}

.text-red{color: #e70021}

.rotate90{
	display: inline-block;
	transform: rotate(90deg);}

.bg-lightGreen{background-color: #F1FFC9 !important}
.bg-lightOrange{background-color: #FFE5AF !important}
.bg-lightGray{background-color: #f3f3f3 !important}

.margin-auto{
	margin-left: auto !important;
	margin-right: auto !important;
}
.display-block{display: block!important}
.display-inlineblock{display: inline-block}

/* --- Clear Fix ------------- */
.clearfix:before, .clearfix:after {
	display: table;
	content: " ";
}
.clearfix:after {clear: both;}
.clearfix {overflow: hidden;}
*, *::after, *::before {box-sizing: border-box;}

a:link,a:visited{color: #008040;}
a:hover { 
	color: #e50020;
	transition: all 0.2s linear; }

img{width: 100%}
.img-pc{display: block!important}
.img-sp{display: none !important}
.br-pc{display: inline !important}
.br-sp{display: none !important}
span.tb-space{display: inline !important}
@media screen and (max-width: 640px) {
.img-pc{display: none !important}
.img-sp{display: block!important}
.br-pc{display: none !important}
.br-sp{display: inline !important}	
span.tb-space{display: none !important}
}


ruby rt {
  position: relative;
  top: 0;
}

/*---------------------------------------------
	メインコンテンツ
  ---------------------------------------------*/
main{overflow: hidden}
#wrapper {
	min-width: 320px;
	overflow: hidden;
}
.container-flex{
	display: flex;
	justify-content: space-between;
}
.container-flex-center{
	display: flex;
	justify-content: center !important;	
}
.container-flex-right{
	display: flex;
	justify-content: flex-end !important;
}
.align-items-end{ align-items: flex-end !important}
.align-items-center{ align-items: center !important}
.container-center{
	justify-content: center !important;
	display: block !important;
}
.flex-basis {flex-basis: 100%;}
.flex-wrap {flex-wrap: wrap;}
@media screen and (max-width: 640px) {
.container-flex{display: block;}	
}

.image-small{width: 150px}
.image-small-2{width: 180px}
.image-half{width: 50%}
@media screen and (max-width: 640px) {
.image-half{width: 80%}
}
@media screen and (max-width: 480px) {
.image-small{width: 100px}	
.image-small-2{width: 140px}		
}


/*---------------------------------------------
	ヘッダー
  ---------------------------------------------*/
@media screen and (min-width: 768px) {
#header {height: 65px;}
}
/* ----- メニューボタン ----- */
#btn-menu {
	position: absolute;
	z-index: 10;
	width: 65px;
	height: 65px;
	top: 0;
	right: 0;
	background-color: #e50020;
	transition: background-color .2s linear;
}
#btn-menu.is-on {
	background-color: #7fbe26;
	position: fixed
}
#btn-menu button {
	border: none;
	background-color: transparent;
	cursor: pointer;
}
#btn-menu:after {
	content: "";
	position: absolute;
	z-index: 1;
	display: block;
	width: 20px;
	height: 2px;
	top: calc(50% - 12px);
	right: 50%;
	margin-right: -10px;
	background-color: #fff;
	-moz-transition: -moz-transform .3s ease-out, top .3s ease-out, width .3s ease-out;
	-webkit-transition: -webkit-transform .3s ease-out, top .3s ease-out, width .3s ease-out;
	transition:  transform .3s ease-out, top .3s ease-out, width .3s ease-out;
}
#btn-menu button:before {
	content: "";
	position: absolute;
	z-index: 1;
	display: block;
	width: 20px;
	height: 2px;
	top: calc(50% - 2px);
	right: 50%;
	margin-right: -10px;
	background-color: #fff;
	-moz-transition: width .3s ease-out, right .3s ease-out;
	-webkit-transition: width .3s ease-out, right .3s ease-out;
	transition: width .3s ease-out, right .3s ease-out;
}
#btn-menu button:after {
	content: "";
	position: absolute;
	z-index: 1;
	display: block;
	width: 20px;
	height: 2px;
	top: calc(50% + 8px);
	right: 50%;
	margin-right: -10px;
	background-color: #fff;
	-moz-transition: -moz-transform .3s ease-out, top .3s ease-out;
	-webkit-transition: -webkit-transform .3s ease-out, top .3s ease-out;
	transition: transform .3s ease-out, top .3s ease-out;
}
#btn-menu.is-on:after {
	width: 20px !important;
	top: calc(50%);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#btn-menu.is-on button:before {
	width: 0 !important;
	right: 47px;
}
#btn-menu.is-on button:after {
	width: 20px !important;
	top: calc(50%);
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


@media screen and (min-width: 768px) {	
#btn-menu:hover{background-color: #7fbe26;}	
#hamburger-menu nav {top: 0px;}	
}
@media screen and (max-width: 768px) {
#btn-menu {
	width: 50px;
    height: 50px;
}	
}

/* パネルメニュー*/
#btn-panel{position: relative;	}
#btn-panel:before{
	content: "";
	background-image: url(/cnt_kids/img/common/menu-book-bg.png);
	background-repeat: repeat-x;
	background-position: center top;
	position: absolute;
    top: -17px;
	left: 0;
	width: 100%;
    height: 34px;
	background-size: 2.5% auto;
}
#btn-pane-inner{
	width: 910px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 50px
}
#btn-panel h2{
	font-size: 1.7em;
	text-align: center;
	margin-bottom: 30px;
	color: #4d4d4d
}
#btn-panel li {width: 31%;}
#btn-panel li a{
	color: #8b5423;
	background-color: #f7f2e5;
	padding: 20px;
	display: block;
	height: 100%
}
#btn-panel li a h3{
	border-bottom: 1px solid #8b5423;
	text-align: center;
	font-size: 1.15em;
	margin-bottom: 10px
}
#btn-panel li a h3:before{
	font-family: 'FontAwesome';
	content: "\f138";
	padding-right: 3px
}
#btn-panel li a:hover{
	background-color: #8b5423;
	color: #ffffff;
	border-radius: 10px;
}
#btn-panel li a:hover h3{border-bottom: 1px solid #ffffff;}
@media screen and (max-width: 900px) {	
#btn-pane-inner{width: 95%;}
}
@media screen and (max-width: 640px) {	
#btn-panel:before{background-size: 5% auto;}	
#btn-panel .container-flex{display: block}	
#btn-panel li{
	width: 80%;
	margin: 0px auto 20px;
}
}
@media screen and (max-width: 500px) {
#btn-panel h2{font-size: 1.45em;}
#btn-panel li a h3 {font-size: 1.1em;}	
}


/* -----------------------------------
    下層ページ　メニュー
   ----------------------------------- */
#lower-menu {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 40px;
	padding-bottom: 50px;
}
#lower-menu li {
	width: 33.3333%;
	text-align: center
}
#lower-menu li a {
	padding-bottom: 5px;
	text-align: center;
	color: #ffffff;
	font-size: 1.2em;
	line-height: 1.3;
	font-weight: bold;
	display: inline-block;
	background: linear-gradient(to bottom, #7fbe26 0%, #7fbe26 100%);
	background-position: left bottom 1px;
	background-repeat: repeat-x;
	background-size: 3px 3px;
}
#lower-menu li a span {
	width: 80px;
	display: block;
	margin: 2px auto 5px;
}
#lower-menu li#menu-active a, #lower-menu li a:hover {
	border-bottom: 2px solid #fff000
}
@media screen and (max-width: 960px) {
#lower-menu {width: 95%;}
}
@media screen and (max-width: 700px) {
#lower-menu {padding-top: 40px;}
}
@media screen and (max-width: 640px) {
.container-flex#lower-menu{display: flex;}	
#lower-menu{justify-content: center;}	
#lower-menu li {
	width: auto;
	border-left: none;
}	
#lower-menu li {
	padding-left: 0;
	padding-right: 0;
}
#lower-menu li:nth-child(2) {
	margin-left: 5%;
	padding-left: 5%;
	margin-right: 5%;
	padding-right: 5%;
	}	
#lower-menu li a span {width: 65px;}
#list-index li ul{margin-top: 20px}	
.block-fukidashi{
	justify-content: center;
	margin-top: 30px;
}
.block-image-character {width: 40%;}	
}
@media screen and (max-width: 500px) {
#lower-menu li a {font-size: 1em;}
}

/* もくじ */
#menu-mokuji-outer {
	background-color: #008040;
	width: 50px;
	margin-top: -12px;
	position: absolute;
	right: 0;
	border-radius: 6px 0 0px 6px;
	padding: 2em 0.9em;
	z-index: 1
}
#menu-mokuji-outer:hover {background-color: #8b5423}
.pc-side-nav-fixed {
	position: fixed !important;
	top: 0px;
}
#menu-mokuji-inner span {
	width: 60%;
	display: block;
	margin: 40px auto 60px;
}
#contetns-mokuji {
	background: linear-gradient(45deg, rgba(0,128,64,0.95) 0%, rgba(0,128,64,1) 100%);
	width: 0;
	height: 0;
	position: fixed;
	top: 0;
	right: 0;
	overflow: hidden;
	opacity: 0;
	-webkit-transition: width .5s linear, height .5s linear, opacity .3s linear .2s;
	transition: width .5s linear, height .5s linear, opacity .3s linear .2s;
	z-index: 100;
	overflow-Y: scroll;
}
#contetns-mokuji.is-on {
	width: 100%;
	height: 100vh;
	opacity: 1;
}
#contents-mokuji {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
#mokuji-left {width: 265px}
#mokuji-left h2{
	color: #fff000;
	text-align: center;
	font-size: 1.6em;
    margin-bottom: 10px;
    line-height: 1.2;
}
#mokuji-right {width: calc(100% - 350px)}
#book-mokuji{text-align: center}
#book-mokuji li a{
	color: #ffffff;
	font-size: 1.2em;
    font-weight: bold;
	margin-bottom: 20px;
    display: block;
}
#book-mokuji li#book-active img {height: 100%;}
#book-mokuji li a span{
	width: 70px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    line-height: 0;
}
#book-mokuji li a:hover{color: #fff000;}
#list-mokuji{margin-bottom: 50px}
#list-mokuji li h2{
	color: #fff000;
	font-size: 1.2em;
	margin-top: 15px;
}
#list-mokuji li h2:before{
	content: "▼";
	padding-right: 3px;
}
#list-mokuji li:first-child h2{margin-top: 0}
#list-mokuji li a {
	color: #ffffff;
	display: block;
	border-top: 1px solid #ffffff;
	padding: 10px;
}
#list-mokuji li a:hover, #list-mokuji li.mokuji-dropmenu span:hover {
	background-color: rgba(255, 255, 255, .2);
}
#list-mokuji li:last-child {
	border-bottom: 1px solid #ffffff;
}
#list-mokuji li.mokuji-dropmenu span {
	color: #ffffff;
	display: block;
	border-top: 1px solid #ffffff;
	padding: 10px;
	cursor: pointer
}
#list-mokuji li.mokuji-dropmenu#dropmenu-open {background-color: rgba(255, 255, 255, .2);}
#list-mokuji li.mokuji-dropmenu ul {display: none}
#list-mokuji li.mokuji-dropmenu#dropmenu-open ul {display: block}
#list-mokuji li.mokuji-dropmenu ul li a {border-top: 1px dotted rgba(255, 255, 255, .2);}
#list-mokuji li.mokuji-dropmenu ul li:last-child {border-bottom: none;}
#list-mokuji li a:before,
#list-mokuji li.mokuji-dropmenu span:before,
#list-mokuji li.mokuji-dropmenu#dropmenu-open span:before,
#list-mokuji li.mokuji-dropmenu#dropmenu-open span.mokuji-open:before,
#list-mokuji li.mokuji-dropmenu a:before {
	font-family: 'FontAwesome';
	content: "\f138";
	padding-right: 3px
}
#list-mokuji li.mokuji-dropmenu span.mokuji-open:before,
#list-mokuji li.mokuji-dropmenu#dropmenu-open span:before {
	content: "\f13a"
}
#list-mokuji li.mokuji-dropmenu ul li a:before {
	content: "?";
	padding-left: 1em
}
#contens-fukidashi {
	width: 70%;
	margin: 60px auto 0;
}
#icon-fukidashi {
	position: relative;
	background-color: #fff000;
	color: #008040;
	display: block;
	border-radius: 8px;
	font-size: 0.9em;
	line-height: 1.4;
	padding: 0.5em;
	text-align: center
}
#icon-fukidashi:before {
	content: "";
	position: absolute;
	bottom: -25px;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #fff000;
	z-index: 0;
}
#icon-denkikki {
	width: 70px;
	display: block;
	margin: 10px auto 0px;
}

#list-mokuji-left{
	margin-top: 80px;
	margin-bottom: 50px
}
#list-mokuji-left li a{
	padding: 0.5em 1em;
	display: block;
	color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 6px;
	margin-bottom: 15px;
}
#list-mokuji-left li:last-child a{
	margin-bottom: 0px;
}
#list-mokuji-left li#active a{
	border: 1px solid #fff000;
	color: #fff000}
#list-mokuji-left li a:hover {
	background-color: rgba(255, 255, 255, .2);
}
#list-mokuji-left li a:before {
    font-family: 'FontAwesome';
    content: "\f138";
    padding-right: 3px;
}

#sub-menu{
	border-top: 5px dotted rgba(255, 255, 255, .8);
    background-color: rgba(255, 255, 255, 0.15);
	height: 100vh;
	padding-top: 50px;
}
#inner-sub-menu{
	width: 940px;
	margin-left: auto;
    margin-right: auto;
}
#sub-menu li a {
	display: block;
	color: #ffffff;
    padding: 5px 10px;
}
#sub-menu li a:before {
    font-family: 'FontAwesome';
    content: "\f138";
    padding-right: 3px;
}
#sub-menu li a:hover,
#sub-menu li#sub-menu-active a{color: #fff000;}

/*もくじ修正版*/
#mokuji{
	position: absolute;
	top: 0;
	right: 1px
}
#menu-mokuji-btn{
	background-color: #008040;
    position: fixed;
    z-index: 10;
    width: 60px;
    height: 60px;
    top: 0;
    right: 0;
    transition: background-color .2s linear;
}
#menu-mokuji-btn.is-on {
	background-color: #7fbe26;
	position: fixed;
	z-index: 101;
}
#menu-mokuji-btn button {
	border: none;
	background-color: transparent;
	cursor: pointer;
}
#menu-mokuji-btn:after {
	content: "";
	position: absolute;
	z-index: 1;
	display: block;
	width: 20px;
	height: 2px;
	top: calc(50% - 12px);
	right: 50%;
	margin-right: -10px;
	background-color: #fff;
	-moz-transition: -moz-transform .3s ease-out, top .3s ease-out, width .3s ease-out;
	-webkit-transition: -webkit-transform .3s ease-out, top .3s ease-out, width .3s ease-out;
	transition:  transform .3s ease-out, top .3s ease-out, width .3s ease-out;
}
#menu-mokuji-btn button:before {
	content: "";
	position: absolute;
	z-index: 1;
	display: block;
	width: 20px;
	height: 2px;
	top: calc(50% - 2px);
	right: 50%;
	margin-right: -10px;
	background-color: #fff;
	-moz-transition: width .3s ease-out, right .3s ease-out;
	-webkit-transition: width .3s ease-out, right .3s ease-out;
	transition: width .3s ease-out, right .3s ease-out;
}
#menu-mokuji-btn button:after {
	content: "";
	position: absolute;
	z-index: 1;
	display: block;
	width: 20px;
	height: 2px;
	top: calc(50% + 8px);
	right: 50%;
	margin-right: -10px;
	background-color: #fff;
	-moz-transition: -moz-transform .3s ease-out, top .3s ease-out;
	-webkit-transition: -webkit-transform .3s ease-out, top .3s ease-out;
	transition: transform .3s ease-out, top .3s ease-out;
}
#menu-mokuji-btn.is-on:after {
	width: 20px !important;
	top: calc(50%);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#menu-mokuji-btn.is-on button:before {
	width: 0 !important;
	right: 47px;
}
#menu-mokuji-btn.is-on button:after {
	width: 20px !important;
	top: calc(50%);
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

@media screen and (min-width: 1000px) {
#contents-mokuji{width: 960px;}	
#menu-mokuji-inner span{width: 800px;}	
}
@media screen and (max-width: 940px) {
#inner-sub-menu{width: 95%;}	
}
@media screen and (max-width: 640px) {
#menu-mokuji-inner span {
	width: 95%;
	margin: 20px auto 30px;
}
#lower-menu li:first-child{border-left: none}
#lower-menu li:last-child {border-right: none}	
#list-mokuji li.mokuji-dropmenu span,
#list-mokuji li a {
	padding: 8px 10px;
}	
#menu-mokuji-outer {
	width: 36px;
	padding: 1em 0.6em;
}
#contents-mokuji {
	display: block;
	position: relative;
}
#mokuji-left, #mokuji-right {width: 100%}
#mokuji-right {
	padding-top: 15px;
	padding-bottom: 200px;
}
#mokuji-left h2{font-size: 1.4em;}	
#book-mokuji li#book-active {
	width: 230px;
	margin-left: auto;
	margin-right: auto;}
#list-mokuji li h2{
	font-size: 1em;
	margin-top: 15px;}	
#book-mokuji li a{margin-bottom: 10px;}	
#contens-fukidashi {
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	margin: auto;
	padding-bottom: 30px;
}
#list-mokuji-left{
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
	margin: auto;
}
#sub-menu{
	height: auto;
	padding-top: 25px;
	padding-bottom: 30px
}	
	
/*もくじ修正版*/
#mokuji #menu-mokuji-inner span {
	width: calc(100% - 80px);
	margin: 10px auto 10px 10px;
}	
}

/*---------------------------------------------
	テーブル
  ---------------------------------------------*/
.tbl-basic {
	width: 100%;
	font-size: 0.85em;
}
.tbl-basic th,
.tbl-basic td{
	padding: 1px 10px 2px;
	border: 1px solid #cecece;
}
.tbl-basic th{
	text-align: center;
	background-color: #f9f089
}
.tbl-cell-wh th{background-color: #ffffff}
td.no-wrap{white-space: nowrap !important;}

@media screen and (max-width: 640px) {
  .tbl-responsive .thead {
    display: none;
  }
  .tbl-responsive tr {
    width: 100%;
  }
  .tbl-responsive td {
    display: block;
    width: 100%;
	  padding-left: 3.5em;
	  text-indent: -3.5em
  }
  .tbl-responsive td:first-child {
	background-color: #f9f089;
	font-weight: bold;
	text-align: center;
  }
  .tbl-responsive td:before {
	content: attr(data-label);
	float: left;
	font-weight: bold;
	width: 3em;
	text-indent: -2.5em;
  }
}
/*---------------------------------------------
	aリンク
  ---------------------------------------------*/
a.link-arrow:after,
a span.link-arrow:after{
	font-family: 'FontAwesome';
	content: "\f0a9";
	padding-left: 3px
}
a.link-pdf:before{
	font-family: 'FontAwesome';
	content: "\f1c1";
	padding-right: 3px
}
a.link-youtube:before{
	font-family: 'FontAwesome';
	content: "\f16a";
	padding-right: 3px
}

/*---------------------------------------------
	フッター
  ---------------------------------------------*/
#footer img{width: auto}
#footer-custom{
	background-color: #7fbe26;
	position: relative;
	margin-top: 100px;
}
#footer-custom-inner{
	width: 940px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 60px;
	padding-bottom: 40px;
	text-align: center;
}
#footer-custom-inner:before{
	content: "";
	background-image: url(/cnt_kids/img/common/footer-image.svg);
	background-repeat: no-repeat;
	background-position: center center;
    position: absolute;
    top: -90%;
    left: 0;
    right: 0;
    margin: auto;
    width: 940px;
    height: 160px;
}
#footer-banner li {
	display: inline-block;
	width: 280px;
	margin-right: 20px
}
#footer-banner li a {display: block;}
#footer-banner li img{width: 100%!important}
#footer-link,#footer-link a{
	color: #ffffff;
	margin-left: 10px;
	margin-right: 10px;
}
@media screen and (max-width: 940px) {	
#footer-custom-inner,
#footer-custom-inner:before{width: 95%;}
}
@media screen and (max-width: 640px) {
#footer-custom-inner:before {top: -80%;}	
#footer-banner li {
	display: block;
	margin-left: auto;
    margin-right: auto;
	margin-bottom: 10px
}
}
@media screen and (max-width: 480px) {
#footer-custom{margin-top: 35px}	
#footer-custom-inner{
	padding-top: 30px;
    padding-bottom: 20px;
}		
#footer-custom-inner:before {height: 100px;}
#footer-link,#footer-link a{font-size: 0.95em}	
}

/*---------------------------------------------
	ボタン
  ---------------------------------------------*/
.container-btn{
	margin-left: auto;
    margin-right: auto;
    text-align: center;
}
a.btn-basic{
	border: 1px solid #8b5423;
	color: #8b5423;
	display: inline-block;
    text-align: center;
    border-radius: 4px;
	padding: 4px 10px;
}
a.btn-basic:hover{
	background-color: #8b5423;
	color: #ffffff;
}
a.btn-wide{
	font-size: 1.2em;
	padding: 6px 20px;
}
a.btn-green{
	color: #ffffff;
	background-color: #008040;
	display: inline-block;
    text-align: center;
    border-radius: 4px;
	padding: 2px 5px;
	font-size: 90%
}
a.btn-green:hover{
	background-color: #8b5423;
	color: #ffffff;
}

/* -----------------------------------
    リスト表示
   ----------------------------------- */
.dl-list,
.ul-list{
	margin: 20px 1em 10px;
	border: 1px solid #cecece;
	width: 40%;
	padding: 0.5em 1em 1em;
	border-radius: 6px;
}
.ul-list{
	width: auto;
	display: inline-block;
}
.dl-list dt{
	text-align: center;
	font-weight: bold;
	border-bottom: 1px solid #cecece;
	padding-top: 10px;
	padding-bottom: 5px;
	margin-bottom: 5px
}
.dl-list dd,
.ul-list li{
	padding-left: 1em;
    padding-right: 15px;
    text-indent: -0.5em;
}
.dl-list dd:before,
.ul-list li:before{
	content: "?"
}

ul.list-two {
	display: flex;
	flex-wrap: wrap
}
ul.list-two li{
	width: 45%;
}
ul.list-tree {
	display: flex;
	flex-wrap: wrap;
}
ul.list-tree li{
	width: 30%;
}
ul.list-four {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
ul.list-four li{
	width: 24%;
	margin-bottom: 15px;
}
.dl-list-wide{
	width: 90%;
	margin: 10px auto;
}
.dl-list-wide dt{
	font-weight: bold;
	border-bottom: 1px dotted #555555;
	margin-bottom: 3px;
	line-height: 1.4
}
.dl-list-wide dd{
	margin-bottom: 15px;
}

@media screen and (max-width: 860px) {
ul.list-tree li{width: 45%;}	
}
@media screen and (max-width: 640px) {
.dl-list{
	width: 100%;
	margin-left: auto;
	margin-right: auto}
ul.list-two li,
ul.list-tree li{width: 80%;}
ul.list-four li{width: 100%;}		
}

/* -----------------------------------
    囲みデザイン
   ----------------------------------- */
.container-frame{
	border: 2px solid #FFA400;
	border-radius: 5px;
	padding: 45px 10px 10px 10px;
	position: relative;
	z-index: 0;
}
.frame-title {
	background-color: #FFA400;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	color: #FFFFFF;
	font-size: 1.2em;
	font-weight: bold
}

.frame {
	margin-top: 20px;
	margin-bottom: 10px;
	border: 1px solid #cecece;
	padding: 1em;
	border-radius: 6px;
}

/* -----------------------------------
    ページトップ
   ----------------------------------- */
#page-top {
	position: fixed;
	bottom: 0px;
	right: 0px;
	opacity: 0;
	z-index: 5
}
#page-top:after {
	font-family: 'FontAwesome';
	content: "\f106";
	font-size: 2em;
	line-height: 50px;
	color: #FFFFFF;
}
#page-top.fade-in {
	background-color: #4d4d4d;
	opacity: 1;
	transition: opacity 1s;
	display: block;
	text-align: center;
	width: 50px;
	height: 50px;
	z-index: 10;
}
#page-top:hover {cursor: pointer;}


/* -----------------------------------
    ページャー
   ----------------------------------- */
.pager {
	margin: 2em 0;
	text-align: center;
}
.pager .cp_pagination {
	display: inline-block;
	margin-top: 2em;
	padding: 0 0.5em;
}
.pager .cp_pagenum {
	font-size: 1em;
	line-height: 50px;
	display: block;
	float: left;
	transition: 400ms ease;
	letter-spacing: 0.1em;
	color: #008040;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	margin: auto .5em;
	background-color: #FFFFFF;
}
.pager .cp_pagenum:before {
	content: "その";
	font-size: 0.7em;
	letter-spacing: -0.03em;
	padding-right: 2px
}
.pager .cp_pagenum:hover,
.pager .cp_pagenum.current {
	font-weight: bold;
	color: #ffffff;
	background-color: #008040;
	border-radius: 50%;
}
.pager .cp_pagenum:hover{
	animation: hover 1s infinite;
}

#prev-next-link{
	margin: 2em 0;
    text-align: center;
}
#prev-next-link ul{
	display: inline-block;
	margin-top: 2em;
	padding: 0 0.5em;
}
#prev-next-link li {
	display: inline-block;
	text-align: center;
	position: relative;
}
#prev-next-link li a {
	display: block;
	color: #fff;
	border: 1px solid transparent;
	height: 56px;
	line-height: 56px;
	border-radius: 100%;
	background-color: #008040;
	padding-left: 1em;
	padding-right: 1em;
}
#prev-next-link li.prev a {
	border-radius: 50px 0 0 50px;
	padding-left: 2em;
}
#prev-next-link li.next a{
	border-radius: 0 50px 50px 0;
	padding-right: 2em;
}
#prev-next-link li.prev a:before,
#prev-next-link li.next a:after{
	font-family: 'FontAwesome';	
	position: absolute;
    top: 0;
    line-height: 56px;
    color: #ffffff;	
}
#prev-next-link li.prev a:before {
	content: "\f053";
    left: 1em;
}
#prev-next-link li.next a:after {
	content: "\f054";
    right: 1em;
}
#prev-next-link li a:hover {
	background-color: #ffffff;
	color: #008040;
	animation: hover 1s infinite;	
}
#prev-next-link li.prev a:hover:before,
#prev-next-link li.next a:hover:after{
	color: #008040;
}
#prev-next-link li.two-row a{
	line-height: 1.2;
	text-align: left;
	padding-top: 8px;
}
@keyframes hover {
 0% {transform:translateY(0)}
 50% {transform:translateY(-5px)}
 100% {transform:translateY(0)}
}
@media screen and (max-width: 600px) {
#prev-next-link ul{
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}	
#prev-next-link li{width: 100%}	
#prev-next-link li.next{margin-top: 20px;}
#prev-next-link li a{
	text-align: left;
	font-size: 0.9em
}	
#prev-next-link li.prev a:before,
#prev-next-link li.next a:after{font-size: 0.9em}	
}
@media screen and (max-width: 500px) {
#prev-next-link li.sp-two-row a{
	line-height: 1.2;
}
}

/* -----------------------------------
    罫線
   ----------------------------------- */
hr{
	height: 8px;
	background-image: repeating-linear-gradient(45deg, #ccc 0, #ccc 1px, transparent 0, transparent 50%), repeating-linear-gradient(135deg, #ccc 0, #ccc 1px, transparent 0, transparent 50%);
	background-size: 8px 8px;
	border: none;
	margin-top: 50px;
}



/* -----------------------------------
    TELリンク
   ----------------------------------- */
span.tel-number a,
.tel-number a,
.tel-number{
	color: #000000 !important;
	text-decoration: none;
}



/* -----------------------------------
    開閉パネル
   ----------------------------------- */
.accbox {
	margin: 20px auto 0;
	width: 90%
}
.accbox label {
	display: block;
	padding : 7px 3em 7px 2em;
	font-weight: bold;
	background-color: #f8ef88;
	cursor : pointer;
	text-align: left;
	border-radius: 10px;
	position: relative;
	text-indent: -1em;
}
.accbox label:before {
	content: "Q. ";
	font-size: 1.2em;
}
.accbox label:after {
	font-family: 'FontAwesome';
	content: "\f078";
	position: absolute;
	right: 15px;
	top: 50%;
	color: #008040;
	font-size: 1.2em;
	line-height: 0;
	transition: all 0.5s ease;
	text-indent: 0em;
}
.cssacc:checked + label:after {
    transform: rotate(-180deg);
}
.accbox input {
    display: none;
}
.accbox .accshow {
	height: 0;
	margin-bottom: 20px;
	overflow-y: hidden;
	text-align: left;
	-webkit-transition: all 0.6s ease;
	transition: all 0.5s ease;	
}
.cssacc:checked + label {border-radius: 10px 10px 0px 0px;}
.cssacc:checked + label + .accshow {
	height: auto;
    opacity: 1;
    transition: all 0.6s ease;
    padding-top: 5px;
    padding-bottom: 5px;
}
.accshow p:before {
	content: "A. ";
	font-size: 1.2em;
	color: #008040;
	font-weight: bolder;
}
.accbox .accshow p {
	margin: 0px 15px 7px;
	line-height: 1.4;
	text-indent: -1.5em;
    padding-left: 1.5em;
	color: #008040;
	font-weight: bold
}

@media screen and (max-width:640px) {
.accbox {
	width: 100%;
	margin-top: 20px;
}	
}