@charset "utf-8";


/*--------------------------------------------------------------------------------
■スマートフォン： sunbirds
--------------------------------------------------------------------------------*/
body {
	background: #fff;
}

#br31 h2,
#br31 h3,
#br31 h4,
#br31 h5,
#br31 h6 {
	margin: 0;
}

main.str-content section:not(#main) {
	padding: 0 !important;
}
#br31{
	position: relative;
	overflow: hidden;
	font-weight: 400;

	color: #e85898;
	overflow-x: hidden;
}

#br31 h3 {
	padding-bottom: 0;
	border-bottom: none;
	color: inherit;
}

main.str-content h2 {
	display: block;
	font-size: 1em;
	-webkit-margin-before: 0 !important;
	-webkit-margin-after: 0 !important;
	-webkit-margin-start: 0 !important;
	-webkit-margin-end: 0 !important;
	font-weight: 400;
}
main.str-content h3 {
	-webkit-margin-before: 0 !important;
	-webkit-margin-after: 0 !important;
	-webkit-margin-start: 0 !important;
	-webkit-margin-end: 0 !important;
}
main.str-content h4 {
	-webkit-margin-before: 0 !important;
	-webkit-margin-after: 0 !important;
	-webkit-margin-start: 0 !important;
	-webkit-margin-end: 0 !important;
}




/* --------------------------------------------------------------------------------
 フッター
--------------------------------------------------------------------------------- */
#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 {
	position: relative;
	padding: 0 5vw;
}
#br31 img {
	display: block;
}
#br31 img.device-pc {
	display: none;
}
#br31 img.device-sp {
	display: block;
}







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

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





/* --------------------------------------------------------------------------------
 イントロ
--------------------------------------------------------------------------------- */
#br31 .intro  {
	padding-top: 12vw;
	margin-bottom: 14vw;
}
#br31 .intro .date{
	display: inline-block;
	background: #e85798;
	color: #fff;
	font-size:4.8vw;
	padding: 1vw 4vw;
	transform:rotate(-7deg);
	margin-bottom: 11vw;
	letter-spacing: 0.05em;
	font-weight: 500;
}
#br31 .intro .date span{	
	font-size: 6.2vw;
}
#br31 .intro h2 {
	color: #e85898;
	font-size: 5.2vw;
	text-align: center;
	line-height: 1.8;
	padding-bottom: 13vw;
	letter-spacing: -0.03em;
}
#br31 .intro .img {
	width: 100%;
	margin: 0 auto 11vw auto;
}
#br31 .intro .description {
	color: #e85898;	
	font-size:4vw;	
	line-height:2;
	text-align: center;
}




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

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

#br31 .set h2 {
	color: #fff;
	font-size: 6.8vw;
	font-weight: 400;
	text-align: center;
	line-height: 1.68;
	padding-bottom: 7.2vw;
}
#br31 .set h2 span{
	display: block;
	font-size: 4.8vw;
	font-weight: 500;
}
#br31 .set .description {
	color: #fff;	
	font-size:4vw;	
	line-height: 2;
	text-align: center;
	margin-bottom: 13vw;
	padding: 0 5vw;
}

#br31 .set .item {	
	margin-bottom: 19vw;
}
#br31 .set .item .img {
	width: 100%;
	margin: 0 auto 7vw auto;
}
#br31 .set .item .detail {
	width:76.6vw;
	margin: 0 auto 7vw auto;
	color: #fff;
	text-align: right;
}
#br31 .set .item .name{
	width: 66vw;
	font-size: 4.4vw;	
}
#br31 .set .item .price{
	width: 66vw;
	font-size: 5.6vw;	
}
#br31 .set .item .price span{
	font-size:  4.4vw;	
}
/* 購入ボタン */
#br31 .set .item .btn{
	width:58vw;
	margin: 0 auto;
	background: #e85798;
	border-radius: 50px;
	font-size: 4.4vw;	
	text-align: center;
	padding:3vw 0;
}
#br31 .set .item .btn a{
	display: block;
	color: #fff;
	font-weight: 500;
}


/* 今回だけのスペシャルデザイン
-------------------------------------------*/
#br31 .set h3{
	color: #fff;
	font-size:4.8vw;
	font-weight: 500;
	text-align: center;	
	padding-bottom: 14vw;
	border-bottom:none;
}

/* パッケージ */
#br31 .set .box-package{
	width: 82vw;
	margin: 0 auto 15vw auto;
	color: #fff;
}
#br31 .set .box-package .img{
	width:72vw;
	margin: 0 auto 6vw auto;
}
#br31 .set .box-package .label{
	width: 44vw;
	background: #e85798;
	font-size: 5.4vw;	
	text-align: center;
	padding: 4vw 0 0 0;
	margin-bottom: 8vw;
}
#br31 .set .box-package .txt{
	font-size: 4.4vw;	
	line-height: 2;
	text-align: left;

}

/* ラベル */
#br31 .set .box-label{
	width: 82vw;
	margin: 0 auto 9vw auto;
	color: #fff;
}
#br31 .set .box-label .img{
	width:90vw;
	margin: 0 auto 5vw -5vw;
}
#br31 .set .box-label .label{
	width:64vw;
	background: #e85798;
	font-size: 5.4vw;	
	text-align: center;
	padding: 4vw 0 0 0;
	margin: 1.5vw 0 8vw 0;
}
#br31 .set .box-label .txt{
	font-size: 4.4vw;
	line-height: 2;
	text-align: left;
}






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

	background-image: url("../../images/page/br31/bg-ice-pattern.png"), url("../../images/page/br31/bg-ice-pattern.png") ;
	background-position:1vw top, calc(100% - 1vw) 5vw;
	background-repeat:repeat-y, repeat-y;
	background-size: 5.2vw,5.2vw;
}

