/* CSS tsugi.de by Makoto Watanabe */

html { 
	height: 100%;
	margin: 0 auto;
	padding: 0;
    font-size: 62.5%;
}

img { border: 0; }

#standard { 
    position: relative;
    height: 100%;
    margin: 0;
	padding: 0;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	background-image: url(../image/bg-1.png);
	overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#box {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
	height: 720px;
	width: 720px;
	margin: 0;
	padding: 0;
	background-color: hsla(51,68%,85%,0.60);
	-webkit-box-shadow: 0 5px 10px -2px rgba(71,61,34,0.5);
	-moz-box-shadow: 0 5px 10px -2px rgba(71,61,34,0.5);
	box-shadow: 0 5px 10px -2px rgba(71,61,34,0.5);
}

#content-width { width: 650px; height: 100%; margin: 0 auto; }

@media (max-width: 64em) and (orientation: landscape) {  /*! 1024px*/
    #box { height: 650px; width: 840px; }
    #content-width { width: 730px; }
}
@media (max-width: 48em) {  /*! 768px*/
    html { display: block; }
	#standard { 
        height: 100%;
	    display: block;
        vertical-align: auto;
        background-image: url(../image/bg-2.png);
        padding: 0 5%; 
        overflow: auto; }
    #box {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: transparent;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none; }
    #content-width { 
        width: 100%; 
        height: auto; 
        padding: 0 0 5%; }
}
@media (max-width: 37.5em) {  /*! 600px*/
    #standard { padding: 0 4%; }
}


#header { 
    display: table; 
    width: 100%; 
    height: 80px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.logo {
	display: table-cell;
	width: 300px;
	height: auto;
	vertical-align: bottom;
	margin: 0;
	padding: 0 0 0 .5rem;
}

.logo img { width: 100%; height: auto; }

.headtext {
	display: table-cell;
	width: auto;
	height: auto;
	margin: 0;
	vertical-align: bottom;
	padding: 0 6rem .2rem 4rem;
}

.headtext p {
	font-family: ff-scala, sans-serif;
    font-weight: 700;
    font-style: italic;
	color: #351710;
	font-size: 18px;
	line-height: 1.2;
    margin: 0;
    -ms-hyphens: none;
	-webkit-hyphens: none;
	hyphens: none;
}

@media (max-width: 64em) and (orientation: landscape) {  /*! 1024px*/
    #header { height: 70px; }
    .logo { width: 270px; padding: 0 0 0 10px; }
    .headtext { padding: 0 0 4px 25px; }
    .headtext p { font-size: 17px; }
}
@media (max-width: 48em) {  /*! 768px*/
    #header { display: block; height: auto; }
    .logo { display: block; width: 100%; height: auto; padding: 0; text-align: center; }
    .logo img { width: 50%; height: auto; margin: 7% 0 3%; }
    .headtext { display: block; width: 100%; margin: 0; padding: 0; }
    .headtext p { text-align: center; }
}
@media (max-width: 37.5em) {  /*! 600px*/
    .logo img { width: 60%; }
    .headtext p { font-size: 1.6rem;}
}
@media (max-width: 30em) {  /*! 480px*/
    .headtext p { font-size: 1.45rem; }
}
@media (max-width: 26.25em) {  /*! 420px*/
    .logo img { width: 70%;  }
    .headtext p { font-size: 1.8rem; margin: 0 6rem 1rem; }
}
@media (max-width: 23.438em) {  /*! 375px*/
	.logo img { width: 72.5%; margin: 7% 0 2%;  }
    .headtext p { font-size: 1.65rem; margin: 0 5.5rem 1rem; }
}
@media (max-width: 20em) {  /*! 320px*/
	.logo img { width: 75%;  }
    .headtext p { font-size: 1.5rem; margin: 0 4rem 1rem; }
}


div.content { width: 100%; height: auto; margin: 0; padding: 0; }

@media (max-width: 37.5em) {  /*! 600px*/
	div.content { padding-bottom: 2%; }
}

/* top page */

.topimage {
	display: table-cell;
	width: 41%;
	height: auto;
}

.topimage img {
	width: 100%;
	height: auto;
	-webkit-box-shadow: 0 3px 4px 0 rgba(115,98,34,0.5);
	-moz-box-shadow: 0 3px 4px 0 rgba(115,98,34,0.5);
	box-shadow: 0 3px 4px 0 rgba(115,98,34,0.5);
}

.topimage2 { display: none; }

h1.top {
	font-family: ff-scala, sans-serif;
    font-weight: 700;
    font-style: italic;
	font-size: 30px;
	margin: 0 0 2.5rem 0;
}

p.top { 
    font-size: 16px;
	line-height: 1.35;
    margin: 0 0 1.5rem 0;
}

p.top.last { margin-bottom: 0; }

