@charset "utf-8";
img, #main a{display:block;}

img{max-width: 100%;}
ul,li,ol{list-style: none;}
#container .menu_bg {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 10000 !important;
}
#container #overlay{z-index: unset;}
#container .breadTxtColor {
  color: #008a22 !important;
}

@media print, screen and (min-width: 768px){/* ===== pc start ===== */

  /* link */
 #container .linkIcon::after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 10px;
  margin-right: 0.5em;
  background: url(/suntoryhall/common2019/img/linkIcon.png) no-repeat right center / 9px;
 }
 #container .linkIcon:hover {
  opacity: 0.5;
}
 #container .linkIcon02::after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 10px;
  margin-right: 0.5em;
  background: url(/suntoryhall/common2019/img/linkIcon.png) no-repeat right center / 9px;
 }
  #container #suntoryhall_common_header {
    z-index: 1 !important;
  }
  .clear::after{content:''; display: block; clear: both;}
  .fl{float: left;}
  .fr{float:right;}
  #container .mainwarp{
    display: block;
    position: relative;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
  }
  #container {
    min-width: 1164px;
}
  #container section h2{
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 0 0 44px;
    font-size: 27px;
  }
  #container section h2::before{
    position: absolute;
    content:'';
    display: inline-block;
    width:20px; height: 77px;
    left: -7px;
    background:url(/suntoryhall/feature/chamber2024/common/img/pc_header_common.png) no-repeat center;
  }
  #container .satD {
    color: #0066ff !important;
  }
  #container .sunD {
    color: #dd1111 !important;
  }
  #container .tagReport,
  #container .tagMessage,
  #container .tagMovie,
  #container .tagPerformer,
  #container .tagInterview,
  #container .tagSpecial,
  #container .tagEssay,
  #container .tagExplanation,
  #container .tagInfo,
  #container .tagPlaylist {
    content: '';
    width: 80px;
    height: 25px;
    margin-top: 4px;
  }
  #container .iconOuterLink {
    content: '';
    width: 18px;
    height: 18px;

  }
  #container .tagReport {
   background: url(../../common/img/tag_report.svg);
   background-size: contain;
   background-repeat: no-repeat;
  }
  #container .tagSpecial {
    background: url(../../common/img/tag_special.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  #container .tagMessage {
    background: url(../../common/img/tag_message.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  #container .tagMovie {
    background: url(../../common/img/tag_movie.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  #container .tagPerformer {
    background: url(../../common/img/tag_performer.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  #container .tagInterview {
    background: url(../../common/img/tag_interview.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  #container .tagEssay {
    background: url(../../common/img/tag_essay.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  #container .tagExplanation {
    background: url(../../common/img/tag_explanation.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  #container .tagPlaylist {
    background: url(../../common/img/tag_playlist.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  #container .tagInfo {
    background: url(../../common/img/tag_info.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  #container .iconOuterLink {
    background: url(../../common/img/new_window.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
 /* --------- nav area start --------- */

  #container #main{position: relative;}

  #container .breadArea,.breadList{display: flex;}
  #container .breadList{width:1160px; margin:0 auto; position: relative;}
  #container .breadList li{ color:#887600; padding:10px 0; font-size: 12px; }
  #container .breadList li a{display: inline-block; position:relative; color:#008a22; font-size: 12px;}
  #container .breadList li a:hover{color:#55bb00}
  #container .breadList li::after {
    content: '>';
    display: inline-block;
    color: #aaccaa;
    font-size: 12px ;
    margin: 0 5px;
    position: static;
  }
  #container .breadList li:last-child::after{display: none;}

  #container .navWrap{
    position:relative;
    z-index: 2;
  }

  #container .navWrap .nav {
    display: flex;
    height: 60px;
    justify-content: center;
    align-items: center;
    background-color: #008a22 !important;
  }
  #container .navWrap .nav > li:first-child {
    width: 20%;
  }
  #container .navWrap .nav > li {
    position: relative;
    width: 13.6%;
    font-weight: normal;
    font-size: 20px !important;
    text-align: center;
  }
  #container .navWrap .nav > li:hover {
    background-color: #006611;
  }
  #container .navWrap .nav > li a {
    display: flex;
    height: 60px;
    flex-direction: column;
    justify-content: center;
    color: white !important;
  }
  #container .navWrap .nav > li:not(:last-child)::after {
    position: absolute;
    content: '';
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 20px;
    color: white;
    border-right: rgb(255 255 255 / 60%) 1px solid;
  }
  #container .navDrop {
    display: none;
    position: absolute;
    padding-top: 10px;
    left: 0;
    right: 0;
    text-align: center;
  }
  #container .navWrap.hedaderNav .nav > li:hover .navDrop {
    display: block;
  }
  #container .navWrap .nav .navDrop {
    z-index: 999;
    background-color: #018a22 !important;
    box-shadow: inset 0px 5px 10px -2px #00781d;
  }
  #container .navWrap .nav .navDrop li {
    position: relative;
    width: 100% !important;
    z-index: 999;
  }
  #container .navWrap .nav .navDrop li:hover a {
    color: #ffffaa !important;
  }
  #container .navWrap .nav .navDrop li a {
    height: 55px;
    font-size: 17px;
    text-decoration: none;
  }
  #container .navWrap .nav .navDrop li:hover::before {
    content: '';
    position: absolute;
    background: url(../../common/img/yellow_arrow.png);
    width: 14px;
    height: 14px;
    background-size: cover;
    top: 49%;
    left: calc(50% - 110px);
    transform: translateY(-50%);
  }
  #container .navWrap .nav .navDrop li:not(:last-child)::after {
    position: absolute;
    content: '';
    top: 100% !important;
    left: 50% !important;
    right: 0 !important;
    transform: translateX(-50%) translateY(33%);
    width: 180px;
    color: white;
    border-bottom: #007711 1px solid;
  }
  #container .hamburgerMenu{
    width:100%; height: auto;
    display: block;
    text-align: center;
    margin:0 auto;
  }
  #container .hamburgerMenu span{
    display: block !important;
    width: 20px; height: 2px !important;
    background-color: #fff;
    margin:4px auto auto auto;
  }

  @media screen and (max-width:1500px){
    #container .navWrap .nav > li:first-child {
      width: 27%;
    }
    #container .navWrap .nav > li {
      width: 20%;
    }
  }

  /* --------- nav area end --------- */
  /* --------- menu area strat --------- */

  #nav{
    width:300px;
    position: absolute;
    right: 0; top:0;
    z-index: 99999;
  }

  #container .hamburgerNav {
    display: none;
    background: #fff;
    height:auto;
    transition: All 0.2s ease;
    -webkit-transition: All 0.2s ease;
    -moz-transition: All 0.2s ease;
    -o-transition: All 0.2s ease;
    z-index: 9999 !important;
    overflow: auto;
  }

  #container .hamburgerNav a {
    text-decoration: none;
  }

  #container .gnbNavHeader {
    width: 300px;
    height: 110px;
    box-sizing: border-box;
    position: relative;
  }
  #container .gnbNavHeader{
    display: block;
    width: 300px;
    height: 110px;
    background: linear-gradient(#3cbb55, #12bba9);
  }
  #container .gnbNavHeader span{
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  #container .gnbNavHeader img {
    width: auto;
    max-width: 100%;
  }
  #container .closeBtnArea{
    top: 10px;
    right:10px;
    position: absolute;
    width: 40px;
    height: 40px;
  }
  #container .gnbCloseBtn {
    width: 40px;
    height: 40px;
    display: flex;
    margin-top: -3px;
    align-items: center;
    justify-content: center;
    transition: ease 0.3s all;
    cursor: pointer;
  }
  #container .gnbCloseBtn::before,
  #container .gnbCloseBtn::after {
    content: '';
    position: absolute;
    border-radius: 50px;
    background-color: #fff;
    transform: rotate(45deg);
  }
  #container .gnbCloseBtn::before {
    width: 2px;
    height: 30px;
  }

  #container .gnbCloseBtn::after {
    width: 30px;
    height: 2px;
  }


  #container .gnbNav li a:focus,
  #container .gnbNav li a:hover {
    background-color: #f4ffdd;
    color:#55bb00;
  }

  #container .gnbNav > li {
    width:100%;
    border-top: 1px solid #ddf2cc;
  }

  #container .gnbNav > li a {
    display: block;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    color:#119900;
  }

  #container .subNav li{
    width:100%;
    background-color: #fff;
    border-top: 1px solid #ddf2cc;
  }

  #container .subNav > li a{
    font-size: 13.8px;
    padding:14px 50px;
  }
  #container .subNav.otherpadding a{padding:15px 30px;}


  #container .gnbNav li .icon_arrow:after {
    content: '';
      display: inline-block;
      right: 40px;
      top: 50%;
      width: 7px;
      height: 7px;
      border-top: 1px solid #119900;
      border-right: 1px solid #119900;
      -webkit-transform: rotate(45deg) translateY(-50%);
      transform: rotate(45deg) translateY(-50%);
      position: absolute;
      transition: All 0.2s ease;
      -webkit-transition: All 0.2s ease;
      -moz-transition: All 0.2s ease;
      -o-transition: All 0.2s ease;
  }


  #container .gnbNav > li > a {
    font-weight: bold;
  }

  #container .subNav li {
    background: #fff;
  }

  #container .hamburgerWrap.active {
    padding: 15vw 5vw 8vw 5vw;
    position:fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    }

  #container .menu_bg.active,
  #container .hamburgerWrap.active,
  #container .hamburgerNav.active,
  #container .subNav.active  {
    display: block !important;
    transition: All 0.2s ease;
  }
  #container .hamburgerNav.active .on,
  #container .hamburgerNav.active .gnbNav > li.on > a {
    background-color: #f4ffdd;
    color:#008a22;
  }