#br31 .flavor h2 {
	font-size: 6.8vw;
	font-weight: 400;
	text-align: center;
	line-height: 1.68;
	padding-bottom: 8vw;
}
#br31 .flavor h2 span{
	display: block;
	font-size: 4.8vw;
	font-weight: 500;
}
#br31 .flavor .description {
	font-size:4vw;	
	line-height: 2;
	text-align: center;
	margin-bottom: 10vw;
}

/*フレーバー*/
#br31 .flavor .flavor-box {
	background-image: linear-gradient(90deg, #fcedf4, #eae3f0);
	display: flex;
	flex-direction: column;
	padding: 10vw 0 0 0; 
	margin-bottom: 10vw;
}
#br31 .flavor .col-r {
	flex-direction: column-reverse!important;
}
#br31 .flavor .flavor-box .detail{
	padding: 0 3vw;
}
#br31 .flavor .flavor-box .detail h4{
	font-size: 5.4vw;
	font-weight: 400;
	padding-bottom: 4vw;
	
	position: relative;
}
#br31 .flavor .flavor-box .detail h4.name-c{
	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: 3.6vw;	
	letter-spacing: 0.02em;
}
#br31 .flavor .flavor-box .detail h4 span.labl{
	width: 16vw;
	position: absolute;
	top: -1vw;
	right: 3vw;
}
#br31 .flavor .flavor-box .detail h4.name-c span.labl{
	width: 16vw;
	position: absolute;
	top:4vw;
	right: 3vw;
}

#br31 .flavor .flavor-box .detail .txt{
	font-size:4vw;	
	line-height:2;
	letter-spacing: 0.04em;
}
#br31 .flavor .flavor-box .img{
	width: 82vw;
	margin: 2vw auto 0 -1vw;
}





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

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

#br31 .about h2 {
	color: #fff;
	font-size: 6.8vw;
	font-weight: 400;
	text-align: center;
	line-height: 2;
	padding-bottom: 13vw;
}
#br31 .about h2 span{
	display: block;
	font-size: 4.8vw;
	font-weight: 500;
}

#br31 .about .brand-box {
	display: flex;
	flex-direction: column;
	padding: 0 3vw;
}

#br31 .about .brand-box .brand{
	padding-bottom: 18vw;
}
#br31 .about .brand-box .brand h4{
	font-size: 5.8vw;
	font-weight: 400;
	padding-bottom: 3vw;
}
#br31 .about .brand-box .brand h4.br{
	font-size: 6.4vw;
	font-weight: 700;
}
#br31 .about .brand-box .brand h4 span{
	display: block;
	font-size:4.4vw;
	font-weight: 500;
}
#br31 .about .brand-box .brand .txt{
	font-size: 4vw;	
	line-height: 2;
	letter-spacing: 0.02em;
}
#br31 .about .brand-box .brand .img{
	width: 74vw;
	margin: 6vw auto 0vw auto;
	padding-right: 4vw;
}
#br31 .about .brand-box .brand .img-b{
	width:70vw;
	margin: 11vw auto 0 auto;
}




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

	background-image: url("../../images/page/br31/bg-ice-pattern.png"), url("../../images/page/br31/bg-ice-pattern.png") ;
	background-position:1vw top, calc(100% - 1vw) 4vw;
	background-repeat:repeat-y, repeat-y;
	background-size: 5.2vw,5.2vw;
}

#br31 .limited .date{
	display: inline-block;
	background: #e85798;
	color: #fff;
	font-size:4.8vw;
	padding: 1vw 6vw;
	transform:rotate(-7deg);	
	letter-spacing: 0.05em;
	margin: 0 auto 8vw 3vw;
	font-weight: 500;
}
#br31 .limited .date span{	
	font-size: 6.2vw;
}
#br31 .limited h2 {
	font-size: 6.8vw;
	font-weight: 400;
	text-align: center;
	line-height: 1.84;
	padding-bottom: 5vw;
}
#br31 .limited h2 span{
	display: block;
	font-size: 4.8vw;
	font-weight: 500;
}

/*詳細*/
#br31 .limited .box {
	display: flex;
	flex-direction: column;
	padding: 0 3vw;
}

#br31 .limited .box .detail{
	margin-bottom: 10vw;
}

#br31 .limited .box .detail h4{
	font-size: 4.4vw;
	font-weight: 500;
	text-align: left;
	padding-bottom: 3.4vw;
}
#br31 .limited .box .detail .txt{
	font-size: 4vw;	
	line-height: 2;
}
#br31 .limited .box .img{
	width:100%;	
}





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

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

#br31 .faq h2 {
	color: #fff;
	font-size: 8vw;
	font-weight: 700;
	text-align: center;
	line-height: 1.8;
	padding-bottom: 9vw;
}
#br31 .faq h2 span{
	display: block;
	font-size: 4.4vw;
	font-weight: 500;
}

#br31 .faq ul.qa{
	padding: 0 3vw;	
}

#br31 .faq ul.qa li{
	color: #fff;
	padding-bottom: 4vw;
}
#br31 .faq ul.qa li .q{
	font-size:  4.4vw;
	margin-bottom: 1vw;
	font-weight: 500;
}
#br31 .faq ul.qa li .q span{
	font-size:6vw;	
}
#br31 .faq ul.qa li .ans{
	font-size: 4vw;
	line-height: 1.8;
}




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











/* ----------------------------------------
フローティングボタン
---------------------------------------- */
#br31 .btn-float {
	width: 23vw;
	
	position: fixed;
	bottom: 2vw;
	right: 2vw;
	z-index: 100;
}
#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: 0;
	bottom: auto;
}