@charset "UTF-8";
/*全体指定*/
#shincha{
	background: #f3f4e9;
	box-sizing: border-box;
}
#shincha a:not([class]):not([id]) {
	text-decoration: underline;
}
#shincha img{ /*画像崩れ阻止*/
  height:auto;
}
.smaon{
	display: none;
}
.tabon{
	display: none;
}
.pred{
	color: #cd410e;
}
.pgreen{
	color: #52850a;
}
.pblue{
	color: #4168a2;
}
p.fontgothic{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
/*------------------------*
横幅制御
------------------------*/
.widewrap{
	width: 1000px;
	margin: 0 auto;
}
/*------------------------*
商品リンクボタン
------------------------*/
a.boxbtn{
	display: inline-block;
	background: #72ac43;
	color: #fff;
	width: 240px;
	padding: 0.7em 0;
	border-radius: 30px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	text-align: center;
	font-weight: bold;
	position: relative;
}
a.boxbtn::after{
	position: absolute;
	right: 17px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	content: "";
	width: 6px;
	height: 11px;
	background-image: url(images/arrow_rgt.png);
	background-size: contain;
}
/*------------------------*
冒頭
------------------------*/
.intro{
	background-image: url("images/pattern.jpg");
	background-size: 100% auto;
	padding-bottom: 75px;
	text-align: center;
}
.mainimg{
	margin-bottom: 5%;
}
h2.introcatch{
	font-size:60px;
}
h2.introcatch span{
	color: #52850a;
}
p.introtxt{
	font-size: 22px;
}
/*------------------------*
アンカーボタンオレンジ
------------------------*/
a.btn_anchor{
	color: #fff;
	background: #e17501;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight: bold;
	width: 560px;
	font-size: 22px;
	padding: 1em 0;
	margin: 60px 0 80px;
	display: inline-block;
	border-radius: 50px;
	position: relative;
	filter: drop-shadow(1px 3px 8px rgba(0,0,0,0.3));
}
a.btn_anchor img.que{
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-right: 10px;
}
a.btn_anchor img.arrow{
	width: 14px;
	height: 8px;
	vertical-align: middle;
	margin-left: 10px;
}
/*------------------------*
先様予約キャンペーン　
------------------------*/
.campaign{
	background-color: #f8fbf3;
	border: 2px solid #7daf34;
	border-radius: 10px;
	width: 1000px;
	margin: 0 auto;
}
.campaign h3{
	text-align: center;
	background: #7daf34;
	font-size: 32px;
	color: #fff;
	font-weight: bold;
	line-height: 1;
	padding: 0.5em;
}
.campaign h3 span{
	color: #f4fb83;
}
.campaign .inner{
	display: flex;
	padding: 15px 60px 30px;
	flex-wrap: wrap;
}
.campaign .boxL{
	flex: 1;
	margin-right: 40px;
}
.campaign .boxL img{
	aspect-ratio: 640/520;
}
.campaign .boxR{
	width: 500px;
	text-align: left;
}
.campaign .boxR img{
	padding-bottom: 20px;
}
.campaign .boxR p{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.campaign .boxR a{
	text-decoration: underline;
}
.campaign .boxB{
	width: 100%;
	padding: 0.5em;
	margin-top: 1em;
	background: #f8eae6;
	text-align: center;
	color: #cd600e;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight: bold;
}
/*------------------------*
新茶ラインナップ lineup
------------------------*/
.lineup {
	padding: 80px 0;
} 
.lineup h2{
	background: #d1dea3;
	font-size: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:20px 0;
}
.lineup h2 span{
	font-size: 24px;
	margin-left: 1em;
}
.lineup h3{
	color: #52850a;
	font-size: 30px;
	border-bottom: 1px solid #52850a;
	display: flex;
	align-items: center;
}
.lineup h3 .small{
	font-size: 20px;
	margin-left: 1em;
	color: #000;
}
/*------------------------*
/*先発　３銘柄
------------------------*/
.liineupA{
	display: flex;
	align-items: center;
	padding: 25px 30px 40px;
	border-bottom: 1px solid #aaa;
}
.liineupA.last{
	margin-bottom: 100px;
}
.liineupA .boxL{
	width: 270px;
	margin-right: 50px;
}
.liineupA .boxR{
	flex: 1;
}
.liineupA-date{
	background: #f7d757;
	display: inline-block;
	padding: 0.5em;
	line-height: 1;
}
.liineupA-name{
	font-size: 38px;
	margin: 0.3em 0;
	display: flex;
	align-items: center;
}
.liineupA-name .small{
	font-size: 20px;
}
.liineupA-btm{
	border-top: 1px solid #999;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 15px;
	margin-top: 20px;
}
.liineupA-btm p{
	font-size: 18px;
	font-weight: bold;
}
.lineup li div{
	max-width: 280px;
	font-size: 14px;
	text-align: justify;
}
/*------------------------*
スライダー
------------------------*/
/*↓スライダーカスタマイズ*/
.lineup .splide{
	padding-bottom: 50px;
}
.lineup .splide__arrows{
	display: flex;
	justify-content: start;
	width: 100%;
}
.lineup .splide__arrow{
	min-width: auto;
	width: 20px!important;
	height: 77px;
	padding: 0;
	display: block;
	border-radius:0;
	transform: none;
	/*position: static;*/
	margin-right: 10px;
	top: 30%;
}
.lineup .splide__arrow--prev{
	background: url(images/slideback.png);
	background-repeat: no-repeat;
	background-size: 20px auto;
	left: -3em;
}
.lineup .splide__arrow--next{
	background: url(images/slidenext.png);
	background-repeat: no-repeat;
	background-size: 20px auto;
	right: -3em;
}
.lineup .my-carousel-progress {
  background: #dbe3d1;
	margin: 45px 0 0;
}
.lineup .my-carousel-progress-bar {
  background: #487b0d;
  height: 1px;
  transition: width 400ms ease;
  width: 0;
}
/*↑スライダーカスタマイズ*/
.lineupB-name{
	font-size: 30px;
	padding-bottom: 0.3em;
}
.lineupB a.boxbtn{
	margin-top: 1em;
}
.lineup .otherinfo{
	margin: 50px auto;
	padding: 2em 3em;
	width: 700px;
	display: block;
	text-align: center;
	background-color: #fff;
	border: 1px solid #c5c8a6;
	border-radius: 100px;
}
.lineup .otherinfo p{
	font-size: 18px;
}
/*------------------------*
新茶のお届けについて
------------------------*/
.otodokeinfo{
	background-color: #fff;
	background-image: url(images/otodokeimg.jpg);
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 45% auto;
}
.otodokeinfo h2{
	font-size: 30px;
	font-weight: bold;
	color: #487b0d;
}
.otodokeinfo .inner{
	padding: 80px 0 80px 60px;
}
.otodoke{
	display: flex;
	justify-content: space-between;
	width: 800px;
}
.otodoke h3{
	border: none;
	font-size: 20px;
	font-weight: bold;
	color: #487b0d;
	margin-bottom: 0;
	text-align: center;
}
.otodoke h3 img{
	margin-bottom: 10px;
}
.otodoke p{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
img.otodokeicon{
	width: 57px;
	height: auto;
}
.otodokebox{
	background-color: #f9f7ea;
	padding: 35px;
	width: 255px;
	box-sizing: border-box;
}
/*------------------------*
ご予約方法
------------------------*/
.guide{
	margin: 90px auto;
	background: #fff;
	border: 1px solid #72ac43;
}
.guide h2{
	font-size: 28px;
	font-weight: bold;
	padding: 0.5em 0;
	margin: 0;
	text-align: center;
	color: #fff;
	background: #72ac43;
}
.guide h3{
	font-size: 22px;
	color: #52850a;
	margin-top: 50px;
	font-weight: bold;
	border-bottom: 1px solid #52850a;
}
p.guidetxt{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.guide .inner{
	padding: 60px;
}
.guide .boxA{
	text-align: center;
	background-color: #f9f7ea;
	padding: 5%;
}
.shinchacategory{
	display: flex;
}
.shinchacategory > div{
	display: flex;
	align-items: flex-start;
	text-align: justify;
	justify-content: center;
}
.shinchacategory .inbox{
	padding-bottom: 30px;
	gap:5%;
	flex-grow: 1;
}
.catethemb{
	width: 120px;
	height: auto;
}
.catesub{
	font-size: 0.9em;
	margin-top: 0.6em;
	font-weight: bold;
}
p.catename{
	margin-bottom: 0.5em;
	color: #52850a;
	font-weight: bold;
	font-size: 20px;
}
.guide .boxB{
	border: 1px solid #999;
	/* padding: 25px; */
	margin-bottom: 25px;
}
.guide .boxB .inner{
	padding: 25px;
}
.guide .boxB h4{
	background: #faf8ec;
	padding: 10px 25px;
}
.guide .boxC{
	background: #faf8ec;
	padding: 18px;
	font-size: 14px;
	margin-top: 20px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.guide .boxC dl{
	display: flex;
	font-weight: bold;
}
.guide .boxC p{
	font-size: 14px;
	padding-top: 1em;
}
.guide .attention{
	/* background-color: #f5f0e0; */
	padding: 20px;
	background-color: #fff;
	border: 1px solid #cd600e;
	font-weight: bold;
}
.guideimg{
	width: 700px;
	height: auto;
	margin: 30px auto 0;
	display: block;
}
/*------------------------
贈り物にもどうぞ
------------------------*/
.gift{
	padding-bottom: 90px;
}
.gift img{
	width: 100%;
	height: auto;
}
/*------------------------*
バナーエリア
------------------------*/
.footbanaarea{
	background: #fff;
	padding: 80px 0 0 0;
}
.footbanaarea .inner{
	width: 1200px;
	margin: 0 auto 0;
	gap: 0 37.5px;
	display: flex;
	justify-content: center;
}
.footbanaarea a{
	filter: drop-shadow(0 5px 5px rgba(148,148,147,.6));
}
.footbanaarea img{
	width: 375px;
	height: auto;
	border-radius: 10px;
}


@media screen and (max-width:768px){
	.tabon{
		display: block;
	}
	.taboff{
		display: none;
	}
	/*------------------------*
	横幅制御
	------------------------*/
	.widewrap{
		width: 86%;
		margin: 0 auto;
	}
	/*------------------------*
	商品リンクボタン
	------------------------*/
	a.boxbtn{
		width: 100%;
		padding: 0.7em 0;
		border-radius: 30px;
	}
	a.boxbtn::after{
		position: absolute;
		right: 17px;
		top: 50%;
		transform: translateY(-50%);
		display: inline-block;
		content: "";
		width: 6px;
		height: 11px;
		background-image: url(images/arrow_rgt.png);
		background-size: contain;
	}
	/*------------------------*
	冒頭
	------------------------*/
	h2.introcatch{
		font-size:50px;
	}
	p.introtxt{
		font-size: 20px;
	}
	/*------------------------*
	先様予約キャンペーン　
	------------------------*/
	.campaign{
		width: 75%;
	}
	.campaign h3{
		font-size: 28px;
		margin: 0;
	}
	.campaign .inner{
		display: flex;
		padding:10%;
		flex-wrap: wrap;
		align-items: center;
	}
	.campaign .boxL{
		width: 50%;
		margin-right: 0;
		flex: auto;
	}
	.campaign .boxR{
		width: auto;
		text-align: left;
	}
	/*------------------------*
	新茶ラインナップ lineup
	------------------------*/
	.lineup {
		padding: 80px 0;
	} 
	.lineup h2{
		font-size: 32px;
		padding:3% 0;
	}
	.lineup h2 span{
		font-size: 20px;
	}
	.lineup h3{
		font-size: 28px;
	}
	.lineup h3 .small{
		font-size: 20px;
	}
	/*------------------------*
	/*先発　３銘柄
	------------------------*/
	.liineupA{
		padding: 25px 30px 40px;
	}
	.liineupA .boxL{
		width: 40%;
		margin-right: 5%
	}
	.liineupA .boxR{
		flex: auto;
		width: 55%;
	}
	.liineupA.last{
		margin-bottom: 60px;
	}
	.liineupA-name{
		font-size: 30px;
	}
	.liineupA-name .small{
		font-size: 16px;
	}
	.liineupA-btm p{
		font-size: 14px;
	}
	.lineup li div{
		max-width: 280px;
		font-size: 14px;
		text-align: justify;
	}
	/*------------------------*
	スライダー
	------------------------*/
	/*↓スライダーカスタマイズ*/
		/*前次矢印*/
	.lineup .splide__arrows{
		display: flex;
		justify-content: start;
		width: 100%;
	}

	.lineup .splide__arrow{
		min-width: auto;
		width: 20px!important;
		height: 77px;
		padding: 0;
		display: block;
		border-radius:0;
		transform: none;
		/*position: static;*/
		margin-right: 10px;
		top: 30%;
	}
	.lineup .splide__arrow--prev{
		background: url(images/slideback.png);
		background-repeat: no-repeat;
		background-size: 20px auto;
		left: -3em;
	}
	.lineup .splide__arrow--next{
		background: url(images/slidenext.png);
		background-repeat: no-repeat;
		background-size: 20px auto;
		right: -3em;
	}
	.lineup .my-carousel-progress {
		background: #dbe3d1;
		margin: 45px 0 0;
	}
	.lineup .my-carousel-progress-bar {
		background: #487b0d;
		height: 1px;
		transition: width 400ms ease;
		width: 0;
	}
	/*↑スライダーカスタマイズ*/
	/*------------------------*
	上記以外のお茶が新茶になるまでには
	------------------------*/
	.lineup .otherinfo{
		width: 100%;
		margin: 30px auto;
		padding: 2em 0;
	}
	.lineup .otherinfo p{
		font-size: 16px;
	}
	/*------------------------*
	新茶のお届けについて
	------------------------*/
	.otodokeinfo{
		background-image: none;
	}
	.otodokeinfo .inner{
		padding: 60px 5% 80px;
	}
	.otodoke{
		width: 100%;
	}
	#shincha .otodoke h3{
		font-size: 18px;
		margin-bottom: 10px;
	}
	.otodoke h3 img{
		margin-bottom: 5px;
	}
	.otodokebox{
		padding: 3%;
		width: 32%;
	}
	/*------------------------*
	ご予約方法
	------------------------*/
	.guide{
		/* padding: 5% 0; */
	}
	.guide h2{
		font-size: 25px;
	}
	.guide h2 span{
		font-size: 18px;
	}
	.guide .inner{
		padding: 5%;
	}
	.guide .boxB{
		/* padding: 5%; */
		margin-bottom: 25px;
	}
	.guideimg{
		max-width: 300px;
	}
	.shinchacategory{
		flex-flow: column;
	}
	.shinchacategory > div{
		justify-content:flex-start;
	}
	.guide .boxC{
		padding: 18px;
		font-size: 14px;
		margin-top: 20px;
	}
	.guide .boxC dl{
		display: flex;
	}
	.guide .boxC dl dt{
		font-weight: bold;
	}
	.guide .boxC p{
		font-size: 14px;
		padding-top: 1em;
	}
	.guideimg{
		width: 100%;
		height: auto;
		display: block;
	}
	/*------------------------
	贈り物にもどうぞ
	------------------------*/
	.gift{
		padding-bottom: 60px;
	}
	.gift img{
		max-width: 500px;
		height: auto;
		margin: 0 auto;
		display: block;
	}
	/*------------------------*
	バナーエリア
	------------------------*/
	.footbanaarea{
		background: #fff;
		padding: 40px 0 0 0;
	}
	.footbanaarea .inner{
		width: 90%;
		margin: 0 auto 0;
		gap: 0;
		flex-flow: column;
		align-items: center;
	}
	.footbanaarea a{
		margin: 30px 0;
	}
	.footbanaarea img{
		width: 375px;
		height: auto;
	}
}

@media screen and (max-width:480px){
	.splide__arrows{
		display: none;
	}
	#shincha{
		letter-spacing: 0.005em;
		text-align: justify;
	}
	.smaon{
		display: block;
	}
	.smaoff{
		display: none;
	}
	h3{
		border-bottom: 1px solid #666;
	}
	/*------------------------*
商品リンクボタン
------------------------*/
a.boxbtn{
	font-size: 14px;
}
	/*------------------------*
	冒頭
	------------------------*/
	.intro{
		padding-bottom: 15%;
		background-image: url("images/pattern_sp.jpg");
	background-size: 100% auto;
	}
	.mainimg{
		margin-bottom: 15%;
	}
	h2.introcatch{
		font-size:34px;
	}
	p.introtxt{
		font-size: 15px;
	}
	/*------------------------*
	アンカーボタンオレンジ
	------------------------*/
	a.btn_anchor{
		width: 86%;
		font-size: 14px;
		margin: 50px 0;
		filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.3));
	}
	a.btn_anchor img.que{
		width: 16px;
		height: 16px;
	}
	a.btn_anchor img.arrow{
		width: 10px;
		height: 6px;
	}
	/*------------------------*
	先様予約キャンペーン　
	------------------------*/
	.campaign{
		width: 90%;
	}
	.campaign h3{
		font-size: 18px;
		padding: 0.8em 0;
	}
	.campaign .boxL img{
		width: 200px!important;
	}
	.campaign .inner{
		padding: 7%;
	}
	.campaign .boxB p-{
		font-size: 12px;
	}
	/*------------------------*
	新茶ラインナップ lineup
	------------------------*/
	.lineup {
		padding: 60px 0;
	} 
	.lineup h2{
		font-size: 25px;
		flex-flow: column;
	}
	.lineup h2 span{
		font-size: 20px;
	}
	.lineup h3{
		font-size: 22px;
		justify-content: center;
		flex-flow: column;
	}
	.lineup h3 .small {
		font-size: 18px;
}
	/*------------------------*
	/*先発　３銘柄
	------------------------*/
	.liineupA{
		flex-flow: column;
		padding: 40px 0 40px;
	}
	.liineupA:first-of-type{
		padding: 0 0 40px;
	}
	.liineupA .boxL{
		width: 60%;
		margin-left: 10%;
		/* margin: 0 0 20px 15%; */
		margin: 0 0 20px 0;
	}
	.liineupA .boxR{
		width: 100%;
	}
	.lineup li div{
		max-width: 200px;
	}
	.lineupB-name{
		font-size: 26px;
	}
	/*------------------------*
	上記以外のお茶が新茶になるまでには
	------------------------*/
	.lineup .otherinfo{
		border-radius: 0;
		width: 100%;
		margin: 0px auto;
		padding: 2em;
		
	}
	.lineup .otherinfo p{
		font-size: 16px;
		text-align: justify;
	}	
	.lineup .otherinfo p br{
		display: none;
	}
	/*------------------------*
	新茶のお届けについて
	------------------------*/
	.otodoke{
		flex-flow: column;
	}
	.otodoke h3{
		font-size: 24px;
	}
	.otodoke h3 img{
		margin-bottom: 15px;
	}
	img.otodokeicon{
		width: 80px;
		height: auto;
	}
	.otodokebox{
		width: 100%;
		margin-bottom: 10%;
		padding: 12%;
	}
	.otodokebox:last-of-type{
		margin-bottom: 0;
	}
	.otodokebox p br{
		display: none;
	}
	.otodoke h3{
		margin: 0;
	}
	.otodokeinfo .inner{
		padding: 15% 7%;
	}
	/*------------------------*
	ご予約方法
	------------------------*/
	.guide{
		margin: 15% auto;
	}
	.guide .boxB .inner{
		padding: 8%;
	}
	.guide .boxB h4{
		padding: 10px 8%;
	}
	.guide .boxC dl{
		flex-wrap: wrap;
		padding: 5px 0;
	}
	.guide .boxC dl dt,
	.guide .boxC dl dd{
		width: 100%;
		display: block;
		margin: 0;
		padding: 0;
	}
	.guide h2{
		font-size:24px;
		text-align: center;
	}
	.guide h3{
		font-size: 18px;
	}
	.guide .boxA{
		text-align: left;
		padding: 8%;
	}
	.guide h2 span{
		font-size: 16px;
	}
	.catethemb{
		width: 35%;
	}
	p.catename{
		font-size: 18px;
	}
	.guide .attention{
		padding: 5%;
		text-align: justify;
	}
	/*------------------------*
	バナーエリア
	------------------------*/
	.footbanaarea{
		padding: 15px 0 0 0;
	}
	.footbanaarea .inner{
		width: 86%;
	}
	.footbanaarea a{
		margin: 10px 0;
	}
}