@charset "utf-8";

/*--------------------------------------------------------------------------------
■PC： smith
 --------------------------------------------------------------------------------- */
body {
	background: #fff;
}

main.str-content section:not(#main) {
	padding: 0 !important;
}

#br31 {
	position: relative;
	font-weight: 400;
	color: #e85898;
}



/* --------------------------------------------------------------------------------
 フッター
--------------------------------------------------------------------------------- */
#ym-footer {
	background: #fff;
}
#ym-footer .footer-contents-list {
	padding: 0;
}

#ym-footer .footer-contents-list {
	/*display: none !important;*/
}



/* --------------------------------------------------------------------------------
 ページ内共通設定
--------------------------------------------------------------------------------- */
.page-main {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
}
.page-main * {
	font-family: "Noto Sans JP", sans-serif;
}

#br31 .inner {
	width: 67vw;
	margin: 0 auto;
}
#br31 img {
	display: block;
	width: 100%;
}
#br31 img.device-pc {
	display: block;
	width: 100%;
}
#br31 img.device-sp {
	display: none;
}
#br31 a {
	text-decoration: none;
}






/* --------------------------------------------------------------------------------
 メイン画像
--------------------------------------------------------------------------------- */
#br31 .main-img {
	position: relative;
	width: 100%;
}

/* 背景 波*/
#br31 .main-img .bg-wave {
	width: 100%;
	position: absolute;
	bottom:-1vw;
}




/* --------------------------------------------------------------------------------
 イントロ
--------------------------------------------------------------------------------- */
#br31 .intro  {
	padding: 6.4vw 0 0 0;
	margin-bottom: 1vw;
}
#br31 .intro .date{
	display: inline-block;
	background: #e85798;
	color: #fff;
	font-size: min( 1.56vw, 30px);
	padding: 0.4vw 2vw;
	transform: rotate(-7deg);
	margin: 0 0 3.4vw 7.6vw;
	font-weight: 500;
}
#br31 .intro .date span{	
	font-size: min( 1.98vw, 38px);
}
#br31 .intro h2 {
	font-size: min(2.08vw, 40px);
	text-align: center;
	line-height: 1.6;
	margin-bottom: 3vw;
}
#br31 .intro .img {
	width: 38vw;
	margin: 0 auto 2.6vw auto;
}
#br31 .intro .description {
	font-size: min( 1.19vw, 23px);	
	line-height: 2.18;
	text-align: center;
	letter-spacing: -0.01em;
}




/* --------------------------------------------------------------------------------
 コラボレーションブラウニーセット
--------------------------------------------------------------------------------- */
#br31 .set {
	position: relative;
	background-image: linear-gradient(90deg, #f483b7, #9e75d1);
	padding: 21vw 0 18vw 0;
	color: #fff;
}

/* 背景 波 */
#br31 .set .bg-wave2 {
	width: 100%;
	position: absolute;
	top:0;
}
/* 背景 波 */
#br31 .set .bg-wave {
	width: 100%;
	position: absolute;
	bottom:-0.1vw;
}

#br31 .set h2 {
	font-size: min(2.91vw, 56px);
	font-weight: 400;
	text-align: center;
	line-height: 1.9;
	margin-bottom: 3vw;
}
#br31 .set h2 span{
	display: block;
	font-size: min(1.66vw, 32px);
	font-weight: 500;
}
#br31 .set .description {
	font-size: min( 1.19vw, 23px);	
	line-height: 2.18;
	text-align: center;
	margin-bottom: 4.8vw;
}

#br31 .set .item {	
	margin-bottom: 8vw;
}
#br31 .set .item .img {
	width: 52.2vw;
	margin: 0 auto 2.4vw auto;
}
#br31 .set .item .detail {
	width: 24vw;
	margin: 0 auto 1vw auto;
	color: #fff;
	text-align: right;
}
#br31 .set .item .name{
	font-size: min( 1.45vw, 28px);	
	line-height: 1.6;
	margin-right: 2.2vw;
}
#br31 .set .item .price{
	font-size: min( 1.87vw, 36px);
	line-height: 1.6;
	margin-right: 2.2vw;
}
#br31 .set .item .price span{
	font-size: min( 1.45vw, 28px);	
}
/* 購入ボタン */
#br31 .set .item .btn{
	width: 18.7vw;
	margin: 0 auto;
	background: #e85798;
	border-radius: 50px;
	font-size: min( 1.45vw, 28px);	
	text-align: center;
	padding: 0.8vw 0;
}
#br31 .set .item .btn a{
	display: block;
	color: #fff;	
	font-weight: 500;
}


/* 今回だけのスペシャルデザイン
-------------------------------------------*/
#br31 .set h3{
	color: #fff;
	font-size: min(1.66vw, 32px);
	font-weight: 500;
	text-align: center;	
	margin-bottom: 7.6vw;
	border-bottom:none;
}