/* --------- menu area end --------- */
/* --------- C suntory hall chamber music garden start --------- */

#container .lastSection {padding:50px 0 65px;}
#container .lastSection h3{
  width:247px;
  padding-bottom: 33px;
}

#container .lsMainList a{
  color:#119900;
  text-decoration: none ;
}
#container .lsMainList a:hover{color:#55bb00;}
#container .lsMain{
  display: flex;
  justify-content: flex-start;
}
.mr70{margin-right: 70px !important;}
#container .footerlogo_pc{
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
}

#container .lsListArea{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  position: relative;
}
#container ul.lsMainList:nth-child(1){width:13%;}
#container ul.lsMainList:nth-child(2){width:19%;}
#container ul.lsMainList:nth-child(3){width:27%;}
#container ul.lsMainList:nth-child(4){margin-top: -60px;}

#container .lsMainList li{margin-bottom:20px;}
#container .lsMainList li a{width:max-content;}
#container .lsMainList > li {font-size: 20px;}
#container .lsSubList > li{font-size: 16px; font-weight: bold;}
.lsSubList2 > li{
  font-size: 14px !important;
  margin-bottom:15px !important;
}
#container .lsSubList2 li a{width: max-content;}
#container .lastlist li{margin-bottom:2px;}
.fwB{ font-weight: bold;}
.mb10{display:inline-block; margin-bottom:10px !important;}
#container .graytitle{
  color:#01aa98 ;
  font-size: 16px ;
}
#container .graytitle .fs14{
  display: inline-block;
  vertical-align: text-bottom;
  font-size: 14px;
  margin-left: 5px;
  font-weight: normal;
}

