@charset "UTF-8";

/*!
Theme Name: Akiyasu Fukushima
Author: nakedrocks
Template:   cocoon-master

*/

/************************************
** reset
************************************/
/* 白背景リセット */
.header-container, .main, .sidebar, .footer{
	background:none;
}
*{
	margin: 0; padding: 0; box-sizing: border-box;
}
/* 更新日の消去 */
.date-tags{
	display:none;
}
/************************************
** html,body
************************************/
body {
	font-size:14px;
	color: #fff;
	line-height: 1.8;
	overflow-x: hidden;
-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
/* 背景色のベース */
	background-color: rgb(28, 17, 14);
}

/*---- フォント読み込み対策 ----*/
/* 1. 読み込み中：テキストを透明にする */
.wf-loading body {
  opacity: 0;
}

/* 2. 読み込み完了（または失敗）：フェードインで表示 */
.wf-active body, 
.wf-inactive body {
  opacity: 1;
  transition: opacity 0.5s ease-in; /* 0.5秒かけてふわっと出す */
}
/************************************
** container
************************************/
#container {
   /* pointer-events: none; */
	/* position: fixed; */
/* グラデーションを反映させるための背景レイヤー */
	top: 0;
	left: 0;
	width: 100vw;
	overflow-x:hidden;
	/* height: 100vh; */
	z-index: -9999;
/* グラデーション */
	background-image: linear-gradient( 180deg, 
    	rgb(28,17,14) 15%, 
    	rgb(19,39,88) 25%, 
    	rgb(24,70,129) 40%, 
    	rgb(81,146,217) 60%, 
    	rgb(185,189,205) 85%, 
    	rgb(211,168,147) 90%, 
    	rgb(234,105,85) 95%, 
    	rgb(150,48,62) 100%
	);

 /* background-image: linear-gradient( 180deg, 
    	rgb(28,17,14) 0%, 
    	rgb(19,39,88) 15%, 
    	rgb(24,70,129) 30%, 
    	rgb(81,146,217) 45%, 
    	rgb(185,189,205) 60%, 
    	rgb(211,168,147) 75%, 
    	rgb(234,105,85) 90%, 
    	rgb(150,48,62) 100%
	); */
/* 背景を縦に長く引き伸ばす */
	background-size: 100vh; 
	/* background-size: 100% 600%;  */
	background-position: center 0%;
	transition: background-position 0.1s ease-out;
}
/* 子ページのグラデーション */
#container:has(#post-90){
	background-image: linear-gradient( 180deg, 
    	rgb(28,17,14) 0%,
    	rgb(19,39,88) 20%, 
    	rgb(24,70,129) 30%, 
    	rgb(81,146,217) 60%, 
        rgb(185,189,205) 70%, 
        rgb(211,168,147) 80%, 
    	rgb(234,105,85) 90%, 
    	rgb(150,48,62) 100%
	) !important;
}
.content{
	margin-top:0;
}
.main{
	padding:0 !important;
}
.entry-content{
	margin:0;
}
/************************************
** header
************************************/
#header .logo-text{
	text-align:left;
	padding:0;
}
a.menu-button-in{
	color: #FFFFFF;
	font-family: "kepler-std-display", serif;
	font-weight: 500;
	text-align:left;
	font-size:30px !important;
	color: #FFFFFF !important;
	margin:10px 0 0 10px; 
}
@media screen and (max-width: 1023px){
/* モバイルヘッダー高さ分の余白削除 */
body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
    margin-top: 0px !important;
}
a.menu-button-in{
	font-size:20px !important;
	margin:10px 0 0 10px; 
}
}

/* ヘッダーの出現/消去 */
.logo-menu-button img{
	max-height:30px;
}
#header-container{
  display: none;
}
/* 検索アイコン非表示 */
.search-menu-button { 
	display: none !important; 
}
label#search-menu-open {
    display: none;
}
/* 右側からメニューを開く */
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}
/* ===== PCでもハンバーガーを使い、ロゴ左／メニュー右に配置 ===== */
.mobile-header-menu-buttons{
   display: flex !important;
   align-items: center;
   gap: 8px;
   top: 0;
   height: 30px;
   opacity:85%;
	background:none;
	box-shadow:none;
  }
.mobile-header-menu-buttons .menu-button{
   align-items: center;
  }