/* パッケージ */
#br31 .set .box-package{
	display: flex;
	justify-content: space-between;
	margin-bottom: 8vw;
}
#br31 .set .box-package .img{
	width: 30vw;
}
#br31 .set .box-package .txt-box{
	width: 31.6vw;
}
#br31 .set .box-package .txt-box .label{
	width: 17vw;
	background: #e85798;
	font-size: min(2.08vw, 40px);	
	text-align: center;
	padding: 1.6vw 0 0 0;
	margin-bottom: 2.3vw;
}
#br31 .set .box-package .txt-box .txt{
	font-size: min( 1.45vw, 28px);	
	text-align: left;
}

/* ラベル */
#br31 .set .box-label{
	display: flex;
	justify-content: space-between;
	color: #fff;
}
#br31 .set .box-label .img{
	width: 36vw;
}
#br31 .set .box-label .txt-box{
	width: 27vw;
}
#br31 .set .box-label .txt-box .label{
	width: 22.6vw;
	background: #e85798;
	font-size: min(2.08vw, 40px);	
	text-align: center;
	padding: 1.6vw 0 0 0;
	margin: 3vw 0 2.3vw 0;
}
#br31 .set .box-label .txt-box .txt{
	font-size: min( 1.45vw, 28px);	
	text-align: left;
}




/* --------------------------------------------------------------------------------
コラボレーションフレーバー
--------------------------------------------------------------------------------- */
#br31 .flavor {
	padding: 10vw 0 3.4vw 0;
	position: relative;

	background-image: url("../../images/page/br31/bg-ice-pattern.png"), url("../../images/page/br31/bg-ice-pattern.png") ;
	background-position:2.4vw 0.4vw, calc(100% - 2.4vw) 6vw;
	background-repeat:repeat-y, repeat-y;
	background-size: 4.14vw, 4.14vw;
}

#br31 .flavor h2 {
	color: #e85898;
	font-size: min(2.91vw, 56px);
	font-weight: 400;
	text-align: center;
	line-height: 1.9;
	margin-bottom: 3vw;
}
#br31 .flavor h2 span{
	display: block;
	font-size: min(1.66vw, 32px);
	font-weight: 500;
}
#br31 .flavor .description {
	color: #e85898;	
	font-size: min( 1.19vw, 23px);	
	line-height: 2.18;
	text-align: center;
	margin-bottom: 5.4vw;
}

/*フレーバー*/
#br31 .flavor .flavor-box {
	background-image: linear-gradient(90deg, #fcedf4, #eae3f0);
	color: #e85898;	
	padding: 0 3.2vw 1.8vw 3.2vw;
	display: flex;
	justify-content:space-between;
	margin-bottom: 5vw;
}

#br31 .flavor .flavor-box .detail{
	width: 28vw;
	margin-top: 4.3vw;
}
#br31 .flavor .flavor-box .detail h4{
	font-size: min(2.08vw, 40px);
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: 0.6vw;
	
	position: relative;
}
#br31 .flavor .flavor-box .detail h4.name-c{
	letter-spacing: -0.08em;
	margin-top: 0.8vw;
}
#br31 .flavor .flavor-box .detail h4.name-m{
	margin-top: 1.8vw;
}
#br31 .flavor .flavor-box .detail h4 span{
	display: block;
	font-size: min( 1.09vw, 21px);	
}
#br31 .flavor .flavor-box .detail h4 span.labl{
	width: 5.5vw;
	position: absolute;
	top:0;
	right: 1vw;
}
#br31 .flavor .flavor-box .detail h4.name-c span.labl{
	width: 5.5vw;
	position: absolute;
	top:0;
	right: 0;
}
#br31 .flavor .flavor-box .detail .txt{
	font-size: min( 1.19vw, 23px);	
	line-height: 2.18;
}
#br31 .flavor .flavor-box .img{
	width: 30vw;
	margin-top: 1vw;
}





/* --------------------------------------------------------------------------------
 ブランド紹介
--------------------------------------------------------------------------------- */
#br31 .about {
	position: relative;
	background-image: linear-gradient(90deg, #9e75d1, #f483b7);
	padding: 25.6vw 0 19vw 0;
}

/* 背景 波 */
#br31 .about .bg-wave2 {
	width: 100%;
	position: absolute;
	top:-0.1vw;
}
/* 背景 波 */
#br31 .about .bg-wave {
	width: 100%;
	position: absolute;
	bottom:-0.1vw;
}

#br31 .about h2 {
	color: #fff;
	font-size: min(2.91vw, 56px);
	font-weight: 400;
	text-align: center;
	line-height: 1.8;
	margin-bottom: 5.2vw;
}
#br31 .about h2 span{
	display: block;
	font-size: min(1.66vw, 32px);
	font-weight: 500;
}


#br31 .about .brand-box {
	display: flex;
	justify-content: space-between;
}

