@import url('https://fonts.googleapis.com/css2?family=BIZ+UDMincho:wght@700&family=Noto+Serif+JP:wght@200..900&family=Playfair+Display:wght@700&family=Zen+Kaku+Gothic+New:wght@700&display=swap');
/**************************************************
 Main Visual 
**************************************************/

#mainVisual {
  position: relative;
max-width: 1110px;
}

#mainVisual a:not(.bx-pager-link) {
  position: absolute;
  display: block;
  bottom: 20px;
  right: 20px;
}
#mainVisual .slider > a {
    bottom: auto;
    right: auto;
}

#fbArea, .fb-page {
  width: 100%;
}

.spOnly {
  display: none;
}
main {
    margin: 115px auto 0;
}

a.bx-next,a.bx-prev{
    transition: 0s all;
}
.bx-wrapper .bx-controls-direction a {
    z-index: 999 !important;
}
.sp {
  display: none;
}
@media screen and (max-width: 1024px) {}
@media screen and (min-width: 481px) {
    .spOnlyslider {
        display: none;
    }
}
@media screen and (max-width: 480px) {
  .sp {
    display: block;
  }
  .pc{
    display: none;
  }

    #mainVisual {
        margin-top: 3rem;
    }
  #mainVisual>p img {
    height: 320px;
    width: 100%;
    object-fit: cover;
  }
  #mainVisual a {
    text-align: center;
    left: calc(50% - 108px);
    right: auto;
  }
  .spOnly {
    display: block;
  }
    #mainVisual a.bx-prev {
        right: auto ;
        left: 10px;
        
    }
    #mainVisual a.bx-next {
        right: 10px;
        left: auto;
    }
    .pcOnlyslider {
        display: none;
    }
    #mainVisual a:not(.bx-pager-link) {
        bottom: 20px;
    }
    #mainVisual .slider2 > a {
    bottom: auto;
}

    .bx-viewport {
        min-height: 300px !important;
    }
}

h3{
    font-size: 32px;
    font-weight: normal;   
}
#info > .catch:first-of-type {
  /*font-family:  "Playfair Display","BIZ UDMincho", serif;
  font-weight: 700;*/
}
/**************************************************
 Pod cast 
**************************************************/
#podcast {
  margin-bottom: 5rem;
}
#podcast h3 {
  display: flex;
  margin-bottom: 1.5rem;
}
#podcast h3 span {
  font-size: 26px;
  display: inline-block;
  margin-left: 5rem;
  font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}
@media screen and (max-width: 1024px) {

  #podcast h3 {
    display: block;
  }
  #podcast h3 span {
    margin-left: 1rem;
  }
}

/**************************************************
 News & FB
**************************************************/

#info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 100px;
}

#info .leftBox {
    width: 100%;
}

#info #program {
  padding: .7rem 0;
  width: 100%;
  margin-bottom: 2rem;
}

#info #program h3 {
  margin: 10px auto 20px;

}

#info #program ul {
  height: 320px;
  overflow-y: scroll;
}

#info #program li {
  padding: .4rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap:wrap;
}

#info #program li figure img {
    height: 80px;
    width: 80px;
    object-fit: cover;
}

#info #program li p {
    width: calc(100% - 95px);
}

#info #fbArea {
  width:305px;
}



@media screen and (max-width: 480px) {
  #info {
    margin-top: 70px;
  }
 #info #fbArea .fb-page, #info #program {
    width: 100% !important;
    display: block !important;
  }
  #info .fb-page {
    margin: 1rem auto;
  }

#info #program {
  margin-bottom: 2rem;
}

}
#podcast {
  width: 100%;
  text-align: center;
}
#podcast img {
  width: 100%;
  height: auto;
}
#podcast .widgettitle {
  display: none;
}
/**************************************************
 On demand
**************************************************/

#ondemand {
  margin: 0 auto;
}
#ondemand .moreBtn {
  width: 50%;
  align-self: flex-end;
}
#ondemand>section,
#ondemand>section>section div{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
#ondemand>section {
  justify-content:space-around;
}

#ondemand>section h3 {
  position: relative;
  width: 25%;
}

