@charset "euc-jp";

/* --------------------------------
 * base タイプセレクタ
 * -------------------------------- */

html {
}

body {
    font-size: 16px;
    font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    color: #3B6120;
    line-height: 1.5;    
    width:100%;
	height:100%;
	/*background: RGB(24,97,18) 緑 ;*/
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;	
}

p{
    color: #3B6120;
    line-height: 1.7;
    margin: 0em;
}

a:link, a:visited, a:hover, a:active {
    color: #3B6120;
}

select{
    border-color: rgb(162,215,221) /* 青 */;
    height: 26px;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-right: 2px;
	padding-left: 2px;
}
   
input[type="text"] {
       border-radius: 0;
       height: 21px;
}
   
input[type="submit"] {
       border-radius: 0;
}
   
input[type="password"] {
       border-radius: 0;
       height: 21px;
}
   
input[type="button"]{
     cursor: pointer; /* カーソル   */
}
   
input[type="checkbox"]{
       border-radius: 0;
       height: 24px;
}
   
input[type="textarea"]{
       font-size:1rem;
       /*font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;*/
}


u{ /* アンダーラインを引くタグ */
	text-decoration-line:none;
	text-decoration-color:white;
}

/* --------------------------------
 * 共通パーツ　クラスセレクタ
 * -------------------------------- */

.None{
	display: none;
}

.headline{
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	font-size: 20px;
	padding-bottom: 0;
	margin-top: 80px;
	margin-bottom: 45px;
}

.ImgResponsive{
	display: block;
	max-width: 100%;
	height: auto;
}

.BothEndsSpace{
	padding-left: 1em;
	padding-right: 1em;
}

.BothEndsSpace2{
	padding-left: 0.6em;
	padding-right: 0.6em;
}

/*検索関連*/

.kensaku{
	display:flex;
    flex-wrap:nowrap;
    justify-content:center;
	align-items:center;
	padding-top: 13px;
 }

 input[type="text"].KensakuMado{
	height: 22.5px;	 
}

.KensakuMado{
   width:6em;
   padding:0; 
   border: 1px solid ; 
   border-color: rgb(24,97,18);
   /*border-color: rgb(162,215,221)  青 */;
}
  
.SearchButton{
   height:24.5px;
   text-align:left;
}
  


/* --------------------------------
 * ヘッダー
 * -------------------------------- */

.GrandNavi{
	width:80%;
	margin-left:auto;
	margin-right:auto;
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	color: RGB(24,97,18); /* 緑 */;
	background-color:white;
	font-size: 15pt;
	padding-top: 15px;
	padding-bottom : 15px;
}

/* ヘッダーメガドロップ */

.menu {
    position: relative;
    width: 100%;
    height: 50px;
	margin: 0 auto;
	/*display:flex;*/
}

.menu > li {
    /*width : calc(100% / 6) ;  グローバルナビ6つの場合 */
    height: 50px;
    line-height: 50px;
	float: left;
	width : calc(100% / 6) ;	
}

.menu > li.logo {
	text-align: left;
	width : calc((100% / 6) - 1px); /* こうしないとEdgeで上手くいかない*/
	height: 50px;
	line-height: 50px;
	margin:0;
}

.menu > li a {
    /*display: block;*/
    color: RGB(24,97,18) /* 緑 */;
}

ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    list-style: none;
    padding : 0;
    text-align: center;
}

