@charset "UTF-8";

/* ----------------------------------
 米澤商店 TOP
---------------------------------- */
.pane-topic-path,
.block-topic-path { display: none !important;}
h1.block-category-list--header { display: none !important;}

/* ----------------------------------
 メインビジュアル
---------------------------------- */
#yonezawa_top_visual { margin: 0 -20px; position: relative;}
#yonezawa_top_visual .inner-frame { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2;}
#yonezawa_top_visual .inner-frame .desc { text-align: center; position: relative;}
#yonezawa_top_visual .inner-frame .desc .catch {
	font-family: "Yu Mincho", "YuMincho", serif;
	font-size: var(--font-size-sub);
	font-weight: 700;
	letter-spacing: 0.5em;
	writing-mode: vertical-rl;
	text-orientation: upright;
	word-break: keep-all;
	color: #FFF;
	position: absolute;
	top: 0;
	right: -30px;
}
#yonezawa_top_visual .visual-list { text-align: center;}
#yonezawa_top_visual .visual-list img { width: 100%; opacity: 0; transform: scale(1); transition: opacity 1s linear, transform 3s linear;}
#yonezawa_top_visual .visual-list .zoom-in { transform: scale(1.1);}
#yonezawa_top_visual .visual-list .swiper-slide-active img { opacity: 1;}
#yonezawa_top_visual .visual-list .swiper-slide:not(.swiper-slide-active) img { opacity: 0 !important; transform: scale(1) !important;}
#yonezawa_top_visual::after { content: ''; width: 100%; height: 100%; display: block; background: rgba(0,0,0,0.6); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}

@media screen and (min-width: 1001px) {
	#yonezawa_top_visual .inner-frame .desc .title-image { width: 395px; padding: 0; margin: 0; border: none;}
	#yonezawa_top_visual .inner-frame .desc .title-image img { width: 395px; vertical-align: middle;}
}
@media screen and (max-width: 1000px) {
	#yonezawa_top_visual .inner-frame .desc .title-image { width: 175px; padding: 0; margin: 0; border: none;}
	#yonezawa_top_visual .inner-frame .desc .title-image img { width: 175px; vertical-align: middle;}
}

/* ----------------------------------
 紹介
---------------------------------- */
#yonezawa_top_intro {
	padding: 124px 20px 60px;
	margin: 0 -20px;
	background-color: #fafafa;
  background-image: url("../../img/yonezawa/top/intro_bg_sb.jpg");
  background-repeat: no-repeat;
  background-position: center top;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
}
#yonezawa_top_intro .inner-frame { margin: 0 auto;}
#yonezawa_top_intro .image-list { width: 100%; display: flex; flex-wrap: nowrap; column-gap: 22px;}
#yonezawa_top_intro .image-list li:nth-child(1) { position: relative; top: -40px;}
#yonezawa_top_intro .image-list li:nth-child(3) { position: relative; top: -90px;}
#yonezawa_top_intro .desc { width: 100%;}
#yonezawa_top_intro .desc .title { margin: 56px 0 36px; font-family: "Yu Mincho", "YuMincho", serif;}
#yonezawa_top_intro .desc .text { font-size: var(--font-size-sub); line-height: var(--line-height-high);}
#yonezawa_top_intro .desc .button { width: 200px; height: 48px; margin: 36px auto 0;}
#yonezawa_top_intro .desc .button .design-button { margin: 0 auto; border: var(--button-bg5) 2px solid; color: #FFF; background-color: var(--button-bg5);}
#yonezawa_top_intro .desc .button .design-button:hover { background-color: #FFF; color: var(--button-bg5);}
#yonezawa_top_intro .desc .button .design-button:hover::after { border-color: var(--button-bg5);}

/* ----------------------------------
 メッセージ
---------------------------------- */
#yonezawa_top_message {
	height: 660px;
	padding: 80px 20px 0;
	margin: 0 -20px;
  background-image: url("../../img/yonezawa/top/message_bg_sb.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
	position: relative;
}
#yonezawa_top_message::after { content: ''; width: 100%; height: 100%; display: block; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}
#yonezawa_top_message .inner-frame { max-width: var(--layout-max-width); width: var(--layout-max-width); padding: var(--layout-base-padding); margin: 0 auto;}
#yonezawa_top_message .inner-frame .message { font-size: var(--font-size-sub); line-height: var(--line-height-high); color: #FFF; position: relative; z-index: 2;}
#yonezawa_top_message .inner-frame .message + .message { margin-top: 40px;}

