/* ==========================================================================
   topphoto 
 ========================================================================== */
#topphoto {
width: 100%;
height: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
}


/* ========================================================================== 
   メニュー 
 ========================================================================== */
#menu {
 width: 100%;
 background-color: #ffffff;
}

#menu ul {
    width: 1080px;
    overflow: hidden;
    background-color: #ffffff;
    font-size: 1.6em;
}
 
#menu li {
    float: left;
    width: 180px;
    list-style-type: none;
    border-bottom: 7px solid #cccccc;
}
#menu li.m0 {
    float: left;
    width: 180px;
    list-style-type: none;
    border-bottom: 7px solid #cccccc;
    padding: 20px 0;
}

#menu li.m1:hover {
    float: left;
    width: 180px;
    list-style-type: none;
    border-bottom: 7px solid #dc270b;
}
#menu li.m2:hover {
    float: left;
    width: 180px;
    list-style-type: none;
    border-bottom: 7px solid #ab1c87;
}
#menu li.m3:hover {
    float: left;
    width: 180px;
    list-style-type: none;
    border-bottom: 7px solid #0074be;
}
#menu li.m4:hover {
    float: left;
    width: 180px;
    list-style-type: none;
    border-bottom: 7px solid #00a63d;
}
#menu li.m5:hover {
    float: left;
    width: 180px;
    list-style-type: none;
    border-bottom: 7px solid #ec75a9;
}
#menu li.m6:hover {
    float: left;
    width: 180px;
    list-style-type: none;
    border-bottom: 7px solid #b34422;
}
#menu li.m7:hover {
    float: left;
    width: 180px;
    list-style-type: none;
    border-bottom: 7px solid #bcd400;
}
#menu li.m8:hover {
    float: left;
    width: 180px;
    list-style-type: none;
    border-bottom: 7px solid #f5a000;
}

#menu a {
    display: block;
    padding: 20px 0;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    background-color: #ffffff;
    color: #000000;
}

#menu a.m1 .m2 .m3 .m4 .m5 .m6 .m7 .m8 {
    display: block;
    padding: 20px 0;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    background-color: #ffffff;
    color: #000000;
}

#menu a.m1:hover {
    background-color: #fbbfb6;
    color: #dc270b;
}
#menu a.m2:hover {
    background-color: #f6cfec;
    color: #ab1c87;
}
#menu a.m3:hover {
    background-color: #bce5ff;
    color: #0074be;
}
#menu a.m4:hover {
    background-color: #bcffd5;
    color: #00a63d;
}
#menu a.m5:hover {
    background-color: #f7cde0;
    color: #ec75a9;
}
#menu a.m6:hover {
    background-color: #f3cec3;
    color: #b34422;
}
#menu a.m7:hover {
    background-color: #f7ffb7;
    color: #bcd400;
}
#menu a.m8:hover {
    background-color: #ffe9c1;
    color :#f5a000;
}


/* ==========================================================================
   SNS
 ==========================================================================*/
.follow-me {
  list-style: none;
  margin: 0 0 -8px;
  overflow: hidden;
  padding: 0;
}
.follow-me li {
  float: left;
  margin: 0 8px 8px 0;
  padding: 0;
}
.follow-me li a::before {
  background-color: #eee;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #333;
  display: inline-block;
  font-family: FontAwesome;
  font-size: 16px;
  height: 44px; /* Button height */
  line-height: 44px; /* Button height */
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  text-align: center;
  width: 44px; /* Button width */
}
.follow-me li a:hover::before {
  color: #fff;
}
.follow-me li a[href*="twitter.com"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com"]:hover::before        { background-color: #55acee; }


/* ==========================================================================
   更新履歴・広告スペース
 ==========================================================================*/
#under-box {
 width: 100%;
 margin-top: 20px;
 text-align: center; 
 letter-spacing: -1em;
 white-space: nowrap;
}

#log-area {
 width: 650px;
 display:  inline-block; 
 box-sizing: border-box; 
  letter-spacing: normal; /* 文字間を元に戻す */
  white-space: normal; /* 自動で折り返し(元に戻す) */
}
#add-area {
 width: 430px;
 display:  inline-block; 
 box-sizing: border-box;
  letter-spacing: normal; /* 文字間を元に戻す */
  white-space: normal; /* 自動で折り返し(元に戻す) */
}
.add-inner {
 width: 430px;
 height: 280px;
 margin: 0;
 padding: 0;
 display: table-cell;
 vertical-align: top;
}

