@charset "UTF-8";

/****************************************
		1. 基本設定 
*****************************************/

* {
	margin:0;
	padding:0;
}

/*　↓YUI3 CSS Reset　ブラウザー固有のスタイルをリセットします↓　*/
body,div,dl,dt,dd,
ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,
input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
img {
	border:0;
}
ul,ol,li {
	list-style:none;
}

/*　↓HTML5　新要素をブロック化する↓　*/
header, section, footer, aside, nav, article, figure { 
	margin:0;
	padding:0;
	display: block;
}

body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:12px;
	letter-spacing:0.1em;
	margin: 0;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}

/*　↓リンクに対する共通設定↓　*/
a {
	text-decoration:none;
}
a:link,
a:visited {
	color:#7DB498;
	text-decoration:underline;
}
a:hover,
a:active {
	color:#FF9999;
}
a img {
	border:none;
}

/****************************************/

strong {
	color: #752100;
}

h2 {
	height:32px;
	padding-top:2px;
	line-height:1.5em;
	background:url(../img/components/bg_tit800.png) no-repeat;
	font-size:16px;
	font-weight:normal;
	text-align:center;
	color:#FFFFFF;
	margin-top:0px;
	margin-bottom:-5px;
}

h3 {
	margin-top:15px;
	margin-bottom:15px;
	padding:10px 10px 10px 10px;
	line-height:1.5em;
	border: 1px solid #8d6449;
	font-size:14px; 
	color:#6b3f31;
	clear: both;
}
h4 {
	font-size:14px;
	font-weight:bold;
	text-align:left;
	color:#493a2c;
}

/****************************************/
/* クリアフィックスハック */
.clearfix:after { 
	content:"";
    display:block;
    clear:both;
} 
.clearfix { 
	display: inline-block; 
}
/* Mac版IE除外 \*/
.clearfix { 
	display: block; 
}

/**********************************************************
* （全メディア共通）*
**********************************************************/
#main_photo{
	margin-bottom:20px;
}

footer {
	clear:both;
	margin-top:auto;
	bottom:0;
	padding:20px 0 10px 0;
	background:#564940  url(../img/components/bg_footer.png) repeat-x;
}

footer address {
	font-size:10px;
	font-style:normal;
	color:#7D702D;
	text-align:center;
}


.store  {
	margin-top:0px;
	margin-bottom:0px;

}
.store img{
	margin:0px auto 10px auto;
	}
.store dl {
	position:relative;
	margin-right:5px;
	float:right;
}

.store dl dt {
	position:absolute;
	left:0;
	clear:both;
	padding:5px 0 5px 10px;
	float:left;
	font-weight:bold;
	color:#6b3f31;
	line-height:1.6em;
}
.store dl dd {
	padding:5px 0 5px 80px;
	border-bottom:dotted 1px #AF9D76;
	line-height:1.6em;
}


/**********************************************************
*   （メディア別）基本レイアウト【　P　C　】   *
**********************************************************/

@media screen and (min-width:915px){
.sm{
  display:none;
}
body{
	background-color:#e3e0d3;
	background:url(../img/components/bg_left.png) repeat-y left 0,
			   url(../img/components/bg_right.png) repeat-y right 0;
}
#wrap {
	width:900px;
	margin:0 auto;
}
#tea_main {
	clear:both;
	width:800px;
	margin-bottom:30px;
}
#c1{
	clear:both;
	width:800px;
	margin:15px auto 0 auto;
}


/************************ 
*     ヘッダーPC    *
*************************/
#header{
	width:800px;
	height:130px;
	background:url(../img/alice_logo.png) no-repeat;
	margin:0 auto 0 auto;

	}

/************************
	*    ナビバーPC   *
*************************/
#navi {
	clear:both;
	width:800px;
	height:42px;
	margin:0 auto 0 auto;
	list-style-type:none;
}
#navi li {
	width:160px;
	height:42px;
	float:left;
	text-align:center;
}
#navi a {
	display:block;
	width:160px;
	height:42px;
	padding-top:10px;
	background:url(../img/components/navi.png) no-repeat;
	font-size:12px;
	font-weight:bold;
	color:#7D702D;
	text-decoration:none;
	line-height:1.5em;
}
#navi_01 a:hover,
#contents_01 #navi_01 a {
	background-position:0 -42px;
}
#navi_02 a,
#navi_03 a,
#navi_04 a {
	background-position:-160px 0;
}
#navi_02 a:hover,
#navi_03 a:hover,
#navi_04 a:hover,
#contents_02 #navi_02 a,
#contents_03 #navi_03 a,
#contents_04 #navi_04 a {
	background-position:-160px -42px;
}
#navi_05 a {
	background-position:-320px 0;
}
#navi_05 a:hover,
#contents_05 #navi_05 a {
	background-position:-320px -42px;
}
#navi a:hover,
#contents_01 #navi_01 a,
#contents_02 #navi_02 a,
#contents_03 #navi_03 a,
#contents_04 #navi_04 a,
#contents_05 #navi_05 a {
	color:#715C1F;
}