.navi-menu-button .navi-menu-caption{
   display: none;
}
/* （もし出ていれば）PC用グローバルナビを非表示にする */
.navi, .global-nav, .header-container .menu-main, .pc-header-menu{
   display: none !important;
  }

/* 並び順を指定：ロゴ→メニュー→検索 */
.mobile-header-menu-buttons .logo-menu-button{ order: 1; margin-right: auto; width:auto; } /* 左端に固定 */
.mobile-header-menu-buttons .navi-menu-button{ order: 2; margin-left: auto; }  /* 右側に押し出すトリガー */
.mobile-header-menu-buttons .search-menu-button{ order: 3; }

/* 見た目の微調整（任意） */
.mobile-header-menu-buttons .menu-icon{ font-size: 20px; }
.mobile-header-menu-buttons .menu-caption{ margin-left: .4em; font-size: 14px; line-height: 1; }
.mobile-header-menu-buttons .menu-button-in{ padding: 5px 12px; }

/* モバイルのロゴ位置 */
.mobile-menu-buttons .menu-button{
 justify-content:left;
}
/* 元のFont Awesomeを消す */
.navi-menu-icon .fa.fa-bars{ display:none !important; }

/* ハンバーガーアイコン */
.navi-menu-icon{
  display: block;
  position: relative;
  width:33px !important;
  height:33px !important;  
  /* height:14.5px !important; */ 
  width: 33px;
  transform: translate(0, 0);
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.navi-menu-icon span {
  display: block;
  position: absolute;
  right: 0;
  width: 33px;
  height: 1px;
  background-color: #FFFFFF;
  transition: all .8s;
}
/* ヘッダー背景出現でハンバーガーの色変更 */
ul.is-scrolled .navi-menu-icon span {
  background-color: #ed7b62;
}

.navi-menu-icon span:nth-child(1) {
  top: 5px;
  width: 60px;
  animation: equalizer01 7000ms infinite;
}
.navi-menu-icon span:nth-child(2) {
  top: 15px;
  width: 30px;
  animation: equalizer02 5000ms infinite;
  animation-delay: 0.33s;
}
.navi-menu-icon span:nth-child(3) {
  top: 25px;
  width: 20px;
  animation: equalizer02 5000ms infinite;
}
@keyframes equalizer01 {
  0% {
    width: 70%;
  }
  10% {
    width: 50%;
  }
  20% {
    width: 100%;
  }
  30% {
    width: 10%;
  }
  40% {
    width: 50%;
  }
  50% {
    width: 70%;
  }
  60% {
    width: 50%;
  }
  70% {
    width: 10%;
  }
  80% {
    width: 100%;
  }
  90% {
    width: 10%;
  }
  100% {
    width: 70%;
  }
}
@keyframes equalizer02 {
  0% {
    width: 30%;
  }
  10% {
    width: 20%;
  }
  20% {
    width: 40%;
  }
  30% {
    width: 10%;
  }
  40% {
    width: 20%;
  }
  50% {
    width: 30%;
  }
  60% {
    width: 20%;
  }
  70% {
    width: 10%;
  }
  80% {
    width: 40%;
  }
  90% {
    width: 10%;
  }
  100% {
    width: 30%;
  }
}
/* ナビ開くときのスピード */
#navi-menu-input:checked ~ #navi-menu-content{
	transition: 1s ease-in-out;
}
/* ナビ閉じるときのスピード */
.menu-content{
    transition: 0s ease-in-out !important;
    /* transition: 1s ease-in-out !important; */
	overflow:hidden; 
}
/* 閉じるボタン */
.menu-close-button{
	text-align:right;
	padding-right:1em;
}
.fa-solid, .fas {
    font-weight: 900;
    color: #CCCCCC;
    font-size: 0.5em;
}


/* グローバルメニュー */
.menu-drawer a {
  position: relative; 
  display: inline-block;
  /* transitionで色変化を滑らかにする場合 */
  transition: color 1s ease; 
  font-weight: 500;
  font-family: "kepler-std-display", serif;
  font-size:1.5rem;
  color:#162144;
}

.menu-drawer a::after {
  content: '';
  display: block;
  height: 1px;
  width: 0%;
  background: #e26848; /* 色を#0d4571に変更 */
  position: absolute;
  bottom: 0;
  left: 0;     /* 開始位置を左端に修正 */
  transition: .3s ease; /* transitionにeaseを追加 */
}

.menu-drawer a:hover {
  background: none;
}