#container .bgLogoImg{
  display: inline-block;
  width:224px;
  position: absolute;
  right: 0; top:0;
  z-index: -1;
}

/* --------- C suntory hall chamber music garden end --------- */
 /* ===== pc end ===== */}

@media screen and (max-width:767px){/* ===== sp start ===== */
    /* link */
 #container .linkIcon::after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 10px;
  margin-right: 0.5em;
  background: url(/suntoryhall/common2019/img/linkIcon.png) no-repeat right center / 9px;
 }
 #container .linkIcon02::after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 10px;
  margin-right: 0.5em;
  background: url(/suntoryhall/common2019/img/linkIcon.png) no-repeat right center / 9px;
 }
  #container section h2{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding:0 0 0 8vw;
    font-size: 6.13333vw;
  }
  #container section h2::before{
    position: absolute;
    content:'';
    display: inline-block;
    margin-right: 4vw;
    left: -0.9vw;
    width:4vw; height: 16vw;
    background:url(/suntoryhall/feature/chamber2024/common/img/sp_header_common.png) no-repeat center;
    background-size: 100%;
  }

  #container .spcommon{
    padding-bottom:53.3333vw;
    background:url(/suntoryhall/feature/chamber2024/common/img/section_bg_sp_bottom_left.png) no-repeat bottom left,
              url(/suntoryhall/feature/chamber2024/common/img/section_bg_sp_bottom_right.png) no-repeat bottom right;
    background-size: 15.868vw 36vw, 20.4vw 47.335vw;
  }

  #container p#SpMenuBtn.fixed{position:fixed; right: 4%; top:64px; z-index: 9999;}
  #container p#SpMenuBtn.limit{position:absolute;bottom:20px;top:auto;}

  body.no-scroll{
    height:100%;
    overflow:hidden !important;
  }
  #container .menu_bg {
    overflow: scroll;
  }

  #container .satD {
    color: #0066ff !important;
  }
  #container .sunD {
    color: #dd1111 !important;
  }

  #container .tagReport,
  #container .tagMessage,
  #container .tagMovie,
  #container .tagPerformer,
  #container .tagInterview,
  #container .tagSpecial,
  #container .tagEssay,
  #container .tagExplanation,
  #container .tagInfo,
  #container .tagPlaylist {
    content: '';
    width: 16vw;
    height: 5.067vw;
  }
  #container .iconOuterLink {
    content: '';
    width: 3vw;
    height: 3vw;
  }
  #container .tagReport {
    background: url(../../common/img/tag_report.svg);
    background-size: contain;
    background-repeat: no-repeat;
   }
   #container .tagSpecial {
    background: url(../../common/img/tag_special.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
   #container .tagMessage {
     background: url(../../common/img/tag_message.svg);
     background-size: contain;
     background-repeat: no-repeat;
   }
   #container .tagMovie {
     background: url(../../common/img/tag_movie.svg);
     background-size: contain;
     background-repeat: no-repeat;
   }
   #container .tagPerformer {
     background: url(../../common/img/tag_performer.svg);
     background-size: contain;
     background-repeat: no-repeat;
   }
   #container .tagInterview {
     background: url(../../common/img/tag_interview.svg);
     background-size: contain;
     background-repeat: no-repeat;
   }
   #container .tagEssay {
    background: url(../../common/img/tag_essay.svg);
    background-size: contain;
    background-repeat: no-repeat;
   }
  #container .tagExplanation {
    background: url(../../common/img/tag_explanation.svg);
    background-size: contain;
    background-repeat: no-repeat;
   }
  #container .tagPlaylist {
    background: url(../../common/img/tag_playlist.svg);
    background-size: contain;
    background-repeat: no-repeat;
   }
   #container .tagInfo {
    background: url(../../common/img/tag_info.svg);
    background-size: contain;
    background-repeat: no-repeat;
   }
   #container .iconOuterLink {
    background: url(../../common/img/new_window.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 0.8em;
   }