#ondemand>section h3 + h2.ribbon {
    margin: 0 auto 1rem 0;
}

#ondemand>section>section {
  width: 32%;
  background: #fff;
  margin-top: .5rem;
}

#ondemand h4 {
  color: #fff;
  text-align: center;
  font-size: 20px;
background: #444a43;
    padding: .5rem;
    font-weight: normal;
    font-size: 20px;
}

#ondemand>section>section div {
    justify-content: space-between;
    padding: 10px;
}
#ondemand>section>section .moreBtn {
    width: auto;
    margin: 1rem 0 0 auto;
}
#ondemand>section>section .moreBtn a {
  text-align: right;
  max-width: none;
    padding: .2rem .5rem;
}
#ondemand>section>section .moreBtn a img {
    width: 22px;
}
#ondemand h4 + div figure + div{
    width: calc(100% - 160px);
}

#ondemand>section > .moreBtn a{
  margin: 1rem auto 2rem;
}
#ondemand figure img {
  width: 140px;
  height: 140px;
  object-fit: cover;
}
#info #fbArea2 {
  display: none;
}

@media screen and (max-width: 1024px) {

  #ondemand>section h3:before, #ondemand>section h3:after {
    width: 220px;
  }
  #ondemand>section>section {
    width: 48%;
  }
  #info #fbArea {
    width:280px;
  }
  #ondemand>section {
    width: 100%;
  }
  #ondemand figure img {
    width: 124px;
    height: 124px;
  }
  #ondemand h4 + div figure + div {
    width: calc(100% - 134px);
  }

}
@media screen and (max-width: 820px) {
  #ondemand>section>section {
    width: 48%;
  }
  #ondemand>section>section:nth-of-type(even) {
    margin-left: 0;
  }
}
@media screen and (max-width: 480px) {
  #ondemand>section h3:before, #ondemand>section h3:after {
    width: 50px;
  }
  #ondemand h4 {
    font-size: 16px;
  }
  #ondemand figure {
    margin: 0 auto;
  }
    #ondemand h4 + div figure + div {
        width: 100%;
    }
    #ondemand>section > .moreBtn a {
        margin: 1rem auto 2rem;
    }
    
    #ondemand>section {
        justify-content: flex-start;
    }
      #ondemand>section>section {
    width: 48%;
          margin: 1% auto;
  }
    #ondemand>section h3 {
    width:100%;
}
#info #fbArea {
  display: none;
}
#info #fbArea2 {
  display: block;
  margin: 2rem auto 4rem;
}
#ondemand section > .moreBtn {
  width: 80%;
  margin: 0 auto;

}
}


/**************************************************
 sound heritage project
**************************************************/

#heritage {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin-top: 2rem;
  flex-wrap: wrap;
}

#heritage>section {
  width: calc(100% - 330px);
    order:2;
    font-size: 14px;
}

#heritage figure {
  order: 0;
  width: 285px;
    margin-left: 20px;
}

#heritage h3 {
  position: relative;
  padding-bottom: .7rem;
  margin: .8rem auto 1rem;
    width: 100%;
    order: -1;
    font-size: 32px;
    font-weight: normal;
}
#heritage h3 span {
    display: block;
    font-size: 24px;
    font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
    padding-left: 20px;
}
#heritage>section .moreBtn a {
  margin: 2rem 0 0 auto;
}
@media screen and (max-width: 1024px) {
    #heritage figure {
        width: 180px;
    }
    #info #fbArea {
        width: 300px;
        text-align: center;
    }

    #heritage>section {
        width: calc(100% - 200px);
    }
    #info {
        overflow: hidden;
        padding-top: 10px;
    }
    #heritage figure {
      margin-left: 0;
    }
}
@media screen and (max-width: 480px) {
  #heritage>section, #heritage figure {
    width: 100%;
  }
  #heritage figure {
    width: 90%;
    margin: 0 auto 1rem;
      text-align: center;
  }
  #info .leftBox {
    width: 100%;
  }
  #info > .catch:nth-of-type(2) {
    font-size: 30px;
    width: 96%;
    padding:20px 0;
  }  
  /*#info > .catch:nth-of-type(2) a span {
    display: inline-block;
    width: 100%;
    text-align: right;
  }*/
 #info > .catch:nth-of-type(2):before {
  top: 0;
 }
}
#info > .catch:first-of-type a,
#info > .catch:nth-of-type(2) a {
  color: #444a43;
}
/**************************************************
News
**************************************************/
#news ul {
    width: 100%;
    margin: 1rem auto;
}
#news ul li {
    width: 100%;
    padding: 1rem 1rem 1rem 2rem;
    border-top: 1px solid #e3dec2;
    background: url(../img/common/arrow-n.svg) no-repeat 10px center;
    background-size: 10px;
}
#news ul li:last-of-type {
    border-bottom: 1px solid #e3dec2;    
}
#news ul + .moreBtn a {
    margin: 0 0 3rem auto;
}
@media screen and (max-width: 480px) {
    #shopLink h4 + div {
        margin-bottom: .5rem;
    }
}

