/* CSS Document */


	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

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

	body {
		line-height: 1;
		-webkit-text-size-adjust: none;
		font-family: "M PLUS 1p"; 
    background-color: #efefef;
        	-webkit-animation: fadeIn 4s ease 0s 1 normal;
	animation: fadeIn 4s ease 0s 1 normal;
	}
@keyframes fadeIn {
	0% {

        filter: brightness(0%);
	}
	100% {

        filter: brightness(100%);
	}
}
@-webkit-keyframes fadeIn {
	0% {
        filter: brightness(0%);
	}
	100% {
        filter: brightness(0%);
	}
}

ul, ol {
  list-style: none;
  position: relative;
}
a{
color:#000;
}
header{
position:relative;
max-width: 100%;margin-left: auto;margin-right: auto;
    height: 100vh;
    background-image: url("../2026fj5/img/bg-t.png") , url("../2026fj5/img/bg.jpg") ;
    background-repeat: no-repeat, no-repeat;
    background-position: 4em 4em, center center;
    background-size:8em, cover;
    overflow: hidden;
}
.head{
max-width: 1100px;height:100%;
margin-left: auto;margin-right: auto;

    background-image: url("../2026fj5/img/bg-m.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 95%;
}

/* strong使うとflex効いてしまうから　<span style="color:#fff;display:contents;">。<br></span> */

.tabs {
  background-color: ;
  width:;  display: flex;
  margin: 4px 4px 0 auto;
  width:7em;
  }

.tab_item {
  width:100%;
   justify-content: center;
  border: 1px solid #000;
  background-color: rgba(255, 255, 255, 0.5);
line-height:1em;font-size:1em;
padding:0.6em;
  text-align: center;
  color: #000;
  text-align: center;
  transition: all 0.2s ease;
  text-decoration: none;
}
.tab_item:hover {
  background-color: #eee;  color: #666;
}


main {

    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
	}

/* 詳細 */
.flexgaiyo {
  display: flex;
	background: #fff;
	color:#000;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  padding:4em;
}
.flexgaiyo .item {
  width: calc(100% - 10em);
  padding: 1.5em 0em;
/*  border: 1px solid #ccc;*/
  box-sizing: border-box;
	display: flex;
flex-wrap: wrap;
/*flex: 1;*/
justify-content:start;
align-content: center;
align-items: center;
		line-height: 1.4em;
	z-index: 0;
}



.flexgaiyo .item:nth-child(odd){
	width: 10em;
	border-bottom:1px solid #ccc;
}

.map{width:100%; border:0;height:400px;
display: block;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.04) inset;
}

/* concept */
.concept{
	font-family: "Sawarabi Mincho";
    color:#555;
    padding: 3em;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.04) inset;
  box-sizing: border-box;
  position: relative;
  margin: auto;
	background:#fff;

}

.note{
  background-image:
    linear-gradient(
180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 97%,
      #eee 97%,
      #eee 100%
    );
  background-size:100% 2.5em;
  line-height:2.5em;
}


.note p{
 margin-bottom:2.5em;padding:0 5em;
}

