@charset "utf-8";

body {font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;padding: 0;margin: 0;}

.container {width: 100%;max-width: 1240px;margin: 0 auto;position: relative;display: flex;}

.lefttitle {width: 225px;}
.lefttitle h1 {width: 100%;height: auto;font-size: 33px;}
.lefttitle h1 { -webkit-text-stroke-width: 8px;-webkit-text-stroke-color: #eaf9084f;}

.rightcontents {width:calc(100% - 225px);}
.rightcontents > div {padding: 40px;}
.rightcontents > div h1 {border-left: 8px #fff7084f solid;padding-left: 4px;font-size: 26px;}
.rightcontents > div h2 {border-left: 8px #fff7084f solid;padding-left: 4px;font-size: 24px;}
.rightcontents > div h3 {border-left: 8px #fff7084f solid;padding-left: 4px;font-size: 23px;}
.rightcontents > div p {font-size: 16px;}
.rightcontents > div p a {color:#fff7084f;}
.rightcontents > div p a:hover {opacity: 0.8;}
.rightcontents > div article::after {content:"";clear: both;height: 0;display: block;visibility: hidden;font-size: 0.1em;}

.centerimg {max-width: 100%; margin: 0 auto;display: block;}
.leftimg {width: 40%;margin: 0 16px 16px 0;display: block;float: left;}
.rightimg {width: 40%;margin: 0 0 16px 16px;display: block;float: right;}


.leftnavi {position: absolute;top: 150px;left: 0;width: 225px;height: calc(100% - 150px);}
.leftnavi ul {padding: 0;margin: 0;list-style: none;}
.leftnavi ul li a {background-color: #d9f30000;
    color: #080808;
    text-decoration: none;
    display: block;
    padding: 16px 24px 16px 8px;
	border-bottom: 1px #E4F0E5 solid;font-weight: bold;}
.leftnavi ul li a:hover {color: yellow}

footer p {text-align: center;font-size: 16px;}
footer p a {text-decoration: none; color: #020202;}
footer p a:hover {opacity: 0.8;}

.sp_menubtn {display: none;width: 32px;height: 32px;}
@media screen and (max-width: 680px) {
    .container {display: block;overflow-x: hidden}
    
    .lefttitle {width: 100%;text-align: center;}
    .lefttitle img {width:auto;max-width: 100%;height: auto;}
    
    .rightcontents {width:100%;}
    .rightcontents > div {padding: 16px;}
	
    .sp_menubtn {position: fixed;display: block;width: 32px;height: 32px;background-image: url("../img/btn_menu.png");background-size: cover;cursor: pointer;top: 4px;right: 4px;z-index: 2;}
    .sp_menubtn.open {background-image: url("../img/btn_close.png");background-size: cover;}
    
    .leftnavi {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: auto;transform: translateX(100%);transition: 0.3s;background-color: rgba(0,0,0,0.8);}
    .leftnavi.open {transform: translateX(0%);}
	
	.leftnavi ul li a {
    background-color: #ffffff;
    color: #080808;
    text-decoration: none;
    display: block;
    padding: 16px 24px 16px 8px;
	border-bottom: 1px #E4F0E5 solid;font-weight: bold;}
	
}