@charset "utf-8";

.mouseon_alpha a:hover img{
	opacity: 0.75;
	filter: alpha(opacity=75);
}
a:link, a:visited {
	color: #000;
}
.clearfix:after {
  content: ".";  /* �V�����v�f������ */
  display: block;  /* �u���b�N���x���v�f�� */
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  min-height: 1px;
  /*\*//*/
   display: inline-table;
  /* */
}
* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}
/* =======================
		body
========================== */
body::before {
	background: url(../img/bg01.jpg) no-repeat center;
	background-position: right 40% top 0;
	position: fixed; 
	background-size: cover;
	width: 100%;
  	height: 120vh;
	content: "";
	z-index: -1;
	top: 0;
}
body img{
	width: 100%;
	height: auto;
}
body{
background-color: #373236;
}
	/* =======================
		extra
========================== */
h1 {
	display: none;
}
#heard_logo{
	z-index: 100;
	margin: 8px 0 0 8px;
	width: 8%;
}
@media screen and (min-width:650px) {
#heard_logo{
	width: 43px;
}
}
#heard_logo a{
	display: block;
}
#heard_logo a img{
	width: 100%;
}
.thumb {
	position: absolute;
	width: 127px;
	height: 213px;
	right: auto;
	bottom: auto;
	margin: 0px;
	cursor: pointer;
}
.box_gue ul{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        grid-row-gap: 70px;
        grid-column-gap: 7%;
        width: 88%;
        margin: auto;
        position: absolute;
        top: 9%;
        left: 50%;
        transform: translateX(-50%);
		padding-bottom: 70px;
}
@media screen and (min-width:650px) {
  .box_gue ul {
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	  top: 14%;
}
}
@media screen and (min-width: 1240px){
.box_gue ul {
		grid-template-columns: repeat(7, 1fr);
        top: 6%;
        width: 88%;
        grid-column-gap: 6%;
        grid-row-gap: 2%;
		padding-bottom: 10px;
}
}
.box_gue ul li{
	text-align: center;
	cursor: pointer;
}
.box_gue ul li img{
	width: 100%;
}
.box_gue ul li img:hover{
	opacity: 0.75;
}
/* =======================
		隠しコンテンツ
========================== */
.artist {
	position: relative;
	display: none;/* ライトボックス表示するコンテンツは消しておく */
	/* width: 80%;/* 隠しコンテンツの横幅 */
	height: auto;/* 隠しコンテンツの高さ */
	padding: 20px 0;
	background-color: #e6e6e6;
	margin: auto;
}
.artist .artist_box{
	display: flex;
	margin: auto;
	flex-direction: column;
}
.artist .b_img {
	margin: auto;
	width: 55%;
}
.artist .artist_detail {
	margin-top: 18px;
	display: flex;
	gap: 30px;
    flex-direction: column;
}
.artist .artist_detail .artist_name h2{
	margin: auto;
	width:100%;
}
.artist .artist_detail .artist_name h2 img{
        max-width: 100%;
        max-height: 100px;
        object-fit: contain;
        width: auto;
	padding: 5px;
		box-sizing: border-box;
}
#modal_gue15>.artist_box .artist_detail .artist_name h2 img:first-child,
#modal_gue16>.artist_box .artist_detail .artist_name h2 img:first-child{
        max-width: 50%;
		max-height:80px;
}
.artist .artist_detail p.copy{
	font-size: 14px;
	line-height: 1.7;
	text-align: left;
}
.artist .artist_detail p.url{
        margin-top: 10px;
        font-size: 13px;
}
.artist .artist_detail p.url a{
　　overflow-wrap: anywhere;
    word-break: break-all;
}
.artist .artist_detail p.url a:hover {
    text-decoration: none;
}
.artist .artist_detail p.works{
	display: flex;
	gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.artist .artist_detail p.works img{
		width: calc((100% - 20px)/3);
}
.artist .artist_detail p.art_link{
	margin-top: 10px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px
}
.artist .artist_detail p.art_link a,.artist .artist_detail p.art_link span{
	background-color:  #4d4d4d;
	color: #fff;
	display: block;
	width: auto;
	padding: 5px 8px;
	text-decoration: none;
	font-size: min(3.2vw, 13px);
}
.artist .music_box{
	grid-row-gap: 50px;
	grid-column-gap: 30px;
}

@media screen and (min-width: 767px){
/*.artist {
	position: relative;
	display: none;/* ライトボックス表示するコンテンツは消しておく 
	width: 800px;/* 隠しコンテンツの横幅 
	height: 500px;/* 隠しコンテンツの高さ 
	padding: 20px;
	background-color: #e6e6e6;
}*/
.artist .artist_box {
        flex-direction: row;
	        justify-content: space-between;

	}
.artist .b_img {
        margin: 0;
        width: 40%;
        align-self: flex-start;
        max-width: 380px;
}
.artist .artist_detail {
        width: 60%;
        align-self: center;
        padding-left: 5%;
}
	.artist .artist_detail .artist_name{
		text-align: left;
	}
.artist .artist_detail .artist_name h2 img {
	padding: 0;
	vertical-align: middle;
}
.artist .artist_detail p.works img {
        width: calc((100% - 40px)/5);
}
.artist_box .artist_detail .artist_name h2 img:nth-child(2){
		margin-left: 5px; 
}
#modal_gue15>.artist_box .artist_detail .artist_name h2 img:nth-child(2), #modal_gue16>.artist_box .artist_detail .artist_name h2 img:nth-child(2) {
        margin: 0;
}
#modal_gue15>.artist_box .artist_detail .artist_name h2 img:first-child, #modal_gue16>.artist_box .artist_detail .artist_name h2 img:first-child {
        margin: 0 5px 8px 0;
}
}
  /* -----------------------------------------------------------
	#obj_modal
----------------------------------------------------------- */
  #obj_modal {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
	width: 100%;/* 隠しコンテンツの横幅 */
	height: 100%;/* 隠しコンテンツの高さ */
	background-color: #e6e6e6;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    display: none;
	box-sizing: border-box;
  }
  #obj_modal .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #obj_modal .obj_close {
    position: absolute;
    top: 1.5em;
    right: 1.5em;
    z-index: 2;
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .obj_close {
      top: 1em;
    }
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .obj_close {
      right: 1em;
    }
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .obj_close {
      width: 2.5em;
      height: 2.5em;
    }
  }
  #obj_modal .obj_close:hover {
    cursor: pointer;
  }
  #obj_modal .con_modal {
    position: relative;
    z-index: 1;
    display: table;
    height: 100%;
    max-width: 1100px;
	width: 85%;
    margin: auto;
  }
  @media only screen and (min-width: 1024px) {
    #obj_modal .con_modal{
      width: 60%;
    }
  }
  #obj_modal .con_modal .box_modal {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 50px 0;
    box-sizing: border-box;
  }
  @media only screen and (min-width: 768px) and (max-width: 1100px) {
    #obj_modal .con_modal .box_modal {
      padding: 40px 0;
    }
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .con_modal .box_modal {
      padding: 2em 0;
    }
  }
  #obj_modal .con_modal .box_modal .wrp_gue [class^="ic"] {
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
    padding: 0.2em 1.5em;
    margin-bottom: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .con_modal .box_modal .wrp_gue [class^="ic"] {
      padding: 0.2em 1em;
    }
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .con_modal .box_modal .wrp_gue [class^="ic"] {
      margin-bottom: 0.5em;
    }
  }
  #obj_modal .con_modal .box_modal .wrp_gue .ic1 {
    background: #815e33;
  }
  #obj_modal .con_modal .box_modal .wrp_gue .ic2 {
    background: #4b6fb9;
  }
  #obj_modal .con_modal .box_modal .wrp_gue .st {
    margin-bottom: 15px;
    text-align: center;
    font-size: 3.6rem;
  }
  @media only screen and (min-width: 768px) and (max-width: 1100px) {
    #obj_modal .con_modal .box_modal .wrp_gue .st {
      margin-bottom: 10px;
    }
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .con_modal .box_modal .wrp_gue .st {
      font-size: 2.2rem;
      margin-bottom: 10px;
    }
  }
  #obj_modal .con_modal .box_modal .wrp_gue .img {
    position: relative;
  }
  #obj_modal .con_modal .box_modal .wrp_gue .img span {
    position: absolute;
    top: -.8em;
    right: 5.90909%;
    padding: 0.3em 1.5em;
    background: rgba(0, 91, 152, 0.9);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .con_modal .box_modal .wrp_gue .img span {
      right: 1em;
    }
  }
  @media only screen and (min-width: 768px) and (max-width: 1100px) {
    #obj_modal .con_modal .box_modal .wrp_gue .img span {
      padding: 0.3em 1em;
    }
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .con_modal .box_modal .wrp_gue .img span {
      padding: 0.3em 0.5em;
    }
  }
  #obj_modal .con_modal .box_modal .wrp_gue .img span:before {
    content: '\f1e5 ';
    font-family: FontAwesome;
    margin-right: .5em;
  }
  #obj_modal .con_modal .box_modal .wrp_gue .txt {
    margin-top: 30px;
  }
  @media only screen and (min-width: 768px) and (max-width: 1100px) {
    #obj_modal .con_modal .box_modal .wrp_gue .txt {
      margin-top: 25px;
    }
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .con_modal .box_modal .wrp_gue .txt {
      margin-top: 1em;
    }
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .con_modal .box_modal .wrp_gue .txt {
      text-align: left;
    }
  }
  #obj_modal .con_modal .box_modal .wrp_gue table {
    text-align: left;
    margin: 20px auto 0;
  }
  @media only screen and (min-width: 768px) and (max-width: 1100px) {
    #obj_modal .con_modal .box_modal .wrp_gue table {
      margin: 15px auto 0;
    }
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .con_modal .box_modal .wrp_gue table {
      margin: 1em auto 0;
    }
  }
  @media only screen and (min-width: 768px) {
    #obj_modal .con_modal .box_modal .wrp_gue table {
      width: auto;
    }
  }
  @media print {
    #obj_modal .con_modal .box_modal .wrp_gue table {
      width: auto;
    }
  }
  .ie8 #obj_modal .con_modal .box_modal .wrp_gue table {
    width: auto;
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .con_modal .box_modal .wrp_gue table tr th, #obj_modal .con_modal .box_modal .wrp_gue table tr td {
      display: -moz-inline-stack;
      display: inline-block;
      vertical-align: middle;
      *vertical-align: auto;
      zoom: 1;
      *display: inline;
      vertical-align: top;
    }
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .con_modal .box_modal .wrp_gue table tr th {
      width: 35%;
      padding: 10px;
    }
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .con_modal .box_modal .wrp_gue table tr td {
      width: 55%;
      padding: 10px 0 0 0px;
    }
  }
  #obj_modal .con_modal .box_modal .wrp_gue .att {
    margin-top: 20px;
  }
  @media only screen and (min-width: 768px) and (max-width: 1100px) {
    #obj_modal .con_modal .box_modal .wrp_gue .att {
      margin-top: 15px;
    }
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .con_modal .box_modal .wrp_gue .att {
      margin-top: 1em;
    }
  }
  @media only screen and (max-width: 767px) {
    #obj_modal .con_modal .box_modal .wrp_gue .att {
      text-align: left;
    }
  }