div.toptext {
	display: table-cell;
	height: auto;
	vertical-align: bottom;
	padding: 0 0 0 30px;
}

@media (max-width: 64em) and (orientation: landscape) {  /*! 1024px*/
    .topimage {
        overflow: hidden;
        width: 250px;
        height: 425px;
        position: relative;
        -webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.21);
        -moz-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.21);
        box-shadow: 0 3px 5px 0 rgba(0,0,0,0.21); }
    .topimage img {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none; }
    p.top { font-size: 1.5rem; }
}
@media (max-width: 48em) {  /*! 768px*/
	.topimage {
        width: 40%;
        overflow: auto;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none; }
    .topimage img {
        width: 100%;
        height: auto;
        position: relative;
        -webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.21);
        -moz-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.21);
        box-shadow: 0 3px 5px 0 rgba(0,0,0,0.21); }
    div.toptext { padding: 5% 0 10% 4.5%; vertical-align: middle; }
    h1.top { font-size: 24px; }
}
@media (max-width: 37.5em) {  /*! 600px*/
    .topimage { display: none; }
    .topimage2 { 
        display: block; 
        width: 100%; 
        margin: 0 0 10% 0;
        padding: 0;
        overflow: hidden; 
        -webkit-box-shadow: 0 3px 4px 0 rgba(115,98,34,0.5);
        -moz-box-shadow: 0 3px 4px 0 rgba(115,98,34,0.5);
        box-shadow: 0 3px 4px 0 rgba(115,98,34,0.5); }
    .topimage2 img { width: 100%; height: auto; vertical-align: bottom; }
    div.toptext { display: block; height: auto; padding: 0 0 10% 0; }
    h1.top { font-size: 3rem; margin: 0 0 2rem 0; }
    p.top { font-size: 1.65rem; line-height: 1.45; margin: 0 0 2.2rem 0; }
}
@media (max-width: 26.25em) {  /*! 420px*/
    .topimage2 { margin-bottom: 15%; }
    h1.top { font-size: 2.5rem; }
     p.top { font-size: 1.6rem;}
}


/* Gallery */

