@charset "utf-8";


/*-- reset --*/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,strong, sub, sup, tt, var, legend, fieldset {margin: 0;padding: 0;}
img, fieldset {border: 0;}

/*img {max-width: 100%;height: auto;}*/

html>/**/ /*body img{width: auto;}	*/ /* ie8 */


/*--------------------------------------------
header/footer
 --------------------------------------------*/

/* clearfix */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
*+html .clearfix{ display:inline-block; } /* IE7 */
.clearfix { display: inline-block; }
.clearfix { display: block; }

header {
  width: 100%;
  margin:0 auto;
  padding-bottom: 4rem;
  background: #fff;
  border-bottom: 4px solid #d9d1bf;
}
.headerWrap {
  max-width:960px;
  width: 100%;
  margin:0 auto;
}
.pagewrap{width: 780px;margin: 0 auto;font-size:0.95em;}
.back_navi{
	background-image: url(../images/navi_back_l.png);
	background-repeat:repeat-x;
	background-position: center;}


/* fontsize change */
.fontM {font-size: 100%;}
.fontS {font-size: 80%;}
.fontL {font-size: 130%;}

.fontChangetext{display:none;}
#fontChange {
	float: left;
	margin:22px 0px 0px;
	padding:0px;
	background:url(../images/bg_fontsize.gif) left center no-repeat;
	padding-left:65px;
	}
#fontChange ul{margin-left:10px;}
#fontChange li {
	display: block;
	float: left;
	width: 30px;
	height: 30px;
	margin:0px 0px 0px 5px;
	padding: 0px;
	text-align: center;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	text-align: center;
	cursor: pointer;
}
#fontChange li#fontL {background:url(../images/font_l.gif) no-repeat left;}
#fontChange li#fontM {background:url(../images/font_m.gif) no-repeat left;}
#fontChange li#fontS {background:url(../images/font_s.gif) no-repeat left;}
#fontChange li.text {width: auto;float: left;display: block;color: #333333;background: #fff;border: none;}
#fontChange li#fontL:hover {background:url(../images/font_l_on.gif) no-repeat left;cursor: pointer;}
#fontChange li#fontM:hover {background:url(../images/font_m_on.gif) no-repeat left;cursor: pointer;}
#fontChange li#fontS:hover {background:url(../images/font_s_on.gif) no-repeat left;cursor: pointer;}
#fontChange li.text:hover {background: none;color: #000000;cursor: auto ;}
#fontChange li#fontL.active {background:url(../images/font_l_on.gif) no-repeat left;cursor: pointer;}
#fontChange li#fontM.active {background:url(../images/font_m_on.gif) no-repeat left;cursor: pointer;}
#fontChange li#fontS.active {background:url(../images/font_s_on.gif) no-repeat left;cursor: pointer;}


@media screen and (max-width: 640px) {

.pagewrap{width: 90%;margin: 0 auto;font-size:0.95em;}

.fontChangetext,#fontChange{
	display:none;	
}

/* このページのトップへを右寄せに */
#footer li.f_to_top{
	float:right !important;
    margin: 15px 0 0;
	width: 100%;
    text-align: right;
}

#footer li {
	border-left: 1px solid #ffffff !important;
	float:none !important;
}

.inline {
	text-align: center;
}
.inline li {
	display: inline-block;
}


}
@media screen and (max-width:768px){
  header {
    padding-bottom: 1.5rem;
  }
}


@media screen and (max-width: 560px) {

#footer p {
    padding-left: 15px !important;
}

.footerBtm{
	background:none !important;	
}

.f_tel::before {
  content: "\A" ;
  white-space: pre;
}

#footer .f_tel a{
	display:flex;
	font-size:100%;
}


}


.wrap_sns{
	display:none;	
}


/*--------------------------------------------
  header 
--------------------------------------------*/
#header {
    position: relative;
    height: 70px;
    display: flex;
    flex-wrap: nowrap;
    align-content: space-between;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}
#site-logo {
/*position: absolute;*//*margin:19px 0 10px 0;float:left;display:block;*/
    display: flex;
    align-items: center;
}
#site-logo a {font-size: 2.2em;text-decoration: none;color: #2D2C30;line-height:1.7;}
#site-logo .subtext{
  /*font-size: 1.2em;*/font-size: 0.9em;
    vertical-align: middle;
    padding-left: 0.5rem;
  }
