@charset "UTF-8";

*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; padding: 0; color: #3A3A3A; font-size: 11pt; background-color: #fff;
             font-family: "Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", 'ヒラギノ角ゴ W3', "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif; }

#page { width: 98%; max-width: 1000px; margin: 0 auto; padding: 0; background: #ffffff; position: relative; 
        height: auto !important; /* real browsers */ height: 100%; /* IE6: treaded as min-height*/ min-height: 100%; /* real browsers */ }



/*****************************************************/
/***** Header ****************************************/
/*****************************************************/
/* #header #headerinner  > #headerhp, #nav */
#header { display: block; position: relative; width: 100%; max-width: 1000px; margin: 0; padding: 0; background: #BBD9B9; }
#headinner { position: absolute; top: 0; left: 0; }
#headinner:after { content: ""; clear: both; display: block; }
#headerhp { position: relative; width: 100%; margin: 0; padding: 1.5rem 1rem 1rem; }
#headerhp a { color: #396A36; text-decoration: none; }
#headerhp h1 { margin: 0; padding: 0 0 0.5rem; font-size: 2.2rem; line-height: 1.1rem; }
#headerhp h1.indexh1 { margin: 0; padding: 0 0 1rem; text-align: center; }
#headerhp p { display: block; margin: 0; padding: 0 0 0 0.2rem; font-weight: bold; color: #3A3A3A; }
#headerhp p.indexp { margin: 0; padding: 0; text-align: center; }
/* #nav > div.menubutton, ul */
#nav { width: 100%; margin: 0; padding: 0; background: #396A36; }
#nav input[type="checkbox"].on-off { display: none; }
#nav label { display: none; } 
#nav ul { margin: 0; padding: 0; list-style: none; text-align: left;}
#nav ul::after { content: ""; display: table; clear: both;}
#nav ul li { float: left; width: 8rem; margin: 0; padding: 0; text-align: center; background: #396A36; }
#nav ul li a { display: block; position: relative;/*for IE6*/ margin: 0; padding: 0.5rem 1rem 0.3rem;
               color: #fff; font-weight: bold; text-decoration: none; line-height: 1.5rem; }
#nav ul li a:hover { background: #5A8E5E; }
#nav input[type="checkbox"].on-off ~ ul  { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
#nav input[type="checkbox"].on-off:checked ~ ul { max-height: 100em; display: block; visibility: visible; opacity: 1; }



/*****************************************************/
/***** Contents **************************************/
/*****************************************************/
#contents { overflow: hidden; margin: 0; padding: 0.5rem 1rem 7rem; background: #fff; *zoom: 1; }
#contents::after { content: ""; clear: both; display: block; }


/***** index **********/
/* #contents div#topp */
#topp { margin: 0; padding: 2.5em 0; text-align: center; }
#topp h2 { margin: 0; padding: 1rem 0 0; }
#topp p { margin: 0; padding: 0 0 4rem; }

