@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;}

@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{
    width: 100%;
    display: flex;
    align-items: center;
    padding:22px 0 10px;
    font-size: 27px;
  }
  #container section h2::before{
    content:'';
    display: inline-block;
    margin-right: 30px;
    width:20px; height: 100px;
    background:url(/suntoryhall/feature/chamber2023/common/img/pc_header_common.png) no-repeat center;
  }
 /* --------- 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:#77bb55; padding:10px 0; font-size: 12px; }
  #container .breadList li a{display: inline-block; position:relative; color:#119900; 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;}
  #container .navlist .nav{width:100%; background: linear-gradient(#3cbb55, #12bba9);}
  #container .navlist .nav::after{content:" ";display:block;clear:both;}
  #container .navlist .nav li{float:left;}
  #container .navlist .nav li a{
    display: block;
    width:100%;
    height:70px;
    background-repeat:no-repeat;
    text-decoration: none;
  }
    #container .navlist .nav li a:hover,
    #container .navlist .nav li.lnav07:hover a{background-color: #1aa15c;}
    #container .navlist .nav li.Inav01 a:hover,
    #container .navlist .nav li.lnav01:hover a{background-color: inherit;}
    #container .navlist .nav li a.act{background-color: #1aa15c;}
    #container .navlist .nav li a.act:hover{background-color: #1aa15c;}
    #container .navlist .nav li a > span{
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color:#fff;
      font-size: 18px;
    }
    #container .navlist .nav li.lnav07 .menuTxt{
      display: block;
      height: 32px;
      font-size: 12px;
      text-align: center;
      padding-top: 12px;
    }
    #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;
    }

    #container .navlist .nav li.lnav01{width:260px;}
    #container .navlist .nav li.lnav02{width:181px;}
    #container .navlist .nav li.lnav03{width:110px;}
    #container .navlist .nav li.lnav04{width:180px;}
    #container .navlist .nav li.lnav05{width:210px;}
    #container .navlist .nav li.lnav06{width:130px;}
    #container .navlist .nav li.lnav07{width:89px;}

    #container .navlist .nav li.lnav01 a{
    width:260px;
    box-sizing: border-box;
  }
    #container .navlist .nav li.lnav02 a{
    width:181px;
    box-sizing: border-box;
  }
    #container .navlist .nav li.lnav03 a{
    width:110px;
    box-sizing: border-box;
  }
    #container .navlist .nav li.lnav04 a{
    width:180px;
    box-sizing: border-box;
  }
    #container .navlist .nav li.lnav05 a{
    width:210px;
    box-sizing: border-box;
  }
  #container .navlist .nav li.lnav06 a{
    width:130px;
    box-sizing: border-box;
  }
  #container .navlist .nav li.lnav07 a{
    width:89px;
  }
  #container .navlist .nav li a > span span{
    width: 100%;
    height: 30px;
    text-align: center;
    border-left: 1px solid #14a26a;
  }
  #container .navlist .nav li.lnav06 a > span span{
    border-right: 1px solid #14a26a;
  }
  #container .navlist .nav li.lnav07 a > span span{
    border-left: none;
  }

  /* --------- 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%;
    padding: 19px 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  #container .gnbNavHeader img {
    width: 100%;
    max-width: 100%;
  }
  #container .gnbNavHeader span img:nth-child(1){
    margin-right: 70px;
  }
  #container .gnbNavHeader span img:nth-child(2){
    margin-top: 12px;
  }
  #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:#55bb00;
  }

/* --------- 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{
    width: 100%;
    display: flex;
    align-items: center;
    padding:3.33333vw 0 2vw;
    font-size: 6.13333vw;
  }
  #container section h2::before{
    content:'';
    display: inline-block;
    margin-right: 4vw;
    width:4vw; height: 20.535vw;
    background:url(/suntoryhall/feature/chamber2023/common/img/sp_header_common.png) no-repeat center;
    background-size: 100%;
  }

  #container .spcommon{
    padding-bottom:53.3333vw;
    background:url(/suntoryhall/feature/chamber2023/common/img/section_bg_sp_bottom_left.png) no-repeat bottom left,
              url(/suntoryhall/feature/chamber2023/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;
  }

/* -------------- 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: 25vw;
    background: linear-gradient(#3cbb55, #12bba9);
  }
  #container .gnbNavHeader span{
    height: 100%;
    padding: 3.733333vw 5.333333vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  #container .gnbNavHeader img {
    width: 100%;
    max-width: 100%;
  }
  #container .gnbNavHeader span img:nth-child(1){
    margin-right: 18.666667vw;
  }
  #container .gnbNavHeader span img:nth-child(2){
    margin-top: 3.2vw;
  }

  #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: 10px 20px;
    font-size: 4.533333vw;
    /* 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: 4vw;
    padding:10px 40px;
    font-weight: bold;
  }


  #container .gnbNav li .icon_arrow:after {
    content: '';
      display: inline-block;
      right: 8%;
      top: 50%;
      width: 1.86vw;
      height: 1.86vw;
      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 .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:#55bb00;
  }

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


#container .DLcontent{
  display: flex;
  width:100%;
  background-color: #eef8e8;
  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 .listBox::-webkit-scrollbar{width:/*2.66666vw;*/ 20px; height: 100%;}
  #container .listBox::-webkit-scrollbar-thumb{background-color: #eadcb3; border-radius: 10px;}
  #container .listBox::-webkit-scrollbar-thumb:hover{background-color: rgba(234,200,179,.8);}
  #container .listBox::-webkit-scrollbar-track{background-color: #f7f2e3; border-radius: 10px;}

  #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 ===== */}