@charset "utf-8";


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



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

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

#smith {
	position: relative;
	font-weight: 400;
	color: #000;
}
#smith h3 {
	padding-bottom: 0;
	border-bottom: none;
	color: inherit;
}


/* --------------------------------------------------------------------------------
 フッター
--------------------------------------------------------------------------------- */
#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 img {
	display: block;
	width: 100%;
}
#smith img.device-pc {
	display: block;
	width: 100%;
}
#smith img.device-sp {
	display: none;
}
#smith a {
	text-decoration: none;
}

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






/* --------------------------------------------------------------------------------
 メイン画像
--------------------------------------------------------------------------------- */
#smith .main-img {
	margin-bottom: 5vw;
	position: relative;
	width: 100%;
}
#smith .main-img .logo-smith{
	position: absolute;
	width: 26%;
	top: 5%;
	right: 3%;
}
#smith .main-img .logo-fw{
	position: absolute;
	width: 51%;
	bottom: 5%;
	left:  2%;
}



/* --------------------------------------------------------------------------------
 コンテンツ
--------------------------------------------------------------------------------- */
#smith .contents {
	max-width: 1920px;
	margin: 0 auto;
	
	padding: 0 0 180px;
}

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




/* --------------------------------------------------------------------------------
 両者の出会い
--------------------------------------------------------------------------------- */
#smith .story  {
	max-width: 1550px;
	width: 80%;
	margin: 0 auto 20% auto;
	
	position: relative;
}
#smith .story h2 {
	font-size: min(2.81vw, 54px);
	padding: 0 0 2%;
	text-align: center;
	line-height: 1.8;
}
#smith .story h2 span {
	font-size: min(1.66vw, 32px);
	text-align: center;
	display: block;
}

#smith .story .intro  {
	max-width: 1400px;
	margin: 0 auto 6% auto;
}
#smith .story .intro .txt {
	padding: 0 0 2%;
	line-height: 2.18;
	font-size: min( 1.19vw, 23px);
}

/* story */
#smith .story .story-box{
	max-width: 1400px;
	margin: 0 auto;
	
	display: flex;
	justify-content: space-between;
}
#smith .story .story-box .ttl-fw{
	width: 63%;
	margin-bottom: 5%;
}
#smith .story .story-box .ttl-smith{
	width: 51%;
	margin-bottom: 5%;
}
#smith .story .story-box .txt {
	padding: 0 0 2%;
	line-height: 2.18;
	font-size: min( 1.19vw, 23px);
}
/* fw */
#smith .story .story-fw {
	max-width: 650px;
	width: 47%;
	position: relative;
}

#smith .story .story-fw .il-brownie{
	position: absolute;
	max-width: 124px;
	width: 20%;
	top: 13%;
	left: -25%;
}
#smith .story .story-fw .il-woman{
	position: absolute;
	max-width: 230px;
	width: 40%;
	left: -10%;
}
/* smith */
#smith .story .story-smith {
	max-width: 650px;
	width: 47%;
	position: relative;
}
#smith .story .story-smith .il-leaf{
	position: absolute;
	max-width: 114px;
	width: 20%;
	top: -2%;
	right: -14%;
}

#smith .story .story-smith .img-smith_teamaker{
	position: absolute;
	width: 50%;
	left:76%;
}

#smith .story .story-smith .img-smith{
	position: absolute;
	max-width:124px;
	width: 20%;
	right: 4%
}
#smith .story .img-stamp{
	position: absolute;
	max-width: 177px;
	width: 27%;
	bottom: -72%;
	right: -26%;
}







/* --------------------------------------------------------------------------------
 ペアリングセット
--------------------------------------------------------------------------------- */
#smith .set  {
	margin: 0 0 4.5% 0;
}
#smith .set h2 {
	font-size: min(2.81vw, 53px);
	padding: 0 0 1%;
	text-align: center;
	line-height: 2.1;
}
#smith .set h2 span {
	font-size: min(1.66vw, 32px);
	text-align: center;
	display: block;
}
#smith .set .img {
	margin-bottom: 3%;
}
#smith .set .txt-box {
	max-width: 1400px;
	width: 75%;
	margin: 0 auto;
}
#smith .set .txt-box h3 {
	padding: 0 0 2%;
	line-height: 2;
	font-size: min( 1.77vw, 34px);
	text-align: center;
	font-weight: 500;
}
#smith .set .txt-box .txt {
	padding: 0 0 2%;
	line-height:  2.18;
	font-size: min( 1.19vw, 23px);
}









/* --------------------------------------------------------------------------------
 ペアリング
--------------------------------------------------------------------------------- */
#smith .pairing{
	margin-bottom: 15.5%;
}
#smith .pairing h2 {
	font-size: min(2.8vw, 54px);
	padding: 0 0 2%;
	text-align: center;
	line-height: 1.5;
}
#smith .pairing h2 span {
	font-size: min(1.3vw, 25px);
	text-align: center;
	display: block;
}