.menu-drawer a:hover::after {
  width: 100%; /* 幅を100%に修正 */
}
/* スクロールでヘッダー表示 */
.mobile-header-menu-buttons{
    top: -200px;
    left: 0;
    right: 0;
    transition: top 1s ease-in-out;
}
@media screen and (max-width: 600px) {
    .body .mobile-header-menu-buttons {
        top: -200px;
    }
}
.mobile-header-menu-buttons.is-scrolled {
    top: 0;
}
.mobile-header-menu-buttons .navi-menu-button.menu-button{
	position: fixed !important;
    /* 2. 表示させたい位置（例：画面の右上）を設定 */
    top: 5px;    /* 画面上端から10px下に配置 */
    right: 10px;  /* 画面右端から10px左に配置 */
    left: auto;   /* leftの値を解除（rightを優先）*/   
    /* 3. 他の要素よりも手前に表示されるようにz-indexを指定（親要素より高くなくても良いが、念のため） */
    z-index: 1000;
}
/* スクロール時一瞬余白が出るのを防ぐ */
#header-fixed{
	padding-top:0 !important;
}
/************************************
** section
************************************/
section {
    padding: 20px 0;
    margin: 0 10px;
    display: flex; 
	flex-direction: column; 
}
section.mv {
	justify-content: center;
    margin: 0px;
}

/************************************
** 見出し
************************************/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5{
/* 合字（fiやstのような繋ぎ）をすべて有効にする */
    font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
/* OpenType機能を直接指定する場合（上記で反映されないとき用） */
    font-feature-settings: "ss01" 1;
  /* 3. カーニング（文字詰め）をメトリクス（自動）に設定する */
    font-kerning: normal;
	font-family: "kepler-std-display", serif;
	font-weight:lighter !important;
    font-optical-sizing: auto; 
    text-transform: none !important;
    font-size: 55px;
    text-align: center;
	background-color: transparent !important;
	line-height:1.5;
	margin-bottom:20px;
	padding-bottom:0;
}

/* トップページh1 */
.article h1{
	font-size:55px;
}

.article h1 > span{
	display:block;
	line-height:90%;
	margin:0;
}
.article h1 > span.conductor,
.article h1 > span.tokyo{
	display:block;
	color: #ed7b62;
	font-size:12px;
	font-family: "acumin-pro", sans-serif;
	margin:0.6em 0;
}

/* upcomming */
.article h2.upcm {
	margin:20px 0 0 0;
}
.article h2.upcm > span{
	font-size:40px;
	color: #ed7b62;
	font-family: "kepler-std-display", serif;
	font-weight: 500;
	font-style: italic;
	line-height:30%;
	letter-spacing:-0.05em;
	display:block;
/* 合字（リガチャー）を有効にする */
	font-variant-ligatures: common-ligatures discretionary-ligatures;
}
/* performances width orchestra */
.article h2.pwo{
	font-variant-ligatures:none;
   	font-size:50px !important;
	text-align:left;
	line-height:90%;
	margin-top:1.5em;
}

.article h2.pwo > span{
	color: #FFFFFF;
	text-align:center;
	font-family: "kepler-std-display", serif;
	font-weight: 500;
	letter-spacing:-0.05em;
	display:block;
	font-variant-ligatures: common-ligatures discretionary-ligatures;
}
.article h2.pwo > span.performances{
	font-style: italic;	
	font-size:45px;
	letter-spacing:-0.01em;
}
.article h2.pwo > span.widh{
	display:inline;
	font-style: italic;
	font-size:40px;
	color: #ed7b62;
}


/* workinqueries */
.article h2.wi{
	font-size:50px;
	margin-bottom:0;
}
.article h2.wi > span.work{
	display:inline;
	font-family: "kepler-std-display", serif;
	letter-spacing:-0.03em;
	font-style: italic;
	color: #ed7b62;
	font-weight:200;
}
.article h2.prof{
	font-size:60px;
	color:#162144;
	margin-bottom:0;
}


.article h2.cont{
	font-size:56px;
	font-variant-ligatures: none;
	margin-bottom:0;
	padding-top:0;
}

