@charset "utf-8";

*{
	margin:0;
	padding:0;
}

body {
    color:#000;
    font-size: 13px;
    font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    text-align: left;
    background: ffffff(78, 96%, 51%);
}

#header{
    overflow:
    hidden;
    padding:20px 0;
    background:#ffffff;
    }

    .maru {
        height:40px;
        width:40px;
        border-radius:50%;
        line-height:40px;
        text-align:center;
        background:#000;
        color:#fff;
        font-size:18px;
        margin-left:15px;
        margin-bottom:20px;
      }

      .wrapper {
        display: flex;
        justify-content: center;
        align-content: center;
        position:relative;
        
      }

.container1 {
    display: flex;
}
h2 {
    position: relative;
    display: inline-block;
    padding: 0 55px;
}
        
h2{ 

    background:#000; /* 背景を黒で塗る */
    
    color:#fff; /*文字を白くする */
    
    /*
    以下は角丸の指定
    本来はborder-radiusだけでいいが
    ブラウザによって表記が一部異なるため
    以下のように指定する
    
    6pxは角丸の半径。
    */
    
    border-radius: 10px; 
    
    -webkit-border-radius: 10px;
    
    -moz-border-radius: 10px;
    
    }

h2:before {left:0;}
h2:after {right: 0;}

.maru{
    text-decoration:none;
  }

ul {
    list-style: none;
    padding-left: 0;
  }

#logo{
    box-sizing: border-box;
    width:100%;
}

#logo li{
	padding: 0.3em 1em;
    margin: 1em 0;
    font-weight: bold;
    border: solid 1px #ccc;
	display:inline-block;
	vertical-align:middle;
	width:100px;
	margin-top:10px;
	text-align:center;
	font-size:10px;
	line-height:130%;
    webkit-transition: all .3s;
    transition: all .3s;
    margin: 10px 0 0 0;	
    }

#logo li:hover{
    webkit-transform: translateY(-5px);
    ms-transform: translateY(-5px);
    transform: translateY(-5px);
    }