/**************************************************
 shopLink
**************************************************/
#shopLink {
    margin-top: 2rem;
}
#shopLink>div {
  display: flex;
  max-width: 1060px;
  margin: 0 auto;
  justify-content: space-between;
  flex-wrap: wrap;
}

#shopLink>div section {
  width: 49%;
  background: #fff;
  position: relative;
}

#shopLink p {
  word-break: break-all;
}

#shopLink h4 {
  align-items: center;
  position: relative;
  margin-bottom: 2rem;
    background: #444a43;
    color: #fff;
    padding: .2rem 1rem;
    font-weight: normal;
    font-size: 24px;
}
#shopLink h4 + div {
    padding: 0 .8rem .5rem; 
    display: flex;
    flex-wrap:wrap;
}
#shopLink section:first-of-type h4 + div figure {
    width: 120px;
    height: 120px;
}

#shopLink sextion:first-of-type h4 + div figure img {
    width: 100%;
    height: 120px;
}
#shopLink h4 + div ul {
    margin-left: 15px;
    width: calc(100% - 140px);
}

#shopLink h4 + div ul li {
    margin-bottom: 7px;
    padding-left: 15px;
    position: relative;
    font-size: 16px;
}
#shopLink h4 + div ul li:before {
    content: "■";
    font-size: 80%;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
}
#shopLink h4 + div p + img {
    margin-top: 10px;
}

#shopLink section .moreBtn a {
  margin: 1rem 1.5rem 1.5rem auto;

}
#shopLink>div section:last-of-type > div a{
display: block;
    width: 31%;
    margin: 0 1%;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}
#shopLink>div section:last-of-type a figcaption {
    width: 100%;
    text-align: center;
}
@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 480px) {
 #shopLink>div section {
    width: 100%;
    margin-bottom: 8px;
  }
    #shopLink h4 + div {
        display: block;
    }
    #shopLink section:first-of-type h4 + div figure {
        margin: 0 auto 2rem;;
    }
    #shopLink h4 + div ul {
        width: calc(100% - 15px);
    }
    #shopLink>div section:last-of-type > div a {
        width: 100%;
    }
    #shopLink>div section:last-of-type > div a figure {
        display: flex;
        text-align: left;
        margin-bottom: 5px;
    }
    #shopLink>div section:last-of-type > div a figure img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        margin-right: 10px;
    }
    #shopLink>div section:last-of-type > div a figure figcaption {
        text-align: left;
    }
}

aside ul {
  width: 100%;
  margin: 2rem auto 0;
  display: flex;
  flex-wrap: wrap;
}

aside ul li {
  margin: 5px;
  width: 250px;
}

aside ul li img {
  width: 100%;
}

/* Added Banner zone, below Sponcer banners for Ottava Informations. */
aside ul.ottavaInfo {
  margin: 1rem auto 0;
}

/* footer css defined in style.css. overload for top page */
footer {
  margin-top: 2rem;
}

@media screen and (max-width: 1024px) {
  aside ul li {
    margin: 1%;
    width: 31%;
  }
}

@media screen and (max-width: 640px) {
  aside ul li {
    margin: 1%;
    width: 48%;
  }
}