@charset "utf-8";
/* Hisotory用 CSS Document */

@media screen and (min-width: 767px) {
    /* PCでは改行しない */
.fix_br{
        display:none;
    }
}
#next{
position:absolute;
top:60%;
right:20px;
}
#prev{
position:absolute;
top:60%;
left:20px;
}
.bkgrnd{/*PC*/
background-image:url(../../images/background.jpg);
background-position: top;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #34799D;
background-size:100% auto;
}
.photo{
margin-top: 5px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 15px;
text-align:center;
}

.bodycopy_title{
font-size: 1.6em;
padding: 0.3em 0;
font-weight: bold;
line-height: 210%;
color:#FFF;
/*text-shadow: 2px 4px 3px rgba(0,0,0,1);
*/}

.bodycopy{
text-align:center;
font-size: 1.2em;
padding: 1.5em 0;
color:#FFF;
}
/*    ------------------------------------------------------------------------------------  */
/*    ------------------------------------------------------------------------------------  */
/*-----------SP-------------*/
@media screen and (max-width: 767px) {

/*    ------------------------------------------------------------------------------------  */

.photo{
display: inline-block;
margin: 0 auto;
padding-bottom:15px;
text-align:center;
}
.bodycopy{
text-align:center;
font-size: 1.2em;
padding: 1.5em 0;
color:#FFF;
margin-bottom: 40px;
}
.wd200{
width: 200px;
}
.text{
display: block; 
text-align: center; 
font-size: 12px; 
color: #222; 
font-weight: bold; 
position: absolute; 
left: 0; 
right: 0; 
top: 133px;
}
#next {
  background-image: url("../../images/next.png");
  background-size:22px 114px;
}
#prev {
  background-image: url("../../images/prev.png");
  background-size:22px 114px;
}
.bkgrnd-gray{
position: relative;
background-color: #fff; 
width:100%;
height:440px;
margin-top: 100px;

}
#issues {
    width: 350px;
    height: 325px;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
        margin-left: auto;
    display: block;
}

/*    ------------------------------------------------------------------------------------  */
}
/*    ------------------------------------------------------------------------------------  */
/*    ------------------------------------------------------------------------------------  */





/*    ------------------------------------------------------------------------------------  */
/*    ------------------------------------------------------------------------------------  */
/*-----------小さくなると年表が画像に突っ込む-------------*/
@media screen and (max-width: 968px) {

/*    ------------------------------------------------------------------------------------  */


.text{
display: block; 
text-align: center; 
font-size: 12px; 
color: #222; 
font-weight: bold; 
/*position: absolute; */
left: 0; 
right: 0; 
top: 520px;
}

.date{
  font-size: 3.5vh; 
}




/*    ------------------------------------------------------------------------------------  */
}
/*    ------------------------------------------------------------------------------------  */
/*    ------------------------------------------------------------------------------------  */



/*    ------------------------------------------------------------------------------------  */
/*    ------------------------------------------------------------------------------------  */
/*-----------なぜか最大幅が準備されている-------------*/
@media screen and (min-width: 992px) {

/*    ------------------------------------------------------------------------------------  */
      #next {
        background-image: url('../../images/next.png');
        background-size:22px 114px;
      }
      #prev {
        background-image: url('../../images/prev.png');
        background-size:22px 114px;
      }
}
/*    ------------------------------------------------------------------------------------  */
/*    ------------------------------------------------------------------------------------  */