@import url(/css/column.css);

#header { margin-bottom: 3em;
    background-image: url(/column/radio/images/title_radio.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto;
}
#header-name {
    height: 145px;
    overflow: hidden;
}
#header-name a { display: block; padding-top: 145px;}

.youtube {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
    border: #999 solid 1px;
}
.main-index #alpha dt { width: 260px; float: left; }
.main-index #alpha dt img { width: 100%; border: #ccc solid 1px;}
.main-index #alpha dl.book dd {
    width: calc(100% - 280px);
    float: right;
}

.main-index  #alpha dl.book dd.catch {
    font-weight: bold;
    color: #666;
    font-size: 1.8rem;
    margin-bottom: 7px;
}
.main-index #alpha dl.book + dl { margin-top: 3em;}

/*.youtube + .entry-body { margin-top: 1em;}*/
.youtube + .entry-body {  padding: 1em;  margin :2em 0; background-color: #e5e5e5;}
	
.youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25% // =9/16*100%
}
.youtube iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}





.book + .contentNavi,
.entry-content + .entry-footer { margin-top: 3em;}

.bookArea { float:none; width: 100%; margin-top: 20px; color: #333;margin-left:0;}
  .books {
    border-top: #999 solid 1px;
    padding-top: 1em;
    overflow: hidden;
  }
.books .img { width: 80px; margin: 0 20px 0 0; float: left;}
.books .txt {  margin-left: 110px; text-align: left;}
.books .txt dt { font-size: 1.6rem; margin: 0.5em 0;}
.books .txt dd { display: inline-block;}
.books .txt dd + dd:before { content:"/ ";} 
.books .buy { margin-left: 100px; padding: 0;}
.books .buy dd { width: calc((100% - 8px)/4); float:left; margin: 1px;}
.books .buy a { padding: 5px;}
.bookArea .books .buy dt { margin: 10px 0 3px;}





@media screen and (max-width:750px) {
    /*.main-index #alpha dt { width: 180px; float: left; }
    .main-index #alpha dl.book dd {
        width: calc(100% - 200px);
        float: right;
    }*/
    #header-name { height: 20vw;}
    #header-name a { padding-top: 20vw;}
    .main-index #alpha dl.book { display:flex;flex-flow: column nowrap; }
    .main-index #alpha dt { width: auto; float: none;/* order: 3;*/ margin-bottom: 0.5em;}
    .main-index #alpha dl.book dd {
        width: auto;
        float: none;
padding: 0 10px;
    }
}