@charset "utf-8";

body{margin:0;padding:0;color:#000;font-family:'Meiryo','hiragino kaku gothic pro','MS PGothic',sans-serif;font-size:font-size:14px;
background:#fff;background-image:url(../image/b-g.jpg);background-repeat:repeat-x;background-position:right top;}

a:link{color:#008080;}
a:visited{color:#2b5555;}
a:hover,a:active{color:#d50000;}
img{border:0;vertical-align:bottom;}
h1,h2,h3,h4{margin:0;padding:0;}
p{margin:0;padding:0;}
th,td{text-align:left;vertical-align:top;}
ul,ol{margin:0;}

/*** レイアウト ***/

#main{width:100%;max-width:720px;margin:0 auto;position:relative;}

#header{width:100%;}
#header img{width:100%;}

#menu{width:100%;}
#menu img{width:100%;}
#menu ul{width:100%;margin:0px auto;padding:0;list-style:none;}
#menu li{margin:0;padding:0;display:inline-block;float:left;}
#menu_1{width:16.25%;max-width:117px;}
#menu_2{width:33.75%;max-width:243px;}
#menu_3{width:18.75%;max-width:135px;}
#menu_4{width:16.25%;max-width:117px;}
#menu_5{width:15%;max-width:108px;}

#contents{width:100%;max-width:720px;margin:0;text-align:left;position:relative;}

#footer {width:100%;margin:0 auto;padding:4px 0;background:#B8FFC3;font-size:80%;text-align:center;}


/*** page ***/

#c1_menu{width:100%;max-width:720px;padding:2px;background:#eaffea;font-size:14px;box-sizing:border-box;}

.info1{width:98%;max-width:680px;margin:0 auto 20px;padding:0 4px;font-size:90%;box-sizing:border-box;}
.info_contents h3{width:98%;max-width:680px;margin:10px auto 5px;padding:4px;display:block;background:#ccffcc;color:#000;border: 2px #aaddaa solid;font-size:100%;text-align:center;box-sizing:border-box;table-layout: fixed;}
.info_contents h4{width:96%;max-width:660px;margin:10px auto;padding:4px;display:block;background:#eaffea;color:#000;border: 2px #cceecc solid;font-size:100%;text-align:center;box-sizing:border-box;}

.info_contents table{width:96%;max-width:660px;margin:0 auto 20px;font-size:80%;border-spacing:0;border-top:1px solid #aaddaa;border-left:1px solid #aaddaa;box-sizing:border-box;}
.info_contents th{padding:5px;background:#cfc;border-right:1px solid #aaddaa;border-bottom:1px solid #aaddaa;vertical-align:middle;}
.info_contents td{width:auto;width:auto;padding:5px;border-right:1px solid #aaddaa;border-bottom:1px solid #aaddaa;vertical-align:middle;}
.info_contents tr:nth-child(even){background:#fff;}
.info_contents tr:nth-child(odd){background:#F9F9F9;}



/*** よく使う方法 ***/

.wrap:after {display:block;clear:both;content:"";}
.full_img{width:100%;}
.hover-effect1 a:hover{position: relative;top: 1px;left: 1px;text-decoration: none;}
.hover-effect2 a:hover img{opacity:0.5;}

/*** メディアスクリーン ***/

@media screen and (max-width: 749px) {
body{background:#fff;}
#contents {margin:6px 0;}
} 

@media screen and (max-width: 560px) {
body{font-size:13px;}
} 

@media screen and (max-width: 499px) {
#c1_menu{line-height:200%;}
} 

@media screen and (max-width: 479px) {
#menu_1{width:32.5%;}
#menu_2{width:67.5%;}
#menu_3{width:37.5%;}
#menu_4{width:32.5%;}
#menu_5{width:30%;}
body{font-size:12px;}
.info_contents tr{width:100%;display:block;box-sizing:border-box;}
.info_contents th,.info_contents td{width:100%;max-width:100%;display:block;float:left;clear:both;box-sizing:border-box;}
} 

/* 上記だけではsafariにてテーブル幅が100％にならない不具合が発生します。CSSハックで幅を指定すると、ガタガタですがとりあえず最大幅は100％になります。（tdでカラム落ちしない問題点は解決せず） */
_::-webkit-full-page-media, _:future, :root .info_contents td {width: 480px;}
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 479px) and (min-color-index:0) {::i-block-chrome, .info_contents td {width: 480px;}}
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 479px) {::i-block-chrome, .info_contents td {width: 480px;}}

@media screen and (max-width: 320px) {
body{font-size:10px;}
}