.menu > li:hover {
    background: rgb(255,255,255) /* 2ndを表示したときの1stレベルの色*/;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.menu__second-level li {
    border-top: 1px solid rgb(255,255,255)/* 白 */;
}

li.menu__mega ul.menu__second-level {
    position: absolute;
    top: 40px;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    background: white ;
    border-style:solid;
    border-width: 1px;
    border-color: rgb(162,215,221) /* 青 */;
    -webkit-transition: all .5s ease;
	transition: all .5s ease;
}

li.menu__mega:hover ul.menu__second-level {
    top: 50px;
    visibility: visible;
    opacity: 1;
}

li.menu__mega ul.menu__second-level > li {
    float: left;
	width : calc((100% / 6) - .01px);
	padding-top: 10px;
	padding-bottom:10px;
    border: none;
}

ul.menu__second-level2 {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    list-style: none;
    padding : 0;
	text-align: center;
}

li.menu__mega ul.menu__second-level2 {
    position: absolute;
	top: 40px;
	width:100%;
    left: 0;
    box-sizing: border-box;
    background: white;
    border-style:solid;
    border-width: 1px;
    border-color: rgb(162,215,221) /* 青 */;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

li.menu__mega:hover ul.menu__second-level2 {
    top: 50px;
    visibility: visible;
	opacity: 1;	 
}

li.menu__mega ul.menu__second-level2 > li {
    float: left;
    width: 32%;
    border: none;
}

ul.menu__second-level3 {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    list-style: none;
    padding : 0;
	text-align: center;
}

li.menu__mega ul.menu__second-level3 {
    position: absolute;
	top: 40px;
	left:calc((80% / 6) * 4 + 10%);
	width:25%;
    box-sizing: border-box;
    background: white;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

li.menu__mega:hover ul.menu__second-level3 {
    top: 40px;
    visibility: visible;
	opacity: 0.9;	 
}

ul.menu {
  	list-style: none;
  	padding : 0;
	text-align: center;
}

.menu li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-top : 0;
}

.box{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px; 
}

.cartbox{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;           
}

.button {
  border-style  : none;
  background    : none;
  display       : inline-block;
  font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
  font-size: 15pt;    
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  color: RGB(24,97,18);     /* 文字色     */
}

img.hicon {
    width: 40%;
}

.ookiku {
	font-weight: bold;    
}

.down{
	padding-left: 5px;
	height:13px;
}

/* --------------------------------
 * グランドイメージ
 * -------------------------------- */

 .GrandImage{
	width:100%;
	position: relative; /*相対配置*/
	padding:0;
	margin-bottom:30px;
}
   
.GI {
	width:100%;
	margin:0;	
}


.GrandImage p {
	position: absolute;/*絶対配置*/
	font-size: 14px;
	color: #186112/* 緑 */;
	top: calc( calc(89.6/1250) *100%);
	left: 10%;
}

.GrandImage p a{	
	font-size: 14px;	
	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	color: RGB(24,97,18)/* 緑 */;  
}

.GrandImage h1 {
	position: absolute;
	font-size: 2.1vw;	
	font-weight: normal;
	line-height: 1;
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	color: #186112/* 緑 */;
	letter-spacing: 0.45em;
	top: 56.8%;
	left: 10%;
	margin-top: 0;
	padding-top: 0;
}

.GrandExplain{
	position: absolute;
	font-size: 1.1vw;	
	font-weight: normal;
	line-height: 1;
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	color: #186112/* 緑 */;
	letter-spacing: 0.08em;
	top: 73.7%;
	left: 10%;
	margin-top: 0;
	padding-top: 0;
}

.GrandExplain2{
	position: absolute;
	font-size: 1.1vw;	
	font-weight: normal;
	line-height: 1;
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	color: #186112/* 緑 */;
	letter-spacing: 0.08em;
	top: 82.1%;
	left: 10%;
	margin-top: 0;
	padding-top: 0;
}

.GrandImage p a:visited{
  color: RGB(24,97,18)/* 緑 */;
}

/* --------------------------------
 * フッター
 * -------------------------------- */

.footer{
    background: RGB(24,97,18)/* 緑 */;    
    color:white; 
    margin-top:30px;
    padding-bottom:15px;
}
   
.footer a{
    font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
    color:white;
    margin:10px;
    padding-left:8px;
}

.FotterMenu{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding-top: 20px;
    padding-bottom: 40px;
} 

.CopyRight{
    font-size:10pt;
    text-align:center;
    color:white;
}  

/* --------------------------------
 * コンテンツ
 * -------------------------------- */

 .middle{
    width:80vw;
    margin-left:auto;
    margin-right:auto;
}

/* --------------------------------
 * 商品一覧
 * -------------------------------- */

.ProductList{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	display:flex;
 	flex-wrap:wrap;
 	justify-content:flex-start;
	align-content: space-between;
}

.ProductOverview{
	font-size: 15pt;
	margin-bottom: 16pt;
    width:210px;
	padding: 0;
    text-align: center;
	vertical-align: baseline;
	margin-left:15px;
	margin-right:15px;
}

.ProductOverview a,.ProductOverview a:visited{
    font-size: 15pt;
    font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
}

.NewDisplay{
	font-size: 15pt;
    font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	color:#186112;
	height:30px;
}

.ProductImage a:hover img {
  opacity: 0.5;
}

.ProductImage{
	position: relative;
	margin: 0;
	padding: 0;
	height: 180px;
	text-align: center;
}

.ProductImage a:hover img {
    opacity: 0.5;
    transition: 0.35s;
}

.ProductImage img{
	display: block;	
	position: absolute;
    left:0;
    right:0;
    bottom:0;
	max-height: 180px;
    height: auto;
    max-height: 100%;
	max-width: 100%;
	box-sizing:border-box;
	margin: 0 auto;
}

.ProductName{
	margin-top: 5pt; 
	padding-top: 10pt;
}
/*
.ProductName a,.ProductName a:visited{
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
}*/

.ProductPrice{
 margin-top:14pt;
 color:gray;
}


.PriceSort{
    font-size: 16pt;
    display:flex;
    justify-content:space-between;
    margin-bottom: 35px;
}
   
.PriceSort img{
    height:20px;
}

.pager{
    text-align: center;
}

.pager a{
    margin-right: 20px;
}

.pager img{
    height: 15px;
    margin-left: 7px;
    margin-right: 7px;
}

/* --------------------------------
 * 商品詳細
 * -------------------------------- */

 .DetailProductName{
    font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	font-size: 25px;
    color: RGB(24,97,18)/* 緑 */ ;
    margin-bottom:0px;
}

.Romaji{
    font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	font-size: 12px;
	color: RGB(24,97,18)/* 緑 */ ;
	letter-spacing: 0.1em;
	padding-left: 0.2em;
	margin-top:0px;
	margin-bottom: 10px;
}

.swrapper {
    position: relative;
	width: 100%;
	min-width: 650px;
	margin-top: 50px;	
	max-height: 500px;
	min-height: 460px;
}
/*
.swrapper:before {
    content:"";
    display: block;
    padding-top: 50%;  高さを幅の50%に固定 
}
*/
.ShouhinShousai{
	display:flex;
	flex-wrap:nowrap;
	list-style:none;
	padding-left:0px;
	padding-bottom: 20px;
	position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.HidariSide{
	position: relative;
	width:calc( 100% - 480px );
	min-width: 100px;
	margin-right: 20px;
}


.swrapper2{
    position: relative;
	height: 100%;
	margin-left:auto;
	margin-right:auto;
    text-align:center;
}
/*
.swrapper2:before {
    content:"";
    display: block;
    padding-top: 50%;  高さを幅の50%に固定 
}
*/
.swrapper2 img{
	display:block;
    width:auto;
    max-width:100%;
	max-height:100%;
	position: absolute;
	/*top: 0; 上下中央揃えにする場合は使う*/
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}



.DetailExplain{
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	color: rgb(35,31,32);
	position: absolute;
	bottom:0;
	padding-top:25px;
	/*padding-bottom:25px;*/
}

.DetailExplain p{
	font-size: 90%;
	color: rgb(35,31,32);
	padding-bottom:5px;
	line-height: 2;
	margin-top:0;
	margin-bottom:0;
}

.OtherSizes{
	display:flex;
	flex-wrap:wrap;
	margin-top :2px;
	padding-left: 13px;
	font-size: 15px;
}

.OtherSizes span{
	padding-right:50px;
}

.SizeChoice{
	display: flex;
	align-items: center;
}

.Shincha{
	/*display: none;  新茶時期以外は隠す 使う時はe-shopの属性で新茶を設定すること */
	border-top: 1px solid RGB(24,97,18)/* 緑 */;
	border-bottom: 1px solid RGB(24,97,18)/* 緑 */;	
	margin-top: 14px;
	padding-top: 10px;
	padding-bottom:10px;
}

.ShinchaOption{
	display:flex;
	flex-wrap:wrap;
}

.Shincha span{
	padding-right:50px;
}

.KagoFavorite{
	display: flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	list-style:none;
	margin-top: 30px;
}

.KagoFavorite input{
	/*border:1px solid black;*/
	background-color: RGB(24,97,18)/* 緑 */ ;
	border-radius: 6px;
}


.KagoFavorite div{
	margin-bottom: 15px;
}

.Naiyouryou{
	font-size: 13px;
	color: rgb(109,110,112) /* グレー */;
	padding-left: 13px;
}

.KakakuSuryou{	
	display: flex;
	justify-content:space-between;
	flex-wrap:wrap;
	padding-left: 10px;
}

.KakakuSuryou div{
	margin-bottom:0px;
}

.Kakaku{
	display: flex;
	align-items:flex-end;
}

.DetailProductPrice{
	font-size: 30px;
	font-weight: bold;
	color: rgb(109,110,112) /* グレー */;
}

.Zeikomi{
	font-size: 11px;
	color: rgb(109,110,112) /* グレー */;
	padding:0;
}

.Kosu{
	padding-right: 5px;
	padding-bottom: 5px;
}

.Suryou{
	display: flex;
	align-items:center;
	/*align-items:flex-end;*/
	/*float:right;*/
}

.Suryou img{
	height: 45px;
}

.Suryou input{
	-webkit-appearance: none;
	border-radius: 0;
  	-webkit-box-sizing: content-box;
  	-webkit-appearance: button;
  	appearance: button;
	border: 1px solid rgb(201,202,202) /* 薄いグレー */;
	text-align: center;
	font-size: 20px;	
	color: rgb(109,110,112) /* グレー */;
  	box-sizing: border-box;
	cursor: pointer;
	padding:0;
}

.HidariExplain{
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	color: rgb(35,31,32);
	padding-top:30px;
	margin-bottom:20px;
}

.HidariExplain p{
	font-size: 95%;
	color: rgb(35,31,32);
	padding-bottom:5px;
	line-height: 2;
	margin-top:0;
	margin-bottom:0;
}

.HidariExplain .OtherSizes{
	display: none;
}


.AnotherAngle{
    height: 200px;
    margin-top: 25px;
}

.mAnotherAngle{
    width: calc((100% / 3) - 5px);
    margin-top: 20px;
}

.MigiSide{
	position: relative;
	width:460px;
	/*min-width: 250px;*/
}

.MigiSideContent{
	position:absolute;
	width:460px;
	bottom: 0;
 	right: 0;
}

.MigiSideContent .Explain2{
	display: none;	
}


.Thumbnail{
	width:460px;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.samu{
    width: 100px;
	height: 100px;    
	margin-right: 10px;	
}

.Thumbnail img{
	/*max-height:80px;*/
    /*max-width: 100%;*/
	width: 100%;
    height: 100%;
	object-fit: contain;
}

.UeSide{
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

.ShitaSide{
	display: flex;
	flex-wrap:wrap;	
	align-items:center;
	justify-content:space-between;
	list-style:none;
	padding-left:0px;
	margin-top:20px;
}

.ShitaSide div{
	margin-bottom: 15px;
}

/* ラジオボタン */
input[type=radio] {
    display: none;
}
.radio02 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.radio02::before {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    content: '';
    display: block;
    height: 16px;
	width: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;    
}
.radio02::after {
    background: #186112;
    border-radius: 50%;
    content: '';
    display: block;
    height: 12px;
	width: 12px;
    left: 8px;
    margin-top: -5px;
    opacity: 0;
    position: absolute;
    top: 50%;    
}
input[type=radio]:checked + .radio02::before {
    border-color: #666;
}
input[type=radio]:checked + .radio02::after {
    opacity: 1;
}


/* --------------------------------
 * 特定商取引法
 * -------------------------------- */

.SimpleList ul{	
	display:flex;
	margin: 0;
	padding:0;
	list-style: none;
}

.SimpleList li{
	line-height: 1.7;
	padding-bottom: 14px;
}

.SimpleList li:nth-of-type(1){	
	width: 15em;
}

.SimpleList li:nth-of-type(2){
	width: 80%;
}

/* --------------------------------
 * 特定商取引法
 * -------------------------------- */

.SimpleList ul{	
	display:flex;
	margin: 0;
	padding:0;
	list-style: none;
}

.SimpleList li{
	line-height: 1.7;
	padding-bottom: 14px;
}

.SimpleList li:nth-of-type(1){	
	width: 15em;
}

.SimpleList li:nth-of-type(2){
	width: 80%;
}

/* --------------------------------
 * フリーページ
 * -------------------------------- */
.SimpleList2{
	padding-top: 30px;
} 

.SimpleList2 ul{	
	display:flex;
	margin: 0;
	padding:0;
	list-style: none;
}

.SimpleList2 li{
	line-height: 1.7;
	padding-bottom: 14px;
}

.SimpleList2 li:nth-of-type(1){	
	width: 30em;
}

.SimpleList2 li:nth-of-type(2){
	width: 80%;
}


/* --------------------------------
 * スマホ
 * -------------------------------- */

p{
    line-height: 2;
}

/* かごを見るボタンなど */
.bigbutton{
	width:100%;
	margin-top:10px;
}

/*スマホヘッダー*/
   
:root {
	--PageWidth: 198;
	--Space4:calc(2.02vw);
	--Space5:calc(2.53vw);
	--Space6:calc(3.03vw);
	--Space7:calc(3.54vw);
	--Space8:calc(4.04vw);
	--Space8_8:calc(4.44vw);
	--Space9:calc(4.55vw);
	--Space9_5:calc(4.8vw);
	--Space10:calc(5.05vw);
	--Space10_8:calc(5.45vw);
	--Space11:calc(5.56vw);
	--Space11_6:calc(5.86vw);
	--Space14:calc(7.07vw);
	--Space14_5:calc(7.32vw);
	--Space15:calc(7.58vw);
	--Space16:calc(8.08vw);
	--Space17:calc(8.59vw);
	--Space18:calc(9.09vw);
	--Space19:calc(9.6vw);
	--Space20:calc(10.1vw);
	--Space25:calc(12.63vw);
	--Space28:calc(14.14vw);
	--Space30:calc(15.15vw);
	--Space39:calc(19.7vw);
	--Space45:calc(22.73vw);
	--Space84:calc(42.42vw);
	--Space120:calc(60.61vw);
	--Space144:calc(70.71vw);
}

.SmartNavi{
	width:calc(100%);
	box-sizing: border-box;
	display:flex;
	align-items: center;
	justify-content: space-between;             
	position:fixed;
	top:0;
	left:0;
	z-index:50;
	padding-top:var(--Space15);
	padding-right: calc(10 / var(--PageWidth) * 100vw);
	padding-left: calc(10.9 / var(--PageWidth) * 100vw);
	padding-bottom:var(--Space15);
	margin:0;
	background-color: white;
	max-height: 150px;
}

.SmartLogo img{
	height:calc(18.9 / var(--PageWidth) * 100vw);
	margin:0;
}

.mCartMiru{
	padding-right: calc(10 / var(--PageWidth) * 100vw);
	margin:0 0 0 auto; /*右寄せさせる*/
}

.mCartMiru img{
	height: calc(14.4 / var(--PageWidth) * 100vw);
	width: auto;
}

/*検索関連*/
.mKensaku{
	display: flex;
	justify-content:left;
	color: RGB(24,97,18)/* 緑 */;
	font-size: 15pt;  
	padding-top: 14px;
	padding-left: calc(50px);
	margin-bottom: var(--Space14);
  }

.mKensaku input[type="text"] {
    border: 1px solid;
    border-color: rgb(162,215,221) /* 青 */;
	border-radius: 0;
	height: calc(var(--Space10) - 2px);
	font-family: serif;
	font-size: calc(var(--Space10) - 4px);
	vertical-align: middle;
}

.mSearchButton{
	height:var(--Space10);
	/*text-align:left;*/
 }

  .mKensakuMado{
   height: var(--Space8);
   width:7em;
   padding:0; 
   border-style:solid;
   border-color: rgb(162,215,221) /* 青 */;
  }
  


/*固定ヘッダーの高さそれ以下のコンテンツを下げる*/
.SpaceAdjust{
	margin:0;
	padding:0;
	height:calc(calc(18.9 / var(--PageWidth) * 100vw) + calc(30 / var(--PageWidth) * 100vw));
	max-height: 150px;
}

.mGrandImage{
	margin:0;
	padding:0;
	padding-bottom: var(--Space15);
	display: block;
	height: auto;
	width:100%;
}

.mMainTemp{    
	margin-left:var(--Space15);
	margin-right:var(--Space15);
}

.mMidashi{
	margin-top:0;
	margin-bottom:var(--Space15);
}

.mMidashiFont{
 font-size: var(--Space10);
 font-family: serif;
 color: rgb(24, 97, 18);
 line-height: 1;
}

.mMidashi img{
	width: 100%;
}

.mMidashi2{
	margin-top:var(--Space30);
	margin-bottom:var(--Space15);
}

.mMidashi2 img{
	width: 100%;
}


.mNews{
	font-size: 13px;
	color:#251F1C;
	line-height: 1.8;
	margin-bottom:var(--Space30);
}


/*商品詳細*/

.mMainTemp .OtherSizes{
	font-size: var(--Space8_8);
	display: flex;
  	justify-content: center;
	  margin-bottom: var(--Space11);
}

.mPankuzu{
	font-size: var(--Space6);
	margin-bottom:var(--Space20);
}

.mPankuzu a{
	font-size: var(--Space6);
}

.mDetailProductName{
   font-size: var(--Space11);
   font-family: serif;
   line-height: 1;
   margin-bottom: var(--Space10);
}

.mRomaji{
	font-size: var(--Space5);
	font-family: serif;
	line-height: 1;
	margin-bottom: var(--Space15);
}

.mDetailProductImage{
	height: 85vw;
	margin-bottom: var(--Space15);
	display: flex;
	/*flex-direction: column-reverse;*/
    align-items:flex-end;
}

.mDetailProductImage img{
	display: block;
	width:auto;
	max-width:100%;
	max-height:100%;
	margin: 0 auto;
	/*height: 85vw;
	width: 100%;
	object-fit:cover;*/
}

.mNaiyouryou{
   color: #717070;
   font-size: var(--Space8_8);
   line-height: 1;
   height: var(--Space8_8);
   margin-bottom: var(--Space10);
   text-align: center;
}

.mDetailProductPrice{
	color: #717070;
	font-size: var(--Space20);
	line-height: 1;
	text-align: center;
	margin-bottom: var(--Space25);
}

.mZeikomi{
font-size: var(--Space8);
}

.mSuryou{
position: relative;
height: var(--Space28);
display: flex;
align-items:center;
justify-content:flex-start;
margin-bottom: var(--Space15);
}

.mSuryou input{
-webkit-appearance: none;
border-radius: 0;
-webkit-box-sizing: content-box;
-webkit-appearance: button;
appearance: button;
border: 1px solid rgb(201,202,202) /* 薄いグレー */;
text-align: center;
font-size: 30px;	
color: rgb(109,110,112) /* グレー */;
box-sizing: border-box;
cursor: pointer;
padding:0;
}

.mKosu{
color: #717070;
font-size: var(--Space9_5);
padding-left: var(--Space10_8);
padding-right: var(--Space10);
}

.PurchaseQuontity{
display: flex;
align-items:center;
position: absolute;
right: 0;
left: 0;
margin: auto;
width: var(--Space84);
height: var(--Space28);
}

.mMinus{
height: var(--Space28);
padding:0;
margin:0;
}

input.mNanko{
height: var(--Space28);
width: var(--Space28);
padding:0;
margin:0;
}

.mPlus{
height: var(--Space28);
padding:0;
margin:0;
}

.mOptionCorner{
font-size: var(--Space8);
border-top: 1px solid #717070;
border-bottom: 1px solid #717070;
padding-top:var(--Space15);
padding-bottom:var(--Space15);
margin-top: var(--Space15);
margin-bottom: var(--Space15);
}

.mOptionCorner p{
color:#717070;
line-height: 1;
padding:0;
margin:0;
margin-top:var(--Space15);
}

.mShinchaOption{
	display:flex;
	flex-wrap:wrap;
	padding-top: 10px;
	padding-bottom: 10px;
}

.mTuikaOption{
display:flex;
flex-wrap: wrap;
justify-content:space-between;
margin-top: var(--Space20);
margin-bottom: var(--Space15);
padding:0;
}

.OptionFirst{
padding-right: var(--Space25);
}

.mCartIn{
display:flex;
justify-content:center;
margin-bottom: var(--Space20);
}   

.mCartIn input{
height: var(--Space28);
}

.mExplain{
font-size: var(--Space8);
margin-bottom: var(--Space20);

}

.Kotirano{
display: block;
width:var(--Space144);
padding:0;
margin: 0 auto;
}

 .mThumbnail{
	display: flex;   
  }
 
.msamu{
   	/*width: 20vw;
   	height: 20vw;    
   	margin-right: 10px;*/
   	width: var(--Space39);
	height: var(--Space39);    
	margin-right: var(--Space4);	
}
 
.msamu4{
	width: var(--Space39);
	height: var(--Space39);    
}

 .mThumbnail img{
   width: 100%;
   height: 100%;
   object-fit: contain;
 }

 .mCartInfo .Explain2{
    display: none;
}

.mProductExplain .OtherSizes{
    display: none;
}


/*商品一覧*/
.mProductList{
	display:flex;
	flex-wrap:wrap;    
	align-items: center;
	justify-content: space-between; 
	margin-bottom: var(--Space15);
}

.mProductList a{
	box-sizing: border-box;
	width:calc(50% - 3px);
	margin-bottom: 5.5px;
}

.mProductList img{
	width:100%;
	height: auto;
}

 /*フッター*/
 .mFotterMenu{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;       
	font-size: var(--Space7);
	margin-bottom: var(--Space15);
	padding: 0;
}

.mFotterMenu　a{
 font-family: serif;
 color: #3B6120;
}

.mTochu{
 box-sizing: border-box;
 color: #3B6120;
 width:calc(50%);
 margin-bottom: calc(12 / var(--PageWidth) * 100vw);
 padding: 0;
}

.last{
 box-sizing: border-box;
 color: #3B6120;
 width:calc(50%);
 margin-bottom:0;
 padding: 0;
}

.SnsButton{
	display: flex;
	align-items: center;
}

.space{
 box-sizing: border-box;
 width:15px;
}


.ChaLogo{
 box-sizing: border-box;
 margin-top: var(--Space15);
 width:100%;
}


/*カゴに入れておく機能用*/
/* 全体 */
.es-modal{
    display:block;
    width:100%;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
}

/* 背景 */
.es-modal-bg{
    background:rgba(0,0,0,0.8);
    width:100%;
    height:100vh;
    position:absolute;
}

/* コンテンツの表示 */
.es-modal-content{
    max-width:800px;
    width:80%;
    height:auto;
    display:block;
    margin:30px auto;
    padding:18px;
    background:#fff;
    top:50%;
    left:50%;
    position:absolute;
    transform:translate(-50%,-50%);
    font-weight:bold;
    font-size:16px;
    border-radius:8px;
    opacity:0;
    transition:.7s;
    overflow:visible;
    text-align:center;
    font-family: メイリオ, Meiryo, verdana, "ヒラギノ角ゴ Pro W3", "Hiragino KakuGothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* コンテンツの位置 */
.es-modal-showup{
    opacity:1;
    margin-top:0;
}

/* カートに追加しました */
.es-modal-content-p{
    text-align:center;
    margin:7px !important;
    padding:7px !important;
}

/* 合計：○点 */
#es-modal-content-message{
    font-weight:normal !important;
    padding-bottom:30px !important;
    font-size: 14px !important;
}

/* ボタン全般 */
.es-modal-content-form{
    text-align:center;
}
.es-modal-content-input{
    height:35px;
    text-align:center;
    font-size:unset !important;
    margin:0px 10px !important;
}
@media (max-width: 767px) {    
    .es-modal-content-input{
        margin:0px 8px !important;
    }
}

/* ボタン(購入を続ける) */
.es-modal-cancel {
    background: #f2f2f2;
    border: 1px solid #e8e7e7;
    height: 40px;
    line-height: 40px;
    padding: 0 10px 0;
    cursor: pointer;
    -webkit-appearance: none;
}
.es-modal-cancel:hover {
    background: #fcfcfc;
}

/* ボタン(注文手続きへ) */
.es-modal-action {
    background: #555555;
    border: 1px solid transparent;
    height: 40px;
    line-height: 40px;
    padding: 0 10px 0;
    color: #FFF;
    cursor: pointer;
    -webkit-appearance: none;
}
.es-modal-action:hover {
    background: #7b7b7b;
}


/*お茶料理*/

.TeaFood{
	width: 100%;
	display: flex;
	justify-content: start;
	padding-top: 15px;
}

.FoodPic{
	width: 400px;
}


.Recipe{
	padding-left: 3em;
	width: 40em;
}

p.HowtoCook{
	margin-bottom: 10px;
}

.mFoodPic{
	margin-bottom: var(--Space15);
}

/* --------------------------------
 * 商品価格改定
 * -------------------------------- */

.SimpleList2 ul{	
	display:flex;
	margin: 0;
	padding:0;
	list-style: none;
}

.SimpleList2 li{
	line-height: 1.7;
	padding-bottom: 14px;
}

.SimpleList2 li:nth-of-type(1){	
	width: 21em;
}

.SimpleList2 li:nth-of-type(2){
	width: 6em;
	text-align: right;
}

.SimpleList2 li:nth-of-type(3){
	width: 6em;
	text-align: right;
}