/* Concert Series */
.article h2.cons{
	padding-bottom:0;
	margin-bottom:0;
	line-height:75%;
}
.article h2.cons > span{
	font-size:30px;
	color: #ed7b62;
	font-family: "kepler-std-display", serif;
	font-weight: 500;
	font-style: italic;
	letter-spacing:0.05em;
	display:block;
/* 合字（リガチャー）を有効にする */
	font-variant-ligatures: common-ligatures discretionary-ligatures;
	line-height:100%;

}
.article h3.cons-jp{
	font-family: "Yu Mincho Pr6N", "YuMincho Pr6N", "Yu Mincho", "YuMincho", serif;
	font-size:18px;
	background:none;
	border:none;
	margin-top:0;
	
	
}
/* Publications */
h2.pb{
	color:#FFFFFF;
}
h2.winv{
	color:#162144;
	i{
		font-weight:500;
		color:#e26848;
	}
}

/************************************
** 段落
************************************/
p{
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #FFFFFF;
}

/************************************
** hover
************************************/
a:hover{
	color:inherit;
	opacity:0.8;
}
/************************************
** ボタン
************************************/
.button-style {
  /* 基本のリセット */
  background:none;
  color: #FFFFFF;
  cursor: pointer;
  padding: 5px 24px;
  border: none;
  
  /* 上下の白いライン */
  border-top: 2px solid white;
  border-bottom: 2px solid white;

  /* レイアウト */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px; /* テキストと矢印の間隔 */
  margin:40px auto 20px auto !important;
  /* ホバー時の演出（お好みで） */
  transition: opacity 0.2s ease;
}

.button-style:hover {
  opacity: 0.8;
}
.button-style a{
	background:none;
	padding:0;
  /* フォント設定 (イタリックのセリフ体) */
  font-family: "kepler-std-display", serif;
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.05em;
  font-weight:500;
}
/* ネイビー */
.button-style.vn{
	color: #162144;
	border-top: 2px solid #162144;
	border-bottom: 2px solid #162144;
	margin:0 !important;
}
.button-style.vn a{
	color: #162144;
}

.button-style.lsn{
	color: #162144;
	border-top: 2px solid #1a1970;
	border-bottom: 2px solid #1a1970;
	margin:30px auto 20px auto !important;
	width:fit-content;
}
.button-style.lsn a{
	color: #1a1970;
	font-family: "Yu Mincho Pr6N", "YuMincho Pr6N", "Yu Mincho", "YuMincho", serif;
	font-style:normal;
	font-size:0.9rem;
}

/* 矢印アイコンの微調整 */
.arrow img{
  width:22px;
  height:auto;
}

.button-style.yt .arrow img,
.button-style.vn .arrow img{
  line-height: 0;
  margin-left:20px;
  margin-bottom:3px !important;
  width:20px;
  height:auto;
}

.button-style.lsn .arrow img{
  width:20px;
  height:16px;
  line-height: 0;
  margin-left:10px;
  margin-bottom:3px !important;
}

.button-style.wd{
    color:#162144 !important;
	border-color:#162144;
}
.button-style.wd a{
    color:#162144 !important;
}

.button-style.witp{
    color:#FFFFFF !important;
	border-color:#FFFFFF;
}
.button-style.witp a{
    color:#FFFFFF !important;
}

.button-style.witp .arrow img,
.button-style.wd .arrow img{
  line-height: 0;
  margin-left:20px;
  margin-bottom:3px !important;
}

/************************************
** Upcoming Concerts
************************************/
.concert-section{
	border: 1px solid #ed7b62 !important;
	border-radius:16px;
	text-align:center;
	padding:10px;
	margin:0 10px;
}
.concert-section img{
	border-radius:16px !important;
}
@media screen and (min-width: 1023px){
.concert-section img{
   width:400px;
}
}
.concert-info{
	font-size:0.8rem; 
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", sans-serif;
    margin:30px 0 5px 0 !important;
	color:#fff;
}
h3.concert-title{
	color:#fff;
	font-size:1rem;
	margin:0 !important;
	border:none;
	white-space: nowrap;
	line-height: 60%;
	font-family: "Yu Mincho Pr6N", "YuMincho Pr6N", "Yu Mincho", "YuMincho", serif;
}
.buy-tickets{
	margin-top:1em !important;
    border-radius: 6px;
    background-image: -moz-linear-gradient( 90deg, rgb(223,96,78) 0%, rgb(220,157,132) 99%);
    background-image: -webkit-linear-gradient( 90deg, rgb(223,96,78) 0%, rgb(220,157,132) 99%);
    background-image: -ms-linear-gradient( 90deg, rgb(223,96,78) 0%, rgb(220,157,132) 99%);
    margin:0 auto;
    width: 200px;
	line-height:100%;
	padding:0.3em;
	color:#FFFFFF;
	font-size:20px;
	letter-spacing:0.75px;
	display:block;
	text-decoration:none;
	font-family: "kepler-std-display", serif;
	font-weight:normal !important;
    font-optical-sizing: auto;
	font-style:italic;
	text-align:center;
    -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* カルーセル外枠 */
.carousel-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
	  /* スワイプ対応 */
	  overflow-x: auto; 
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
/* --- スクロールバー非表示（決定版） --- */
    scrollbar-width: none;          /* Firefox用 */
    -ms-overflow-style: none;       /* IE/Edge用 */
}

