@charset "utf-8";
/*
Theme Name: syumatucoffee
Author: Riku
Version: 1.0
Description: 週末珈琲便（既存HTMLをWordPressテーマ化）
*/

@font-face {
		font-family: 'AoharuFont';
		src: url(fonts/aoharu-marker-mini.otf);
}
/* ============================================================
   TOP PAGE ── index.html
   ============================================================ */
/*FIRSTVIEW*/
.top-hero {
		width: 100%;
		min-height: 100vh;
		background-image: url('images/firstview1.png');
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: flex-start; /* 上寄せ */
		justify-content: flex-end; /* 右寄せ */
		position: relative;
		overflow: hidden;
}
.top-hero__inner {
		padding: 40px 60px 0;
		text-align: right;
		position: relative;
		z-index: 1;
}
/* 見出し1: 64px bold */
.top-hero__catch {
		font-family: 'Noto Serif JP', serif;
		font-size: 64px;
		font-weight: 700;
		color: #F2EADB;
		line-height: 1.3;
		letter-spacing: 4px;
		margin-bottom: 16px;
}
/* 本文: 24px regular */
.top-hero__sub {
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 24px;
		font-weight: 400;
		color: #F2EADB;
		letter-spacing: 2px;
}
/* 手書き風フォント */
.top-hero__treat {
		font-family: 'AoharuFont', cursive;
		font-size: 50px;
		color: #C96F37;
}
/* ── ABOUT SECTION ── 背景: #fff
   ============================================================ */
#about {
		background: #fff;
}
.top-about__grid {
		display: flex;
		gap: 32px;
		justify-content: center;
		position: relative;
		z-index: 1;
}
.top-about__item {
		flex: 1;
		max-width: 420px;
		text-align: center;
		padding: 40px 32px;
		background: #F2EADB;
		border-radius: 16px;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.top-about__item:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 24px rgba(43, 29, 20, 0.08);
}
.top-about__contents {
		max-width: 340px;
		margin: 0 auto;
}
.top-about__icon {
		width: 68px;
		height: 68px;
		margin: 0 auto 16px;
}
.top-about__icon img {
		width: 68px;
		height: 68px;
}
/* 見出し3: 32px bold */
.top-about__title {
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 32px;
		font-weight: 700;
		margin-bottom: 12px;
		color: #000;
}
/* 説明文: 20px bold */
.top-about__text {
		font-size: 20px;
		font-weight: 700;
		color: #666;
		line-height: 1.8;
}
.top-about__btn-wrap {
		text-align: center;
}
/* ── BEANS SLIDER ── 背景: #F2EADB
   Slickカルーセル対応 + 10種類
   ============================================================ */
.top-beans {
		padding: 100px 80px;
		background: #F2EADB;
		position: relative;
		overflow: hidden;
}
/* Slickスライダー */
.top-beans__slider {
		margin-bottom: 40px;
		padding: 0 60px;
		position: relative;
		border-radius: 16px;
}
.top-beans__slider .slick-list {
		overflow: hidden;
		margin: 0 -10px;
}
.top-beans__slider .slick-slide {
		margin: 0 10px;
		padding: 0;
}
.top-beans__card {
		background: #fff;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 4px 16px rgba(43, 29, 20, 0.06);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.top-beans__card:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 32px rgba(43, 29, 20, 0.12);
}
.top-beans__img {
		height: 220px;
		background: linear-gradient(135deg, #d4c5b0, #a89279);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32px;
		overflow: hidden;
}
.top-beans__img span {
		display: block;
		width: 100%;
		height: 100%;
}
.top-beans__img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
}
.top-beans__body {
		padding: 20px 24px 24px;
		text-align: center;
}
.top-beans__tag {
		display: inline-block;
		font-size: 14px;
		font-weight: 700;
		padding: 4px 16px;
		border-radius: 20px;
		margin-bottom: 8px;
}
.top-beans__tag--light {
		background: #FFF3E0;
		color: #C08050;
}
.top-beans__tag--medium {
		background: #EFEBE9;
		color: #8B5E3C;
}
.top-beans__tag--dark {
		background: #3E2723;
		color: #F2EADB;
}
/* 見出し3: Noto Sans 20px bold */
.top-beans__name {
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 20px;
		font-weight: 700;
		margin-bottom: 8px;
		color: #2B1D14;
}
.top-beans__flavor {
		font-size: 16px;
		color: #888;
}
.top-beans__btn-wrap {
		text-align: center;
}
/* Slick矢印ボタン */
.top-beans__slider .slick-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 48px;
		height: 48px;
		background: #2B1D14;
		border-radius: 50%;
		border: none;
		cursor: pointer;
		z-index: 10;
		font-size: 0;
		transition: background 0.3s ease;
}
.top-beans__slider .slick-arrow:hover {
		background: #A45A22;
}
.top-beans__slider .slick-prev {
		left: 0;
}
.top-beans__slider .slick-next {
		right: 0;
}
.top-beans__slider .slick-prev::before, .top-beans__slider .slick-next::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-style: solid;
}
.top-beans__slider .slick-prev::before {
		border-width: 7px 9px 7px 0;
		border-color: transparent #fff transparent transparent;
		margin-left: -2px;
}
.top-beans__slider .slick-next::before {
		border-width: 7px 0 7px 9px;
		border-color: transparent transparent transparent #fff;
		margin-left: 2px;
}
/* ── HOW IT WORKS ── 背景: #fff
   カンプ: Step.1 表記、丸は線のみ（塗りなし）
   ============================================================ */