#br31 .about .brand-box .brand{
	width: 31.4vw;
	color: #fff;
}
#br31 .about .brand-box .brand h4{
	font-size: min(1.68vw, 32px);
	font-weight: 400;
	margin-bottom: 1.4vw;
}
#br31 .about .brand-box .brand h4.br{
	font-weight: 700;
	margin:-0.5vw 0 2vw 0;
	letter-spacing: 0.06em;
}
#br31 .about .brand-box .brand h4 span{
	display: block;
	font-size: min( 1.2vw, 25px);
	letter-spacing: 0.1em;
	font-weight: 400;
}
#br31 .about .brand-box .brand h4.br span{
	display: block;
	font-size: min( 1.2vw, 25px);
	letter-spacing: 0.1em;
	font-weight: 500;
}

#br31 .about .brand-box .brand .txt{
	font-size: min( 1.19vw, 23px);	
	line-height: 1.9;
	letter-spacing: 0.02em;
}

#br31 .about .brand-box .brand .img,
#br31 .about .brand-box .brand .img-b{
	width: 18.2vw;
	margin: 2.5vw auto 0 auto;
}




/* --------------------------------------------------------------------------------
サーティワンアイスクリーム店舗限定メニュー
--------------------------------------------------------------------------------- */
#br31 .limited {
	padding: 4.6vw 0 0 0;
	position: relative;

	background-image: url("../../images/page/br31/bg-ice-pattern.png"), url("../../images/page/br31/bg-ice-pattern.png") ;
	background-position:2.4vw 2vw, calc(100% - 2.4vw) 7vw;
	background-repeat:no-repeat,no-repeat;
	background-size: 4.14vw, 4.14vw;
}

#br31 .limited h2 {
	color: #e85898;
	font-size: min(2.91vw, 56px);
	font-weight: 400;
	text-align: center;
	line-height: 1.8;
	margin-bottom: 2.4vw;
}
#br31 .limited h2 span{
	display: block;
	font-size: min(1.66vw, 32px);
	font-weight: 500;
}

/*詳細*/
#br31 .limited .box {
	color: #e85898;	
	display: flex;
	justify-content: space-between;
}

#br31 .limited .box .detail{
	width:29vw;
}
#br31 .limited .box .detail .date{
	display: inline-block;
	background: #e85798;
	color: #fff;
	font-size: min( 1.56vw, 30px);
	padding: 0.4vw 3vw;
	transform:rotate(-7deg);
	margin: 3vw 0 3.2vw 0;
	font-weight: 500;
}
#br31 .limited .box .detail .date span{	
	font-size: min( 1.98vw, 38px);
}
#br31 .limited .box .detail h4{
	font-size: min(1.35vw, 26px);
	font-weight: 500;
	margin-bottom: 1vw;
}
#br31 .limited .box .detail .txt{
	font-size: min( 1.19vw, 23px);	
	line-height: 2.18;
	margin-bottom: 2.4vw;
}
#br31 .limited .box .detail ul.note{
}
#br31 .limited .box .detail ul.note li{
	font-size: min( 0.93vw, 18px);	
	line-height: 1.6;
	text-indent: -1em;
	padding-left: 1em;
}
#br31 .limited .box .img{
	width:32.8vw;
}





/* --------------------------------------------------------------------------------
 よくあるご質問
--------------------------------------------------------------------------------- */
#br31 .faq {
	position: relative;
	background-image: linear-gradient(90deg, #f483b7, #9e75d1);
	padding: 17.6vw 0 48vw 0;
}

/* 背景 波 */
#br31 .faq .bg-wave2 {
	width: 100%;
	position: absolute;
	top:0;
}

#br31 .faq h2 {
	color: #fff;
	font-size: min(2.91vw, 56px);
	font-weight: 700;
	text-align: center;
	line-height: 1.8;
	margin-bottom: 3.4vw;
}
#br31 .faq h2 span{
	display: block;
	font-size: min(1.66vw, 32px);
	font-weight: 500;
}


#br31 .faq ul.qa{
	padding: 0 0.4vw;
}
#br31 .faq ul.qa li{
	color: #fff;
	margin-bottom: 1vw;
}
#br31 .faq ul.qa li .q{
	font-size: min(1.45vw, 28px);
	font-weight: 500;
}
#br31 .faq ul.qa li .q span{
	font-size: min( 2.03vw, 40px);
	padding-right: 0.5vw;
}
#br31 .faq ul.qa li .ans{
	font-size: min( 1.19vw, 23px);
	line-height: 1.8;
}




/* 背景 ビル */
#br31 .bg-skyline {
	width: 100%;
	position: absolute;
	bottom:0;
}







/* --------------------------------------------------------------------------------
 フローティングボタン
--------------------------------------------------------------------------------- */
#br31 .btn-float {
	position: fixed;
	bottom: 1vw;
	right: 1vw;
	z-index: 100;
	width: 11vw;
}
#br31 .btn-float a {
	display: block;
}
#br31 .btn-float a:hover,
#br31 .btn-float a:hover img {
	opacity: 1;
}

/* 止まった時のスタイル */
#br31 .btn-float.is-stopped {
	position: absolute;
	right: 1vw;
	bottom: auto;
}