/* HTML初期化 */
body {
line-height: 1;
margin: 0;
padding: 0;
zoom:1;
}

h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight:normal;
font-style:normal;
}

p, dl, dt, dd, em, form, address,ul,li {
margin: 0;
padding: 0;
font-style:normal;
}

/* HTML5用 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

fieldset {
border:0;
margin: 0;
padding: 0;
}

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}

ul {
list-style: none;
padding: 0;
margin: 0;
border: 0;
}

li {
padding: 0;
margin: 0;
}

input, select {
vertical-align: middle;
}

/* tableタグ*/
th,td{
padding:0;
}

caption{
text-align:left;
} 


/* リンク設定 */
a {
outline:0;
border:0;
transition: all 0.3s ease;
}

@media screen and (max-width: 750px) {
a {
transition:none;
}
}

a img {
border:0;
}

img {
border:0;
max-width:100%;
-webkit-backface-visibility: hidden;
}

html {
-webkit-text-size-adjust: none;
zoom:1;
}

body,html {
width: 100%;
height:100%;
}


/*============================================
基本CSS
===========================================*/
body {
/*font-family: "Noto Sans Japanese", 'ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo, sans-serif;*/
font-family: 'Roboto',  AppleSystem, 'ヒラギノ角ゴシック','Hiragino Sans', メイリオ, Meiryo, sans-serif;
color: #222;
background: #F1F1F1 url(../img/body_bg.png);
}

@media screen and (max-width: 750px) {
body {
padding-top: 61px;
background: none;
}
body.menuOpen,
html.menuOpen{
overflow: hidden;
/*position: fixed;*/
z-index: -1;
width: 100%;
height: 100%;
}
a.anchor{
    display: block;
    padding-top: 50px;
    margin-top: -50px;
}
}


#ContWrapper {
max-width: 1200px;
margin: auto;
overflow: hidden;
position: relative;
background: #FFF;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
}

.innerBox {
max-width: 1000px;
margin: auto;
position: relative;
overflow: hidden;
}

.SP {
display: none;
}
@media screen and (max-width: 750px) {
.SP {display: block;}
.PC {display: none;}
}

/*============================================
スケジュールカレンダーボタン
===========================================*/
#calBtn {
position: fixed;
z-index: 100;
bottom:10px;
right: 0;
width: 157px;
}

@media screen and (max-width: 950px) {
#calBtn {
width: 100px;
}
}

@media screen and (max-width: 750px) {
#calBtn {
bottom:0;
}
}

/*============================================
ヘッダー
===========================================*/
header {
position: relative;
top:0;
left: 0;
width: 100%;
overflow: hidden;
background: #1E5C80;
}

header h1 {
width: 25%;
box-sizing: border-box;
padding: 20px;
padding-left: 30px;
padding-right: 30px;
float: left;
background: #FFF;
}

header h1 img {
display: block;
}

header nav {
width: 75%;
float: right;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
}

@media screen and (max-width: 850px) {
header {
font-size:0.85em;
}
}

@media screen and (max-width: 750px) {
header {
background: rgba(255,255,255,0.95);
position: fixed;
z-index: 100;
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
header h1 {
width: 50%;
max-width: 150px;
box-sizing: border-box;
padding: 10px;
background: none;
}
header nav {
display: none;
}
}

header nav a {
color: #FFF;
text-decoration: none;
}

/* 上部ナビゲーション */
#headerNaviSub {
background: #2979A5;
position: relative;
font-size: 0.8em;
clear: both;
overflow: hidden;
}

#headerNaviSub ul {
margin-left: auto;
text-align: right;
margin-right: 120px;
padding-right: 15px;
}

#headerNaviSub li {
line-height: 3em;
display: inline-block;
}

#headerNaviSub li a {
border-right: 1px solid rgba(255,255,255,0.3);
display: inline-block;
padding-right: 10px;
padding-left: 10px;
line-height: 1.2em;
}

#headerNaviSub li.icon a {
padding-right: 8px;
}

#headerNaviSub li:last-child a {
padding-right: 0;
}

#headerNaviSub li.noBorder a {
border: 0;
padding-right: 0;
}

#headerNaviSub li.icon img {
height: 18px;
position: relative;
top:4px;
}

/* 言語切替 */
#headerLang {
width: 120px;
line-height: 3em;
position: absolute;
top:0;
right: 0;
text-align: center;
background: #5591B7;
box-sizing: border-box;
padding-left: 15px;
}

