@charset "utf-8";

/* ===================================================================
リセット
=================================================================== */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,
input,textarea,p,blockquote,
th,td{margin:0;padding:0}
html{overflow-y:scroll}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
ol,ul{list-style:none}fieldset,img{border:0}
table{border-collapse:collapse;border-spacing:0}
caption{text-align:left_side_menu}
address,caption,cite,code,dfn,strong,th,var{font-style:normal;font-weight:normal}
a:active,a:focus{outline:0}
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-box-sizing:border-box;

/* ===================================================================

=================================================================== */
body{font-family: Helvetica, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;color: #333;font-size:16px;}
body{max-width: 960px;margin:auto;}

header{padding:10px;border-bottom:2px #3e56a5 solid;display:flex;justify-content: space-between;align-items: flex-end;}
.main_header{display:flex;flex-direction: row;}
.main_header{align-items:flex-end ;}
.main_header img{align-self:flex-start;}
.title_act{margin-left:1em}
.linkback{font-size:86%;}

.contents{margin:10px 20px}
.project_header{max-width:960px}
.project_detail{display:flex;border-bottom:#fff solid 1px;}
.project_detail dt{background-color:#d2ebff;flex-basis:100px;;padding:0.2em 0 0.2em 0.5em}
.project_detail dd{background-color:whitesmoke;flex-basis:90%;padding:0.2em 0 0.2em 0.5em}

h2{margin:15px 5px;color:#3e56a5; border-bottom:solid 2px #3e56a5; font-size:20px;font-weight:bold;}

footer{border-top:1px solid #336699;margin:10px 10px 0px;padding:10px 0px 5px;font-size:88%;text-align:center;background-color:ghostwhite}
.img_mail{display:inline-block; vertical-align: top;}

@media (max-width: 700px){
    .title_act span + br{display:none}
    header{display:flex;flex-direction: column;}
}
@media (max-width: 480px){
    .main_header{flex-direction: column;}
    .title_act{margin:0.5em 0}
    .contents{margin:5px}
}