html {min-height: 100%;height:100%;scroll-behavior: smooth;/**/}
body {margin:0;font-family: "Roboto", sans-serif;background: #fff;color:#234B3C;font-size:1em;}

* {box-sizing: border-box;}

h2 {font-family: "Merriweather", serif;color:#BE8A49;font-size:33px;font-weight:800}

.container-fluid {background-color:#F1E6D9;}
header {background-color:#234B3C;color:#BE8A49}
header.container-fluid {background-color:#234B3C;}
footer .container-fluid {background-color:#234B3C;color:#fff;}
.btn-primary {border-radius:0;background-color:#BE8A49;border:none; font-size:1.6em;padding:16px 25px;font-weight:500}
.btn-primary:hover {background-color:#234B3C}
.card {border:none;border-radius:0}

.ttl {color:#234B3C;font-family: "Merriweather", serif;}
.l-width {max-width:100%}

header figure {margin:0;padding:0;position:relative;}
header figure figcaption {margin:0 auto;padding:40px 20px;position:absolute;color:#fff;z-index:2;width:80%;max-width:800px;left:25%} 
header figure figcaption .ttl {font-size:40px;font-style:italic;color:#fff;}
header figure figcaption p {font-size:2em;font-weight:400}
header figure img {max-width:100%;}
header figure:after {content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.4);z-index:1}
header .d-flex  {align-items:center;justify-content:space-between}

footer .ttl {color:#BE8A49;font-style:italic;}
footer .container-fluid:last-of-type {background-color:#193027;}
footer a {color:#fff;text-decoration:none;}
footer a:hover {color:#BE8A49}
.col-trace {border-right: 1px solid #BE8A49;border-left: 1px solid #BE8A49;}

@media only screen and (min-width: 100px) and (max-width: 1630px) {
	
	/*header {border:1px solid lime}*/
	
}

@media only screen and (min-width: 1201px) and (max-width: 1400px) {
	
	/*header {border:1px solid red}*/
	
	header figure figcaption {padding:30px 20px;left:18%} 
	header figure figcaption .ttl {font-size:36px;line-height:1.4em;}
	header figure figcaption p {font-size:1.6em;line-height:1.4em;}
		
}

@media only screen and (min-width: 993px) and (max-width: 1200px) {
			
	/*header {border:1px solid purple}*/
	header .fs-5 {font-size:16px !important;}
	
	header figure figcaption {padding:30px 20px;left:12%} 
	header figure figcaption .ttl {font-size:33px;line-height:1.4em;}
	header figure figcaption p {font-size:1.4em;line-height:1.4em;}
}

@media only screen and (min-width: 769px) and (max-width: 992px) {	
		
	/*header {border:1px solid blue}*/
	header .fs-5 {font-size:15px !important;}
	
	.btn-primary {font-size:1.4em;padding:12px 20px;}
	
	header figure {overflow:hidden;text-align:center;}
	header figure figcaption {padding: 20px;left:0;max-width:none;width:auto} 
	header figure figcaption .ttl {font-size:33px;line-height:1.4em;}
	header figure figcaption p {font-size:1.4em;line-height:1.4em;}
	header figure img {width:130%;max-width:130%;margin:0 auto;}
		
	.col-trace {border-right: none;border-left: none;border-top: 1px solid #BE8A49;border-bottom: 1px solid #BE8A49;padding:30px 0 !important;margin:30px 0}

}

@media only screen and (min-width: 577px) and (max-width: 768px) {			
	
	/*header {border:1px solid aqua;}*/
	header .navbar-brand  {max-width:85%}
	header .navbar-brand img {width:100%}
	header .fs-5 {font-size:16px !important;text-align:center !important}
	header .container {flex-direction:column}
	
	.btn-primary {font-size:1.4em;padding:12px 20px;}
	
	header figure {overflow:hidden;text-align:center;}
	header figure figcaption {padding: 20px;left:0;max-width:none;width:auto} 
	header figure figcaption .ttl {font-size:33px;line-height:1.4em;}
	header figure figcaption p {font-size:1.4em;line-height:1.4em;}
	header figure img {width:130%;max-width:130%;margin:0 auto;}
	
	
	.col-trace {border-right: none;border-left: none;border-top: 1px solid #BE8A49;border-bottom: 1px solid #BE8A49;padding:30px 0 !important;margin:30px 0}
		
}

@media only screen and (min-width: 100px) and (max-width: 576px) {	
		
	/*header {border:1px solid yellow}*/
	header .navbar-brand  {max-width:85%}
	header .navbar-brand img {width:100%}
	header .fs-5 {font-size:16px !important;text-align:center !important}
	header .container {flex-direction:column}
	
	.btn-primary {font-size:1.3em;padding:12px 20px;line-height:1.1em;}
	
	header figure {overflow:hidden;text-align:center;height: 80vh;}
	header figure figcaption {padding: 20px;left:0;max-width:none;width:auto} 
	header figure figcaption .ttl {font-size:28px;line-height:1.4em;}
	header figure figcaption p {font-size:1.3em;line-height:1.4em;}
	header figure img {width:auto;max-width:none;margin:0 auto;height:100%;margin-left:-230%;}
	
	
	.col-trace {border-right: none;border-left: none;border-top: 1px solid #BE8A49;border-bottom: 1px solid #BE8A49;padding:30px 0 !important;margin:30px 0}

}