@media screen and (max-width: 850px) {
#headerNaviSub li a i {
font-size: 1.2em;
padding-left: 0
}
#headerNaviSub ul {
margin-right: 100px;
padding-right: 10px;
}
#headerLang {
width: 100px;
padding-left: 10px;
}
}


#headerLang a {
display: block;
height: 3em;
background:url(../img/language_icon.png) no-repeat 10px center;
background-size: 1.2em;
}

/* メインナビゲーション */
#headerNaviMain {
clear: both;
overflow: hidden;
font-size: 0.9em;
position: relative;
}

#headerNaviMain ul {
display:table;
width: 100%;
position: relative;
/*table-layout: fixed;*/
}

#headerNaviMain li {
display:table-cell;
text-align: center;
background: url(../img/vBorder.png) no-repeat right center;
line-height: 2em;
position: relative;
vertical-align: middle;
}
#headerNaviMain li:last-child {
	background:none;
}

#headerNaviMain li a {
border-bottom: 2px solid rgba(255,255,255,0);
padding-bottom: 3px;
}

#headerNaviMain li.Now a,
#headerNaviMain li a:hover {
border-bottom: 2px solid rgba(255,255,255,1);
 }

/* 開閉ボタン */
#SPnaviBtn {
width: 50px;
height: 50px;
position: fixed;
text-align: center;
z-index: 1000;
top:10px;
right:10px;
cursor: pointer;
display: none;
}

/* メニューの区切り線 */
#SPmenuBorder {
border-left: 1px solid #CCC;
height: 63px;
position: fixed;
right: 68px;
top:0;
width: 1px;
z-index: 100;
display: none;
}

/* カレンダーボタン */
#SPcalBtn {
width: 50px;
height: 50px;
position: fixed;
text-align: center;
z-index: 1000;
top:15px;
right:75px;
cursor: pointer;
display: none;
z-index: 100;
font-size: 0.6em;
line-height: 1.6;
font-family: 'Heebo', sans-serif;
}

#SPcalBtn a i {
font-size: 2.2em;
padding-bottom: 2px;
color: #333;
}

#SPcalBtn a {
color: #333;
text-decoration: none;
display: block;
}

/* 言語ボタン */
#SPlangBtn {
width: 50px;
height: 50px;
position: fixed;
text-align: center;
z-index: 1000;
top:15px;
right:125px;
cursor: pointer;
display: none;
z-index: 100;
font-size: 0.6em;
line-height: 1.6;
font-family: 'Heebo', sans-serif;
}

#SPlangBtn a img {
width: 2.3em;
display: block;
margin: auto;
padding-bottom: 1px;
}

#SPlangBtn a {
color: #333;
text-decoration: none;
display: block;
}

@media screen and (max-width: 750px) {
#SPnaviBtn,
#SPcalBtn,
#SPlangBtn,
#SPmenuBorder {
display: block;
}
}

#SPmenu {
position:fixed;
background: #1E5C80;
width: 100%;
top:55px;
left: 0;
box-sizing: border-box;
z-index: 1000;
display: none;
height: 100%;
overflow: hidden;
}

#SPmenuWrapper {
height: calc(100%*0.91);
overflow: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 375px) {
#SPmenuWrapper {
height: calc(100%*0.9);
}
}

@media screen and (max-width: 320px) {
#SPmenuWrapper {
height: calc(100%*0.878);
}
}


#SPmenu ul {
background: #2979A5;
display: none;
}

#SPmenu a,
#SPmenu h4 {
display: block;
position: relative;
padding: 15px;
color: #FFF;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.2);
font-size: 0.9em;
font-weight: 700;
}

#SPmenu h4.open {
  position: -webkit-sticky; /* Safariに対応する */
  position: sticky; /* 要素を固定/解除する */
  top: 0; /* 縦方向の閾値 */
  left: 0; /* 横方向の閾値 */
	z-index: 2;
	}

#SPmenu h3 {
font-size: 1em;
position: relative;
font-weight: 700;
}

#SPmenu a i {
position: absolute;
top:50%;
right: 10px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 0.5;
}

#SPmenu h4 i {
position: absolute;
top:50%;
right: 10px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 0.5;
}

#SPmenu i.fa-chevron-up {
display: none;
}

