/*	STORY
============================== */

#story h3{
text-align: center !important;
}
#story .date,
#story .num
{
line-height: 1;
}

#story .num{
display: inline-block;
padding:.2em .5em;
margin-top:20px;
color: #f1be1a;
background: #fff;
border-radius: 3px;
margin-right: .5em;
}

#story .mov-box{
box-shadow:  0 0 0 15px #b17a3d;
background: #f0efed;
margin:2em auto;
padding: 1em;
border-radius: 5px;
position: relative;
}

#story .mov-inner{
width:100%;
height:0;
padding-top:56.25%;
/*background: url(../img/top/logo_icon.png) center bottom no-repeat !important;*/
background-size: contain !important;
}

#story .in_box p:first-of-type{
padding-top: 2em;
margin-bottom:1em !important;
}
#story .in_box p:last-of-type{
text-align: right !important;
}

@media all and (min-width: 768px) {
#story h3{
font-size: 180%;
}

#story .mov-box{
width: 640px;
}
#story .in_box{
  max-width: 690px;
}
#story .in_box p{
font-size: 110% !important;
}
}

@media all and (max-width: 767px) {
  #story .in_box{
    margin: 0 auto 2em;
  }
#story h3{
font-size: 120%;
}
#story .mov-box{
width: 86%;
margin:2em auto;
box-shadow: 0 0 0 8px #b17a3d;
padding: .4em;
}
}



/*	story_box
============================== */
#story_box{
position: relative;
margin:0 auto;
}


/*	photo
============================== */
.photo figure{
display: block;
width:100%;
height: 100%;
margin:1em auto 0;
}

.photo figure .lazy{
aspect-ratio: 3/2;
border-radius: 10px;
}

@media all and (min-width: 768px) {
.photo{
display: flex;
flex-wrap:wrap;
justify-content: space-between;
align-items: center;
max-width: 1080px;
        margin: 0 auto 15em;
}
.photo li{
width:49%;
}
}

@media all and (max-width: 767px) {
.photo{
  width: 90%;
  margin:  0 auto;
}

.photo li{
width:100%;
}
}


/*	OA　date
============================== */
#story .oa{
  display: flex;
  justify-content: center;
  font-size: 200%;
  margin-bottom: .3em;
}
#story .oa p{
  font-weight: 800;
  font-family: Arial bold,Helvetica, sans-serif;
  font-weight: bold;
  }
  #story .oa p:not(:last-child){
    margin-right: 1.2em;
    }

  #story .oa p span{
    font-size: 180%;
    color: #b17a3d;
  }

  @media all and (max-width: 767px) {
    #story .oa{
      
        align-items: center;
        font-size: 123%;
        
    }
  }

 
    /*	アニメーション
============================== */
#story .illustration.tomato{
  left: -420px;
}

#story .illustration.goya{
  right: -260px;
  bottom: -800px;
}

#story .illustration.nasu{
  left: -240px;
  bottom: 300px;
}

@media all and (max-width: 767px) {
  #story .illustration.tomato {
    left: -140px;
    top: 230px;
}
#story .illustration.nasu {
  left: -40px;
  bottom: 240px;
}
#story .illustration.goya{
  display: none;
}
}
  
/*==================================================
バックナンバーのcss
===================================*/
#bknm {
display: block;
margin:2em auto 5em;
position: relative;
}

#bknm ul{
display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#bknm li{
position: relative;
}
#bknm li a{display: block;}
#bknm li a:hover {
  opacity: .8;
}
#bknm li p{
line-height: 1;
text-align: center !important;
}
#bknm li img {
vertical-align:top;
width:100%;
height:auto;
border-radius: 6px;
box-sizing: border-box;
}
#bknm .num2{
position: absolute;
display: inline-block;
font-weight: bold;
color: #4e2a0f;
background: #e7dfd8;
}
#bknm .num2 {
    bottom: 0;
    right: 0;
    padding:2% 5% !important;
    margin: 0 !important;
    font-size: 90%;
    width: 90%;
border-radius:0 0 5px 5px;
}

@media all and (min-width: 768px) {
#bknm {
max-width: 980px;
}
#bknm li{
width: 18%;margin:1%;
}
}
@media all and (max-width: 767px) {
#bknm {
width:90%;
margin:5em auto 0;
}
#bknm li{
width:23%;margin:1%;
}
#bknm .num2{
font-size: 80%;
}
}