/* -------------- commmon end -------------- */

  #container .mainwarp{position: relative;}
  #container .spMainwarp{
    display: block;
    position: relative;
    width: 92%;
    margin: 0 auto;
  }

  #container #nav.active{
    display: none;
    width: 80%; height: 100%;
    position: fixed;
    top:0; right: 0; bottom:0;
    padding:15vw 4vw 8vw 4vw;
    z-index: 99999;
    overflow: scroll;
  }

  #container .hamburgerNav {
    display: none;
    background: #fff;
    height:auto;
    transition: All 0.2s ease;
    z-index: 9999 !important;
    overflow: auto;
  }
  #container .hamburgerNav.active {
    overflow: scroll;
    width: 100%;
    margin: 0 auto;
  }
  #container .hamburgerNav a {
    text-decoration: none;
  }

  #container .gnbNavHeader {
    height: 25vw;
    box-sizing: border-box;
    position: relative;
  }
  #container .gnbNavHeader{
    display: block;
    height: 22.164vw;
    background: #008a22;
  }
  #container .gnbNavHeader span{
    height: 100%;
    padding: 3.733333vw 5.333333vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }
  #container .gnbNavHeader img {
    width: 52.267vw;
    max-width: 100%;
  }

  #container .closeBtnArea{
    top: 17vw;
    right: 3vw;
    position: absolute;
    width: 10vw;
    height: 10vw;
  }
  #container .gnbCloseBtn {
    width: 6.246%;
    height: 17.958%;
    display: flex;
    margin-top: 3vw;
    align-items: center;
    justify-content: center;
    transition: ease 0.3s all;
    cursor: pointer;
  }
  #container .gnbCloseBtn::before,
  #container .gnbCloseBtn::after {
    content: '';
    position: absolute;
    border-radius: 50px;
    background-color: #fff;
    transform: rotate(45deg);
    margin-left: 5vw;
  }
  #container .gnbCloseBtn::before {
    width: 3px;
    height:5.335vw;
  }

  #container .gnbCloseBtn::after {
    width: 5.335vw;
    height: 3px;
  }


  #container .gnbNav li a:focus,
  #container .gnbNav li a:hover {
    background-color: #f4ffdd;
    color:#55bb00;
  }

  #container .gnbNav > li {
    width:100%;
    border-top: 1px solid #ddf2cc;
  }

  #container .gnbNav > li a {
    display: block;
    padding: 2.608vw 5.215vw;
    font-size: 4.533333vw;
    /* font-weight: bold; */
    position: relative;
    color:#008a22;
  }

  #container .subNav li{
    width:100%;
    background-color: #fff;
    border-top: 1px solid #ddf2cc;
  }

  #container .subNav > li a{
    font-size: 4vw;
    padding:10px 10.430vw;
    font-weight: normal;
  }

  #container .gnbNav li {
    position: relative;
  }

  #container .gnbNav li .icon_arrow:after {
    content: '';
    position: absolute;
    background: url(../img/sp_green_arrow_right.png);
    width: 3.129vw;
    height: 3.129vw;
    background-size: cover;
    top: 49%;
    right: 7.5%;
    transform: translateY(-50%);
  }


  #container .gnbNav > li > a {
    font-weight: bold;
  }

  #container .subNav li {
    background: #fff;
  }


  #container .menu_bg.active,
  #container .hamburgerWrap.active,
  #container .hamburgerNav.active,
  #container .subNav.active  {
    display: block !important;
    transition: All 0.2s ease;
  }
  #container .hamburgerNav.active .on,
  #container .hamburgerNav.active .gnbNav > li.on > a {
    background-color: #f4ffdd;
    color:#008a22;
  }

  #container .subNav.otherpadding a{padding:15px 30px;}
