body { margin: 0; padding: 0; color:#333333; background-image:url(https://www.mauicondowebcam.com/common/image/bgimg.gif);background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
background-color:#d0d0d0;}

.zentai { width: 90%; margin: 0 auto; max-width: 1200px;}

.headstyle { width: 100%; height:140px; background-image:url(https://www.mauicondowebcam.com/common/image/headimg.png);background-repeat: no-repeat;
background-position: right top; position:relative;}

.name { position:absolute; top:20px; left:20px;}
.name span { color:#FFFFFF; font-size:40px; font-weight: bold;}
.name span a { color:#FFFFFF; text-decoration:none;}
.name span a:hover { opacity:0.8;}
.name p { font-size: 12px; color: #FFFFFF; margin: 0; padding:0;}

.headnavi {
	background-color:#000000; width: 100%;
}

.headnavi div { width: 90%; margin: 0 auto 2em; max-width: 1200px;}
.headnavi div a { display: inline-block; margin:0 16px; color:#FFFFFF; text-decoration: none; padding: 8px 0;}
.headnavi div a:hover { color:#CCCCCC;}


.flexbox {
	display: -webkit-flex;
	display: flex;
}


.left_contents {width:calc(100% - 300px); background-color:#FFFFFF;}

.left_contents .contents { padding: 20px 40px;}
.left_contents .contents:after {
    content:"";clear: both;height: 0;display: block;visibility: hidden;font-size: 0.1em;
}
.left_contents .contents p { font-size: 14px;}
.left_contents .contents p a { color:#d63388;}
.left_contents .contents p a:hover { color:#d0d0d0;}

.left_contents .contents h1 { background-color:#d63388; padding: 2px 8px; font-size: 20px; color:#FFFFFF;}
.left_contents .contents h2 { background-color:#d63388; padding: 2px 8px; font-size: 19px; color:#FFFFFF;}
.left_contents .contents h3 { background-color:#d63388; padding: 2px 8px; font-size: 18px; color:#FFFFFF;}

.imgl { width: 45%; float:left; margin: 0 2em 1em 0;}
.imgr { width: 45%; float:right; margin: 0 0 1em 2em;}
.imgc { width: 45%; float:none; margin: 0 auto 1em auto;}
.left_contents .contents img { width: 100%;}

.left_contents section { border-bottom: 4px rgba(255,255,255,0) solid;}

.right_manu { width: 260px; text-align:center; padding-left: 40px;}

.right_manu .pc_sym { display: inline-block; margin: 0 auto;}

.humberger_box { display: none;}

.right_manu .navi_link { list-style: none; margin: 1em 0 0 0; padding: 0;}
.right_manu .navi_link h4 { text-align:center; margin: 1em;}
.right_manu .navi_link li { list-style: none; text-align:left; border-bottom:1px #999999 solid; margin: 10px 0 0 0;}
.right_manu .navi_link li a { padding: 8px 0; text-decoration:none; color:#333333;}
.right_manu .navi_link li a:hover { color:#d63388;}

#footcontents { background-color:#FFFFFF; padding: 0 0;}
#footcontents p { text-align:center; font-size:11px; padding: 4px;}
#footcontents p a { color:#999999; text-decoration:none;}
#footcontents p a:hover { text-decoration:underline;}



@media screen and (max-width: 800px) {

.headstyle { width: 100%; height:140px; background-image:url(https://www.mauicondowebcam.com/common/image/headimg.png);background-repeat: no-repeat;
background-position: right top; position:relative;}

.name { position: initial; width:95%; margin:0 auto; padding-top:16px;}
.name span { color:#FFFFFF; font-size:20px; font-weight: bold;}
.name p { font-size: 12px; color: #FFFFFF; margin: 0; padding:0;}

.flexbox {
    display: initial;
}

.left_contents {width:95%; margin: 0 auto;}

.left_contents .contents {
	padding: 15px 10px;
}
.left_contents .contents h1 { margin-top:0;}
.left_contents .contents p { font-size:15px;}

.imgl { margin: 0 1em 1em 0;}
.imgr { margin: 0 0 1em 1em;}

.zentai { position: relative; width: 95%;}
.right_manu { position: absolute; width: 100%; padding: 0; top: -64px;}

.right_manu .pc_sym { display: none;}

.right_manu .navi_link { display: none; background-color:#FFFFFF; padding: 10px; border:1px #666666 solid;box-shadow: 0px 3px 10px rgba(0,0,0,.8)}
.right_manu .navi_link li { padding: 16px 0;}

.humberger_box {display: block;
text-align:right; padding-right:10px;}

#humberger {
  position: relative;
  height: 24px;
  width: 24px;
  display: inline-block;
  box-sizing: border-box;
  cursor:pointer;
}
#humberger div {
  position: absolute;
  left: 0;
  height: 4px;
  width: 24px;
  background-color: #fff;
  border-radius: 2px;
  display: inline-block;
  box-sizing: border-box;
}
#humberger div:nth-of-type(1) {
  top: 0;
}
#humberger div:nth-of-type(2) {
  top: 10px;
}
#humberger div:nth-of-type(3) {
  bottom: 0;
}


#footcontents { width:95%; margin: 0 auto;}

}