@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}
*, *::before, *::after {
  box-sizing: border-box;
}
*, *::before, *::after {
  -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{margin:auto;}


header{padding:10px;border-bottom:2px #3e56a5 solid;}
.main_header{display:flex;max-width:960px;margin:0 auto; width:100%;justify-content: space-between; align-items: flex-end;}
.header_left{display:flex; align-items:center;}
.title_act{margin-left:1em}
.linkback{font-size:86%;}

.contents{margin:10px 20px;max-width: 960px;margin:1em auto;width:100%;}
.project_header{margin:5px;}
.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}
footer p{line-height: 1.8;}

@media (max-width: 720px) {
  .main_header {
    flex-direction: column;
    align-items: flex-start; 
  }

  .header_left {
    flex-direction: column;
    align-items: flex-start;
  }

  .title_act br {
    display: none;
  }

  .title_act {
    margin-left: 0;
    margin-top: 10px;
  }

  .linkback {
    align-self: flex-end;
    margin-top: 5px; 
    margin-left: 0;  
    width: auto;  
  }
}
@media (max-width: 480px){
    .main_header{flex-direction: column;}
    .title_act{margin:0.5em 0}
    .contents{margin:5px}
}