/*================================================

------------- テーマカラー： #ac821c -------------
上記カラーを置換するとテーマカラーを変更できます。

==================================================*/


/***** ▼base▼ *****/
html {
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;/*10px*/
}

body {
	/*文字色*/
	color: #111;
	font-family: 'Noto Sans JP', 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'sans-serif';
	font-size: calc(1.4rem + ((1vw - .32rem) * .21));
	line-height: 1.5;
}

* {
  margin: 0 auto;
	padding: 0;
	word-break: break-all;
	list-style-type: none;
	border-style: none;
	font-style: normal;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: #f90;
	text-decoration: none;
}

li{
	padding-left:1em;
	text-indent:-1em;
}

#spinner div{
	background: #ac821c;
}

.loder-bg{
	/*ローダー背景*/
	background: #fff;
}

main > section:nth-child(even){
	/*セクション背景(偶数)*/
  background: #fff;
}

main > section:nth-child(odd){
	/*セクション背景(奇数)*/
  background: #efefef;
}

.content-wrap{
	max-width: 1280px;
  margin: 0 auto;
	padding: calc(3.2rem + ((1vw - .32rem) * 3.33)) calc(1.6rem + ((1vw - .32rem) * 1.66));
}

.content-wrap > h1{
	font-size: calc(2.4rem + ((1vw - .32rem) * 1.67));
	text-align: center;
}

.content-wrap > h1 span{
	display: block;
	font-size: calc(1.6rem + ((1vw - .32rem) * .42));
}

.content-wrap > h2 {
	font-size: calc(2.4rem + ((1vw - .32rem) * 1.67));
	text-align: center;
	line-height: 1.2;
}

.content-wrap > h2 span{
	font-size: calc(1.6rem + ((1vw - .32rem) * .42));
}

.content-wrap > h1:after,
.content-wrap > h2:after{
	display:block;
	min-width: 40px;
	width:6%;
	height:4px;
	margin: calc(1.5rem + ((1vw - .32rem) * .52)) auto calc(2rem + ((1vw - .32rem) * 4.16));
	background: #ac821c;
	content:"";
}



.info {	
    font-size: calc(1.2rem + ((1vw - .32rem) * 1.25));
    padding: 2% 3%;
    color: #fff;
    text-align: center;
    background-color:#C00;
}



.d-flex {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
}

.d-flex-col2 {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
}

.d-flex-col2 > *{
	flex: 1 0 280px;
	padding: calc(1rem + ((1vw - .32rem) * .5)) calc(0rem + ((1vw - .32rem) * 1.56));
}

.brs,
.brsp {
	display: inline-block;
}

.sold {
  font-weight: bold;
  color: #b90000;
  font-size: 150%;
}
/***** ▲base▲ *****/

/*****▼ action ▼*****/
/*ホバー時に半透過*/
.hover-opacity{
	transition: .5s;
}
.hover-opacity:hover{
	transition: .5s;
	opacity: .5;
}
/*△ホバー時に半透過△*/
/*スクロール時に半透過*/
.translucent{
	opacity: .5;
	transition: .3s;
}
/*△スクロール時に半透過△*/
/*****▲ action ▲*****/

/***** ▼button▼ *****/
.btn-wrap{
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: justify;
  justify-content: space-between;
}

.button{
	display: block;
	padding: 10px;
	color: #fff;
	font-size: 90%;
	text-align: center;
}

#information .reserve-btn {
  background: #F90;
  width: 250px;
  margin: 15px auto;
  text-align: center;
	line-height:1.2;
}

#information .reserve-btn > span{
	font-size: 90%;
}

#product .shop-btn{
	background:#0CF;
	max-width:300px;
	margin:20px auto;
}

#profile .artist-btn{
	background: #ac821c;
	width: 100%;

}

#store .store-btn{
	background: #ac821c;
	width:49%;
	margin:3px 0;
}


#sns .sns-wrap{
	width: 70%;
	max-width: 250px;
}

#sns .sns-btn{
	width: 30%;
}
/***** ▲button▲ *****/

/***** ▼ info ▼ *****/
.intro-content {
  margin-bottom: calc(1.2rem + ((1vw - .32rem) * 1.25));
}

.intro-info {
  max-width: 460px;
  background: #fefefe;
  padding: calc(0.6rem + ((1vw - .32rem) * 1.25));
  filter: drop-shadow(0px 0px 2px #ccc);
}

.intro-info-head {
  color: #0084d2;
}

.intro-info-body {
  font-size: 90%;
}

.intro-info-body:not(:last-of-type) {
  margin-bottom: .8rem;
}
/***** ▲ info ▲ *****/

/***** ▼information▼ *****/
#information .information-inner{
	display:flex;
	flex-wrap: wrap;
  margin-bottom: 10px;
	border: 2px solid #ac821c;
	font-size: 110%;
}

#information .information-left{
	background: #ac821c;
	color:#fff;
	width:100%;
	padding:5px;
	text-align:center;
}

