@charset "UTF-8";

body {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family:"游ゴシック","Yu Gothic",'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo', 'Osaka','ＭＳ Ｐゴシック',sans-serif;
  font-size: 16px;
  color: #000000;
	background-image: url(../images/20th/main.jpg);
	background-size: cover;
  background-repeat: no-repeat;
	background-position-x: 50%;
	background-position-y: 10%;
	background-attachment: fixed;
}
a, a:visited {
  color: #00238C;
}
img {
  margin: 0;
  padding: 0;
  
}
h1,h2,h3,h4 {
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
  padding: 0;
}
ul,li,dl,dt,dd {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
header {
  padding-top: 50px;
  text-align:center;
}
header p {
  padding: 0 0 1rem;
}
header a.btn {
  margin: 0 auto 50px;
  padding: 5px 0;
  width:160px;
  background-color: #FFF;
  display: block;
  font-size: 85%;
  color: #000;
  text-decoration: none;
  border: 1px solid #ACE1FF;
}
header a:hover.btn {
  background-color: #E7F3FF;
  border: 1px solid #ACE1FF;
}
footer {
  padding: 20px;
}
footer p {
  margin-bottom: 1rem;
}
/*----------------------------------------------------
container
----------------------------------------------------*/

.container {
  margin: 0 auto;
}
h1 img {
  margin: 0 0 20px;
  font-size: 400%;
  line-height: 100%;
  font-weight: normal;
}
h2 {
  margin-bottom: 20px;
  font-size: 150%;
}
h3 {
  margin: 0 0 20px 0;
  font-size: 150%;
}
h3 .sp {
  display: none;
}
.logo {
  margin: 0 auto 30px;
  width: 150px;
  display: block;
}
.greeting {
  margin: 0 auto 50px;
  padding: 0 20px;
  max-width: 980px;
}
.greeting p {
  padding-top: 1.5rem;
  line-height: 240%;
  letter-spacing: 1px;
  box-sizing: border-box;
}
.bg {
  background-color: white;
  background-image: url(../images/20th/bg.jpg);
  background-position: center top;
  box-sizing: border-box;
}
.mask {
  padding-top: 50px;
  background: rgba(255,255,255,0.6);
}
.history {
  margin: 0 auto 50px;
  padding: 0 20px;
  max-width: 980px;
  border:0;
  box-sizing: border-box;
}
.history .year {
  width: 10%;
}
.history .own {
  width: 60%;
}
.history .it {
  width: 30%;
}
.history .pad10 {
  padding-bottom: 10px;
}
.history th {
  padding: 14px 0 20px;
  font-size: 150%;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px dotted #aaaaaa;
}
.history td {
  padding: 20px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px dotted #aaaaaa;
}
.history .circle {
  margin: auto;
  padding-top: 0.9rem;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  background: #666;
  height: 50px;
  width: 50px;
  border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
  box-sizing: border-box;
  display: block;
}
.catch {
  font-size: 220%;
  float: left;
}
.message {
  margin-bottom: 10px;
}
.signature {
  float: right;
}
.clearfix {
  clear: both;
}
.center {
  text-align: center!important;
}
.small {
  font-size: 70%;
}
.ma20 {
  margin-bottom: 20px;
}
.ma30 {
  margin-bottom: 30px;
}
.ma40 {
  margin-bottom: 40px;
}
.ma50 {
  margin-bottom: 50px;
}
.ma80 {
  margin-bottom: 80px;
}

/**********フキダシ**********/

.balloon-annotation {
    display: inline-block;
    color: #2785C0;
    cursor: default;
}

.balloon-annotation > .balloon-annotation-body {
    display: inline-block;
    visibility: hidden; /* フェードインアニメーションのため、display: none;は使いません */
    position: absolute;
    z-index: 100;
    margin: -2rem 0 0 1.5rem;
    padding: 10px 15px 5px 5px;
    border-radius:3px;
    background-color: #ffffff;
    max-width: 700px;
    color: #333333;
    box-shadow:2px 2px 5px 1px #bdbdbd;
    font-size: small;
    font-weight: bold;
    justify-content: center;
    opacity: 0; /* フェードアウトアニメーションのため、初期値は透過です */
　　
　　/* visibilityはopacityのアニメーション後に切り替えるためdelay 200msです */
    transition: opacity 200ms ease 0s, visibility 0ms linear 200ms; 
}

.balloon-annotation:hover > .balloon-annotation-body {
    visibility: visible;
    opacity: 1;　/* フェードインアニメーションのため、ロールオーバー時は不透明です */

    /* visibilityはopacityのアニメーション前に切り替えるためdelay 0です */
    transition: opacity 300ms ease 0s, visibility 0ms linear;
}

/*
Balloon beak.
*/
/*.balloon-annotation > .balloon-annotation-body:before {
    display: inline-block;
    position: absolute;
    margin-left: -1rem;
    border-width: 6px 6px 6px medium;
    border-style: solid solid solid none; /* borderの1辺だけをnoneにすると三角形になります */
    /*border-color: transparent #ffffff;*/
    /*content: "";*/
/*}*/

@media screen and (max-width: 641px) {
  .container {
    font-size: 14px;
  }
  header {
    padding: 0 20px;
  }
  header p {
    margin-bottom: 10px;
    padding: 0 20px;
    font-size: 90%;
  }
  .logo {
    margin-top: 20px;
    max-width: 120px;
  }
  header h1 {
    font-size: 220%;
  }
  h1 img {
    width: 75%;
  }
  .history .it {
    display: none;
  }
  h3 .sp {
    display: block;
  }
  .greeting p {
    font-size: 90%;
    line-height: 200%;
    letter-spacing: 0;
    text-align: left;
  }
  .catch {
    font-size: 160%;
  }
  .history .year {
    width: 20%;
  }
  .history .own {
    width: 80%;
  }
  .question {
    display: none;
  }
  .balloon-annotation{
    display: none;
  }
}