/* Chrome, Safari, Opera, Edge用 */
.carousel-wrapper::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* スライド本体 */
.concert-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    transition: transform 0.4s ease-in-out;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 各スライド共通設定（スマホ優先） */
.concert-section {
    flex: 0 0 80% !important;
    width: 100% !important;
    box-sizing: border-box;
    border: 1px solid #ed7b62 !important;
    border-radius: 16px;
    padding: 15px !important;
    background-color: transparent;
    scroll-snap-align: center;
	scroll-snap-stop: always;
}


/* popup */
.view-back-btn,
.view-front-btn{
	cursor:pointer; 
	padding:6px 10px;
	font-family: "kepler-std-display", serif;
	border-bottom:1.5px solid #ed7b62; 
	color:#ed7b62; 
	/* border-radius:4px; */ 
	font-size:16px;
	font-style:italic;
	font-weight:200;
	line-height:100%;
	width:fit-content;
	margin:0 auto;
}

.flyer-container .view-back-btn{
	display:block;
}
.view-back-btn > img,
.view-front-btn > img{
	width:1em !important;
	height:auto !important;
	line-height:100%;
	margin-left:3px;
	margin-bottom:5px;
}
/* --- PC用：1024px以上で横並び（幅200px固定） --- */
@media screen and (min-width: 1024px) {
	.carousel-wrapper{
        max-width: fit-content;
	}
    .concert-carousel {
        display: flex !important;
        flex-wrap: wrap !important; /* 枚数が多い場合に折り返すならwrap、一列ならnowrap */
        gap: 20px !important;
        transform: none !important; /* スライド移動を無効化 */
		max-width: fit-content;
    }
    
    .concert-section {
        flex: 0 0 300px !important; /* 200pxから伸び縮みさせない */
         width: 300px !important;
         max-width: 300px !important;
    }

    /* PCでは画像サイズも200pxに収まるように調整 */
    /* .concert-section img {
        width: 100% !important;
        height: auto !important;
    } */

    .nav-btn {
        display: none !important;
    }
}

/************************************
**  performances width orchestra
************************************/
/* 親要素（video-containerなど）の設定：ここでタッチを受け止める */
.video-item .video-container,
.video-item .video {
    /* pointer-events: auto; */ /* コンテナ側は触れるようにする */
}

/* 親要素：スクロールの設定 */
.video-scroll-container {
    display: flex !important;
    flex-wrap: nowrap !important;
	margin-bottom:0 !important;
    
    /* 修正ポイント：Androidでスクロールを確実に検知させる */
    overflow-x: scroll !important; 
    overflow-y: hidden !important;
    
    /* スナップ機能の設定 */
    scroll-snap-type: x mandatory !important;
    
    /* iOS/Androidのスクロール追従 */
    -webkit-overflow-scrolling: touch !important;
    
    width: 100% !important;
    gap: 20px !important; /* column-gapより確実に効くgapを使用 */
    
    /* 左右の余白を調整（paddingが原因で計算が狂うのを防ぐ） */
    padding: 0 7.5% 0 7.5% !important; 
    box-sizing: border-box !important;
}
.video-container,.video{
	margin-top:0 !important;
}
/* 子要素：各動画の設定 */
.video-item {
	padding:0;
	
    /* 修正ポイント：widthではなくflex-basisを優先 */
    flex: 0 0 85% !important;
    width: 85% !important;
    min-width: 85% !important;

    /* スナップの設定 */
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    
    margin: 0 !important;
    
    /* Androidでの描画バグ防止 */
    backface-visibility: hidden;
}
.video-item iframe {
    pointer-events: auto;
}
/* カラムの中の余計なマージンを排除 */
.video-item .wp-block-embed {
    margin: 0 !important;
}


/* スクロールバーを非表示 */
.video-scroll-container::-webkit-scrollbar {
    display: none !important;
}