#information .information-right{
	width:100%;
	padding:10px;
}

#information .place{
	font-size: 120%;
	margin-bottom: 5px;
}

#information .place-address{
	font-size: 90%;
}

/***** ▲information▲ *****/

/***** ▼profile▼ *****/
.artist-name{
	border-bottom:1px solid #ac821c;
	padding:5px;
	font-size:150%;
	font-weight:bold;
	text-align:center;
}

.artist-name span{
	font-size:80%;
	margin: 0 10px;
}

.artist-cap{
  margin:10px 0 15px;
}
/***** ▲profile▲ *****/

/***** ▼album▼ *****/

.album{
	margin-bottom: 30px;
}

.alubum-title{
	text-align: center;
	margin-bottom: 15px;
}

.alubum-title span{
	display: inline-block;
}

.alubum-txt p:first-child{
	margin-bottom: 30px;
}

.album-comment{
  font-family: 'Noto Serif JP', serif;
	padding: 2%;
	border-radius: 10px;
	background: linear-gradient(188deg, rgba(255,244,216,1) 0%, rgba(255,217,120,1) 100%);
  border: 2px solid #ac821c;
}

.program-attention{
	text-align: center;
	margin-bottom: 30px;
}

.program{
	align-items: stretch;
}

.song-number{
	margin-bottom: 30px;
	line-height: 1.4;
	font-size: 90%;
	background: linear-gradient(188deg, rgba(254,254,254,1) 0%, rgba(201,201,201,1) 100%);
	border-radius: 10px;
	filter: drop-shadow(0px 0px 2px #999);
	width: 100%;
	padding: 3%;
}

.song-title{
	font-size: 120%;
	margin-bottom: 5px;
}

/***** ▲album▲ *****/

/***** ▼goods▼ *****/
#goods .content-wrap > * {
  max-width: 800px;
}

#goods .content-wrap > *:not(:last-child){
	margin-bottom: calc(2.4rem + ((1vw - .32rem) * 1.25));
}

.goods-wrap {
  align-items: flex-start;
}

.goods {
  margin-bottom: 3rem;
}

.goods:last-of-type {
  margin-bottom: 0;
}

.goods-img,
.goods-title {
  margin-bottom: 1.6rem;
}

.goods-cap {
  margin-bottom: calc(0.8rem + ((1vw - .32rem) * 0.83));
  font-size: 90%;
}

.goods-order p{
  margin-bottom:  calc(1.6rem + ((1vw - .32rem) * 1.67));
}

.goods-name {
  font-weight: bold;
  font-size: 120%;
}

.goods-example {
  background: #fefefe;
  border-radius: 6px;
  padding: calc(1rem + ((1vw - .32rem) * 1.04));
}

.goods-example-head {
  margin-bottom: calc(0.6rem + ((1vw - .32rem) * 0.63));
  color: #d80000;
}

.goods-example-body {
  margin-bottom: calc(0.8rem + ((1vw - .32rem) * 0.83));
}

.goods-attention,
.goods-order-attention {
  font-size: 80%;
}
/***** ▲goods▲ *****/

/***** ▼movie▼ *****/
.youtube-wrap{
	width: 100%;
}

.youtube{
  position: relative;
	width:100%;
  padding-top: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
  margin:0px auto;
  background: #ccc;
}

.youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
/***** ▲movie▲ *****/

/***** ▼store▼ *****/
#store .store-info{
	width: 100%;
}

#store .store-name{
	font-size: 140%;
	margin-bottom: 5px;
}

#store .store-txt{
	margin-bottom: 10px;
}
/***** ▲store▲ *****/

/***** ▼footer▼ *****/
footer{
	height: 10vh;
	background: #000;
}

.footer-logo img{
	height: 6vh;
}

.footer-pagetop {
  position: fixed;
  bottom: 2vh;
  right: 5vw;
	z-index: 100;
	color: #ac821c;
}
/***** ▲footer▲ *****/

@media (min-width:560px){
  .brsp {
    display: none;
  }
  
	.song-number{
		width: 47%;
		margin: 0 1.5% 30px;
	}
	
	#information .information-inner{
		border: none;
	}
	
	#information  .information-left{
		width: 25%;
		padding: 20px;
	}
	
	#information  .information-right{
		width: 75%;
		padding: 20px;
	}
	
	#information .reserve-btn{
		margin: 15px 0;
	}
}


@media (min-width:1280px){
	.brs {
		display: none;
	}
	
	body{
		font-size: 1.8rem;
	}
	
	.content-wrap{
		padding: 6.4rem 3.2rem;
	}
	
	.content-wrap > h1,
	.content-wrap > h2{
		font-size: 4rem;
	}

	.content-wrap > h1 span,
	.content-wrap > h2 span{
		font-size: 2rem;
	}
	
	.content-wrap > h1:after,
	.content-wrap > h2:after{
		margin: 2rem auto 6rem;
	}
  
  #goods .content-wrap > *:not(:last-child){
    margin-bottom: 3.4rem;
  }

}