/* --------- menu area end --------- */
/* --------- sp_listArea start --------- */


#container .DLcontent{
  display: flex;
  width:100%;
  background-color: #ffffff;
  border:1px solid #119900;
  padding:28px 45px 18px 23px;
 }
 #container .DLimg{
  display: inline-block;
  width:43.2vw;
  padding-right: 2vw;
 }
 #container .DLtxt{ width:39vw; display: inline-block; }
 #container .DLtxt a{
  font-size: 3.73333vw;
  font-weight: bold;
  color:#119900;
  line-height: 1.39;
 }
 #container .DLtxt .PDFicon{
  display: block;
  width:4.268vw;
  padding-top:2vw;
 }
 #container .DLtxt:hover a{color:#55bb00;}
 #container .DLtxt:hover .PDFicon{opacity: .8;}

#container .commonBorder{padding-top:8.66666vw;}

#container .s02main02 h2 {padding:0 0 2.93333vw 0;}

#container .footerlogo_sp{
  margin: 0 6vw;
  padding-top: 2.666667vw;
  font-size: 3.733333vw;
  font-weight: bold;
}
#container .footerlogo_sp img{
  width: 78%;
}

  #container div#textBox {
  width: 90.58%;
  margin: auto;
  /* background-color: #fff; */
  }

  #container .listBox{
    max-height: 100vw;
    overflow-y: scroll;
  }

  #container .s04main01 #textBox {overflow: hidden;}

  #container .listBox li p{width:93%;}
  #container .listBox li p, #container .listBox li a{
    font-size: 3.73333vw;
    line-height: 1.5;
  }
  #container .listBox li p,
  #container .listBox li span{color:#444444;}
  #container .listBox li a,#container .listBox li a span{color:#119900; text-decoration: underline;}
  #container .dateArea{padding-bottom:1.2vw;}
  #container .titleArea{padding-bottom:2.66666vw;}

/* --------- sp_listArea end --------- */
 /* ===== sp end ===== */}