#header-item{/*clear:both;margin-bottom: 10px;width:430px;float:right;*/}
#header-item .itemtitle{float:right;margin:auto;}
/*#header-item .searchbox{float:right;line-height:0;margin-top:22px;width:250px;}*/
#header-item form{float:right;}
#header-item input{margin:auto 0;}
#header-item {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    width:56%;
    }
#header-item .searchbox{
    margin-top: 0;
}
.sns_area{
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    width: 70px;
}

.wrap_sns{
	display:none;	
}

/* fontsize change */
.fontM {font-size: 100%;}
.fontS {font-size: 80%;}
.fontL {font-size: 130%;}

.fontChangetext{display:none;}
#fontChange {
	float: left;
	margin:22px 0px 0px;
	padding:0px;
	background:url(../images/bg_fontsize.gif) left center no-repeat;
	padding-left:65px;
    margin-right: 10px;
    margin-top: 0;
	}
#fontChange ul{margin-left:10px;}
#fontChange li {
	display: block;
	float: left;
	width: 30px;
	height: 30px;
	margin:0px 0px 0px 5px;
	padding: 0px;
	text-align: center;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	text-align: center;
	cursor: pointer;
}
#fontChange li#fontL {background:url(../images/font_l.gif) no-repeat left;}
#fontChange li#fontM {background:url(../images/font_m.gif) no-repeat left;}
#fontChange li#fontS {background:url(../images/font_s.gif) no-repeat left;}
#fontChange li.text {width: auto;float: left;display: block;color: #333333;background: #fff;border: none;}
#fontChange li#fontL:hover {background:url(../images/font_l_on.gif) no-repeat left;cursor: pointer;}
#fontChange li#fontM:hover {background:url(../images/font_m_on.gif) no-repeat left;cursor: pointer;}
#fontChange li#fontS:hover {background:url(../images/font_s_on.gif) no-repeat left;cursor: pointer;}
#fontChange li.text:hover {background: none;color: #000000;cursor: auto ;}
#fontChange li#fontL.active {background:url(../images/font_l_on.gif) no-repeat left;cursor: pointer;}
#fontChange li#fontM.active {background:url(../images/font_m_on.gif) no-repeat left;cursor: pointer;}
#fontChange li#fontS.active {background:url(../images/font_s_on.gif) no-repeat left;cursor: pointer;}


/* global navi */
#main-nav {clear:both;height:39px;margin:0;padding:0;display:none;position: relative;background:url(../images/navi_back.png) repeat-x;}
#main-nav li {margin: 0;padding: 0;list-style: none;float: left;position: relative;}
#main-nav li a span{display:none;}
#main-nav li a{height:39px;display: block; font-size:90%;}
#main-nav .nav_menu1 a{ width:110px;background:url(../images/navi_cc.png) 0 0 transparent;}
#main-nav .nav_menu2 a{ width:124px;background:url(../images/navi_cc.png) -110px 0 transparent;}
#main-nav .nav_menu3 a{ width:147px;background:url(../images/navi_cc.png) -234px 0 transparent;}
#main-nav .nav_menu4 a{ width:120px;background:url(../images/navi_cc.png) -381px 0 transparent;}
#main-nav .nav_menu5 a{ width:146px;background:url(../images/navi_cc.png) -501px 0 transparent;}
#main-nav .nav_menu6 a{ width:132px;background:url(../images/navi_cc.png) -647px 0 transparent;}
#main-nav .nav_menu1 a:hover,#main-nav .nav_menu1 a:focus{ background-position:0 -78px;}
#main-nav .nav_menu2 a:hover,#main-nav .nav_menu2 a:focus{ background-position:-110px -78px;}
#main-nav .nav_menu3 a:hover,#main-nav .nav_menu3 a:focus{ background-position:-234px -78px;}
#main-nav .nav_menu4 a:hover,#main-nav .nav_menu4 a:focus{ background-position:-381px -78px;}
#main-nav .nav_menu5 a:hover,#main-nav .nav_menu5 a:focus{ background-position:-501px -78px;}
#main-nav .nav_menu6 a:hover,#main-nav .nav_menu6 a:focus{ background-position:-647px -78px;}
#main-nav .nav_menu1 a.active{ background-position:0 -39px; position: initial !important;}
#main-nav .nav_menu2 a.active{ background-position:-110px -39px; position: initial !important;}
#main-nav .nav_menu3 a.active{ background-position:-234px -39px; position: initial !important;}
#main-nav .nav_menu4 a.active{ background-position:-381px -39px; position: initial !important;}
#main-nav .nav_menu5 a.active{ background-position:-501px -39px; position: initial !important;}
#main-nav .nav_menu6 a.active{ background-position:-647px -39px; position: initial !important;}


