@charset "utf-8";



@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');



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

#smithh2,
#smithh3,
#smithh4,
#smithh5,
#smithh6 {
	margin: 0;
}

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

	color: #000;
	overflow-x: hidden;
}
#smith 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;
}
#smith.page-content-inner {
	position: relative;
}
#smithimg {
	display: block;
}
#smithimg.device-pc {
	display: none;
}
#smithimg.device-sp {
	display: block;
}

/*フォント*/
.font-spartan {
	font-family: "League Spartan", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400!important;
	font-style: normal;
}





/* --------------------------------------------------------------------------------
 メイン画像
--------------------------------------------------------------------------------- */
#smith .main-img {
	margin-bottom: 8vw;
	width: 100%;
}
#smith .main-img .img-main{
	width: 100%;
}






/* --------------------------------------------------------------------------------
 コンテンツ
--------------------------------------------------------------------------------- */
#smith .contents {
	position: relative;
	padding-bottom: 25vw;
}

/* ビルシルエット背景 */
#smith .contents::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: -5vw;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 25vw;
	background: url("../../images/page/smith/f-bg.png") repeat-x 0 0;
	background-size: auto 20vw;
}




/* --------------------------------------------------------------------------------
 両者の出会い
--------------------------------------------------------------------------------- */
#smith .story  {
	padding: 0 5vw;
	margin-bottom: 26vw;
	position: relative;
}
#smith .story h2 {
	font-size: 8vw;
	padding: 0 0 8vw;
	text-align: center;
	line-height: 1.7;
}
#smith .story h2 span {
	font-size:  5.2vw;
	text-align: center;
	display: block;
}

#smith .story .intro  {
	margin: 0 auto 5vw auto;
}
#smith .story .intro .txt {
	line-height: 1.8;
	font-size: 4vw;
}

/* story */
#smith .story .story-box{
	display: flex;
	flex-direction: column;
}
#smith .story .story-box .ttl-fw{
	width: 72vw;
	margin: 0 auto 9vw auto;
}
#smith .story .story-box .ttl-smith{
	width: 60vw;
	margin: 0 auto 8vw auto;
}
#smith .story .story-box .txt {
	line-height: 1.8;
	font-size:4vw;
}

/* fw */
#smith .story .story-fw {
	margin-bottom: 36vw;
	
}
#smith .story .story-fw .il-brownie{
	width: 30vw;
	margin: 0 0 3vw auto;
}
#smith .story .story-fw .il-woman{
	width: 66vw;
	margin: 5vw auto 0 auto;
}
#smith .story .story-fw .il-woman img{
	width: 66vw;
}
/* smith */
#smith .story .story-smith {
	position: relative;
	padding-bottom: 70vw;
}
#smith .story .story-smith .il-leaf{
	position: absolute;
	width: 20vw;
	top: -12vw;
	right: 4vw;
}
#smith .story .story-smith .img-smith{
	position: absolute;
	width: 30vw;
	bottom: 23.5vw;
	right: 10.5vw;
}
#smith .story .img-stamp{
	position: absolute;
	width: 35vw;
	bottom: 13vw;
	left: 4vw;
}




/* --------------------------------------------------------------------------------
 ペアリングセット
--------------------------------------------------------------------------------- */
#smith .set  {
	margin: 0 0 38vw 0;
}
#smith .set h2 {
	font-size: 8vw;
	padding: 0 0 6vw;
	text-align: center;
	line-height: 1.7;
}
#smith .set h2 span {
	font-size:  5.2vw;
	text-align: center;
	display: block;
}
#smith .set .img {	
	margin-bottom: 14vw;
}
#smith .set .img img{
	width: 100%;
	height: 127vw;	
	object-fit: cover;
}
#smith .set .txt-box {
	padding: 0 5vw;

}
#smith .set .txt-box h3 {
	padding: 0 0 6vw;
	font-size:5.6vw;
	text-align: center;
	font-weight: 500;
}
#smith .set .txt-box .txt {
	line-height: 1.8;
	font-size:4vw;
}




/* --------------------------------------------------------------------------------
 ペアリング
--------------------------------------------------------------------------------- */
#smith .pairing{
	margin-bottom: 54vw;
}
#smith .pairing h2 {
	font-size: 8vw;
	padding: 0 0 5vw;
	text-align: center;
	line-height: 1.5;
}
#smith .pairing h2 span {
	font-size:  4.6vw;
	text-align: center;
	display: block;
}

