body {background-color: #f5ece3; margin: 0;padding: 0; color: #4E4E4E;}

a {color: #bb7f43; text-decoration: none;}
a:hover {color: #bb4343}


.site-area {max-width: 1100px; margin:  0 auto;}

.site-area h1 { font-weight: normal;border-bottom:3px #999999 dotted; margin: 0 0 4px; padding: 2px}
.site-area .title-box {  height: 136px; width: 100%; background: #fff}

.yohaku { height: 50px; background-color: rgba(255,255,255,0.3); margin: 20px 0;}



.main-image { width: 100%;}
.main-image img { width: 100%; height: auto;}

.contents-area { width: 100%; display: flex; padding-top: 23px;}

.left-contents { width: calc(100% - 323px); margin-right: 23px;}
.left-contents h2 {margin: 0; font-size: 22px;}
.left-contents h3 {margin: 0; font-size: 21px;}
.left-contents p { font-size: 13px;}
.left-contents img.left {float: left; width: 48%; padding: 1%; background-color: #ffffff;margin: 1%;}
.left-contents img.right { float: right; width: 48%; padding: 1%; background-color: #ffffff;margin: 1%;}
.left-contents img.center { float: none; width: 96%; padding: 1%; background-color: #ffffff; margin: 1%;}

.left-contents article {padding: 16px;}

.left-contents article:after {
    content:"";clear: both;height: 0;display: block;visibility: hidden;font-size: 0.1em;
}

.right-navi { width: 300px;background-color: rgba(255,255,255,0.3);}
.right-navi span {border-top: 3px rgba(200,200,0,0.4) solid; display: block; padding: 10px 10px 0; font-weight: bold;}
.right-navi ul {margin: 0; padding: 10px;list-style: none;}
.right-navi ul li { font-size: 14px;line-height: 1.2;padding: 10px;}
.right-navi ul li a { padding: 8px 0; display: block;}
.right-navi ul li a:hover {}


.foot-area { width: 100%;border-top:3px #999999 dotted; padding: 4px 10px; margin-top: 16px; text-align: right;}
.foot-area small {}
.foot-area small a {}



/**/
@media screen and (max-width : 760px ){

.site-area {max-width: initial; width: 100%; margin:  0 auto;}

.site-area h1 { font-size: 10px; font-weight: normal;border-bottom:3px #999999 dotted; margin: 0 0 4px; padding: 2px}
.site-area .title-box {  height: auto; width: 100%; background-image: url("../img/head-bg.jpg");background-size: contain;}
	.site-area .title-box img {width: 100%;}
.yohaku { height: 20px; background-color: rgba(255,255,255,0.3); margin: 10px 0;}



.main-image { width: 100%;}
.main-image img { width: 100%; height: auto;}

.contents-area { width: 100%; display: block; padding-top: 8px;}

.left-contents { width: 96%; margin: 0 auto;}
.left-contents h2 {margin: 0; font-size: 18px;}
.left-contents h3 {margin: 0; font-size: 17px;}
.left-contents p { font-size: 14px;}
.left-contents img.left {float: left; width: 48%; padding: 1%; background-color: #ffffff;margin: 1%;}
.left-contents img.right { float: right; width: 48%; padding: 1%; background-color: #ffffff;margin: 1%;}
.left-contents img.center { float: none; width: 96%; padding: 1%; background-color: #ffffff; margin: 1%;}

.left-contents article {padding: 16px;}

.left-contents article:after {
    content:"";clear: both;height: 0;display: block;visibility: hidden;font-size: 0.1em;
}

.right-navi { width: 94%;background-color: rgba(255,255,255,0.3); margin: 0 auto;}
.right-navi span {border-top: 3px rgba(200,200,0,0.4) solid; display: block; padding: 10px 10px 0; font-weight: bold;}
.right-navi ul {margin: 0; padding: 10px;list-style: none;}
.right-navi ul li { font-size: 15px;line-height: 1.2;padding: 10px;}
.right-navi ul li a { padding: 8px 0; display: block;}
.right-navi ul li a:hover {}


.foot-area { width: 100%;border-top:3px #999999 dotted; padding: 4px 0; margin-top: 16px; text-align: right;}
.foot-area small {margin-right: 8px;}
.foot-area small a {}
	
	
}