﻿/* ==============================
簡易リセットCSS（組み込み時、大元リセットCSS入る？）
============================== */
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

dl,
dt,
dd {
	margin: 0;
	padding: 0;
}

/* ==============================
共通CSS
============================== */
@media only screen and (min-width: 428px) {
	.allwrap {
		padding: 8px 4%;
	}

	.wrap {
		width: 100%;
		max-width: 910px;
		margin: 0 auto;
	}
}

.wrap {
	width: 100%;
	max-width: 910px;
}

.wrap-l {
	max-width: 1200px;
}

.pc_on {
	display: block;
}

.sp_on {
	display: none;
}

.in_pc_on {
	display: inline;
}

.in_sp_on {
	display: none;
}

.br_pc_on {
	display: inline;
}

.br_sp_on {
	display: none;
}

.block {
	display: block;
}

.breadcrumbs span {
	font-size: 1.1rem;
}

.wrap p {
	font-size: 1.4rem;
}

.wrap li {
	font-size: 1.4rem;
}

.wrap a {
	font-size: 1.4rem;
}

.wrap th {
	font-size: 1.4rem;
}

.wrap table {
	font-size: 1.4rem;
}

.wrap .big {
	font-size: 1.6rem;
	font-weight: bold;
}

.position-re {
	position: relative;
}

/* ==============================
パンくず
============================== */
.block-topic-path--list {
	display: flex;
	font-size: 1.1rem;
}

.block-topic-path--list a {
	text-decoration: underline;
}

/* ==============================
feature（特集一覧）
============================== */
.wrap-inner {
	margin-bottom: 80px;
	box-sizing: border-box;
}

.wrap-inner * {
	box-sizing: border-box;
}

.wrap-inner p {
	margin-top: 1em;
}

.wrap-inner .p-margin0 {
	margin-top: 0;
}

.align-center {
	text-align: center;
}


/* 左右交換 */
.replacement {
	flex-direction: row-reverse;
}

/* アンカーリンク */
.anchorlink {
	padding-top: 100px;
	margin-top: -100px;
}


.background {
	background-color: #F6F6F6;
	padding: 30px 0 35px 0;
}

.background_skin {
	background-color: #faf1ed;
	padding: 30px 0 35px 0;
}

.shincha-text-box.right {
	position: absolute;
	width: 55%;
	right: 2%;
	top: 0;
	bottom: 0;
	margin: auto 0;
	height: fit-content;
}

.shincha-text-box.left {
	position: absolute;
	width: 55%;
	left: 2%;
	top: 0;
	bottom: 0;
	margin: auto 0;
	height: fit-content;
}

.shincha-text-box .shincha-name {
	text-align: center;
	font-size: 2.5rem;
	font-family: serif;
}

.shincha-text-box .shincha-detail {
	font-size: 1.7rem;
	font-family: serif;
}

.shincha-text-box .shincha-btn {
	margin: 4em 0 2em;
	text-align: center;
}

.shincha-text-box .shincha-btn a {
	background-color: #2E934F;
	padding: 1em 2em;
	font-size: 2rem;
	color: #fff;
	text-decoration: none;
}

.shincha-text-box .shincha-btn a:hover {
	background-color: #38ab5e;
}

/**********************************

PCのみのCSSを記述

***********************************/


@media only screen and (min-width: 768px) {


	/* PCで非表示 */
	.pc-hidden {
		display: none !important;
	}

	/* c-boxの上に文章を置くときにサイドの余白を作成 */
	.p-padding-side {
		padding: 0 25px;
	}

	th {
		padding: 0 10px;
	}

	/* PCでのみmargin削除 */
	.wrap-inner .p-pc-margin0 {
		margin-top: 0;
	}

	/* pcで横並びにする */
	.pc-flex {
		display: flex;
	}

	/* 横並びを50％:50％にする */
	.half {
		width: 50%;
	}

	/* ボタンをSPで中央揃えにするために */
	.left-auto {
		margin-left: auto;
	}

	/* 春のお茶特集 */
	.gift-introduction {
		height: 48px;
	}

	.e-box__inner_child .pc-name {
		height: 3em;
	}



}










/************************************

スマホサイズver

***********************************/





@media screen and (max-width: 768px) {

	/* ==============================
共通CSS
============================== */
	.pc_on {
		display: none;
	}

	.sp_on {
		display: block;
	}

	.in_pc_on {
		display: none;
	}

	.in_sp_on {
		display: inline;
	}

	.br_pc_on {
		display: none;
	}

	.br_sp_on {
		display: inline;
	}

	.sp-hidden {
		display: none !important;
	}

	.wrap-inner h2 {
		font-size: 2.2rem;
	}

	.wrap-inner h3 {
		font-size: 1.6rem;
	}

	.wrap-inner h3 a {
		font-size: 1.6rem;
	}

	.wrap p {
		font-size: 1.4rem;
	}

	.wrap li {
		font-size: 1.4rem;
	}

	.wrap a {
		font-size: 1.4rem;
	}

	.wrap th {
		font-size: 1.4rem;
	}

	.wrap table {
		font-size: 1.4rem;
	}

	.wrap .big {
		font-size: 1.5rem;
	}

	.sp_rink-underline {
		text-decoration: underline solid;
	}

	/* ==============================
パンくず
============================== */
	.block-topic-path--list {
		display: flex;
		font-size: 1.1rem;
	}

	.block-topic-path--list a {
		text-decoration: underline;
	}

	/* ==============================
feature（特集一覧）
============================== */
	.wrap-inner {
		margin-bottom: 10.67vw;
	}

	.wrap-inner .title {
		margin-bottom: 20px;
	}

	p.btn {
		margin: 16px 0;
	}

	a.btn {
		display: block;
		padding: 10px 0;
		background-color: #000000;
		color: #fff;
		transition: all .2s ease;
		max-width: 300px;
		margin-left: auto;
		text-align: center;
	}

	.banner {
		padding: 1em 45px;
		border: solid 1px;
		display: inline-flex;
		margin-top: 20px;
		background-color: #fff;
	}

	.table-product-name {
		padding: 0 5px;
	}

	.wrap .numbers_top_left {
		font-size: 20px;
		background: #91908e;
		border-radius: 50%;
		width: 30px;
		height: 30px;
		color: #fff;
		text-align: center;
		line-height: 30px;
		position: absolute;
		top: 0;
		left: 0;
		padding: 0;
		z-index: 10;
	}

	.shincha-text-box .shincha-btn {
		margin: 2em 0;
	}

	.shincha-text-box .shincha-btn a {
		padding: 1em 2em;
		font-size: 1.5rem;
	}

	.shincha-text-box .shincha-detail {
		font-size: 1.4rem;
	}

	.shincha-text-box .shincha-name {
		font-size: 2rem;
	}

}