#SPmenu h4.open i.fa-chevron-up {
display: block;
}

#SPmenu h4.open i.fa-chevron-down {
display: none;
}

#SPmenu h4.open {
background: #0E365C;
}

/*============================================
スマホボタン
===========================================*/
.menu-trigger.active {
background: #1E5C80;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}

.menu-trigger,
.menu-trigger span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}

#SPmenuBars {
position: absolute;
left: 50%;
width: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

.menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background-color: #000;
}

.menu-trigger.active span {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background-color: #FFF;
}


.menu-trigger span:nth-of-type(1) {
top: 11px;
}
.menu-trigger span:nth-of-type(2) {
top: 19px;
}
.menu-trigger span:nth-of-type(3) {
top: 27px;
}

.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
  top:10px;
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-5px) rotate(45deg);
  transform: translateY(-5px) rotate(45deg);
  top:25px;
}


/*============================================
ピックアップ
===========================================*/
#PickUpWrapper {
background: #EFEFEF;
padding: 20px;
padding-top: 40px;
padding-bottom: 40px;
position: relative;
clear: both;
}

#PickUpWrapper h2 {
font-size: 1em;
font-weight: 700;
line-height: 1.3;
}

#PickUpWrapper h2 div {
border-bottom: 1px solid #222;
width: 30px;
padding-top: 1em;
}

#PickUpWrapper .waveImg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

#PickUpWrapper .waveImg img {
display: block;
	height: 20px;
	width: 100%;
}

.pickupSliderWrapper {
overflow: hidden;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 50px;
}

#PickUpWrapper .ListMorebtn {
position: absolute;
right: 0;
top:0;
}

#PickUpWrapper .ListMorebtn a {
color: #999;
font-size: 0.7em;
text-decoration: none;
border-bottom: 1px solid #999;
padding-bottom: 2px;
}

#PickUpWrapper .ListMorebtn a:hover {
color: #222;
border-bottom: 1px solid #222;
}

.scroll {
overflow: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
padding-bottom: 5px;
margin-bottom: 5px;
position: relative;
}

.scroll::-webkit-scrollbar{
height: 5px;
}
.scroll::-webkit-scrollbar-track{
border-radius: 4px;
background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {
border-radius: 4px;
background: #BCBCBC;
}

.PickupBox {
width: 33.3%;
box-sizing: border-box;
display: inline-block;
margin-right: 20px;
padding-left: 8px;
position: relative;
vertical-align: top;
}

.PickupBox:last-child {
margin-right: 0;
}

.PickupBox img {
width: 100%;
	height: 100%;
	object-fit: cover;
display: block;
transition-duration: 0.3s;
}

.PickupBox a:hover img {
transform: scale(1.03);
}

.PickupBox a {
text-decoration: none;
color: #222;
display: block;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

.PickupBox a:hover {
box-shadow: 0 0 3px rgba(0,0,0,0.2);
opacity: 0.7;
}

.pickupImg {
height: 200px;
overflow: hidden;
background: #EFEFEF;
position: relative;
}

.pickupImg .PC img {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

.PickupBox a:hover .pickupImg .PC img {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}


.pickupText {
padding: 20px;
overflow: hidden;
white-space:normal;
line-height: 1.6;
background: #FFF;
}

@media screen and (max-width: 750px) {
.pickupSliderWrapper {
width: 150vw;
font-size: 0.8em;
padding-right: 20px;
}
.PickupBox {
margin-right: 5px;
}
.PickupBox:last-child {
margin-right: 0;
}
.pickupText {
padding: 10px;
overflow: hidden;
white-space:normal;
line-height: 1.6;
background: #FFF;
}
}

@media screen and (max-width: 375px) {
.pickupImg {
height: 150px;
overflow: hidden;
background: #FFF;
}
}

.pickupText span {
display: block;
font-size: 0.85em;
font-weight: 700;
}

.pickupText h3 {
font-size: 0.9em;
font-weight: 700;
line-height: 1.5;
}

.pickupText h3 em,
.pickupText p {
display: block;
font-size: 0.85em;
font-weight: 400;
}

.PickupBox strong {
position: absolute;
top:190px;
left: 0;
color: #FFF;
font-size: 0.75em;
line-height: 1.7;
padding-left: 3px;
padding-right: 3px;
}

@media screen and (max-width: 400px) {
.PickupBox strong {
top:140px;
}
.pickupText span {
font-feature-settings : "palt";
font-size: 0.75em;
}
}

.PickupBox strong .triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 8px 4px 0;
border-color: transparent #999 transparent transparent;
position: absolute;
left: 0;
bottom:-4px;
}

/*================================
カテゴリタブ
================================*/
/* 定期演奏会 */
.PickupBox.cat00 strong {
background: #aa3d14;
}

.PickupBox.cat00 span {
color:#aa3d14;
}

/* 札響名曲コンサート */
.PickupBox.cat01 strong {
background: #00A69A;
}

.PickupBox.cat01 span {
color:#00A69A;
}

/* 札響名曲コンサート */
.PickupBox.cat02 strong {
background: #0071B9;
}

.PickupBox.cat02 span {
color:#0071B9;
}

/* 札響特別演奏会 */
.PickupBox.cat03 strong {
background: #E86D91;
}

.PickupBox.cat03 span {
color:#E86D91;
}

/* 東京公演 */
.PickupBox.cat04 strong {
background: #37beb7;
}

.PickupBox.cat04 span {
color:#37beb7;
}

/* その他のコンサート */
.PickupBox.cat05 strong {
background: #C8CA2B;
}

.PickupBox.cat05 span {
color:#C8CA2B;
}

/* ニュース・トピックス */
.PickupBox.cat06 strong {
background:#238BB0;
}

/*============================================
フッターバナー
===========================================*/
#footerBnrWrapper {
padding-top: 40px;
padding-bottom: 40px;
position: relative;
clear: both;
text-align: center;
}

/* 60周年バナー */
#footerBnrWrapper .sso60th_bnr_wrap {
	margin-bottom: 8px;
}