#main-nav .nav_menu1 ul li,#main-nav .nav_menu2 ul li,#main-nav .nav_menu3 ul li,#main-nav .nav_menu4 ul li,#main-nav .nav_menu5 ul li,#main-nav .nav_menu6 ul li{ background-image:none;  background-color:#fbfbfb;}

#main-nav .nav_menu1 ul li a,#main-nav .nav_menu2 ul li a,#main-nav .nav_menu3 ul li a,#main-nav .nav_menu4 ul li a,#main-nav .nav_menu5 ul li a,#main-nav .nav_menu6 ul li a{
  background-image:none;
  font-size:80%;
  padding: 8px;
  text-align: left;
  font-weight: normal;
  text-decoration:none;
  color:#1F1B1B;
  height:auto;
  width:200px;
}

#main-nav .nav_menu1 ul li a:hover,#main-nav .nav_menu1 ul li a:focus,
#main-nav .nav_menu2 ul li a:hover,#main-nav .nav_menu2 ul li a:focus,
#main-nav .nav_menu3 ul li a:hover,#main-nav .nav_menu3 ul li a:focus,
#main-nav .nav_menu4 ul li a:hover,#main-nav .nav_menu4 ul li a:focus,
#main-nav .nav_menu5 ul li a:hover,#main-nav .nav_menu5 ul li a:focus,
#main-nav .nav_menu6 ul li a:hover,#main-nav .nav_menu6 ul li a:focus{background: #FFFEEB;  z-index:100;}


#main-nav li ul{
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;

}

#main-nav li:last-child ul{
  left: -88px;
  width: 100%;
}
#main-nav li ul li{
  overflow: hidden;
  width: auto;
  height: 0;
  color: #fff;
  z-index:100;
}
#main-nav li:hover ul li{
  overflow: visible;
  height: auto;
  border-top: 1px solid #cdcdcd;
  border-left: 1px solid #cdcdcd;
  border-right: 1px solid #cdcdcd;
}
#main-nav li:hover ul li:first-child{border-top: 0;}
#main-nav li:hover ul li:last-child{border-bottom: 1px solid #cdcdcd;}


/*-----------------------------
　スマホ・タブレット版 ヘッダー
-------------------------------*/

@media screen and (max-width:768px) { 

#header-item{
	width:100%;
	text-align:center;
	}
#header-item .searchbox{
	width: 100%;
    margin: 5px auto;
    box-sizing: border-box;
    overflow: hidden;
}
#header-item form{float:right;}
#header-item input{margin:auto 0;}


/*大中小非表示*/
.fontChangetext,#fontChange{
	display:none;	
}

#site-logo {
/*    margin: 19px 0 20px 15px;*/
}

#header-item .searchbox{
	float:none;
}

#header {
    position: relative;
    display: block;
    height: 98px;
}

#site-logo {
    width: 70%;
}

#site-logo .subtext {
    font-size: 0.5em;
    }

.sns_area{
    width: 70px;
    position: absolute;
    top: 10px;
    right: 10px;
}

/*スマホ・タブレット用SNS*/

.wrap_sns {
    margin: 20px 0 0 0;
    display: table;
	float:left;
}

.head_sns{
	display: table-cell;
    vertical-align: middle;
    text-align: right;
}

.head_sns a img {
    font-size: 100%;
    font-weight: bold;
    padding: 0 5px;
    text-decoration: none;
}



}



@media screen and (max-width:560px) { 

#site-logo img {
    display: block;
    width:80px;
}

}


@media screen and (max-width:450px) { 

.wrap_sns {
    margin: 0 0 10px;
    display: block;
    clear: both;
    text-align: center;
    width: 100%;
}

.head_sns {
    display: block;
    text-align: center;
    margin: 0 auto;	
}


}



/*-----------------------------
　スマホ・タブレット版 メニュー
-------------------------------*/

.sp_nav{
	display:none;	
}

.navToggle{
	display:none;
}


@media (min-width: 769px){

.sp_nav {
    display: none!important;
}

}

@media screen and (max-width:768px) { 


.pagewrap{
	max-width: 768px;
	width:90%;
	margin: 0 auto;
	font-size:1em;
}


/*PC版メニュー非表示*/
#main-nav{
	display:none;	
}


/*ハンバーガーメニュー ここから*/