.video-item iframe {
    border: 1px solid #ed7b62 !important;
    border-radius: 8px !important;
}

/* PC向け（1024px以上）の設定を上書き・固定 */
@media screen and (min-width: 1024px) {
    .video-scroll-container {
        display: flex !important;
        flex-wrap: nowrap !important; /* 折り返さない */
        overflow-x: visible !important; /* スクロールを消す */
        width: 100% !important;
        max-width: 1200px; /* サイト幅に合わせて調整してください */
        margin: 0 auto !important;
        padding: 0 !important;
        gap: 20px !important; /* 動画同士の隙間 */
        
        /* スマホ用の機能をオフにする */
        scroll-snap-type: none !important;
        transform: none !important;
        left: auto !important;
    }

    .video-item {
        /* 3枚並べるために幅を1/3にする */
        flex: 1 1 calc(33.333% - 20px) !important; 
        max-width: calc(33.333% - 20px) !important;
        min-width: 0 !important; /* スマホ用のmin-widthを解除 */
        
        /* スナップ位置を解除 */
        scroll-snap-align: none !important;
        margin: 0 !important;
    }

    .video-item iframe {
        pointer-events: auto !important; /* PCは普通に操作可能 */
        width: 100% !important;
    }
}

/************************************
**  profile
************************************/
.article h4.prof-h4{
	font-size:36px;
	border:none;
	color: #162144;
}
.article h4.prof-h4.w{
	color: #FFFFFF;
}
.article h4.prof-h4 > span{
	display:block;
	line-height:100%;
	margin:0.3em 0;
}
.article h4.prof-h4 > span.conductor{
	display:block;
	font-size:14px;
	font-family: "acumin-pro", sans-serif;
}
.article h4.prof-h4 > span.fukushima{
	display:block;
	font-size:22px;
	font-weight:400;
	font-family: "Yu Mincho Pr6N", "YuMincho Pr6N", "Yu Mincho", "YuMincho", serif;
}
p.prof-txt{
	color: #162144;
	text-align:left;
	margin:0 auto !important;
	width:fit-content;
	padding:0 1em;
}
.wi-text{
	margin:0 auto !important;
	width:fit-content;
	padding:0 1em;
}
/************************************
**  work details
************************************/
/*---------------------
年表
---------------------*/
.timeline-container {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    width: 800px;
    margin: 0 auto;
    color: #ffffff; /* 背景が暗い想定の白文字。背景白なら #333 に変更してください */
    line-height: 1.7;
}

.timeline-list {
    list-style: none;
    padding: 0;
    position: relative;
}

/* 左側の縦線 */
.timeline-list::before {
    content: '';
    position: absolute;
    left: 85px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ed7b62;
}

.timeline-item {
    display: flex;
    margin-bottom: 30px;
    align-items: flex-start;
}

/* 年代部分（斜体） */
.timeline-item .year {
    width: 90px;
	font-family: "kepler-std-display", serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1.5rem;
	line-height:100%;
    flex-shrink: 0;
    padding-right: 25px;
    text-align: right;
    color: #eee;
    letter-spacing: 1px;
}

/* 内容部分 */
.timeline-item .content {
	width:90%;
    padding-left: 25px;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", sans-serif;
    font-size: 0.7rem;
    word-break: break-all;
}

.timeline-item .content p {
    margin: 0 0 8px 0;
}

.timeline-item .sub-text {
    font-size: 0.6rem;
    opacity: 0.9;
    display: block;
    margin-top: 5px;
}

/* レスポンシブ（スマホ表示） */
@media (max-width: 600px) {
	.timeline-container{ max-width:100%; }
    .timeline-list::before { left: 80px; }
    .year { width: 60px; font-size: 1.1rem; padding-right: 15px; }
    .timeline-item .content { padding-left: 15px; font-size: 0.75rem; }
}

/*---------------------
コンサートシリーズ詳細
---------------------*/
.concert-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    color: #1a1970; 
	background:rgba(255,255,255,0.7);
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", sans-serif;
}

.concert-item {
    margin-bottom: 50px;
}
.concert-item.bottom{
	margin-bottom:0;
}
/* 回数と日付のヘッダー */
.concert-header {
    display: flex;
    align-items: baseline;
    border-bottom: 1px solid #1a1970;
    padding-bottom: 8px;
    margin-bottom: 20px;
	font-family: "Yu Mincho Pr6N", "YuMincho Pr6N", "Yu Mincho", "YuMincho", serif;
}