@media screen and (max-width: 750px) {
#footerBnrWrapper .sso60th_bnr_wrap {
	padding: 10px;
	margin: 0;
}
}

#footerBnrWrapper .innerBox {
max-width: 1020px;
}

#footerBnrWrapper ul,
#footerBnrWrapper li {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

#footerBnrWrapper li {
-webkit-width: calc(100%/4.01);
/* width: calc(100%/4.01); */
width: 260px;
box-sizing: border-box;
padding: 10px;
}

#footerBnrWrapper li img {
display: block;
width: 100%;
}

@media screen and (max-width: 1200px) {
#footerBnrWrapper {
padding-left: 10px;
padding-right: 10px;
}
}

@media screen and (max-width: 750px) {
#footerBnrWrapper {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}

#footerBnrWrapper ul,
#footerBnrWrapper li {
justify-content: flex-start;
}
#footerBnrWrapper li {
width: 50%;
box-sizing: border-box;
padding: 10px;
float: left;
}
}

#footerBnrWrapper a:hover {
opacity: 0.7;
}

/*==================================
フッターメニュー
==================================*/
#footerMainNavi {
overflow: hidden;
margin:auto;
clear: both;
background: #F1F1F1;
}

@media screen and (max-width: 750px) {
#footerMainNavi {
display: none;
}
}

#footerMainNavi li {
-webkit-width: calc(100%/7.01);
width: calc(100%/7.01);
text-align: center;
float: left;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
}

#footerMainNavi li img {
width: 70%;
display: block;
padding-bottom: 10px;
margin: auto;
}

#footerMainNavi li a {
color: #222;
font-size: 0.8em;
text-decoration: none;
display: block;
border-right:1px dotted #CCC;
opacity: 0.7;
}

#footerMainNavi li a span {
display: inline-block;
padding-bottom: 2px;
transition: all 0.3s ease;
}

#footerMainNavi li a:hover {
opacity: 1;
}

#footerMainNavi li:last-child a {
border: 0;
}

/*============================================
フッター
===========================================*/
footer {
background: #000;
color: #FFF;
clear: both;
padding-top: 40px;
padding-bottom: 40px;
}

#footerLogo {
width: 220px;
text-align: center;
font-size: 0.7em;
line-height: 1.7;
float: left;
}

#footerLogoSP {
display: none;
}

#footerLogo img,
#footerLogoSP img {
max-width: 45%;
}

#footerLogo li.icon img {
height: 18px;
position: relative;
top:1px;
max-width: inherit;
}

#footerLogo h3,
#footerLogoSP h3 {
font-family: 'Lora',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", メイリオ, Meiryo, serif;
padding-bottom: 10px;
}

