/* 
 * jquery-drawer v3.1.0
 * Flexible drawer menu using jQuery, iScroll and CSS.
 * http://git.blivesta.com/drawer
 * License : MIT
 * Author : blivesta <design@blivesta.com> (http://blivesta.com/)
 */
/*  2016/05/01 changed by soso Nakajima */

 * { margin: 0; padding: 0; font-family: 'メイリオ', 'meiryo', 'ヒラギノ角ゴ Pro W3', 'hiragino kaku gothic pro', 'ms pgothic', 'sans-serif', 'Osaka', 'MS PGothic', 'arial', 'helvetica'; }

/* header block */
.hd1 { display: table-cell; color: #ffa; font-size: 0.8em; font-weight: bold; width: 15%; max-width: 200px; min-width: 100px; height: 40px; color: #770; overflow: hidden; vertical-align: top; padding: 0;}
.hd2 { display: table-cell; color: #fff; width: 35%; max-width: 300px; height: 40px; overflow: hidden;}
.hd3 { display: table-cell; color: #fff; font-size: 1em; font-weight: bold; background: #003900; color: #fff; width: 50%; height: 40px; overflow: hidden; vertical-align: middle; margin: 0;}
.hd1 a { display: block; width: calc(90% - 10px); padding: 5px 0; margin: -15px 5px; text-align: center; border:2px solid; border-color:#7f7 #272 #272 #7f7; background: rgba(127,255,127,0.4); border-radius: 4px;}
/*  Floating */
.blkl { float: left;}
.blkr { float: right;}
.clrb { clear: both;}


/*  li { margin-bottom: 20px; padding: 10px 0 10px 10px;}
  h2 { text-align: center; font-size: 1.5rem; margin-top: 5px;}
  .inner { width: 100%; max-width: 700px; margin: 20px auto 0;}
  .inner  p { margin-bottom: 40px; background-color: #bfb;} 
*/

#h-shell { position: fixed; top: 0; left:0; width: 100%; height: 40px;}
#header{ display: table; height: 40px; width: 100%; max-width: 1200px; margin: 0 auto;}
#shell { position: absolute; top: 0; width: 100%;}
#contents{ width: calc(100% - 20px); max-width: 1200px; background: #dfd; padding:40px 10px;}
.h1 {text-align: center; font-weight: bold; font-size: 2rem; margin-top: 20px;}
.foreword { margin: 10px 5%; line-height: 1.3; font-size: 0.8em; text-align: left; background-color: #eef; border: dotted #484 1px; padding: 10px;}
.dispsm { display: none;} 	/* display on phone */
.disppc { display: table-cell;}		/* display on PC */
.htov { display: table-cell;}

/************************ side bar menu style sheet ***********************************/
.slide-nav{position:fixed;z-index:2;top:0;overflow:hidden;width:16.25rem;height:100%;color:#222;background-color:transparent;}		/* 16.25rem=260px */
/* .slide-brand{font-size:1.5rem;font-weight:700;line-height:3.75rem;display:block;padding-right:.75rem;padding-left:.75rem;text-decoration:none;color:#222} */
.slide-menu{margin: 0; padding: 20px 0; list-style: none; background: rgba(225,255,225,0.5);}
/* .slide-menu-item{font-size:1rem;display:block;padding:.75rem;text-decoration:none;color:#222;} */
/* .slide-menu-item:hover{text-decoration:underline;color:#555;background-color:transparent} */
.slide-overlay{position:fixed;z-index:1;top:0;left:0;display:none;width:100%;height:100%;background-color:rgba(0,0,0,.2)}  /* slide  メニュー以外をクリックした時閉じる */
.slide-open .slide-overlay{display:block}
.slide--top .slide-nav{top:-100%;left:0;width:100%;height:auto;max-height:100%;-webkit-transition:top .6s cubic-bezier(.19,1,.22,1);transition:top .6s cubic-bezier(.19,1,.22,1)}
.slide--top .slide-open .slide-nav{top:0}
.slide--top .slide-button,.slide--top.slide-open .slide-button{right:0}
.slide-left .slide-nav{left:-16.25rem;-webkit-transition:left .6s cubic-bezier(.19,1,.22,1);transition:left .6s cubic-bezier(.19,1,.22,1)}
.slide-left .slide-button {left:0} .slide-left .slide-button, .slide-left.slide-open .slide-nav,.slide-left.slide-open .slide-navbar .slide-button{left:0}  /* ナビメニュー開閉 */
.slide-left.slide-open .slide-button{left:16.25rem}
.slide-right .slide-nav{right:-16.25rem;-webkit-transition:right .6s cubic-bezier(.19,1,.22,1);transition:right .6s cubic-bezier(.19,1,.22,1)}
.slide-right .slide-button,.slide-right.slide-open .slide-nav,.slide-right.slide-open .slide-navbar .slide-button{right:0}
.slide-right.slide-open .slide-button{right:16.25rem}
.slide-button{position:fixed;z-index:4;top:0; display:block;box-sizing:content-box;width:1rem;padding:6px .7rem 14px;-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);transition:all .6s cubic-bezier(.19,1,.22,1);-webkit-transform:translateZ(0);transform:translateZ(0);border:inset 2px #383;outline:0;background-color: #ff9; border-radius: 6px;}
.slide-button:hover{cursor:pointer;background-color: #ffb;}
.slide-button-icon{position:relative;display:block;margin-top:10px}
.slide-button-icon,.slide-button-icon:after,.slide-button-icon:before{width:100%;height:2px;-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);transition:all .6s cubic-bezier(.19,1,.22,1);background-color:#222}
.slide-button-icon:after,.slide-button-icon:before{position:absolute;top:-8px;left:0;content:' '}
.slide-button-icon:after{top:8px}
.slide-open .slide-button-icon{background-color:transparent}
.slide-open .slide-button-icon:after,.slide-open .slide-button-icon:before{top:0}
.slide-open .slide-button-icon:before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.slide-open .slide-button-icon:after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0}
.sr-only-focusable:active,.sr-only-focusable:focus{position:static;overflow:visible;clip:auto;width:auto;height:auto;margin:0}
.slide--sidebar,.slide--sidebar .slide-contents{background-color:#fff}
.size64 {color: #fff;} .size75 {color: #fff;}	/* for window size check */

/*************** under 640px **********************/
@media (max-width: 40em){
#header { margin: 0;}
.hd1 { margin: 10px 0; width: 20%;}
.hd1 a { margin: -5px 5px;}
.hd2 { display: none; width: 0}
.hd3 { width: 80%;}
.foreword { margin: 10px; padding: 5px;}
.dispsm { display: inline;} 	/* display on phone */
.disppc { display: none;}		/* display on PC */
.htov { display: block;}
}

/*************** over 920px **********************/
@media (min-width:57.5em){
.hd1 {margin-left: 0; font-size: 0.8em;}
.hd2 {width: 300px; z-index: 100;}
.hd3 {width: calc(85% - 300px)}
.slide-left #contents {margin-left: 200px; width: calc(100% - 220px);} /* body タグに slide-left を指定した時 */
.slide-right #contents {margin-right: 200px; width: calc(100% - 220px);} /* body タグに slide-right を指定した時 */
.slide-nav{box-shadow: 3px 0px 5px #473; font-size: 0.8em;}
.slide-button{display:none;visibility:hidden}
.slide-vbar .slide-nav{ display:block; position:fixed; width:12.5rem; height:100%;-webkit-transform:none;-ms-transform:none;transform:none;}
.slide-vbar.slide-left .slide-nav{ left:0;}
.slide-vbar.slide-left .slide-contents{margin-left:12.5rem}
.slide-vbar.slide-right .slide-nav{right: 0;}
.slide-vbar.slide-right .slide-contents{margin-right:12.5rem}
.slide-vbar .slide-container{max-width:48rem}
.size64 {color: #f00;}
}
/*************** over 1200px **********************/
@media (min-width:75em){
.slide-nav {margin-right: 0;}
.slide-left #contents {margin-left: calc(50% - 340px); width: 920px;} /*  */
.slide-right #contents {margin-left: calc(50% - 600px); width: 920px;} /*  */
.slide-vbar .slide-nav{ width:16.25rem; font-size: 1em;}
.slide-vbar.slide-left .slide-nav {left: calc(50% - 600px);}
.slide-vbar.slide-right .slide-nav {right: calc(50% - 600px);}
.slide-vbar.slide-left .slide-contents{margin-left:16.25rem}
.slide-vbar.slide-right .slide-contents{margin-right:16.25rem}
.slide-vbar .slide-container{max-width:60rem}
.size75 {color: #f0f;}
}
/* .slide--navbarTopGutter{padding-top:3.75rem} */
/* .slide-navbar .slide-navbar-header{border-bottom:1px solid #ddd;background-color:#fff} */
/* .slide-navbar{z-index:3;top:0;width:100%} */
/* .slide-navbar--fixed{position:fixed} */
/* .slide-navbar-header{position:relative;z-index:3;box-sizing:border-box;width:100%;height:3.75rem;padding:0 .75rem;text-align:center} */
/* .slide-navbar .slide-brand{line-height:3.75rem;display:inline-block;padding-top:0;padding-bottom:0;text-decoration:none} */
/* .slide-navbar .slide-brand:hover{background-color:transparent} */
/* .slide-navbar .slide-nav{padding-top:3.75rem; font-size: 0.6em;} */
/* .slide-navbar .slide-menu{padding-bottom:7.5rem} */

@media (min-width:57.5em){
/* .slide-navbar{height:3.75rem;border-bottom:1px solid #ddd;background-color:#fff} */
/* .slide-navbar .slide-navbar-header{position:relative;display:block;float:left;width:auto;padding:0;border:0} */
/* .slide-navbar .slide-menu-right{float:right} */
/* .slide-navbar .slide-menu li{float:left;} */
/* .slide-navbar .slide-menu-item{line-height:3.75rem;padding-top:0;padding-bottom:0} */
/* .slide-navbar .slide-button{display:none} */
/* .slide-navbar .slide-nav{position:relative;left:0;overflow:visible;width:auto;height:3.75rem;padding-top:0;-webkit-transform:translateZ(0);transform:translateZ(0)} */
/* .slide-navbar .slide-menu{padding:0} */
/* .slide-navbar .slide-dd-menu{position:absolute;width:16.25rem;} */
/* .slide-navbar .slide-dd-menu-item{padding-left:.75rem} */
}

	/* リスト全体をリンク領域に */
.slide-menu .slide-dd a { display: block; width: 100%; text-decoration: none; margin: -5px; padding-left: 10px;}
/*.slide-menu a:before {content:">"; color: #030; margin-right: 5px; font-weight: bold;}*/
.li-mark{text-indent: -15px;}		/* リスト行頭に">"マーク */
.li-mark>a:before{content:">"; color: #00b; margin-right: 5px; font-weight: bold;}
.li-mark_r>a{position: relative;}	/* リスト行末に"▲"マーク */
.li-mark_r>a:after{content:"\025b6"; color: #00b; margin-right: 5px; font-weight: bold; position: absolute; top: 50%; right: 5px; margin-top: -12px;}
.slide-menu li{padding: 15px 0 15px 10px;}
.slide-menu>li{ margin: 5px 0 10px 10px; background-color: #fff; box-shadow: -2px -2px 2px #595 inset; border-radius: 4px;}
.slide-menu>li:hover{ background-color: #fdd; box-shadow: 2px 2px 2px #595 inset;}
.slide-menu>li.open { background-color: #ff9;}
ul.slide-dd-menu {margin-top: 15px; background-color: transparent;/* height: 0; */}
.slide-dd-menu>li{ margin: 5px 0 10px 5px; padding: 10px 0 10px 20px; width:calc(100% - 25px);list-style:none;background-color: #ffd; box-shadow: -2px -2px 2px #595 inset;}
.slide-dd-menu li.li-mark{padding: 10px;}
.slide-dd-menu>li:hover{ background-color: #fdd; box-shadow: 2px 2px 2px #595 inset;}
.slide-dd-menu{display:none;box-sizing:border-box;width:100%;margin:0;padding:0;background-color:#fff;}
.slide-dd-menu-item{line-height:3.75rem;display:block;padding:0;padding-right:.75rem;padding-left:1.5rem;text-decoration:none;color:#222;}
.slide-dd-menu-item:hover{text-decoration:underline;color:#555;}
.slide-dd.open>.slide-dd-menu{ display: block;/* height: 100%; -webkit-transition:height 1s; transition:height 1s; */}
.slide-dd .slide-caret{display:inline-block;width:0;height:0;margin-left:4px;-webkit-transition:opacity .5s ease,-webkit-transform .5s ease;transition:opacity .5s ease,-webkit-transform .5s ease;transition:transform .5s ease,opacity .5s ease;transition:transform .5s ease,opacity .5s ease,-webkit-transform .5s ease;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);vertical-align:middle;border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent}
.slide-dd.open .slide-caret{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}
.slide-container{margin-right:auto;margin-left:auto}

@media (min-width:57.5em){
.slide-container{max-width:60rem}
}
@media (min-width:75em){
.slide-container{max-width:70rem}
}