@charset "UTF-8";
/*================================================w

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

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

/***** ▼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) * .41));
	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%;
}

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

a {
	color: #065fd4;
	text-decoration: none;
}

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

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

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

.content-wrap{
	position: relative;
	max-width: 1280px;
	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));
}

h1{
	font-size: calc(2.6rem + ((1vw - .32rem) * 2.71));
	text-align: center;
}

h1 span{
	display: inline-block;
	font-size: calc(1.8rem + ((1vw - .32rem) * 1.88));
}

.h1-sub {
	text-align: center;
	margin-bottom: 5px;
	font-size: calc(1.4rem + ((1vw - .32rem) * 1.46));
}

.h1-sub span {
	display: inline-block;
}

h1:after {
	display:block;
	min-width: 40px;
	width:6%;
	height:4px;
	margin: calc(1.5rem + ((1vw - .32rem) * .52)) auto 0;
	background: #c70012;
	content:"";
}

.content-wrap > h2 {
	display: inline-block;
  position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	text-align: center;
	font-size: calc(2.4rem + ((1vw - .32rem) * 1.67));
	line-height: 2;
}

.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) * 2));
}


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

.popup {
	display: block;
}

.brpc {
    display: none;
  }

/***** ▲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▲ *****/

/***** ▼youtube▼ *****/
.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;
}
/***** ▲youtube▲ *****/

/***** ▼intro▼ *****/
.intro-content > * {
    margin-bottom: 30px;	
}

.intro-content h2 {
	text-align: center;
}

.intro-content h2:after{
	display:block;
	min-width: 40px;
	width:6%;
	height:4px;
	margin: calc(1.5rem + ((1vw - .32rem) * .52)) auto 0;
	background: #c70012;
	content:"";
}
/***** ▲intro▲ *****/

/***** ▼detail▼ *****/

#detail h2 {
	display: block;
	margin-bottom: calc(1.5rem + ((1vw - .32rem) * 1.56));
	padding-bottom: calc(0.5rem + ((1vw - .32rem) * 1.04));
	font-size: calc(1.8rem + ((1vw - .32rem) * 1.88));
	border-bottom: 4px solid #b10a32;
}

#detail h2 span {
	display: inline-block;
}

#detail h3 {
	margin-bottom: calc(1rem + ((1vw - .32rem) * 1.04));
	padding-left: calc(0.6rem + ((1vw - .32rem) * 0.63));
	border-left: calc(0.6rem + ((1vw - .32rem) * 0.63)) solid #b10a32;
	font-size: calc(1.6rem + ((1vw - .32rem) * 1.67));
}

.detail-intro {
	margin-bottom: calc(2rem + ((1vw - .32rem) * 2.08));
}

.detail-content {
	margin-bottom: calc(3rem + ((1vw - .32rem) * 3.13));
}

.detail-content > * {
	margin-bottom: calc(1rem + ((1vw - .32rem) * 1.04));
}

.detail-content .popup {
	max-width: 90%;
	margin: calc(1.5rem + ((1vw - .32rem) * 1.56)) auto;
}

.detail-content p span {
	font-weight: 700;
}

.profile-name {
	padding-bottom: 5px;
	margin-bottom: calc(1.5rem + ((1vw - .32rem) * 3.13));
	font-size: 150%;
	font-weight: 700;
	border-bottom: 2px solid #b10a32;
}

.profile-img {
	margin-bottom: 15px;
}
/***** ▲detail▲ *****/

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

.store-wrap{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
}

.store-wrap figure{
	position: relative;
}

.store-wrap figure:not(:last-child){
	margin-bottom: 15px;
}

.store-wrap figcaption{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px;
	background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
	color: #fff;
	line-height: 1.2;
}

.store-name{
	margin-bottom: 10px;
	font-size: 120%;
	word-break: keep-all;
	word-wrap: break-word;
	filter: drop-shadow(1px 1px 1px rgba(0,0,0,.9));
}

.store-wrap .btn{
	border: 1px solid #fff;
	transition: .3s;
}

.store-wrap .btn:hover{
	border: 1px solid rgba(199,0,18,.7);
	background: rgba(199,0,18,.7);
}

/***** ▲store▲ *****/

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

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

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

@media (min-width:640px){
	/*店舗画像640px以上で2カラム*/
	.store-wrap figure{
		width: 48%;
		margin: 1%;
	}
}

@media (min-width:960px){
  .intro-txt-center,
  .outro-txt-center{
    text-align: center;
    font-size: 120%;
    font-weight: 500;
  }
  
  .intro-txt-center {
    line-height: 1.6;
  }
  
  .outro-txt-center {
    line-height: 2;
  }
    
  .brpc {
    display: block;
  }
  
	.detail-bundle .youtube {
		margin: 30px auto;
	}
	/*店舗画像960px以上で3カラム*/
	.store-wrap figure{
		width: calc((100% / 2) - 2%);
	}
}

@media (min-width:1280px){
	.youtube-wrap {
		width: 80%;
	}
	.detail-content .popup {
		max-width: 80%;
	}
	.profile-img {
		width: 80%;
	}
	/*▼可変サイズの最大値▼*/
	body{
		font-size: 1.8rem;
	}
	
	.content-wrap{
		padding: 6.4rem 3.2rem;
	}
	
	.content-wrap > h1{
		font-size: 4rem;
	}
	
	.content-wrap > h2{
		font-size: 3.4rem;
	}

	.content-wrap > h1 span{
		font-size: 2rem;
	}
	
	.content-wrap > h1:after {
		margin: 2rem auto 6rem;
	}
	/*▲可変サイズの最大値▲*/
}
.shop-btn {
    background: #c00;
    color: #fff;
    text-align: center;
    width: 300px;
    display: block;
    padding: 10px;
    border-radius: 6px;
}
.shop-btn:hover {
    transition: .5s;
    opacity: .5;
}