#footerLogo h3 span,
#footerLogoSP span {
display: block;
font-size: 0.75em;
color: #999;
}

#footerLogo li,
#footerLogoSP li {
display: inline-block;
padding: 5px;
}

#footerLogo li a,
#footerLogoSP li a {
font-size: 1.6em;
color: #FFF;
text-decoration: none;
}

#footerSitemapWrapper {
margin-left: 230px;
padding-top: 20px;
}

#footerSitemapWrapper h4 {
font-size: 0.9em;
font-weight: 700;
border-bottom: 1px solid #FFF;
line-height: 1.6;
padding-bottom: 5px;
}

#footerSitemapWrapper h4 i {
display: none;
}

#footerSitemapWrapper ul {
line-height: 2em;
font-size: 0.75em;
padding-top: 7px;
padding-bottom: 20px;
}

#footerSitemapWrapper li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#footerSitemapWrapper a {
color: #FFF;
text-decoration: none;
}

#footerSitemapWrapper a i {
padding-right: 3px;
opacity: 0.5;
}

.footerSitemap {
-webkit-width: calc(100%/3.01);
width: calc(100%/3.01);
box-sizing: border-box;
float: left;
padding-left: 30px;
}

@media screen and (max-width: 750px) {
footer {
padding-top: 0;
padding-bottom:10px;
}
#footerLogo {
display: none;
}
#footerLogoSP {
display: block;
text-align: center;
font-size: 0.7em;
line-height: 1.7;
padding-top: 20px;
}
#footerLogoSP img {
max-width: 100px;
}
#footerLogoSP li.icon img {
height:25px;
}

#footerLogoSP li {
padding: 10px;
}
#footerLogoSP li a {
font-size: 2.4em;
}

#footerSitemapWrapper {
margin-left: 0;
padding-top: 0;
}
.footerSitemap {
width: 100%;
box-sizing: border-box;
float: none;
padding-left: 0;
}
#footerSitemapWrapper h4 {
border-bottom: 0;
padding: 10px;
position: relative;
border-bottom: 1px solid #333;
}
#footerSitemapWrapper  i {
position: absolute;
top:50%;
right: 10px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 0.5;
}
#footerSitemapWrapper i.fa-chevron-up {
display: none;
}
#footerSitemapWrapper  h4.open i.fa-chevron-up {
display: block;
}
#footerSitemapWrapper  h4.open i.fa-chevron-down {
display: none;
}

#footerSitemapWrapper h4 i.fa-chevron-down {
display: block;
}

#footerSitemapWrapper ul {
line-height: 1.8em;
font-size: 0.85em;
padding:0;
background: #333;
display: none;
}

#footerSitemapWrapper a {
display: block;
position: relative;
padding: 10px;
border-bottom: 1px solid #444;
}

#footerSitemapWrapper ul li:last-child a {
border-bottom: 0;
}
}

/* 事務所移転 */
footer .iten_wrap {
	 line-height: 1.55;
    background-color: #333;
    padding: 10px;
    margin-top: 10px;
    border-radius: 3px;
	font-size: 1.1em;
}

@media screen and (max-width: 750px) {
	footer .iten_wrap {
		margin-left: 20px;
		margin-right: 20px;
	}
}

footer .iten_wrap strong {
	border-bottom: 1px solid #CCC;
	display: block;
	padding-bottom: 5px;
	margin-bottom: 10px;
	font-size: 1.1em;
	color: yellow;
}

footer .iten_wrap .small_text {
	font-size: 10px;
	display: block;
}

/*==================================
プレビュー用
==================================*/
#tab {
	max-width: 1000px;
	margin: auto;
	padding-top: 20px;
	padding-bottom: 20px;
}

#tab ul {
	display: flex;
	justify-content: space-between;
}

#tab li {
	width: 49.8%;
}

#tab li a {
	background: #CCC;
	color: #333;
	cursor: pointer;
	display: block;
	text-align: center;
	padding: 14px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	position: relative;
}

#tab li.now a {
	background: #ff7f00;
	color: #FFF;
}

#tab li a .triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 12px 20px 0 20px;
border-color: #ff7f00 transparent transparent transparent;
	display: none;
	position: absolute;
	bottom:-8px;
	left: 50%;
	transform: translateX(-50%);
}

#tab li.now a .triangle {
display: block;
}

.none {
	display: none;
}