ul.gallery {
    width: 100%;
	list-style-type: none;
	margin: 0 auto;
	padding: 10px 0 0 0;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

ul.gallery li {
	text-align: center;
    width: 12.5%;
	margin: 0 24px 20px;
	padding: 0;
}

ul.gallery li img {
	width: 100%;
	height: auto;	
    
    -moz-box-shadow: 0 2px 3px 0 rgba(115,98,34,0.5);
	-webkit-box-shadow: 0 2px 3px 0 rgba(115,98,34,0.5);
	box-shadow: 0 2px 3px 0 rgba(115,98,34,0.5);

    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
}
ul.gallery li a:hover img.over {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

@media (max-width: 64em) and (orientation: landscape) {  /*! 1024px*/
	ul.gallery { min-height: 430px; }
    ul.gallery li { width: 11.5%; margin: 0 1.85rem 9px; }
}
@media (max-width: 48em) {  /*! 768px*/
	ul.gallery { min-height: 500px; margin: 0; padding: 0; }
    ul.gallery li { width: 13%; margin: 0 3.5% 3rem; }
}
@media (max-width: 37.5em) {  /*! 600px*/
    ul.gallery { min-height: 580px; }
	ul.gallery li { width: 15%;	margin: 0 4.5% 1.2rem; }
}
@media (max-width: 26.25em) {  /*! 420px*/
	ul.gallery { min-height: auto; }
    ul.gallery li {	width: 30%;	margin: 0 1% 1rem; }
    ul.gallery li a:hover img.over { -webkit-transform: scale(1.1); transform: scale(1.1); }
}
@media (max-width: 20em) {  /*! 320px*/
    ul.gallery li { margin: 0 3px; width: 30%; }
}


img.hide { display: none; }

p.caption { 
	font-family: ff-scala-sans-pro-condensed, sans-serif;
    font-weight: 700;
    font-style: normal;
	font-size: 17px;
	line-height: 1.1;
	margin: 5px 0 8px 0;
	text-align: center;
	color: #351710;
}

@media (max-width: 20em) {  /*! 320px*/
	p.caption { margin: 2px 0 14px 0; }
}


span.foto {
	font-family: ff-scala-sans-pro, sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 15px;
	color: #935E09;
}


/* Gallery pages */

#loading {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    }

#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(205,196,167,0.37);
    z-index: 1;
    }

div.pages {
	position: absolute;
	bottom: 0;
	height: 50px;
	width: 650px;
	margin: 0 auto;
	text-align: center;
	padding: 0;
}

ul.pages {
	display: table;
	table-layout: fixed;
	text-align: center;
	width: 100%;
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
}

ul.pages li {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	height: auto;
	text-align: center;
	padding: 0;
	margin: 0;
	font-family: ff-scala-sans-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
	font-size: 20px;
	line-height: 1.2;
}

ul.pages li.selected {
    font-variant-caps: small-caps; 
    font-feature-settings: 'smcp'; 
    letter-spacing: .15rem; 
	color: #ffffff;
    padding: .05rem 2rem .3rem;
	border-radius: 4px;
	background: #7A9502;
} 

@media (max-width: 64em) and (orientation: landscape) {  /*! 1024px*/
	div.pages { position: relative; width: 100%; margin-top: 13px; }
}
@media (max-width: 48em) {  /*! 768px*/
	div.pages { position: relative; margin-top: 4%; width: auto; }
}
@media (max-width: 37.5em) {  /*! 600px*/
	div.pages {	margin-top: 3%; }
}
@media (max-width: 26.25em) {  /*! 420px*/
    ul.pages li { font-size: 1.8rem; line-height: 1.3;}
    ul.pages li.selected { letter-spacing: .1rem; padding: .4rem 1.5rem .55rem; }
}
@media (max-width: 20em) {  /*! 320px*/
	div.pages { margin-top: 10px; }
    ul.pages li { font-size: 1.7rem; }
}


ul.pages li a {
	font-weight: 400;
	color: #935E09;
	text-decoration: none;
}

ul.pages li a:hover {
	color: #351710;
}

ul.pages li.end {
    width: 14px;
    margin-right: 1.5rem;
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "alpha( opacity=0 )";
}

li.next a,
li.back a {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 3px;
}

li.next a {
	width: 14px;
	height: 18px;
	margin-left: 1.5rem;
	background: url("../image/fr.svg") no-repeat 0 0; 
	background-size: 14px;
}

li.next a:hover,
li.next a:active,
li.back a:hover,
li.back a:active {
	background-position: 0 bottom;
}

li.back a {
	width: 14px;
	height: 18px;
	margin-right: 1.5rem;
	background: url(../image/fl.svg) no-repeat 0 0; 
	background-size: 14px;
}

@media (max-width: 26.25em) {  /*! 420px*/
    li.next a, li.back a { margin-bottom: .2rem; }
    li.next a { margin-left: 1rem; }
    li.back a {	margin-right: 1rem; }
}


/* INFO · ANFRAGE*/

/* Über Kintsugi */

.ak2 { display: none; }

.about-kintsugi {
    width: 475px;
	height: auto;
    padding: 0 25px 0 0;
    margin: 0; 
    float: left;
}

p.uk {
	font-size: 14.4px;
	line-height: 1.5;
    margin: 0 0 16px 0;
}

.kin-gin-urushi {
	width: 150px;
	height: auto;
	padding: 0;
    margin: 0;
    float: left;
}

div.kin,
div.gin,
div.urushi {
	width: 100%;
	height: calc(100% / 3);
	margin: 15px 0;
}

div.kin img,
div.gin img,
div.urushi img {
	width: 100%;
	height: auto;
	-webkit-box-shadow: 0 3px 4px 0 rgba(115,98,34,0.5);
	-moz-box-shadow: 0 3px 4px 0 rgba(115,98,34,0.5);
	box-shadow: 0 3px 4px 0 rgba(115,98,34,0.5);
}

.kin2, .gin2, .urushi2 { display: none; }

@media (max-width: 64em) and (orientation: landscape) {  /*! 1024px*/
    .ak1 { display: none; }
    .ak2 { display: block; margin: 3.5rem 0 2.5rem; }
    .about-kintsugi {
        width: 580px;
        -webkit-column-count:2;
        -moz-column-count:2;
        column-count:2; 
        column-gap: 2em; }
    p.uk { 
        display: inline-block;
        line-height: 1.45; 
        margin-bottom: 18px; 
        page-break-inside: avoid;
        column-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        break-inside: avoid; }
    .kin-gin-urushi { width: 125px; }
    div.kin, div.gin, div.urushi { margin: .3rem 0 .7rem; }
}
@media (max-width: 48em) {  /*! 768px*/
    .ak1 { display: none; }
    .ak2 { display: block; margin: 3.5rem 0 5rem; }
    .about-kintsugi { width:70%; padding: 0 5% 10% 0; }
    .kin-gin-urushi { width: 25%; }
    div.kin, div.gin, div.urushi { margin: 3% 0 10%; }
    p.uk { font-size: 16px; line-height: 1.45; margin-bottom: 20px; }
}
@media (max-width: 37.5em) {  /*! 600px*/
	.kin-gin-urushi { display: none; }
    .about-kintsugi { width: 100%; padding-right: 0; }
    .kin2, .gin2, .urushi2 { 
        display: block; 
        width: 100%; 
        padding: 0;
        overflow: hidden; 
        -webkit-box-shadow: 0 3px 4px 0 rgba(115,98,34,0.5);
        -moz-box-shadow: 0 3px 4px 0 rgba(115,98,34,0.5);
        box-shadow: 0 3px 4px 0 rgba(115,98,34,0.5); }
    .kin2 img, .gin2 img, .urushi2 img { width: 100%; height: auto; vertical-align: bottom; }
    .kin2 { margin: 0 0 10% 0; }
    .gin2 { margin: 8% 0 10% 0; }
    .urushi2 { margin: 10% 0 5% 0; }
    .ak2 { margin: 4% 0 5%; }
    p.uk { font-size: 1.6rem; line-height: 1.5; }
}
@media (max-width: 26.25em) {  /*! 420px*/
	.about-kintsugi {
        display: block;
        width: 100%;
        height: auto;
        padding: 0 0 2.5rem 0; }
    p.uk { font-size: 1.65rem; }
}
@media (max-width: 20em) {  /*! 320px*/
	p.uk { line-height: 1.45; }
}


/* Reparaturhinweise, allg. Infos, Bonsai */

div.hinweis { 
    height: 100%; 
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2; 
    column-gap: 20px; 
    padding: 0; 
    margin: 0; 
    overflow: hidden;
}

p.hinweise {
	font-size: 14.9px;
	line-height: 1.35;
    margin: 0 0 20px;
    padding: 0;
}

h1.v2 { margin: 7px 0 32px 0; }

div.info, .anfrage { 
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
}

div.bonsai { margin: 6em 4em 0; }

.rabbitop { float: right; height: 750px; }
.rabbit { width: 140px; height: auto; float: right; margin: 10px 0 10px 15px; clear: both; }
.rabbit2 { display: none; }

@media (max-width: 64em) and (orientation: landscape) {  /*! 1024px*/
	div.info { column-gap: 25px; }
    div.bonsai { margin: 3.7em 5em 0; }
    h1.v2 { margin: 35px 0 25px; }
    .rabbitop { height: 680px; }
    .rabbit { margin: 10px 0 0 20px; }
}

@media (max-width: 48em) {  /*! 768px*/
    h1.v2 { margin: 0 0 5rem 0; }
    div.bonsai { margin: 5vw 3vw 0; }
	div.hinweis {
        -webkit-column-fill: balance;
        -moz-column-fill: balance;
        column-fill: balance; 
    }
    p.hinweise { 
        display: inline-block;
        line-height: 1.45; 
        page-break-inside: avoid;
        column-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        break-inside: avoid; }
    .rabbitop, .rabbit { display: none; }
    .rabbit2 { display: block; width: 100%; height: 100%; margin: 1rem 0 1rem; text-align: center; }
    .rabbit2 img { height: 100px; }
}
@media (max-width: 37.5em) {  /*! 600px*/
	h1.v2 { margin: 0 0 3rem 0; }
    div.bonsai { margin: 1vw 20vw 3vw; }
    div.hinweis {
        -webkit-column-count: auto;
        -moz-column-count: auto;
        column-count: auto; 
        column-gap: auto; }
    p.hinweise { font-size: 1.6rem; line-height: 1.5; }
    .rabbit2 { margin: 3.5rem 0 5rem; }
}
@media (max-width: 26.25em) {  /*! 420px*/
    p.hinweise { font-size: 1.65rem; line-height: 1.5; }
}
@media (max-width: 23.438em) {  /*! 375px*/
	h1.v2 { margin: 0 0 2rem 0; }
}
@media (max-width: 20em) {  /*! 320px*/
	p.hinweise { line-height: 1.45; }
}




/* text styles */

h1 {
	font-family: ff-scala-sans-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
	text-align: left;
	color: #351710;
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 2rem 0;
}

h1.sc {
    font-weight: 400;
	font-variant-caps: small-caps; 
    font-feature-settings: 'smcp'; 
    letter-spacing: .05em; 
    font-size: 25px;
}


p,
ul.square li {
	font-family: ff-scala-sans-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
	color: #351710;
	text-align: left;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

ul.square { 
    margin: 0; 
    padding: 0; 
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    column-gap: 20px;   
    -webkit-column-fill: balance;
    -moz-column-fill: balance;
    column-fill: balance;
}

ul.square li {
	list-style-type: none;
	background: transparent url(../image/square.png) no-repeat left .45em;
	font-size: 16.3px;
	line-height: 1.35;
    margin: 0 0 15px 0;
	padding-left: 15px;
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid;
    display: inline-block;
    width: auto; 
}


@media (max-width: 64em) and (orientation: landscape) {  /*! 1024px*/
    ul.square { max-height: 420px; }
	ul.square li { margin: 0 0 15px 0; }
    ul.square.quer li { font-size: 1.6em; }
}
@media (max-width: 48em) {  /*! 768px*/
	h1 { font-size: 2.7rem; margin: 0 0 3rem 0; }
    h1.sc { font-size: 2.7rem; }
    ul.square { padding-left: .3rem; }
    ul.square li { 
        font-size: 15px;
        background: transparent url(../image/square.png) no-repeat left 0.5em;
        margin: 0 0 2.5rem 0;
        padding: 0 0 0 13px; }
}
@media (max-width: 37.5em) {  /*! 600px*/
	h1 { font-size: 2.4rem; line-height: 1.3; margin: 0 0 2rem 0; }
    ul.square {
        -webkit-column-count: auto;
        -moz-column-count: auto;
        column-count: auto; }
    ul.square li { font-size: 1.5rem; line-height: 1.5; margin: 0 0 2rem 0; }
}
@media (max-width: 26.25em) {  /*! 420px*/
	h1 { font-size: 2.3rem; }
    h1.sc { font-size: 2.2rem; }
    ul.square li { font-size: 1.65rem; }
}
@media (max-width: 23.438em) {  /*! 375px*/
    h1.sc { font-size: 2rem; }
	ul.square li { line-height: 1.45; }
}


/* Anfrage + Impressum */

h1.v2.iprs { text-align: center; margin: 80px 0 60px; }
p.hinweise.iprs { display: block; text-align: center; }

div.aktuelles { 
    width: 98%; 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background:hsla(0,24%,96%,0.56); 
    padding: 20px 30px;
    margin: 0 auto 40px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.16);
    box-shadow: 0px 5px 5px -2px rgba(0,0,0,0.16);
}

div.aktuelles p { 
    font-weight: 700;
    color: hsla(359,73%,38%,1.00);
    font-size: 16px;
	line-height: 1.35;
    margin: 0;
}

p.makoto { font-size: 13px; line-height: 1.6; margin: 50px 0; text-align: center; }

@media (max-width: 64em) and (orientation: landscape) {  /*! 1024px*/
    h1.v2.iprs { text-align: center; margin: 80px 0 40px; }
    p.makoto { margin-top: 40px; }
}
@media (max-width: 48em) {  /*! 768px*/
    p.makoto { margin-top: 60px; }
}
@media (max-width: 26.25em) {  /*! 420px*/
    div.aktuelles { padding: 2rem 2.5rem; }
}
@media (max-width: 20em) {  /*! 320px*/
    h1.v2.iprs { margin: 6rem 0 4rem; }
    p.makoto { margin-top: 4rem; }
    div.aktuelles { width: 100%; padding: 1.5rem 2rem; }
    div.aktuelles p { font-size: 1.45rem; }
}





/* Zeichenformate */

.regular-italic { font-family: ff-scala-sans-pro, sans-serif; font-weight: 400; font-style: italic; }
.bold-italic { font-family: ff-scala-sans-pro, sans-serif; font-weight: 700; font-style: italic; }
.bold { font-weight: 700; }
.highlight { color:#547700; }

span.under { text-decoration: underline; }

sup { vertical-align: top; font-size: 0.8em; line-heigt: 100%; }


/* Selection */

::selection {
    background: #953100; /* 背景色 */
    color: #ffffff; /* 文字色 */
}

/* Firefox用 */
::-moz-selection { 
    background: #953100;
    color: #ffffff;
}

	
/* anker styles */

a { outline-style: none; outline-width: 0; }

p.hinweise a:link, p.hinweise a:visited { text-decoration:none; color:#008BE0; font-weight:normal; }
p.hinweise a:hover { text-decoration:underline; }

li a:link, li a:visited { text-decoration:none; color:#008BE0; font-weight:normal; }
li a:hover { text-decoration:underline; }

p.impressum a:link, p.impressum a:visited { text-decoration:none; color:#008BE0; font-weight:normal; }
p.impressum a:hover { text-decoration:underline; }

p.makoto a:link, p.makoto a:visited { text-decoration:none; color:#008BE0; font-weight:normal; }
p.makoto a:hover { text-decoration:underline; }


/* Navi */

.nav {
    z-index: 100;
    display: table;
    position: relative;
    width: 100%;
    height: 2.6rem;
    margin: 30px auto 35px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

.nav > li {
    display: table-cell;
    width: calc(100% / 3); 
    height: 2.6rem;
    vertical-align: middle;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.nav > li > a { 
    display: block; 
    text-decoration: none; 
    background: hsla(35,100%,16%,0.90); /*! ナビ背景*/
    color: hsla(41,37%,80%,1.00); /*! ナビ文字*/
    transition: background .15s;
    font-family: ff-scala-sans-pro, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-variant-caps: small-caps; 
    font-feature-settings: 'smcp'; 
    letter-spacing: .02em; 
    font-size: 2.3rem;
	line-height: 1.2;
    text-align: center;
    padding: 0 0 .2rem 0;
    border-right: 1px solid hsla(43,54%,79%,0.48); 
}

.nav li:last-child a { border-right: 0px; }

.nav-drop { 
    -webkit-box-shadow: 0 5px 7px -2px rgba(71,61,34,0.5);
	-moz-box-shadow: 0 5px 7px -2px rgba(71,61,34,0.5);
	box-shadow: 0 5px 7px -2px rgba(71,61,34,0.5); 
}

.nav > li:hover > a { /*! ナビ hover 背景+文字*/
    background: hsla(37,100%,29%,1.00); 
    color: hsla(47,81%,90%,1.00); 
    transition: background .15s; 
} 
@media (max-width: 64em) and (orientation: landscape) {  /*! 1024px*/
	.nav { margin: 20px auto 23px; }
}
@media (max-width: 48em) {  /*! 768px*/
	.nav { margin: 6% 0 10%; }
}
@media (max-width: 37.5em) {  /*! 600px*/
    .nav > li > a { font-size: 2rem; }
}
@media (max-width: 30em) {  /*! 480px*/
    .nav > li > a { font-size: 1.7rem; }
}
@media (max-width: 26.25em) {  /*! 420px*/
	.nav { height: auto; }
    .nav > li  { height: auto; width: auto; }
    .nav > li > a { height: 3.2rem; font-size: 2rem; line-height: 1.6; padding: 0 1.5rem .2rem; }
}
@media (max-width: 23.438em) {  /*! 375px*/
	.nav > li > a { font-size: 1.85rem; line-height: 1.75; padding: 0 1rem .2rem; }
}
@media (max-width: 20em) {  /*! 320px*/
	.nav > li > a { font-size: 1.7rem; line-height: 1.9; padding: 0 .8rem .2rem; }
}



/* selected */
li.selected a {
    background: hsla(37,100%,29%,1.00); 
    color: hsla(47,81%,90%,1.00);
}

.nav > li:hover + li.selected a,
.nav > li:hover + li + li.selected a { 
    background: hsla(35,100%,16%,0.90); /*! ナビ背景*/
    color: hsla(41,37%,80%,1.00); /*! ナビ文字*/
    transition: background .2s;
}


/* ドロップダウン 子メニュー*/
/* single */
.nav-single { position: relative; }

.nav-single ul.nav-drop {
    position: absolute;
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0;
    top: 100%;
    opacity: 0;
	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
}

.nav-single:hover ul.nav-drop { opacity: 1; }

@media (max-width: 26.25em) {  /*! 420px*/
	.nav-single:active ul.nav-drop { opacity: 1; }
}


.nav-single ul.nav-drop li { 
    height: 0;
    overflow: hidden;
    -webkit-transition: height .15s ease .1s;
	-moz-transition: height .15s ease .1s;
	-o-transition: height .15s ease .1s;
	-ms-transition: height .15s ease .1s;
	transition: height .15s ease .1s;
}

.nav-single:hover ul.nav-drop li { 
    height: 4rem;
    overflow: visible;
    padding: 0;
    border-top: 1px solid hsla(35,62%,34%,0.95);
	border-bottom: 1px solid hsla(35,100%,13%,0.95);
}

.nav-single:hover ul.nav-drop li:last-child { border-bottom: 0; }
.nav-single:hover ul.nav-drop li:last-child a { border-radius: 0 0 .5rem .5rem; }

.nav-single ul.nav-drop li a { 
    display: block;
    margin: 0;
    background: hsla(35,100%,20%,0.98); 
    color: hsla(47,81%,90%,1.00); 
    transition: background .2s; 
    text-decoration: none;
    font-family: ff-scala-sans-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-variant-caps: normal; 
    font-feature-settings: normal; 
    letter-spacing: 0; 
    font-size: 1.7rem;
    line-height: 4rem;
    padding: 0;
}

.nav-single ul.nav-drop li:hover a { /*! ドロップダウン hover 背景と文字色*/
    background: hsla(37,100%,29%,1.00); 
    color: hsla(47,54%,93%,1.00); 
    transition: background .2s; 
} 

.nav-single ul.nav-drop li.selected a {
    background: hsla(35,100%,13%,0.98);
    cursor: default;
}


/* mega */

.nav-mega ul {
    display: block;
    table-layout: auto;
    text-align: center;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.nav-mega ul.nav-drop > li {
    display: inline-block;
    width: 100%;
    border: none;
}

.nav-mega ul.nav-drop > li:nth-child(3n+2) { margin: 0; }

li.nav-mega:hover a { background: hsla(55,80%,90%,1.00); color: #351710; }

.nav-mega ul.nav-drop {
    left: 0; 
    position: absolute;
    list-style-type: none;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    top: 100%;
    background: hsla(55,80%,90%,1.00);
    visibility: hidden;
    opacity: 0;	
    transition: 
        opacity .6s ease-out, 
        visibility .6s ease-out, 
        padding-top .3s ease-out,
        padding-bottom .3s ease-out;
}

.nav-mega:hover ul.nav-drop { 
    visibility: visible; 
    opacity: 1;
    height: auto;
    padding: .5rem 1rem 4.5rem;
    transition: 
        opacity .3s ease-out, 
        visibility .3s ease-out,
        padding-top .3s ease-out,
        padding-bottom .3s ease-out;
}

.nav-mega ul.nav-drop li { 
    height: 0;
    overflow: hidden;
    padding: 0;
    visibility: hidden;
    transition: 
        padding-top .6s ease-out, 
        padding-bottom .6s ease-out;
}

.nav-mega:hover ul.nav-drop li { 
    height: auto;
    width: auto;
    overflow: visible;
    padding: .5rem 1.45rem; /*! アイコンまわり*/
    visibility: visible;
    transition: 
        padding-top .3s ease-out, 
        padding-bottom .3s ease-out;
}

.nav-mega ul.nav-drop li a { 
    display: block;
    margin: 0;
    text-decoration: none;
    text-align: center;
    background: hsla(55,80%,90%,1.00);
}

img.icon { 
    width: auto; 
    height: 110px; 
    margin: 0;
    padding: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
}

a:hover img.icon {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

@media (max-width: 64em) and (orientation: landscape) {  /*! 1024px*/
	.nav-mega:hover ul.nav-drop { padding: 0 1rem 3rem; }
    .nav-mega:hover ul.nav-drop li { padding: .1rem 2rem; } /*! ミニ画像まわり*/
}
@media (max-width: 37.5em) {  /*! 600px*/
	img.icon { height: 100px; }
} 
@media (max-width: 26.25em) {  /*! 420px*/
    .nav-mega:hover ul.nav-drop { padding: .2rem .5rem 3rem; }
    .nav-mega:hover ul.nav-drop li { padding: .5rem 1rem; } /*! ミニ画像まわり*/
	img.icon { height: 85px; }
}
@media (max-width: 23.438em) {  /*! 375px*/
    .nav-mega:hover ul.nav-drop li { padding: .5rem .7rem; } /*! ミニ画像まわり*/
    img.icon { height: 82px; }
}
@media (max-width: 20em) {  /*! 320px*/
    .nav-mega:hover ul.nav-drop li { padding: .2rem 1rem; } /*! ミニ画像まわり*/
}


/* floatクリア */
.nav { *zoom: 1; }
.nav:before, ul.nav:after { content: " "; display: table; }
.nav:after { clear: both; }


/* スマホ　横幅フル */
@media screen and (max-width: 26.25em) { /*! 420px*/
    .nav, ul.gallery, div.pages {
        width: 100vw;
        max-width: initial;
        max-width: auto; /* fallback for ie */
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}
@media screen and (max-width: 26.25em) { /*! 420px*/
    .topimage2, .kin2, .gin2, .urushi2 {
        width: 100vw;
        max-width: initial;
        max-width: auto; /* fallback for ie */
        position: relative;
        overflow: hidden;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

/* -------------------------------------------------------------------
  Microtip

  Modern, lightweight css-only tooltips
  Just 1kb minified and gzipped

  @author Ghosh
  @package Microtip
--------------------------------------------------------------------*/

/* ------------------------------------------------
  [1] Base Styles
-------------------------------------------------*/

[aria-label][role~="tooltip"] {
    position: relative;
}

[aria-label][role~="tooltip"]::before,
[aria-label][role~="tooltip"]::after {
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    opacity: 0;
    pointer-events: none;
    transition: 
        all var(--microtip-transition-duration, .18s)  
        var(--microtip-transition-easing, ease-in-out) 
        var(--microtip-transition-delay, 0s);
    position: absolute;
    box-sizing: border-box;
    z-index: 10;
    transform-origin: top;
}

[aria-label][role~="tooltip"]::before {
    background-size: 100% auto !important;
    content: "";
}

[aria-label][role~="tooltip"]::after {
    font-family: ff-scala-sans-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
    background: #7A9502;
    border-radius: .4rem;
    color: hsla(0,0%,100%,1.00);
    content: attr(aria-label);
    font-size: var(--microtip-font-size, 1.7rem);
    text-transform: var(--microtip-text-transform, none);
    padding: .3rem 1.25rem .1rem;
    white-space: nowrap;
    box-sizing: content-box;
}

[aria-label][role~="tooltip"]:hover::before,
[aria-label][role~="tooltip"]:hover::after,
[aria-label][role~="tooltip"]:focus::before,
[aria-label][role~="tooltip"]:focus::after {
    opacity: 1;
    pointer-events: auto;
}

/* ------------------------------------------------
  [2] Position Modifiers
-------------------------------------------------*/
[role~="tooltip"][data-microtip-position|="00"]::before,
[role~="tooltip"][data-microtip-position|="0"]::before,
[role~="tooltip"][data-microtip-position|="10"]::before,
[role~="tooltip"][data-microtip-position|="20"]::before,
[role~="tooltip"][data-microtip-position|="30"]::before,
[role~="tooltip"][data-microtip-position|="40"]::before,
[role~="tooltip"][data-microtip-position|="50"]::before,
[role~="tooltip"][data-microtip-position|="60"]::before {
    background: url("../image/beispiele-icon/b-pfeil.svg") no-repeat;
    height: 1em; width: 1em; margin-left: .5rem; }

[role~="tooltip"][data-microtip-position|="00"]::before { margin-bottom: 1px; }
[role~="tooltip"][data-microtip-position|="0"]::before { margin-bottom: -9px; }
[role~="tooltip"][data-microtip-position|="10"]::before { margin-bottom: -19px; }
[role~="tooltip"][data-microtip-position|="20"]::before { margin-bottom: -29px; }
[role~="tooltip"][data-microtip-position|="30"]::before { margin-bottom: -39px; }
[role~="tooltip"][data-microtip-position|="40"]::before { margin-bottom: -49px; }
[role~="tooltip"][data-microtip-position|="50"]::before { margin-bottom: -59px; }
[role~="tooltip"][data-microtip-position|="60"]::before { margin-bottom: -69px; }

[role~="tooltip"][data-microtip-position|="00"]::after { margin-bottom: 10px; }
[role~="tooltip"][data-microtip-position|="0"]::after { margin-bottom: 0px; }
[role~="tooltip"][data-microtip-position|="10"]::after { margin-bottom: -10px; }
[role~="tooltip"][data-microtip-position|="20"]::after { margin-bottom: -20px; }
[role~="tooltip"][data-microtip-position|="30"]::after { margin-bottom: -30px; }
[role~="tooltip"][data-microtip-position|="40"]::after { margin-bottom: -40px; }
[role~="tooltip"][data-microtip-position|="50"]::after { margin-bottom: -50px; }
[role~="tooltip"][data-microtip-position|="60"]::after { margin-bottom: -60px; }

[role~="tooltip"][data-microtip-position|="00"]::before { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position|="00"]:hover::before { transform: translate3d(-50%, -5px, 0); }
[role~="tooltip"][data-microtip-position|="00"]::after { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position="00"]:hover::after { transform: translate3d(-50%, -5px, 0); }
[role~="tooltip"][data-microtip-position|="0"]::before { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position|="0"]:hover::before { transform: translate3d(-50%, -5px, 0); }
[role~="tooltip"][data-microtip-position|="0"]::after { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position="0"]:hover::after { transform: translate3d(-50%, -5px, 0); }
[role~="tooltip"][data-microtip-position|="10"]::before { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position|="10"]:hover::before { transform: translate3d(-50%, -5px, 0); }
[role~="tooltip"][data-microtip-position|="10"]::after { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position="10"]:hover::after { transform: translate3d(-50%, -5px, 0); }
[role~="tooltip"][data-microtip-position|="20"]::before { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position|="20"]:hover::before { transform: translate3d(-50%, -5px, 0); }
[role~="tooltip"][data-microtip-position|="20"]::after { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position="20"]:hover::after { transform: translate3d(-50%, -5px, 0); }
[role~="tooltip"][data-microtip-position|="30"]::before { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position|="30"]:hover::before { transform: translate3d(-50%, -5px, 0); }
[role~="tooltip"][data-microtip-position|="30"]::after { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position="30"]:hover::after { transform: translate3d(-50%, -5px, 0); }
[role~="tooltip"][data-microtip-position|="40"]::before { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position|="40"]:hover::before { transform: translate3d(-50%, -5px, 0); }
[role~="tooltip"][data-microtip-position|="40"]::after { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position="40"]:hover::after { transform: translate3d(-50%, -5px, 0); }
[role~="tooltip"][data-microtip-position|="50"]::before { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position|="50"]:hover::before { transform: translate3d(-50%, -5px, 0); }
[role~="tooltip"][data-microtip-position|="50"]::after { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position="50"]:hover::after { transform: translate3d(-50%, -5px, 0); }
[role~="tooltip"][data-microtip-position|="60"]::before { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position|="60"]:hover::before { transform: translate3d(-50%, -5px, 0); }
[role~="tooltip"][data-microtip-position|="60"]::after { transform: translate3d(-50%, 0, 0); bottom: 100%; left: 50%; }
[role~="tooltip"][data-microtip-position="60"]:hover::after { transform: translate3d(-50%, -5px, 0); }