/* アイテム */
#smith .pairing .item{
	margin-bottom: 19vw;
	display: flex;
	flex-direction: column;
}
#smith .pairing .column-reverse{
	margin-bottom: 19vw;
	display: flex;
	flex-direction: column-reverse;
}
/*画像*/
#smith .pairing .item .item-img{
	width: 100%;
	margin-bottom: 10vw;
}
#smith .pairing .item .item-img img{
	height: 108vw;
	object-fit: cover;
}
/* NO */
#smith .pairing .item h4{
	font-size: 14vw;
	line-height: 1;
	padding-bottom: 3vw;
}
#smith .pairing .item h4.no1,
#smith .pairing .item h4.no3{
	color: #818085;
}
#smith .pairing .item h4.no2{
	color: #eba849;
}
#smith .pairing .item h4.no4{
	color: #b2cbb2;
}

/* 詳細 */
#smith .pairing .item .item-detail{
	padding: 0 5vw;
}
#smith .pairing .item .item-detail h3.name{
	width: 65vw;
	padding-bottom: 6vw;
}
#smith .pairing .item .item-detail .txt{
	line-height: 1.8;
	font-size: 4vw;
	margin-bottom: 10vw;
}

#smith .pairing .item .item-detail .item-box{
	display: flex;
	justify-content: space-between;
}
/* BROWNIE */
#smith .pairing .item .item-detail .item-box .brw{
	width: 46%;
}
#smith .pairing .item .item-detail .item-box .cat-name{
	font-size: 6.6vw;
}
#smith .pairing .item .item-detail .item-box .brw .b-img{
	width: 100%;
	margin: 0vw auto 5vw auto;
}
#smith .pairing .item .item-detail .item-box .brw .b-name-en{
	font-size: 3.6vw;
	text-align: center;
	margin-bottom: 3vw;
}
#smith .pairing .item .item-detail .item-box .brw .b-name{
	font-size: 3.15vw;
	text-align: center;
}
#smith .pairing .item .item-detail .item-box .brw .ls{
	letter-spacing: -0.16em;
}

/* TEA */
#smith .pairing .item .item-detail .item-box .tea{
	width: 46%;
}
#smith .pairing .item .item-detail .item-box .tea .t-img{
	margin: 1vw 0 1.5vw 0;
}


/* ティータイム */
#smith .pairing .tea-time {
	padding: 9vw 5vw 0 5vw;
	position: relative;
}
#smith .pairing .tea-time .txt{
	line-height: 1.7;
	font-size: 4.6vw;
	text-align: center;
}
#smith .pairing .tea-time .il-brownie{
	position: absolute;
	width: 25vw;
	bottom: -14vw;
	left: 4vw;
}
#smith .pairing .tea-time .il-leaf{
	position: absolute;
	width: 19vw;
	bottom: -13vw;
	right: 4vw;
}




/* --------------------------------------------------------------------------------
 取扱店
--------------------------------------------------------------------------------- */
#smith .stores{
	
}
#smith .stores h2 {
	font-size: 8vw;
	padding: 0 0 13vw;
	text-align: center;
	line-height: 1.5;
}
#smith .stores h2 span {
	font-size:  4.6vw;
	text-align: center;
	display: block;
}

#smith .stores .store-fw,
#smith .stores .store-smith{
	margin-bottom:10vw;
}
#smith .stores .date{
	font-size: 10vw;
	text-align: right;
	line-height: 1;
	padding-right: 5vw;
}
#smith .stores .store{
	display: flex;
	flex-direction: column;
}
#smith .stores .store .store-img{
}
#smith .stores .store .store-img img{
	height: 75vw;
	object-fit: cover;
}
#smith .stores .store .store-detail{
	width: 100%;
	background: #fff;
	padding:8vw 5vw 6vw 5vw;
	box-sizing: border-box;
}
#smith .stores .store-fw .store .store-detail{
	background: #fff;
}
#smith .stores .store-smith .store .store-detail{
	background: #c8c8cd;
}

#smith .stores .store .store-detail h3{
	width:90vw;
	padding-bottom: 5vw;
}
#smith .stores .store .store-detail .txt-box .txt{
	padding: 0 0 3vw;
	line-height: 1.4;
	font-size: 4vw;
}





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

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





/* ----------------------------------------
フッター 固定バナー
---------------------------------------- */
@media screen and (max-width: 899px) {
	.footer__bottom {
		padding: 3.125rem 0 15rem;
	}
}
#smith .fix-bnr {
	display: block;
	position: fixed;
	z-index: 10;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
}
#smith .fix-bnr a {
	display: block;

	padding:3vw 0;
	text-decoration: none !important;
	opacity: 1 !important;

	text-decoration: none;
	background: #b3be96;
	text-align: center;
}
#smith .fix-bnr p{
	font-size: 6vw;
	line-height: 1.2;
}
#smith .fix-bnr .txt{
	display: block;
	font-size:3.6vw;
}