h2 {
  border: none;
  font-size: 1.25em;
  margin-bottom: 1em;
  font-weight: bold;
}

#anniversary{
	width:100%;
	background: url(/anniversary/matsuyama20/img/title_bg.jpg) no-repeat center;
	background-size: cover;
	background-attachment:fixed;
}
	
#anniversary	h1{
	height:800px;
	background:url(/anniversary/matsuyama20/img/title.png) top center no-repeat;
	background-size:80% auto;
	border:none;
	text-indent:-9999px;
  margin: 0;
}

#anniversary a:hover{
  text-decoration: none;
}

.spOnly{
  display:none;
}

.pcOnly{
  display:inline;
}

.inner {
  width: 1000px;
  margin: auto;
}


.eventArea {
  padding: 30px 0 30px 0;
  text-align: center;
  background: #b8e2fa;
}

.poster_2col {
  display: flex;
  justify-content: center;
}
.poster_left img, .poster_right img {
  width: 200px;
  margin: 10px;
  border: #FFFFFF solid 2px;
}

.quizArea{
  background: #fef2e2;
  margin: 0 auto;
}

.quizArea img{
  width: 100%;
}

#anniversary a.btn {
  width: 340px;
  text-align: center;
  padding: 10px 10px;
  display: block;
  border-radius: 30px;
  z-index: 0; 
  overflow: hidden;
  color: #FFFFFF;
  background: #ff6600;
  margin: 2rem auto 0 auto;
  box-shadow: 3px 3px #bf4c00;
  transition: 0.3s ease-in-out;
  font-weight: bold;
}

#anniversary a.btn:hover{
    box-shadow: none;
  transform: translate(5px, 5px);
}

#anniversary a.btn2 {
  width: 340px;
  text-align: center;
  padding: 10px 10px;
  display: block;
  border-radius: 30px;
  z-index: 0; 
  overflow: hidden;
  color: #FFFFFF;
  background: #cc7000;
  margin: 2rem auto 0 auto;
  box-shadow: 3px 3px #603700;
  transition: 0.3s ease-in-out;
  font-weight: bold;
}

#anniversary a.btn2:hover{
    box-shadow: none;
  transform: translate(5px, 5px);
}

.yellowArea{
  background: #ffd85c;  
}

.col2Area{
  display: flex;
  justify-content: space-between;
}

.col2_left,.col2_right{
}

.col2_right{
  display: table;
  text-align: right; 
}

.col2_right img{
  width: 90%;
}

.bannerArea {
}
a:hover .banner_2col {
  box-shadow: none;
  transform: translate(5px, 5px);
}
.banner_2col {
  display: flex;
  justify-content: center;
  margin: 40px auto;
  width: 90%;
  background: #FFFFFF;
  border-radius: 9px;
  box-shadow: 3px 3px #27acd9;
  transition: 0.3s ease-in-out;
  padding: 1rem;
  font-weight: bold;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.banner_left, .banner_right {
  width: 50%;
  display: table;
}
.banner_left img, .banner_right img {
  width: 100%;
}

.commentArea {
  background: #ffd85c;
  padding: 30px 0;
}

.comment_2col {
  display: flex;
  justify-content: center;
}

.comment_left{
  width: 60%;
}
.comment_right {
  width: 40%;
}

.comment_right img{
  width: 100%;
}

.logoArea {
  padding: 20px 0;
  text-align: center;
   background:rgba(255,255,255,0.5);
}

.logo_2col {
 display: flex;
justify-content: space-between;
}

.logo_left{
  text-align: left;
}

.logo_right{
 text-align: right;  
}

.logo_left img{
  width: 135px;
  margin: 10px;
}

.logo_right img {
  width: 200px;
  margin: 10px;
}