/* news */
.hidden_box a {
	text-decoration: none; color:inherit; text-indent:0;
  color: #333;
  border-left: solid 6px #666;
  background: #f6f6f6;
  margin-bottom: 0.4em;
  padding: 1em;transition: 0.3s;
	display: block;
}
.hidden_box a:hover{background:#EFEFEF;text-indent: 0.3em;}


.hidden_box label {
    padding: 15px;
    font-weight: bold;
    border: solid 2px #666;
    cursor :pointer;
	display: block;margin-bottom:0.4em;
}
.hidden_box label:hover {
    background: #f3f3f3;
}
.hidden_box input {
    display: none;
}
.hidden_box .hidden_show {
    height: 0;
    margin-top: -0.5em;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
.hidden_box input:checked ~ .hidden_show {
    margin:0;
    height: auto;
    opacity: 1;
}


table {
		border-collapse: collapse;
		border-spacing: 0;
	}

h2 {
  position: relative;
  padding: 1.2em 0;
  text-align: center;
	font-size:1.8rem;
	margin-bottom:1.6em;
}

h2:before {
  position: absolute;
  bottom: 0px;
  left: calc(50% - 1em);
  width: 2em;
  height: 0.2em;
  content: '';
  border-radius: 3px;
  background: #000;
}

/* musicians */
.flex02 h3{font-weight: bold;font-size:1.2rem;
background: linear-gradient(transparent 50%, # 50%);
margin-bottom: 0.5em;
}

.flex02 h3 span {font-weight: normal;}
.flex02 .item-text a{display:contents;color:#ed645a; text-decoration: underline !important;}



.flex01 {
width:80%;
padding:1em 20px;
margin:1em auto;
background:#fff;
  display: flex;
flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-self:center;
    flex-basis: auto;
}
/* .flex01 .item {
  width: 32%;
  padding: 1em;
  border: 1px solid #ccc;
  box-sizing: border-box;
	margin-bottom:1em;
}
.flex01 .item-image {
  margin-bottom: 1em;
}*/
.flex01 img {
width:25%;
  max-width: 150px;
  height: auto;
    flex-basis: auto;
}




.flex02 {
display: flex;
flex-wrap: nowrap;
margin-bottom: 3em;
border: px solid #ccc;
background:#fff;
}
.flex02:nth-child(odd) {
flex-direction: row-reverse;
}
.flex02 .item-image {
width: 40%;
margin-bottom: 0;
}
.bg1,.bg2,.bg3,.bg4,.bg5,.bg6,.bg7,.bg8,.bg9,.bg10,.bg11,.bg12,.bg13{
    overflow:hidden;
    background-color:#fff;
    position:relative;
    z-index:0;
}
.bg1::before,.bg2::before,.bg3::before,.bg4::before,.bg5::before,.bg6::before,.bg7::before,.bg8::before,.bg9::before,.bg10::before,.bg11::before,.bg12::before,.bg13::before{
    content:"";

    background-position: center;
    background-size: cover;
    position:absolute;
    z-index:-1;
    top:-8px;
    left:-8px;
    right:-8px;
    bottom:-8px;
    filter:blur(8px);
    opacity:0.5;
}
.flex02 .item-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.bg1::before{background-image:url("../2026fj5/img/A-RunaWatanabe.jpg");}
.bg2::before{background-image:url("../2026fj5/img/A-enomoto.jpg");}
.bg3::before{background-image:url("../2026fj5/img/A-kaneko.jpg");}
.bg4::before{background-image:url("../2026fj5/img/A-kajiuchi.jpg");}
.bg5::before{background-image:url("../2026fj5/img/A-Daniel-Baeder.jpg");}
.bg6::before{background-image:url("../2026fj5/img/A-The-Beane-Tones.jpg");}
.bg7::before{background-image:url("../2026fj5/img/A-yamanasi.jpg");}
.bg8::before{background-image:url("../2026fj5/img/A-Japan-Aviation-Academy-Taiko-Group.jpg");}
.bg9::before{background-image:url("../2026fj5/img/A-BLUE-LAKE-BEAT.jpg");}
.bg10::before{background-image:url("../2026fj5/img/A-Moon-Inlet-Sounds-Orchestra.jpg");}
.bg11::before{background-image:url("../2026fj5/img/A-losg.jpg");}
.bg12::before{background-image:url("../2026fj5/img/A-yokosuka.jpg");}
.bg13::before{background-image:url("../2026fj5/img/A-RB-REUNION.jpg");}

.flex02 .item-text {
display: flex;
flex-wrap: wrap;
flex: 1;
text-align:justify;
justify-content:left;
align-content: center;
align-items: center;
padding: 2em;
	line-height: 1.4em;
}

.flex02:nth-child(odd) .item-text{
	/*justify-content:right;*/
}

/* YouTube */
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
    max-width: 600px;
}

/* footer */
footer{
text-align: ;
border-bottom:20px solid #000;
padding-bottom:2em;
}

footer div {max-width:1100px;margin: 0 auto;display:table}
footer a{
color:#000;
}
footer p{
font-family: "M PLUS Rounded 1c";
text-align:left; margin-bottom:1em; line-height:1.3em;padding:0 1em;
}
footer p strong{font-weight: 700}



@media screen and (max-width: 767px) {
header{
background-position: 2em 2em, center center;
background-size: 20vw, cover;
}
.concept{
		padding: 0.5em;
}
.note p {padding:0;}
.flexgaiyo{padding:2em 0.5em;}
.flexgaiyo .item {
  padding: 0.5em 0em;
flex-direction: column;
width: 100% !important;
}

.flex02 {
flex-direction: column;
width: 100%;
}
.flex02 .item-image {
width: 100%;
margin-bottom: 0;
}
.flex02:nth-child(odd) {
flex-direction: column;
}
.flexgaiyo .item:nth-child(even){
padding-bottom:3em;
}
.flex02 .item-text {padding:0.5em;}
.flex01{
flex-direction:;

}
.flex01 .item {
  width: 100%;
	}

}