@charset "utf-8";
/*================================================

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

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

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

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

* {
	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%;
}

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

a {
	color: #009ae4;
	text-decoration: none;
}

h2,h3 {
	font-weight: border;
}

h2 {
	padding-bottom: 4px;
	font-size: calc(1.8rem + ((1vw - .32rem) * 1.88));
	border-bottom: 1px solid #e4dd00;
}

h3 {
	display: inline-block;
	position: relative;
	height: 34px;
	margin-bottom: 16px;
	padding: 4px 16px;
	font-size: 1.6rem;
	color: #000;
	background-color: #e4dd00;
}

h3:after {
	content: '';
	display: block;
	position: absolute;
	right: -16px;
	top: 0px;
	height: 100%;
	width: 16px;
	border-bottom: 34px solid #e4dd00;
	border-left: 1px solid #e4dd00;
	border-right: 16px solid transparent;
}


#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: #000;
  align-items: center;
}

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

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

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

.content-wrap > *:not(:last-child){
	/*.content-wrap直下の子要素に任意のmargin-bottomを付与*/
	margin-bottom: calc(3.2rem + ((1vw - .32rem) * 3.33));
}

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

.d-flex > * {
	width: 100%;
}

.popup {
  display: block;
  margin-bottom: 16px;
  border-radius: 4px;
  overflow: hidden;
}

figure {
	margin-bottom: 32px;
}

.brand {
  font-size: 105%;
  color: #e4dd00;
}

#introduction p,
#SET_PHOTO p {
  line-height: 2;
}

/***** ▲base▲ *****/

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

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

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

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

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

/***** ▼EQUIPMENTS▼ *****/
.equipment-wrap ul {
	margin-bottom: 16px;
}

.equipment-list-title {
	margin-bottom: 4px;
	padding-left: 6px;
	font-size: 110%;
	font-weight: bolder;
	border-left: 6px solid #e4dd00;
}
/***** ▲EQUIPMENTS▲ *****/

/***** ▼SET LIST▼ *****/
.set-list .encore {
	margin-top: 8px;
}
/***** ▲SET LIST▲ *****/

/***** ▼LIVE PHOTO▼ *****/
.live-photo-wrap {
	justify-content: flex-start;
}

.live-photo {
	width: 50%;
	margin: 0;
	padding: 4px;
}

.link-official-site {
	display: inline-block;
	font-size: 110%;
	border-bottom: 1px solid #e4dd00;
}

.link-official-site a {
	margin-left: 4px;
}
/***** ▲LIVE PHOTO▲ *****/

/***** ▼BANNER▼ *****/
.bannre-wrap {
	max-width: 900px;
}

.banner:not(:last-of-type) {
  margin-bottom: 16px;
}

.banner {
	transition: .1s;
}

.banner:hover {
	filter: brightness(.7);
}

.banner a {
  display: block;
}
/***** ▲BANNER▲ *****/

/***** ▼store▼ *****/
.store-title{
	padding: 10px;
	margin: calc(1.6rem + ((1vw - .32rem) * .52)) auto calc(2rem + ((1vw - .32rem) * 4.16));
	border-top: 2px solid #e4dd00;
	border-bottom: 2px solid #e4dd00;
	text-align: center;
	letter-spacing: 0.5em;
	font-size: calc(1.6rem + ((1vw - .32rem) * 1.2));
	line-height: 1.5;
}

.store-wrap {
	align-items: flex-start;
	justify-content: flex-start;
	max-width: 1024px;
}

.store-img {
  margin-bottom: 8px;
}

.store-name {
  font-size: 120%;
  font-weight: bolder;
}

.store-txt svg {
	margin-right: 4px;
}
/***** ▲store▲ *****/

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

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

.footer-pagetop {
  position: fixed;
  bottom: 2vh;
  right: 5vw;
	z-index: 100;
	color: #e4dd00;
  width: calc(3rem + ((1vw - .32rem) * 1.04));
}
/***** ▲footer▲ *****/

@media (min-width:640px) {
  h3 {
	font-size: 18px;
	padding: 0px 16px;
  }

  figure {
    margin-bottom: 0;
  }
  
  .col-2 {
    align-items: flex-start;
  }

  .col-2 > * {
    width: 50%;
    padding: 8px;
  }

  .row-rev {
  	flex-direction: row-reverse;
  }

  .set-list {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	height: 65vw;
	max-height: 480px;
	max-width: 960px;
	padding: 32px;
	background: #222;
  }

  .set-list li {
	margin: 0;
	line-height: 1.8;
  }

  .store {
  	width: 50%;
  	padding: 8px;
  }
}

@media (min-width:960px) {
  body {
    font-weight: 700;
  }

  h3 {
	font-size: 24px;
	height: 40px;
  }

  h3:after {
	right: -30px;
	width: 30px;
	border-bottom: 40px solid #e4dd00;
	border-right: 30px solid transparent;
  }

  #introduction p,
  #LIVE_PHOTO {
    line-height: 2.5;
  }

  .col-2 > *,
  .store {
    padding: 16px;
  }

  .equipment-list-title {
	padding-left: 8px;
	border-left: 8px solid #e4dd00;
  }

  .live-photo {
  	width: 33.3%;
  	width: calc(100%/3);
  	padding: 8px;
  }

  .link-official-site {
	border-bottom: 2px solid #e4dd00;
  }
}

@media (min-width:1024px) {
  .content-wrap {
	padding: 6.4rem;
  }
}

@media (min-width:1280px){
  h2 {
	font-size: 3.6rem;
  }
  h3 {
	font-size: 28px;
	height: 46px
  }

  h3:after {
	right: -34px;
	width: 34px;
	border-bottom: 46px solid #e4dd00;
	border-right: 34px solid transparent;
  }
  /*▼可変サイズの最大値▼*/
  body {
	font-size: 1.8rem;
  }

  .content-wrap {
	padding: 6.4rem 3.2rem;
  }
}