.navToggle {
    display: none;
    position: absolute;    /* bodyに対しての絶対位置指定 */
    right: 13px;
    top: 12px;
    width: 42px;
    height: 51px;
    cursor: pointer;
    z-index: 3;
    background: #65af5e;
    text-align: center;
}
 
.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 30px;
    border-bottom: solid 3px #eee;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 6px;
}
 
.navToggle span:nth-child(1) {
    top: 9px;
}
 
.navToggle span:nth-child(2) {
    top: 18px;
}
 
.navToggle span:nth-child(3) {
    top: 27px;
}
 
.navToggle span:nth-child(4) {
    border: none;
    color: #eee;
    font-size: 9px;
    font-weight: bold;
    top: 34px;
}


/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*ハンバーガーメニュー ここまで*/



/*スマホメニュー ここから*/

.sp_nav{
	width: 100%;
    display: none;
    position: absolute;
    top: 75px;
    left: 0;
    z-index: 10;
    background: #ffffff;

}

.sp_menu .sp_sub {
	display: none;
}

.sp_menu li {
    margin: 0;
	padding: 0;
	background: #65af5e;
	border-bottom:1px solid #ffffff;
	text-align:left;
}

.sp_menu p.sp_menutitle1,
.sp_menu p.sp_menutitle2{
	cursor: pointer;
	padding: 10px;
	margin:0;
	color:#ffffff;
}

/*メニュー2階層目*/
.sp_menu .sp_sub li {
    background: #d2e8d0;
	border-bottom: 1px solid #65af5e;
}

.sp_menu .sp_sub li p.sp_menutitle3{
	cursor: pointer;
	padding: 10px;
	margin:0;
	color:#333333;
}

/*リンク範囲を親要素と同じに*/
.sp_menu p.sp_menutitle1 a,
.sp_menu .sp_sub li p.sp_menutitle3 a{
	display: block;
}


/*プラスマイナス*/

.sp_menutitle2 span::before,
.sp_menutitle2 span::after{
	content: '';
	display: block;
	width: 15px;
	height: 3px;
	border-radius: 5px;
	background: #ffffff;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.sp_menutitle2 span::after{
	background: #ffffff;
	transform: translateY(-50%) rotate(90deg);
	transition: 0.5s;
}

.sp_menutitle2{
	transform: rotate(0);
	transition: 0.5s;
}

.sp_menutitle2 .active::after {
    transform: rotate(0);
    transition: 0.5s;
  }
  
  
/*リンクやじるし（＞）*/
.sp_menu li p.sp_menutitle1 a:after {
    display: block;
    content: "";
    position: absolute;
    right: 15px;
    width: 8px;
    height: 8px;
    margin: -15px 0 0 0;
    border-top: solid 3px #ffffff;
    border-right: solid 3px #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.sp_menu li p.sp_menutitle1 a{
	color:#ffffff;
	width:100%;
}


.sp_menu .sp_sub li p.sp_menutitle3 a:after {
    display: block;
    content: "";
    position: absolute;
    right: 15px;
    width: 8px;
    height: 8px;
    margin: -15px 0 0 0;
    border-top: solid 3px #65af5e;
    border-right: solid 3px #65af5e;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.sp_menu .sp_sub li p.sp_menutitle3 a{
	color:#333333;
}

/*閉じる*/
.sp_nav a.close {	
    text-align: center;
    background: #65af5e;
    color: #fff;
    text-decoration: none;
    padding: 10px 0;
    display: block;
    width: 100%;
}



}





/* footer */
.footer_border{clear: both; background:url(../images/footer_border.png) top center repeat-x;height: 6px; border: none;}

#footer {clear:both;color: #62616B;font-size: 80%;margin: 30px auto 0;position: relative;overflow: hidden;}
#footer p{clear:both;margin:10px;text-align:left;line-height:1.6;padding-left: 80px;}

#footer ul {float:left;left:50%;position:relative;margin:10px 0 5px 0;}
#footer li {float:left; margin: 0; list-style:none;left:-50%;position:relative; border-left:1px solid #dfdfdf;padding:0;}
#footer a {color: #1F1B1B;display: block;padding:5px 10px;text-decoration: none;font-size: 90%;}
#footer a:hover,#footer a:focus {text-decoration:underline;}

.footerBtm {
	background:url(../images/footer_hagkun.png) left top no-repeat;	
}


/*-----------------------------
　スマホ・タブレット版 フッター
-------------------------------*/


@media screen and (max-width:320px) {

.footerBtm p{

}


}




/* etc */
.reader-navi {left: -9000px;line-height: 120%;position: absolute;top: -9000px;}