#log-area-title {
 border-bottom: solid 7px #e3ffc8;
 padding-bottom: 1px;
 position: relative;
 width: 650px;
 text-align: left;
}
#log-area-title:after {
 border-bottom: solid 7px #ace539;
 bottom: -7px;
 content: " ";
 display: block;
 position: absolute;
 width: 25%;
}
.log-title {
 padding-left: 15px;
 font-size: 2.2em;
 font-weight: bold;
}

#log-list {
 list-style-type: none;
 background-color: #efefef;
}
.date {
 font-size: 1.2em;
 display:block;
 text-align: left;
 margin-bottom: 5px;
}
.date-new {
 color: #ff0000;
 font-size: 1.2em;
 font-weight: bold;
 display:block;
 text-align: left;
 margin-bottom: 5px;
}
.log-text {
 font-size: 1.4em;
 text-align: left;
}

#log-list li {
 border-bottom: solid 1px #aaaaaa;
 line-height: 1.5;
 padding: 1.5em 1em 1.5em 1em;
}

#log-box {
 display:block;
 text-align: left;
 margin: 0;
 padding: 0;
}

#log-block {
 display:block;
 text-align: left;
 margin: 0 0 3px 0;
 padding: 0;
}

/* 更新履歴コンテンツタイトル */
.t0 {
 display:block;
 text-align: left;
 border: 1px solid #999999;
 border-radius: 5px;
 background-color: #999999;
 color: #ffffff;
 font-size: 1.4em;
 margin-right: 5px;
 padding-left: 3px;
 padding-right: 3px;
 display:inline-block;
}
.t1 {
 display:block;
 text-align: left;
 border: 1px solid #dc270b;
 border-radius: 5px;
 background-color: #dc270b;
 color: #ffffff;
 font-size: 1.4em;
 margin-right: 5px;
 padding-left: 3px;
 padding-right: 3px;
 display:inline-block;
}
.t2 {
 display:block;
 text-align: left;
 border: 1px solid #ab1c87;
 border-radius: 5px;
 background-color: #ab1c87;
 color: #ffffff;
 font-size: 1.4em;
 margin-right: 5px;
 padding-left: 3px;
 padding-right: 3px;
 display:inline-block;
}
.t3 {
 display:block;
 text-align: left;
 border: 1px solid #0074be;
 border-radius: 5px;
 background-color: #0074be;
 color: #ffffff;
 font-size: 1.4em;
 margin-right: 5px;
 padding-left: 3px;
 padding-right: 3px;
 display:inline-block;
}
.t4 {
 display:block;
 text-align: left;
 border: 1px solid #00a63d;
 border-radius: 5px;
 background-color: #00a63d;
 color: #ffffff;
 font-size: 1.4em;
 margin-right: 5px;
 padding-left: 3px;
 padding-right: 3px;
 display:inline-block;
}
.t5 {
 display:block;
 text-align: left;
 border: 1px solid #ec75a9;
 border-radius: 5px;
 background-color: #ec75a9;
 color: #ffffff;
 font-size: 1.4em;
 margin-right: 5px;
 padding-left: 3px;
 padding-right: 3px;
 display:inline-block;
}
.t6 {
 display:block;
 text-align: left;
 border: 1px solid #b34422;
 border-radius: 5px;
 background-color: #b34422;
 color: #ffffff;
 font-size: 1.4em;
 margin-right: 5px;
 padding-left: 3px;
 padding-right: 3px;
 display:inline-block;
}
.t7 {
 display:block;
 text-align: left;
 border: 1px solid #bcd400;
 border-radius: 5px;
 background-color: #bcd400;
 color: #000000;
 font-size: 1.4em;
 margin-right: 5px;
 padding-left: 3px;
 padding-right: 3px;
 display:inline-block;
}
.t8 {
 display:block;
 text-align: left;
 border: 1px solid #f5a000;
 border-radius: 5px;
 background-color: #f5a000;
 color: #000000;
 font-size: 1.4em;
 margin-right: 5px;
 padding-left: 3px;
 padding-right: 3px;
 display:inline-block;
}

#history-box {
 width: 650px;
 margin: 0;
 padding: 0;
 background-color: #aaaaaa;
}
#history{
 list-style-type: none;
}
.history {
 display:block;
 text-align: right;
 color: #ffffff;
 font-size: 1.4em;
 padding-right: 10px;
 padding-top: 5px;
 padding-bottom: 5px;
}