/* #contents div#topp div.flag*/
.flag { width: 100%; margin: 0; padding: 0; text-align: center; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; }
.flag a { text-decoration: none; color: #fff; }
.flag img.flagimg { height: 50px; margin: 0 2em; border: none; }
.flag div.lang { width: 5.5rem; height: 2rem; margin: 0 auto 1em; padding: 0.32rem 0.5rem 0; font-weight: bold;
				 background-color: #3399ff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.flag div.lang:hover { background: #33ccff; }


/***** home, about, preiseliste ************/
/* #contents div.langf */
#langf{ margin: 0; padding: 0.5rem 0 2rem; text-align: right; }
#langf img{ height: 30px; margin: 0; border: none;}

/* #contents > div#jade */
#jade { margin: 0 0 4rem; padding: 0; }
#jade h2 { margin: 0 0 1rem; padding: 0; }


/*****  Lesson ******************/
/* #contents > div#jade > section.lesson*/
section.lesson { margin: 0; padding: 0 0 3rem; }
section.lesson h3 { margin: 0; padding: 1rem 0 0; } /* Japanese page */
section.lesson p { margin: 0; padding: 0 0 1rem; }
section.lesson ul { margin: 0; padding: 0 0 1rem 1.2rem; } /* Japanese page */
section.lesson ul li { margin: 0; padding: 0 0 0.5rem; }
section.lesson ul li span { font-size: 0.8rem; }

/* #contents div#jade > section.lesson > steuer_19, .ptable */
.steuer_19 { margin: 0 0 2em 0; padding: 0 0 0 0.2rem; color: #2B4E27; font-weight: bold; font-size: 0.9rem; }
.ptable { width: 100%; border: 1px solid #ddd; }
.ptable table { width: 100%; margin: 0; padding: 0; border-collapse: collapse; border: 1px solid #ddd; }
.ptable th,
.ptable td { text-align: left; vertical-align: top; }
.ptable th a,
.ptable td a { text-decoration: none; }
.ptable th { margin: 0; padding: 0.5em 0.5em; color: #3A3A3A; font-size: 1.2rem; background: #BBD9B9; }
.ptable td { margin: 0; padding: 1rem; text-align: left; vertical-align: top; border-top: 1px solid #ddd; }
.ptable td .pricespan { font-size: 1.6rem; }
.ptable td h4 { margin: 0; padding: 0 0 0.5rem }
.ptable td p.colorpb03p { padding-bottom: 0.3rem; color: #396A36; font-weight: bold; }
.ptable td p.addinfop { padding: 0.6rem 0 0.3rem; font-size: 0.85rem; }
.ptable td ul { margin: 0; padding: 0 1em; }
.ptable td ul li { margin: 0; padding: 0 0 0.5rem; }
.ptable td ul li .exspan { display: block; margin: 0; padding: 0; font-size: 0.9rem; }


/***** About **************/
/* #contents > div#jade > section.about */
section.about { margin: 0; padding: 0 0 2rem; }
section.about h3 { margin: 0; padding: 0; border: 1px #000 solid; }
section.about p { margin: 0; padding: 0; }
section.about p.mb1 { padding-bottom: 1rem; }
section.about img.person { height: 15em; margin: 0 0 1rem; padding: 0; border: none; }


/***** Contact Form **************/
/* #contents > div#jade > div#cform */
#cform { margin: 0; padding: 0.5rem 0 0; }
#cform p { margin: 1rem 0 0; padding: 0; }
#cform p.mb2 { margin-bottom: 2rem; }
#cform p span { display: block; margin: 0; padding: 0; font-size: 0.95rem; }
#cform p input.nm { width: 50%; }
#cform p textarea { width: 98%; }
#cform p span.sendbutton { display: inline; }


/***** Datenschutz, Haftungsausschluss, Impressum **********/
/* #contents > ihddiv */
.ihddiv,
.ihddiv_top { margin: 0; padding: 0 0 3rem; font-size: 0.9rem; }
.ihddiv_top { margin-top: 3rem; }
.ihddiv h2 { margin: 0 0 1rem; padding: 0; }
.ihddiv h3 { margin: 0; padding: 0; }
.ihddiv section { margin: 0; padding: 0 0 2rem; }
.ihddiv p { margin: 0; padding: 0; }
.ihddiv p.mb1 { margin: 0 0 1rem; } /* datenschutz */
.ihddiv p.mb2 { margin: 0 0 2rem; } /* impressum */
.ihddiv ul { margin: 0.5rem 0; }



/*****************************************************/
/***** Footer ****************************************/
/*****************************************************/
#footer { width: 100%; margin: 0; height: 6rem; padding: 0; position: absolute; left: 0; bottom: 0; background: #396A36; }
#footer ul { margin: 1rem 0; padding: 0 1rem 0; list-style: none; text-align: right; line-height: 1.3rem; font-size: 0.9rem; }
#footer ul a { color: #fff; text-decoration: none; }







/* -----------------------------------------------
Media Query
----------------------------------------------- */
@media only screen and (max-width: 768px) {
#nav { height: 2.5rem; position: relative; }
#nav label { display: inline-block; position: absolute; left: 0; bottom: 0; width: 4.8em; margin: 0; padding: 0.4rem 0 0.5rem;
			 text-align: center; font-size: 1.3em; font-weight: bold; color: #fff; cursor: pointer; z-index: 1; }
#nav label:hover{ background: #5A8E5E; }
#nav ul { visibility: hidden; opacity: 0; position: absolute; top: 2.5rem; left: 0; width: 100%; 
		  color: #fff; background: #3399ff; z-index: 2; }
#nav ul li { float: none; width: 100%; background: #EFF7EE; border-bottom: 1px #5A8E5E solid; }
#nav ul li:first-child { border-top: 1px #5A8E5E solid; }
#nav ul li a { padding: 0.8em 1em 0.6em; color: #3A3A3A; }
#nav ul li a:hover { background: #BBD9B9; }
}/* 768 */



@media only screen and (max-width: 480px) {
#headerhp { padding: 1rem 1rem 0.5rem; }
#headerhp h1 { font-size: 1.6rem; }
#headerhp p { font-size: 0.9em; }

#topp h2 { font-size: 1.4rem; }
#topp h2 .line2span { display: block; }
.flag { display: block; }
.flag img.flagimg { height: 35px; margin: 0; }
.flag div.lang { width: 5rem; height: 2rem; margin: 0 auto 2em; padding: 0.3rem 0.5rem 0; font-size: 0.9rem; }
.flag div.deutschal { padding: 0.48rem 0.5rem 0; }

/* #contents div#jade div.tarifdiv div.ptable */
.ptable th span { display: block; }
#cform p input.nm { width: 98%; }
#cform p span.sendbutton { display: block; margin: 0.5em 0 0 0.4em; }
} /* 480 */



@media only screen and (max-width: 320px) {
#topp img.person { height: 10em; }
} /* 480 */