.concert-number {
    font-size: 1.6rem;
    margin-right: 25px;
    letter-spacing: 0.1em;
}

.concert-date {
    font-size: 1.5rem;
    letter-spacing: 0.05em;
}

/* 詳細情報部分 */
.concert-details {
    padding-left: 5px;
    line-height: 1.8;
}

.detail-row {
    display: flex;
    margin-bottom: 8px;
}
.detail-label {
    width: 70px;
    flex-shrink: 0;
    white-space: nowrap;
	line-height: 120%;
    font-weight: bold !important;
}

.detail-content {
    flex-grow: 1;
	line-height: 120%;
}


/* レスポンシブ */
@media (max-width: 600px) {
    .concert-number { font-size: 1.3rem; }
    .concert-date { font-size: 1.2rem; }
    .detail-row { flex-direction: column; }
    .detail-label { margin-bottom: 2px; line-height: 100%; }
	.detail-content { margin-bottom: 15px; line-height: 120%; }
}

/*---------------------
 出版物詳細
---------------------*/
.publish-container {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    width: 800px;
    margin: 0 auto 30px auto;
    color: #162144; 
    line-height: 1.7;
}
@media screen and (min-width: 480px) {
	.publish-container{
	padding-left:75px;
}
}

.publish-list {
    list-style: none;
    padding: 0;
    position: relative;
}

/* 左側の縦線 */
.publish-list::before {
    content: '';
    position: absolute;
    left: 85px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ed7b62;
}

.publish-item {
    display: flex;
    margin-bottom: 30px;
    align-items: flex-start;
}

/* 内容部分 */
.publish-list .content {
	width:90%;
    padding-left: 95px;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", sans-serif;
    font-size: 0.9rem;
    word-break: break-all;
	color: #FFFFFF;
}
.publish-list .content span{
	font-weight:bold;
	letter-spacing:1px;
}

@media screen and (max-width: 1023px){
.publish-list .content span{
	display:block;
}
}

.publish-list .content p {
    margin: 0 0 8px 0;
}

.publish-list .sub-text {
    font-size: 0.6rem;
    opacity: 0.9;
    display: block;
    margin-top: 5px;
}

.publish-addtxt{
	color: #162144;
	font-size:0.8rem;
	text-align:center;
	margin:0px auto;
}
/* レスポンシブ（スマホ表示） */
@media (max-width: 600px) {
	.publish-container{ max-width:100%; }
    .publish-list::before { left: 60px; }
    .publish-list .content { padding-left: 85px; font-size: 0.75rem; }
}


/*---------------------
 workinqueries(WorkDetils内)
---------------------*/
.winv-txt{
	color: #162144;
	font-size:0.8rem;
	margin:0px auto;
	width:600px;
	max-width:600px;
}
ul.pink-circle{
  	display:flex;
	gap:5px;
	padding-left:0;
}
ul.pink-circle li{
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", sans-serif;
	list-style:none;
	display:flex;
	width:120px;
	height:120px;
  	border-radius:100%;
	background:#de5e4e;
	color:#FFFFFF;
	text-align:center;
	font-size:0.8rem;
	justify-content:center;
	justify-items:center;
	align-items:center;
	line-height:1.4;
}
@media screen and (max-width: 767px){
.winv-txt{
    width:fit-content;
	max-width:100%;
    }
}
@media screen and (min-width: 480px){
.orch{
	width:fit-content;
	max-width:fit-content;
	margin:0 auto;
}
}
/*---------------------
定期レッスン先
---------------------*/
.lesson-wrap{
	width:600px;
	margin:0 auto;
}
/* 外側のコンテナ */
.lesson-container {
    max-width: 600px;
    margin: 40px 10px;
    border: 2px solid #1a1970;
    background: rgba(255, 255, 255, 0.7);
    padding: 20px 40px;
    box-sizing: border-box;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", sans-serif;
}
.lesson-item{
	margin:0 auto;
}
/* タイトル部分 */
.lesson-item h3 {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 23px;
    letter-spacing: 0.15em;
	border:none;
    color: #1a1970 !important;
    font-family: "Yu Mincho Pr6N", "YuMincho", serif;
    font-weight: 800 !important;
	padding-left:0;
	padding-right:0;
}