#tea_news{
	border-width: 2px;
	border-style:solid;
	border-color:#78413e;
}
#tea_news li {
	margin: 15px 20px 15px 20px;
}
#tea_news_title{
	height:32px;
	padding-top:5px;
	line-height:1.5em;
	background:url(../img/components/main_h2_800.png) no-repeat;
	font-size:16px;
	font-weight:normal;
	text-align:center;
	color:#FFFFFF;
}

/* GRID
---------------------- */
.grid4 {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	margin-top: 0px;
	margin-bottom: 0px;
}

}	

/**********************************************************
*   （メディア別）基本レイアウト【　S　M　】   *
**********************************************************/

@media screen and (max-width:914px) and (min-width:768px){
.sm{
  display:none;
}
body{
	background-color:#e3e0d3;
	background:url(../img/components/bg_left.png) repeat-y left 0,
			   url(../img/components/bg_right.png) repeat-y right 0;
}
#wrap {
	width:690px;
	margin:0px auto 0 auto;
	padding:20px 45px 40px 45px;
}
#c1{
	clear:both;
	width:600px;
	margin:15px auto 0 auto;
}
#tea_main {
	clear:both;
	width:600px;
	margin-bottom:30px;
}

/* ***********************
*     ヘッダーSM    *
*************************/
#header{
	width:600px;
	height:130px;
	background:url(../img/alice_logo_s.png) no-repeat;
}
	
/* ***********************
	*    ナビバーSM   *
*************************/
#navi {
	clear:both;
	width:600px;
	height:42px;
	margin:0;
	list-style-type:none;
}
#navi li {
	width:120px;
	height:42px;
	float:left;
	text-align:center;
}
#navi a {
	display:block;
	width:120px;
	height:42px;
	padding-top:10px;
	background:url(../img/components/navi_s.png) no-repeat;
	font-size:10.5px;
	font-weight:bold;
	color:#7D702D;
	text-decoration:none;
	line-height:2em;
}
#navi_01 a:hover,
#contents_01 #navi_01 a {
	background-position:0 -42px;
}
#navi_02 a,
#navi_03 a,
#navi_04 a {
	background-position:-120px 0;
}
#navi_02 a:hover,
#navi_03 a:hover,
#navi_04 a:hover,
#contents_02 #navi_02 a,
#contents_03 #navi_03 a,
#contents_04 #navi_04 a {
	background-position:-120px -42px;
}
#navi_05 a {
	background-position:-240px 0;
}
#navi_05 a:hover,
#contents_05 #navi_05 a {
	background-position:-240px -42px;
}
#navi a:hover,
#contents_01 #navi_01 a,
#contents_02 #navi_02 a,
#contents_03 #navi_03 a,
#contents_04 #navi_04 a,
#contents_05 #navi_05 a {
	color:#715C1F;
}

#tea_news_title{
	height:32px;
	padding-top:5px;
	line-height:1.5em;
	background:url(../img/components/main_h2_600.png) no-repeat;
	font-size:16px;
	font-weight:normal;
	text-align:center;
	color:#FFFFFF;
}
#tea_news{
	border-width: 2px;
	border-style:solid;
	border-color:#78413e;
	margin-bottom:20px;
}
#tea_news li {
	margin: 15px 5px 15px 15px;
	
}

/* GRID
---------------------- */
.grid4 {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr 1fr;
	margin-top: 0px;
	margin-bottom: 0px;
}
}


/**********************************************************
*   （メディア別）基本レイアウト【　X　S　】   *
**********************************************************/

@media screen and (max-width:767px){
#header{
	margin:50px auto 0 auto;
}
#header .sm img{
	margin: 0 auto;
}
#navi{
	display:none;
	}
#c1{
	clear:both;
	margin:15px auto 0 auto;
}
#tea_main {
	clear:both;
	margin:0 15px 30px 15px;
}

#tea_news_title{
	height:32px;
	padding-top:5px;
	line-height:1.5em;
	background:#78413e;
	font-size:16px;
	font-weight:normal;
	text-align:center;
	color:#FFFFFF;
}

#tea_news{
	border-width: 2px;
	border-style:solid;
	border-color:#78413e;
	padding:15px 10px 0px 20px;
	margin-bottom:20px;
}

#tea_news img{
	margin-bottom:15px;

}
/* GRID
---------------------- */
.grid4 {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr 1fr;
	margin-top: 0px;
	margin-bottom: 0px;
}

}
@media screen and (max-width:400px){
/* GRID
---------------------- */
.grid4 {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
	margin-top: 0px;
	margin-bottom: 0px;
}
}