.top-howto {
		background: #fff;
}
.top-howto__steps {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		gap: 32px;
		margin-bottom: 0;
}
.top-howto__step {
		text-align: center;
		flex: 1;
		max-width: 240px;
}
/* Inter 24px bold */
.top-howto__num {
		font-family: 'Inter', sans-serif;
		font-size: 24px;
		font-weight: 700;
		color: #2B1D14;
		letter-spacing: 1px;
		display: block;
		margin-bottom: 16px;
}
/* 丸アイコン（線のみ） */
.top-howto__icon {
		width: 100px;
		height: 100px;
		border: 2px solid #2B1D14;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 16px;
		background: #fff;
}
.top-howto__icon img {
		width: 48px;
		height: 48px;
}
/* Noto Sans 20px bold */
.top-howto__label {
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 20px;
		font-weight: 700;
		color: #2B1D14;
}
.top-howto__arrow {
		font-size: 32px;
		color: #A45A22;
		margin-top: 64px;
		flex-shrink: 0;
}
.top-howto__btn-wrap {
		text-align: center;
}
/* ============================================================
   RESPONSIVE ── 768px以下
   ============================================================ */
@media screen and (max-width: 768px) {
		.top-hero {
				min-height: 60vh;
		}
		.top-hero__inner {
				padding: 40px 20px 0;
				text-align: center;
		}
		.top-hero__catch {
				font-size: 32px;
		}
		.top-hero__sub {
				font-size: 16px;
		}
		.top-hero__treat {
				font-size: 30px;
		}
		#about, .top-beans, .top-howto {
				padding: 50px 20px;
		}
		.top-about__grid {
				flex-direction: column;
				align-items: center;
				gap: 20px;
		}
		.top-about__item {
				max-width: 100%;
				width: 100%;
		}
		.top-about__title {
				font-size: 24px;
		}
		.top-about__text {
				font-size: 16px;
		}
		.top-beans__slider {
				padding: 0 52px;
		}
		.top-beans__img {
				height: 180px;
		}
		.top-beans__slider .slick-arrow {
				width: 36px;
				height: 36px;
		}
		.top-beans__slider .slick-prev {
				left: 0;
		}
		.top-beans__slider .slick-next {
				right: 0;
		}
		.top-beans__name {
				font-size: 16px;
		}
		.top-howto__steps {
				flex-direction: column;
				align-items: center;
				gap: 8px;
		}
		.top-howto__arrow {
				transform: rotate(90deg);
				margin-top: 0;
		}
		.top-howto__icon {
				width: 72px;
				height: 72px;
		}
		.top-howto__icon img {
				width: 36px;
				height: 36px;
		}
		.top-beans__slider .slick-slide {
				margin: 0 6px; 
		}
		.top-beans__card {
				height: auto; 
		}
		.top-beans__img {
				height: 200px; 
		}
		.top-beans__body {
				padding: 16px; 
		}
}