/* ----------------------------------
 今錦の製品シリーズ
---------------------------------- */
#yonezawa_top_products { padding: 60px 0 1px; margin: 0;}
#yonezawa_top_products .design-block-title .eng { color: #707070;}
#yonezawa_top_products .inner-frame { margin: 0 auto; position: relative;}
#yonezawa_top_products .inner-frame::before {
	content: '';
	width: 242px;
	height: 435px;
	display: block;
	background-image: url("../../img/yonezawa/top/item_bg01.png");
	background-repeat: no-repeat;
	background-position: left top;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	position: absolute;
	top: 530px;
	left: -140px;
}
#yonezawa_top_products .inner-frame::after {
	content: '';
	width: 144px;
	height: 195px;
	display: block;
	background-image: url("../../img/yonezawa/top/item_bg02.png");
	background-repeat: no-repeat;
	background-position: left top;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
	position: absolute;
	bottom: 100px;
	right: -100px;
}
#yonezawa_top_products .products-list { max-width: 450px; margin: 0 auto; padding: 30px 0 0; display: block;}
#yonezawa_top_products .product-item { padding: 0 20px; margin: 0 0 60px;}
#yonezawa_top_products .product-item .product-item-inner { height: 100%; padding: 0 0 72px; position: relative;}
#yonezawa_top_products .product-item .image { padding: 0 15px 0 0; margin: 0 auto 24px; text-align: center; position: relative;}
#yonezawa_top_products .product-item .image figure { padding: 0 30px 0 0; margin: 0 auto; text-align: center; position: relative; z-index: 2;}
#yonezawa_top_products .product-item .image img { height: 310px; margin: 0 auto;}
#yonezawa_top_products .product-item .image::before {
	content: '';
	width: 190px;
	height: 290px;
	border-radius: 190px;
	opacity: 0.3;
	display: block;
	position: absolute;
	bottom: 0;
	left: calc(50% - 95px);
}
#yonezawa_top_products .product-item.nenrin .image::before       { background-color: #BC8B2A;}
#yonezawa_top_products .product-item.imanihiki .image::before    { background-color: #B4C8E3;}
#yonezawa_top_products .product-item.otamajakushi .image::before { background-color: #D9E5BD;}
#yonezawa_top_products .product-item.tamako .image::before       { background-color: #FCE0F2;}
#yonezawa_top_products .product-item.liqueur .image::before      { background-color: #E8DDA4; opacity: 0.2;}
#yonezawa_top_products .product-item .catch { display: flex; flex-direction: row-reverse; column-gap: 8px; position: absolute; top: 0; right: 20px;}
#yonezawa_top_products .product-item .catch span { font-size: var(--font-size-H4); font-weight: 700; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 3px;}
#yonezawa_top_products .product-item .icons { display: flex; flex-direction: column; gap: 16px; position: absolute; bottom: 0; left: 0;}
#yonezawa_top_products .product-item .icons .icon {
	content: '';
	width: 70px;
	height: 70px;
	font-size: 0;
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
}
#yonezawa_top_products .product-item .icons .icon.qty-limited  { background-image: url("../../img/yonezawa/top/ico_shop_limited.png");}
#yonezawa_top_products .product-item .icons .icon.shop-limited { background-image: url("../../img/yonezawa/top/ico_qty_limited.png");}
#yonezawa_top_products .product-item .name { font-family: "Yu Mincho", "YuMincho", serif; font-size: 28px; font-weight: 700; line-height: 1.0; color: var(--color-brown);}
#yonezawa_top_products .product-item .name-eng { margin: 0 0 20px; color: var(--color-gold);}
#yonezawa_top_products .product-item .text { font-size: var(--font-size-sub);}
#yonezawa_top_products .product-item .button { width: 200px; height: 48px; margin: 0 auto; position: absolute; left: calc(50% - 100px); bottom: 0;}
#yonezawa_top_products .product-item .button .design-button { margin: 0 auto; border: var(--button-bg5) 2px solid; color: #FFF; background-color: var(--button-bg5);}
#yonezawa_top_products .product-item .button .design-button:hover { background-color: #FFF; color: var(--button-bg5);}
#yonezawa_top_products .product-item .button .design-button:hover::after { border-color: var(--button-bg5);}

/* ----------------------------------
 店舗情報
---------------------------------- */
#yonezawa_top_access { padding: 60px 20px; margin: 0 -20px; background: #F4F4F8;}
#yonezawa_top_access .design-block-title .eng { color: #707070;}
#yonezawa_top_access .inner-frame { max-width: var(--layout-max-width); padding: var(--layout-base-padding); margin: 0 auto;}
#yonezawa_top_access .info-wrap { display: block;}
#yonezawa_top_access .info-map { width: 100%; height: calc(100vw - 40px); position: relative;}
#yonezawa_top_access .info-map iframe { width: 100%; height: 100%; border: 0; position: absolute; top: 0; left: 0;}
#yonezawa_top_access .info-desc { width: 100%; padding: 32px 0 0;}
#yonezawa_top_access .info-desc-detail dl { display: flex; justify-content: space-between; align-items: flex-start;}
#yonezawa_top_access .info-desc-detail dl + dl { margin-top: 12px;}
#yonezawa_top_access .info-desc-detail dt { width: 90px; font-size: var(--font-main);}
#yonezawa_top_access .info-desc-detail dd { width: calc(100% - 110px); font-size: var(--font-main);}
#yonezawa_top_access .info-desc-detail + .info-desc-access { margin-top: 40px;}
#yonezawa_top_access .info-desc-access h3 {
	padding: 16px;
	font-size: var(--font-size-main);
	color: var(--color-base);
	line-height: 1.0;
	background-color: #E4E4EC;
	background-repeat: no-repeat;
	background-position: 16px center;
}
#yonezawa_top_access .info-desc-access h3.car { padding-left: 72px; background-image: url("../../img/yonezawa/top/ico_car.png"); -webkit-background-size: 40px auto; background-size: 40px auto;}
#yonezawa_top_access .info-desc-access ul li { padding-left: 1em; font-size: var(--font-size-main); text-indent: -1em; list-style: disc inside;}
#yonezawa_top_access .info-desc-access ul li + li { margin-top: 10px;}