/* ラベルと内容を包むフレックスボックス */
.lesson-content {
    display: flex;
    align-items: center;
    justify-content: center; /* 中央に寄せる */
    max-width: 450px;
    margin: 0 auto;
}

/* ラベル（練習日時など） */
.lesson-content strong {
    display: block;
    width: 80px; /* 固定幅 */
    flex-shrink: 0;
    text-align: justify;
    text-align-last: justify;
    font-size: 0.9rem;
    padding-right: 15px;
    padding-bottom: 15px;
    position: relative;
    color: #1a1970; /* タイトルと色を合わせる */
    font-weight: bold;
}

/* ラベルの右側の縦線（オレンジ） */
.lesson-content strong::after {
    content: "";
    position: absolute;
    top: 10%;
    right: 0;
    width: 2px;
    height: 100%;
    background-color: #E26848;
}

/* 具体的な内容テキスト */
.lesson-sub-text {
    flex: 1;
    padding-left: 15px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #11366f;
    text-align: left; /* テキストは左揃え */
    padding-bottom: 15px;
    white-space: nowrap; /* スマホで改行させたくない場合 */
}

/* 一番下の行はpadding-bottomなくす */
.lesson-item.last .lesson-content strong,
.lesson-item.last .lesson-sub-text
{
    padding-bottom: 0px;
}
@media screen and (min-width: 480px) {
.lesson-list{
	width:fit-content;
	margin:0 auto;
}
}
/* --- スマホ表示の崩れ防止 --- */
@media screen and (max-width: 480px) {
	.lesson-container{
    margin: 20px 30px;
	}
	.lesson-wrap{
		width:100%;
	}
	.lesson-item h3{
		font-size:1rem;
		margin-left:auto;
		margin-right:auto;
	}
    .lesson-sub-text {
        padding-left: 10px;
    }
	.lesson-content{
		justify-content:left;
	}
    .lesson-content strong {
        width: 70px;
        font-size: 0.8rem;
        padding-right: 10px;
    }
}


/************************************
**  contact
************************************/
section:has(.contact-wrap){
	padding:20px;
}
.contact-wrap{
	background: #e9d1b9;
	width:620px;
	padding:5px;
}
/*1023px以下*/
@media screen and (max-width: 1023px){
.contact-wrap{
	width:100%;
    margin:20px;

}
}
.contact-box{
	background: #e9d1b9;
	border:2px solid #ed7b62;
	padding:20px;
	text-align:center;
}
.contact-box h2{
	color:#162144;
	font-size:36px !important;
}
.contact-box p{
	color:#11366f;
}
p.cont-txt{
	margin:0 0 10px 0;
}
p.mailadd{
	margin-bottom:10px !important;
}
p.mailadd a{
	text-decoration:none;
	color:#11366f;
}
p.mailadd a:hover{
	text-decoration:none;
	color:#11366f;
}
/************************************
** privacy po;icy
************************************/
.pblink{
	margin-bottom:5px;
	text-align:center;
	a,a:hover{
		color:#ed7b62;
		text-decoration:none;
		font-family:"acumin-pro", sans-serif !important;
		font-size:10px;
	}
}
#container:has(.pb){
background:#FFFFFF;
	color:#1a1970;
}
.pb h4{
	border:none;
    font-size:18px;
}
.pb p{
	color:#1a1970;
}
.pb li{
	font-family:"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", sans-serif;
}
.pb a{
	text-decoration:none;
}
/************************************
** footer
************************************/
footer{
	text-align:center;
	width:100%;
	margin:0 auto;
}
#footer-in{
	margin:0 auto;
}
#footer-sns {
  padding: 20px 0;
  text-align: center;
}

#footer-sns ul {
  width:300px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* 中央寄せ */
  gap: 0px; /* アイコン同士の間隔 */
}

#footer-sns li a {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

#footer-sns li a:hover {
  opacity: 0.7; /* ホバー時の演出 */
}
#footer-sns img {
  max-width: 60%; /* アイコン自体のサイズ */
  height: auto;
  display: block;
}
/*1023px以下*/
@media screen and (max-width: 1023px){
footer{
	text-align:center;
	width:fit-content;
	margin:0 auto;
}
#footer-sns img {
    width: 70%; /* アイコン自体のサイズ */
	max-width:70%;
}
}

.copyright{
	color:#ed7b62;
	font-size:10px;
	font-family: "acumin-pro", sans-serif !important;
	text-align:center;
	margin-bottom:30px;
}
.footer-bottom-content{
	float:none;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}