/* アイテム */
#smith .pairing .item{
	margin-bottom: 4%;
	display: flex;
	justify-content: space-between;
}

/* NO */
#smith .pairing .item h4{
	font-size: min(5.41vw, 104px);
	line-height: 1;
	margin: 0 0 3.5% 0;	
}
#smith .pairing .item h4.no1,
#smith .pairing .item h4.no3{
	color: #818085;
}
#smith .pairing .item h4.no2{
	color: #eba849;
	text-align: right;
}
#smith .pairing .item h4.no4{
	color: #b2cbb2;
	text-align: right;
}

/* 詳細 */
#smith .pairing .item .item-detail{
	max-width: 600px;
	width: 32%;
}
#smith .pairing .item .id-l{
	margin-left: 13.5%;
}
#smith .pairing .item .id-r{
	margin-right: 13.5%;
}
#smith .pairing .item .item-detail h3.name{
	width: 66%;
	margin-bottom: 7%;
}
#smith .pairing .item .item-detail .txt{
	line-height:2.28;
	font-size: min( 1.19vw, 23px);
}

#smith .pairing .item .item-detail .item-box{
	display: flex;
	justify-content: space-between;
	margin-top: 9%;
}
/* BROWNIE */
#smith .pairing .item .item-detail .item-box .brw{
	width: 46%;
}
#smith .pairing .item .item-detail .item-box .cat-name{
	font-size: min( 2.34vw, 45px);
}
#smith .pairing .item .item-detail .item-box .brw .b-img{
	width: 100%;
	margin: 3% auto 8% auto;
}
#smith .pairing .item .item-detail .item-box .brw .b-name-en{
	font-size: min( 1.25vw, 24px);
	
	text-align: center;
	margin-bottom: 3%;
}
#smith .pairing .item .item-detail .item-box .brw .b-name{
	font-size: min( 1vw, 21px);
	text-align: center;
}
#smith .pairing .item .item-detail .item-box .brw .ls{
	letter-spacing: -0.15em;
}

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

#smith .pairing .item .item-img{
	max-width: 980px;
	width: 51%;
	margin-top: 5.6%;
}

/* ティータイム */
#smith .pairing .tea-time {
	max-width:1400px;
	width: 80%;
	margin: 6.5% auto 0 auto;
	position: relative;
}
#smith .pairing .tea-time .txt{
	padding: 0 0 2%;
	line-height: 1.8;
	font-size: min(  1.56vw, 30px);
	text-align: center;
}
#smith .pairing .tea-time .il-brownie{
	position: absolute;
	max-width: 114px;
	width: 10%;
	top: -25%;
	left: -11%;
}
#smith .pairing .tea-time .il-leaf{
	position: absolute;
	max-width: 114px;
	width: 10%;
	bottom: -40%;
	right: -6%;
}











/* --------------------------------------------------------------------------------
 取扱店
--------------------------------------------------------------------------------- */
#smith .stores{
	max-width: 1400px;
	margin: 0 auto 3% auto;
}
#smith .stores h2 {
	font-size: min(2.81vw, 54px);
	padding: 0 0 5%;
	text-align: center;
	line-height: 1.5;
}
#smith .stores h2 span {
	font-size: min( 1.3vw, 25px);
	text-align: center;
	display: block;
}

#smith .stores .store-fw,
#smith .stores .store-smith{
	margin-bottom: 3.4%;
}
#smith .stores .date{
	font-size: min( 3.75vw, 72px);
	text-align: right;
	line-height: 1;
}
#smith .stores .store{
	display: flex;
	align-items: stretch;
}
#smith .stores .store .store-img{
	max-width: 600px;
	width: 100%;
	height: 100%;
	aspect-ratio: 60 / 41;
}
#smith .stores .store .store-img img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#smith .stores .store .store-detail{
	max-width: 800px;
	width: 100%;
	background: #fff;
	padding: 1.8% 4% 0 4%;
	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: 86%;
	margin-bottom: 2%;
}
#smith .stores .store .store-detail .txt-box .txt{
	padding: 0 0 1.8%;
	line-height: 1.4;
	font-size: min( 1.19vw, 23px);
}




/* --------------------------------------------------------------------------------
 フローティングボタン
--------------------------------------------------------------------------------- */
#smith .btn-float {
	position: fixed;
	bottom: 8vw;
	right: 1vw;
	z-index: 100;
	max-width: 300px;
	width: 24%;
}
#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: 1vw;
	bottom: auto;
}





/* ----------------------------------------
フッター 固定バナー
---------------------------------------- */
@media screen and (min-width: 900px) {
	.footer__bottom {
		padding: 80px 0 20rem;
	}
}
#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:0.5vw 0;
	text-decoration: none !important;
	opacity: 1 !important;

	text-decoration: none;
	background: #b3be96;
	text-align: center;
}
#smith .fix-bnr p{
	font-size: min( 2.08vw, 40px);
	line-height: 1.5;
}
#smith .fix-bnr .txt{
	display: block;
	font-size: min( 1.3vw, 25px);
}