@charset "UTF-8";


/* top page */
#site_width {
	margin: 0px auto;
	padding: 0px;
	width: 1050px;
	overflow-x: hidden;
	overflow-y: hidden;
}



/* 左上ロゴが幅300高さ315のとき */
#top_logo {
	margin: 0px 0px 0px 0px;
	position: fixed;
	float: left;
	z-index: 999;
}

/* 左上ロゴが幅400高さ315のとき */
.top_logo400x315 {
	position: fixed;
	float: left;
	z-index: 999;
	margin: 0px 0px 0px -50px;
}


.head_index {
	position: fixed;
	margin: 0px 0px 0px 0px;
	width: 1050px;
	font-size: 0.85em;
	color: #ffffff;
	letter-spacing: 0px;
	text-align: right;
	text-shadow: 0.1em 0.1em 5px #000000;
	height: 40px;
	padding: 20px 0px 0px 0px;
	z-index: 800;
	background: #ffbb77;
	background: url(../images/20160901header.png);
}
.head_index a {
	text-decoration: none;
}
.head_index :hover {
	text-decoration: underline;
}
.head_index a:link { color: #ffffff; }
.head_index a:visited { color: #ffffff; }
.head_index a:hover { color: #ffff00; }
.head_index a:active { color: #ffff00; }



/* 背景画像をはみ出させないときの、各リンク項目 */
.head_menu {
	position: relative;
	display:block;
	height: 80px;
	overflow: hidden;
	float: left;
	margin: 0px 0px 0px 0px;
	background-repeat: no-repeat;
}  
.head_menu a:hover img {
	margin: -80px 0px 0px 0px;
}


.inline-block_320x160 {
    display: inline-block;      /* インラインブロック要素にする */
    padding: 0px 15px 0px 0px;  /* 余白指定 320を３つ並べて990にする */
}


/* 季節ごとのヘッダメニュー背景  */
/* 印刷の時は表示されない。印刷以外の時に常に画面の最上部に表示されるメニュー。「head_index3」と「head_index4」は同じビジュアルであることが望ましい  */
.head_index3 {
	position: fixed;
	margin: -118px 0px 0px -1050px;
	width: 3150px;
	height: 120px;
    overflow:visible; /* 背景画像をわざとはみ出させます */
	padding: 0px 0px 0px 0px;
	z-index: 799;
	background: #ffbb77;
	background: url(../images/20161128headermenuback2.png); 
	background: url(../images/headermenuback3150brick_halloween.png); /* ハロウィン用 */
	background: url(../images/headermenuback3150wood_white.png); /* 夏用 */
	background: url(../images/headermenuback3150wood_shadow.png); /* 初夏用の板 */
	background: url(../images/20170331headermenuback.png); /* 春用・秋用・冬用 */
	background: url(../images/20171225headermenuback.png); /* クリスマス用 */
	background: url(../images/headermenuback3150brick_shadow.png); /* れんが */
}



/* 印刷の時に第１ページの先頭だけに表示されるメニュー。ふだんは「head_index3」の下に隠れている。*/
.head_index4 {
	position: relative;
	margin: -2px 0px 0px -1050px;
	width: 3150px;
	height: 120px;
	padding: 0px 0px 0px 0px;
	z-index: 798;
	background: #ffbb77;
	background: url(../images/20161128headermenuback2_noshadow.png); 
	background: url(../images/headermenuback3150brick_halloween_noshadow.png); /* ハロウィン用 */
	background: url(../images/headermenuback3150wood_white_noshadow.png); /* 夏用 */
	background: url(../images/headermenuback3150wood_noshadow.png); /* 初夏用の板 */
	background: url(../images/20170331headermenuback_noshadow.png); /* 春用・秋用・冬用 */
	background: url(../images/20171225headermenuback.png); /* クリスマス用 */
	background: url(../images/headermenuback3150brick_noshadow.png); /* れんが */
}





#figure {
  position: relative;
}
#figure::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  content: '';
  width: 0;
  height: 0;
  background: rgba(255,255,255,.5);
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}
#figure:hover::before {
  -webkit-animation: circle .25s;
  animation: circle .25s;
}
@-webkit-keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}
@keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}



.toppage_oil_s {
  animation: toppage_oil_s 20s linear infinite;
}
 @keyframes toppage_oil_s {
  0%   { opacity: 1; }
  45%  { opacity: 1; }
  50%  { opacity: 1; }
  95%  { opacity: 1; }
  100% { opacity: 1; }
}
.toppage_oil_m {
  animation: toppage_oil_m 20s linear infinite;
}
 @keyframes toppage_oil_m {
  0%   { opacity: 0; }
  45%  { opacity: 0; }
  50%  { opacity: 1; }
  95%  { opacity: 1; }
  100% { opacity: 0; }
}





.fuwa1 {
 animation: fuwa01 3.1s linear 0.5s infinite; 
}
.fuwa2 {
 animation: fuwa02 1.6s linear 0s infinite alternate;
}
.fuwa3 {
 animation: fuwa03 2.1s linear 0s infinite alternate;
}
.fuwa4 {
 animation: fuwa04 2.3s linear 0s infinite alternate;
}
.fuwa5 {
 animation: fuwa05 1.7s linear 0s infinite alternate;
}
.fuwa6 {
 animation: fuwa01 1.5s linear 0.5s infinite; 
}
.fuwa7 {
 animation: fuwa02 3.2s linear 0s infinite alternate;
}
.fuwa8 {
 animation: fuwa03 1.4s linear 0s infinite alternate;
}
.fuwa9 {
 animation: fuwa04 1.9s linear 0s infinite alternate;
}
.fuwa10 {
 animation: fuwa05 2.2s linear 0s infinite alternate;
}

@keyframes fuwa01 {
    0%{transform: translate(0px, 0px);}
    25% {transform: translate(-5px, 5px);}
    50%{transform: translate(-10px, 0px);}
    75% {transform: translate(-5px, -5px);}
}
@keyframes fuwa02 {
    0%{transform: translate(0px, 0px);}
    25% {transform: translate(5px, -5px);}
    50%{transform: translate(0px,-10px);}
    75% {transform: translate(5px, 5px);}
}
@keyframes fuwa03 {
    0%{transform: translate(0px, 0px);}
    25% {transform: translate(5px, 10px);}
    50%{transform: translate(-5px,-5px);}
    75% {transform: translate(10px, -10px);}
}
@keyframes fuwa04 {
    0%{transform: translate(0px, 0px);}
    25% {transform: translate(-10px, -5px);}
    50%{transform: translate(5px,5px);}
    75% {transform: translate(-5px, 10px);}
}
@keyframes fuwa05 {
    0%{transform: translate(0px, 0px);}
    25% {transform: translate(10px, -10px);}
    50%{transform: translate(0px,-5px);}
    75% {transform: translate(-5px, 5px);}
}



/* クリスマス用ヘッダの時の光彩アニメーション。「head_index4」の上。*/
#head_blink1 {
 -webkit-animation: blink_a 3s infinite alternate;
 -moz-animation: blink_a 3s infinite alternate;
 animation: blink_a 3s infinite alternate;
}
#head_blink2 {
 -webkit-animation: blink_a 2.7s infinite alternate;
 -moz-animation: blink_a 2.7s infinite alternate;
 animation: blink_a 2.7s infinite alternate;
}
#head_blink3 {
 -webkit-animation: blink_b 3.1s infinite alternate;
 -moz-animation: blink_b 3.1s infinite alternate;
 animation: blink_b 3.1s infinite alternate;
}
#head_blink4 {
 -webkit-animation: blink_b 2.9s infinite alternate;
 -moz-animation: blink_b 2.9s infinite alternate;
 animation: blink_b 2.9s infinite alternate;
}
@-webkit-keyframes blink_a {
 from { opacity: 1.0; }
 to { opacity: 0; }
}
@-moz-keyframes blink_a {
 from { opacity: 1.0; }
 to { opacity: 0; }
}
@keyframes blink_a {
 from { opacity: 1.0; }
 to { opacity: 0; }
}
@-webkit-keyframes blink_b {
 from { opacity: 0; }
 to { opacity: 1.0; }
}
@-moz-keyframes blink_b {
 from { opacity: 0; }
 to { opacity: 1.0; }
}
@keyframes blink_b {
 from { opacity: 0; }
 to { opacity: 1.0; }
}





/* シンプルなヘッダメニュー背景  */
/* 印刷の時は表示されない。印刷以外の時に常に画面の最上部に表示されるメニュー。「head_index1」と「head_index2」は同じビジュアルであることが望ましい  */
.head_index1 {
	position: fixed;
	margin: -118px 0px 0px -1050px;
	width: 3150px;
	height: 120px;
    overflow:visible; /* 背景画像をわざとはみ出させます */
	padding: 0px 0px 0px 0px;
	z-index: 799;
	background: #ffbb77;
	background: url(../images/20170331headermenuback.png); /* シンプル（春用・秋用・冬用） */
}
/* 印刷の時に第１ページの先頭だけに表示されるメニュー。ふだんは「head_index1」の下に隠れている。*/
.head_index2 {
	position: relative;
	margin: -2px 0px 0px -1050px;
	width: 3150px;
	height: 120px;
	padding: 0px 0px 0px 0px;
	z-index: 798;
	background: #ffbb77;
	background: url(../images/20170331headermenuback_noshadow.png); /* シンプル（春用・秋用・冬用） */
}




/* スマホ用メニュー背景*/
.head_index_sp {
	position: fixed;
	margin: 0x 0px 0px 0px;
	width: 480px;
	height: 70px;
    overflow: visible; /* 背景画像をわざとはみ出させます */
	padding: 0px 0px 0px 0px;
	z-index: 799;
	background: #333333;
	background: url(../images/renga480x70.png); /* れんが */
}


/* ヘッダー付近にある「大きなタイトルロゴ（横330pxたて315px）」が、スクロールすると「小さなロゴ（横290pxたて80px）」に変わる効果*/
/* あわせて、各ページのhead内に詳細なscriptで指定しています*/
.head_index_smalltitle {
	position: fixed;
	margin: -115px 0px 0px 0px;
	width: 290px;
	height: 80px;
	padding: 0px 0px 0px 0px;
	z-index: 800;
}
.head_index_smalltitle_sp {
	position: fixed;
	margin: -5px 0px 0px 70px;
	width: 290px;
	height: 80px;
	padding: 0px 0px 0px 0px;
	z-index: 800;
}



/* スクロールすると画像がふわっと現れる効果 */
.fadein {
    opacity : 0.5;
    transform : scale(0.9,0.9);
    transition : all 0.3s;
}
.fadein.scrollin {
    opacity : 1;
    transform : scale(1,1);
}





.tavola_title_b { /* 食器 */
  animation: tavola_title_b 18s; 
  animation-iteration-count: infinite; 
  -webkit-animation: tavola_title_b 18s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: tavola_title_b 18s;
  -ms-animation-iteration-count: infinite; 
}
@keyframes tavola_title_b {
    0% {opacity: 1;}
    20% {opacity: 1;}
    35% {opacity: 0;}
    65% {opacity: 0;}
    80% {opacity: 1;}
    95% {opacity: 1;}
    100% {opacity: 1;}
}

.tavola_title_c { /* センター */
  animation: tavola_title_c 18s; 
  animation-iteration-count: infinite; 
  -webkit-animation: tavola_title_c 18s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: tavola_title_c 18s;
  -ms-animation-iteration-count: infinite; 
}
@keyframes tavola_title_c {
    0% {opacity: 1;}
    20% {opacity: 1;}
    35% {opacity: 0;}
    65% {opacity: 0;}
    80% {opacity: 0;}
    95% {opacity: 1;}
    100% {opacity: 1;}
}

.tavola_title_d { /* ロゴ */
  animation: tavola_title_d 18s; 
  animation-iteration-count: infinite; 
  -webkit-animation: tavola_title_d 18s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: tavola_title_d 18s;
  -ms-animation-iteration-count: infinite; 
}
@keyframes tavola_title_d {
    0% {opacity: 0;}
    20% {opacity: 0;}
    35% {opacity: 1;}
    65% {opacity: 1;}
    80% {opacity: 1;}
    95% {opacity: 0;}
    100% {opacity: 0;}
}


.tavola_open {
  animation: tavola_open 10s; 
  animation-iteration-count: infinite; 
  -webkit-animation: tavola_open 10s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: tavola_open 10s;
  -ms-animation-iteration-count: infinite; 
}
@keyframes tavola_open {
    0% {opacity: 0;}
    25% {opacity: 0;}
    50% {opacity: 1;}
    85% {opacity: 1;}
    100% {opacity: 0;}
}



.image_beat1 {
	width: 280px;
	height: 264px;
    background-repeat: no-repeat;
  animation: image_beat1 4s; 
  animation-iteration-count: infinite; 
  -webkit-animation: image_beat1 4s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: image_beat1 4s;
  -ms-animation-iteration-count: infinite; 
}  
@keyframes image_beat1 {
    0% {opacity: 1; transform: scale(1, 1); filter: hue-rotate(0deg) saturate(100%) brightness(100%);}
    44% {opacity: 1; transform: scale(1, 1); filter: hue-rotate(0deg) saturate(100%) brightness(100%);}
    46% {opacity: 1; transform: scale(0.7, 0.7); filter: hue-rotate(75deg) saturate(80%) brightness(50%);}
    52% {opacity: 1; transform: scale(1.2, 1.2); filter: hue-rotate(75deg) saturate(200%) brightness(300%);}
    55% {opacity: 1; transform: scale(0.8, 0.8); filter: hue-rotate(75deg) saturate(200%) brightness(300%);}
    58% {opacity: 1; transform: scale(1, 1); filter: hue-rotate(0deg) saturate(100%) brightness(100%);}
    100% {opacity: 1; transform: scale(1, 1); filter: hue-rotate(0deg) saturate(100%) brightness(100%);}
}
@-webkit-keyframes image_beat1 {
    0% {opacity: 1; transform: scale(1, 1); filter: hue-rotate(0deg) saturate(100%) brightness(100%);}
    44% {opacity: 1; transform: scale(1, 1); filter: hue-rotate(0deg) saturate(100%) brightness(100%);}
    46% {opacity: 1; transform: scale(0.7, 0.7); filter: hue-rotate(75deg) saturate(80%) brightness(50%);}
    52% {opacity: 1; transform: scale(1.2, 1.2); filter: hue-rotate(75deg) saturate(200%) brightness(300%);}
    55% {opacity: 1; transform: scale(0.8, 0.8); filter: hue-rotate(75deg) saturate(200%) brightness(300%);}
    58% {opacity: 1; transform: scale(1, 1); filter: hue-rotate(0deg) saturate(100%) brightness(100%);}
    100% {opacity: 1; transform: scale(1, 1); filter: hue-rotate(0deg) saturate(100%) brightness(100%);}
}
@-ms-keyframes image_beat1 { 
    0% {opacity: 1; transform: scale(1, 1); filter: hue-rotate(0deg) saturate(100%) brightness(100%);}
    44% {opacity: 1; transform: scale(1, 1); filter: hue-rotate(0deg) saturate(100%) brightness(100%);}
    46% {opacity: 1; transform: scale(0.7, 0.7); filter: hue-rotate(75deg) saturate(80%) brightness(50%);}
    52% {opacity: 1; transform: scale(1.2, 1.2); filter: hue-rotate(75deg) saturate(200%) brightness(300%);}
    55% {opacity: 1; transform: scale(0.8, 0.8); filter: hue-rotate(75deg) saturate(200%) brightness(300%);}
    58% {opacity: 1; transform: scale(1, 1); filter: hue-rotate(0deg) saturate(100%) brightness(100%);}
    100% {opacity: 1; transform: scale(1, 1); filter: hue-rotate(0deg) saturate(100%) brightness(100%);}
}
.image_beat2 {
	width: 280px;
	height: 264px;
    background-repeat: no-repeat;
  animation: image_beat2 4s; 
  animation-iteration-count: infinite; 
  -webkit-animation: image_beat2 4s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: image_beat2 4s;
  -ms-animation-iteration-count: infinite; 
}  
@keyframes image_beat2 {
    0% {opacity: 1; transform: scale(1, 1);}
    44% {opacity: 1; transform: scale(1, 1);}
    46% {opacity: 1; transform: scale(0.6, 0.6);}
    53% {opacity: 1; transform: scale(1.3, 1.3);}
    56% {opacity: 1; transform: scale(0.7, 0.7);}
    59% {opacity: 1; transform: scale(1, 1);}
    100% {opacity: 1; transform: scale(1, 1);}
}
@-webkit-keyframes image_beat2 {
    0% {opacity: 1; transform: scale(1, 1);}
    44% {opacity: 1; transform: scale(1, 1);}
    46% {opacity: 1; transform: scale(0.6, 0.6);}
    53% {opacity: 1; transform: scale(1.3, 1.3);}
    56% {opacity: 1; transform: scale(0.7, 0.7);}
    59% {opacity: 1; transform: scale(1, 1);}
    100% {opacity: 1; transform: scale(1, 1);}
}
@-ms-keyframes image_beat2 { 
    0% {opacity: 1; transform: scale(1, 1);}
    44% {opacity: 1; transform: scale(1, 1);}
    46% {opacity: 1; transform: scale(0.6, 0.6);}
    53% {opacity: 1; transform: scale(1.3, 1.3);}
    56% {opacity: 1; transform: scale(0.7, 0.7);}
    59% {opacity: 1; transform: scale(1, 1);}
    100% {opacity: 1; transform: scale(1, 1);}
}






/* 2019年8月のセール告知（トップページ用） */
#sun_cycle {
	width: 1050px;
	height: 740px;
	background-color: #ffffff;
	overflow: hidden;
}  
.sun_cycle1 {
	width: 860px;
	height: 860px;
  animation: sun_cycle1 10s; 
  animation-iteration-count: infinite; 
  -webkit-animation: sun_cycle1 10s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: sun_cycle1 10s;
  -ms-animation-iteration-count: infinite; 
}  
@-webkit-keyframes sun_cycle1 {
	0% {-webkit-transform: rotate(0deg);}
	50% {-webkit-transform: rotate(10deg);}
	100% {-webkit-transform: rotate(0deg);}
}
@-moz-keyframes sun_cycle1 {
	0% {-moz-transform: rotate(0deg);}
	50% {-moz-transform: rotate(10deg);}
	100% {-moz-transform: rotate(0deg);}
}
@-ms-keyframes sun_cycle1 {
	0% {-ms-transform: rotate(0deg);}
	50% {-ms-transform: rotate(10deg);}
	100% {-ms-transform: rotate(0deg);}
}
@-o-keyframes sun_cycle1 {
	0% {-o-transform: rotate(0deg);}
	50% {-o-transform: rotate(10deg);}
	100% {-o-transform: rotate(0deg);}
}
@keyframes sun_cycle1 {
	0% {transform: rotate(0deg);}
	50% {transform: rotate(10deg);}
	100% {transform: rotate(0deg);}
}
.sun_cycle2 {
	overflow: hidden;
  animation: sun_cycle2 60s; 
  animation-iteration-count: infinite; 
  -webkit-animation: sun_cycle2 60s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: sun_cycle2 60s;
  -ms-animation-iteration-count: infinite; 
}  
@-webkit-keyframes sun_cycle2 {
	0% {opacity: 1; -webkit-transform: rotate(0deg);}
	21% {opacity: 1; -webkit-transform: rotate(-72deg);}
	25% {opacity: 0; -webkit-transform: rotate(-90deg);}
	46% {opacity: 0; -webkit-transform: rotate(-162deg);}
	50% {opacity: 1; -webkit-transform: rotate(-180deg);}
	70% {opacity: 1; -webkit-transform: rotate(-252deg);}
	75% {opacity: 0; -webkit-transform: rotate(-270deg);}
	95% {opacity: 0; -webkit-transform: rotate(-342deg);}
	100% {opacity: 1; -webkit-transform: rotate(-360deg);}
}
@-moz-keyframes sun_cycle2 {
	0% {opacity: 1; -moz-transform: rotate(0deg);}
	21% {opacity: 1; -moz-transform: rotate(-72deg);}
	25% {opacity: 0; -moz-transform: rotate(-90deg);}
	46% {opacity: 0; -moz-transform: rotate(-162deg);}
	50% {opacity: 1; -moz-transform: rotate(-180deg);}
	70% {opacity: 1; -moz-transform: rotate(-252deg);}
	75% {opacity: 0; -moz-transform: rotate(-270deg);}
	95% {opacity: 0; -moz-transform: rotate(-342deg);}
	100% {opacity: 1; -moz-transform: rotate(-360deg);}
}
@-ms-keyframes sun_cycle2 {
	0% {opacity: 1; -ms-transform: rotate(0deg);}
	21% {opacity: 1; -ms-transform: rotate(-72deg);}
	25% {opacity: 0; -ms-transform: rotate(-90deg);}
	46% {opacity: 0; -ms-transform: rotate(-162deg);}
	50% {opacity: 1; -ms-transform: rotate(-180deg);}
	70% {opacity: 1; -ms-transform: rotate(-252deg);}
	75% {opacity: 0; -ms-transform: rotate(-270deg);}
	95% {opacity: 0; -ms-transform: rotate(-342deg);}
	100% {opacity: 1; -ms-transform: rotate(-360deg);}
}
@-o-keyframes sun_cycle2 {
	0% {opacity: 1; -o-transform: rotate(0deg);}
	21% {opacity: 1; -o-transform: rotate(-72deg);}
	25% {opacity: 0; -o-transform: rotate(-90deg);}
	46% {opacity: 0; -o-transform: rotate(-162deg);}
	50% {opacity: 1; -o-transform: rotate(-180deg);}
	70% {opacity: 1; -o-transform: rotate(-252deg);}
	75% {opacity: 0; -o-transform: rotate(-270deg);}
	95% {opacity: 0; -o-transform: rotate(-342deg);}
	100% {opacity: 1; -o-transform: rotate(-360deg);}
}
@keyframes sun_cycle2 {
	0% {opacity: 1; transform: rotate(0deg);}
	21% {opacity: 1; transform: rotate(-72deg);}
	25% {opacity: 0; transform: rotate(-90deg);}
	46% {opacity: 0; transform: rotate(-162deg);}
	50% {opacity: 1; transform: rotate(-180deg);}
	70% {opacity: 1; transform: rotate(-252deg);}
	75% {opacity: 0; transform: rotate(-270deg);}
	95% {opacity: 0; transform: rotate(-342deg);}
	100% {opacity: 1; transform: rotate(-360deg);}
}

.sun_cycle3 {
	overflow: hidden;
  animation: sun_cycle3 60s; 
  animation-iteration-count: infinite; 
  -webkit-animation: sun_cycle3 60s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: sun_cycle3 60s;
  -ms-animation-iteration-count: infinite; 
}  
@-webkit-keyframes sun_cycle3 {
	0% {opacity: 0; -webkit-transform: rotate(0deg);}
	21% {opacity: 0; -webkit-transform: rotate(-72deg);}
	25% {opacity: 1; -webkit-transform: rotate(-90deg);}
	46% {opacity: 1; -webkit-transform: rotate(-162deg);}
	50% {opacity: 0; -webkit-transform: rotate(-180deg);}
	70% {opacity: 0; -webkit-transform: rotate(-252deg);}
	75% {opacity: 1; -webkit-transform: rotate(-270deg);}
	95% {opacity: 1; -webkit-transform: rotate(-342deg);}
	100% {opacity: 0; -webkit-transform: rotate(-360deg);}
}
@-moz-keyframes sun_cycle3 {
	0% {opacity: 0; -moz-transform: rotate(0deg);}
	21% {opacity: 0; -moz-transform: rotate(-72deg);}
	25% {opacity: 1; -moz-transform: rotate(-90deg);}
	46% {opacity: 1; -moz-transform: rotate(-162deg);}
	50% {opacity: 0; -moz-transform: rotate(-180deg);}
	70% {opacity: 0; -moz-transform: rotate(-252deg);}
	75% {opacity: 1; -moz-transform: rotate(-270deg);}
	95% {opacity: 1; -moz-transform: rotate(-342deg);}
	100% {opacity: 0; -moz-transform: rotate(-360deg);}
}
@-ms-keyframes sun_cycle3 {
	0% {opacity: 0; -ms-transform: rotate(0deg);}
	21% {opacity: 0; -ms-transform: rotate(-72deg);}
	25% {opacity: 1; -ms-transform: rotate(-90deg);}
	46% {opacity: 1; -ms-transform: rotate(-162deg);}
	50% {opacity: 0; -ms-transform: rotate(-180deg);}
	70% {opacity: 0; -ms-transform: rotate(-252deg);}
	75% {opacity: 1; -ms-transform: rotate(-270deg);}
	95% {opacity: 1; -ms-transform: rotate(-342deg);}
	100% {opacity: 0; -ms-transform: rotate(-360deg);}
}
@-o-keyframes sun_cycle3 {
	0% {opacity: 0; -o-transform: rotate(0deg);}
	21% {opacity: 0; -o-transform: rotate(-72deg);}
	25% {opacity: 1; -o-transform: rotate(-90deg);}
	46% {opacity: 1; -o-transform: rotate(-162deg);}
	50% {opacity: 0; -o-transform: rotate(-180deg);}
	70% {opacity: 0; -o-transform: rotate(-252deg);}
	75% {opacity: 1; -o-transform: rotate(-270deg);}
	95% {opacity: 1; -o-transform: rotate(-342deg);}
	100% {opacity: 0; -o-transform: rotate(-360deg);}
}
@keyframes sun_cycle3 {
	0% {opacity: 0; transform: rotate(0deg);}
	21% {opacity: 0; transform: rotate(-72deg);}
	25% {opacity: 1; transform: rotate(-90deg);}
	46% {opacity: 1; transform: rotate(-162deg);}
	50% {opacity: 0; transform: rotate(-180deg);}
	70% {opacity: 0; transform: rotate(-252deg);}
	75% {opacity: 1; transform: rotate(-270deg);}
	95% {opacity: 1; transform: rotate(-342deg);}
	100% {opacity: 0; transform: rotate(-360deg);}
}

.sun_cycle4 {
	overflow: hidden;
  animation: sun_cycle4 60s; 
  animation-iteration-count: infinite; 
  -webkit-animation: sun_cycle4 60s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: sun_cycle4 60s;
  -ms-animation-iteration-count: infinite; 
}  
@-webkit-keyframes sun_cycle4 {
	0% {opacity: 0;}
	21% {opacity: 0;}
	25% {opacity: 1;}
	46% {opacity: 1;}
	50% {opacity: 0;}
	70% {opacity: 0;}
	75% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;}
}
@-moz-keyframes sun_cycle4 {
	0% {opacity: 0;}
	21% {opacity: 0;}
	25% {opacity: 1;}
	46% {opacity: 1;}
	50% {opacity: 0;}
	70% {opacity: 0;}
	75% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;}
}
@-ms-keyframes sun_cycle4 {
	0% {opacity: 0;}
	21% {opacity: 0;}
	25% {opacity: 1;}
	46% {opacity: 1;}
	50% {opacity: 0;}
	70% {opacity: 0;}
	75% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;}
}
@-o-keyframes sun_cycle4 {
	0% {opacity: 0;}
	21% {opacity: 0;}
	25% {opacity: 1;}
	46% {opacity: 1;}
	50% {opacity: 0;}
	70% {opacity: 0;}
	75% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes sun_cycle4 {
	0% {opacity: 0;}
	21% {opacity: 0;}
	25% {opacity: 1;}
	46% {opacity: 1;}
	50% {opacity: 0;}
	70% {opacity: 0;}
	75% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;}
}
/* 2019年8月のセール告知（トップページ用）ここまで */







/* 201907セール用 720x500 始まり */
/* 画像が２倍程度の大きさから収まる効果 */
.image_breakin1 {
	width: 720px;
	height: 500px;
	position: relative;
	top: -510px;
	padding: 0px 0px -510px 0px;
    background-repeat: no-repeat;
  animation: image_breakin1 3s; 
  animation-iteration-count: 1; 
  -webkit-animation: image_breakin1 3s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 1; 
  -ms-animation: image_breakin1 3s;
  -ms-animation-iteration-count: 1; 
}  
@keyframes image_breakin1 {
    0% {opacity: 0; transform: scale(2, 2);}
    10% {opacity: 0; transform: scale(2, 2);}
    40% {opacity: 1; transform: scale(1, 1);}
    100% {opacity: 1; transform: scale(1, 1);}
}
@-webkit-keyframes image_breakin1 {
    0% {opacity: 0; transform: scale(2, 2);}
    10% {opacity: 0; transform: scale(2, 2);}
    40% {opacity: 1; transform: scale(1, 1);}
    100% {opacity: 1; transform: scale(1, 1);}
}
@-ms-keyframes image_breakin1 { 
    0% {opacity: 0; transform: scale(2, 2);}
    10% {opacity: 0; transform: scale(2, 2);}
    40% {opacity: 1; transform: scale(1, 1);}
    100% {opacity: 1; transform: scale(1, 1);}
}
.image_breakin2 {
	width: 720px;
	height: 500px;
    position: relative;
	top: -1530px;
	padding: 0px 0px -1530px 0px;
    background-repeat: no-repeat;
  animation: image_breakin2 3s; 
  animation-iteration-count: 1; 
  -webkit-animation: image_breakin2 3s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 1; 
  -ms-animation: image_breakin2 3s;
  -ms-animation-iteration-count: 1; 
}  
@keyframes image_breakin2 {
    0% {opacity: 0; transform: scale(2.5, 2.5);}
    40% {opacity: 0; transform: scale(2.5, 2.5);}
    100% {opacity: 1; transform: scale(1, 1);}
}
@-webkit-keyframes image_breakin2 {
    0% {opacity: 0; transform: scale(2.5, 2.5);}
    40% {opacity: 0; transform: scale(2.5, 2.5);}
    100% {opacity: 1; transform: scale(1, 1);}
}
@-ms-keyframes image_breakin2 { 
    0% {opacity: 0; transform: scale(2.5, 2.5);}
    40% {opacity: 0; transform: scale(2.5, 2.5);}
    100% {opacity: 1; transform: scale(1, 1);}
}
/* 画像が同じ大きさのままフェードイン効果 */
.image_fadein1 {
	width: 720px;
	height: 500px;
    position: relative;
	top: -1020px;
	padding: 0px 0px -1020px 0px;
    background-repeat: no-repeat;
  animation: image_fadein1 3s; 
  animation-iteration-count: 1; 
  -webkit-animation: image_fadein1 3s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 1; 
  -ms-animation: image_fadein1 3s;
  -ms-animation-iteration-count: 1; 
}  
@keyframes image_fadein1 {
    0% {opacity: 0;}
    40% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes image_fadein1 {
    0% {opacity: 0;}
    40% {opacity: 0;}
    100% {opacity: 1;}
}
@-ms-keyframes image_fadein1 { 
    0% {opacity: 0;}
    40% {opacity: 0;}
    100% {opacity: 1;}
}
.image_fadein2 {
	width: 720px;
	height: 500px;
    position: relative;
    top: -2040px;
	padding: 0px 0px -2040px 0px;
    background-repeat: no-repeat;
  animation: image_fadein2 3s; 
  animation-iteration-count: 1; 
  -webkit-animation: image_fadein2 3s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 1; 
  -ms-animation: image_fadein2 3s;
  -ms-animation-iteration-count: 1; 
}  
@keyframes image_fadein2 {
    0% {opacity: 0;}
    70% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes image_fadein2 {
    0% {opacity: 0;}
    70% {opacity: 0;}
    100% {opacity: 1;}
}
@-ms-keyframes image_fadein2 { 
    0% {opacity: 0;}
    70% {opacity: 0;}
    100% {opacity: 1;}
}
/* 201907セール用 720x500 終わり */


/* 201907セール用 1050x740 始まり */
/* 画像が２倍程度の大きさから収まる効果 */
.image_breakin3 {
	width: 1050px;
	height: 740px;
	position: relative;
	top: -750px;
	padding: 0px 0px -750px 0px;
    background-repeat: no-repeat;
  animation: image_breakin1 3s; 
  animation-iteration-count: 1; 
  -webkit-animation: image_breakin1 3s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 1; 
  -ms-animation: image_breakin1 3s;
  -ms-animation-iteration-count: 1; 
}  
@keyframes image_breakin1 {
    0% {opacity: 0; transform: scale(2, 2);}
    10% {opacity: 0; transform: scale(2, 2);}
    40% {opacity: 1; transform: scale(1, 1);}
    100% {opacity: 1; transform: scale(1, 1);}
}
@-webkit-keyframes image_breakin1 {
    0% {opacity: 0; transform: scale(2, 2);}
    10% {opacity: 0; transform: scale(2, 2);}
    40% {opacity: 1; transform: scale(1, 1);}
    100% {opacity: 1; transform: scale(1, 1);}
}
@-ms-keyframes image_breakin1 { 
    0% {opacity: 0; transform: scale(2, 2);}
    10% {opacity: 0; transform: scale(2, 2);}
    40% {opacity: 1; transform: scale(1, 1);}
    100% {opacity: 1; transform: scale(1, 1);}
}
.image_breakin4 {
	width: 1050px;
	height: 740px;
    position: relative;
	top: -2250px;
	padding: 0px 0px -2250px 0px;
    background-repeat: no-repeat;
  animation: image_breakin2 3s; 
  animation-iteration-count: 1; 
  -webkit-animation: image_breakin2 3s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 1; 
  -ms-animation: image_breakin2 3s;
  -ms-animation-iteration-count: 1; 
}  
@keyframes image_breakin2 {
    0% {opacity: 0; transform: scale(2.5, 2.5);}
    40% {opacity: 0; transform: scale(2.5, 2.5);}
    100% {opacity: 1; transform: scale(1, 1);}
}
@-webkit-keyframes image_breakin2 {
    0% {opacity: 0; transform: scale(2.5, 2.5);}
    40% {opacity: 0; transform: scale(2.5, 2.5);}
    100% {opacity: 1; transform: scale(1, 1);}
}
@-ms-keyframes image_breakin2 { 
    0% {opacity: 0; transform: scale(2.5, 2.5);}
    40% {opacity: 0; transform: scale(2.5, 2.5);}
    100% {opacity: 1; transform: scale(1, 1);}
}
/* 画像が同じ大きさのままフェードイン効果 */
.image_fadein3 {
	width: 1050px;
	height: 740px;
    position: relative;
	top: -1500px;
	padding: 0px 0px -1500px 0px;
    background-repeat: no-repeat;
  animation: image_fadein1 3s; 
  animation-iteration-count: 1; 
  -webkit-animation: image_fadein1 3s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 1; 
  -ms-animation: image_fadein1 3s;
  -ms-animation-iteration-count: 1; 
}  
@keyframes image_fadein1 {
    0% {opacity: 0;}
    40% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes image_fadein1 {
    0% {opacity: 0;}
    40% {opacity: 0;}
    100% {opacity: 1;}
}
@-ms-keyframes image_fadein1 { 
    0% {opacity: 0;}
    40% {opacity: 0;}
    100% {opacity: 1;}
}
.image_fadein4 {
	width: 1050px;
	height: 740px;
    position: relative;
    top: -3000px;
	padding: 0px 0px -3000px 0px;
    background-repeat: no-repeat;
  animation: image_fadein2 3s; 
  animation-iteration-count: 1; 
  -webkit-animation: image_fadein2 3s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 1; 
  -ms-animation: image_fadein2 3s;
  -ms-animation-iteration-count: 1; 
}  
@keyframes image_fadein2 {
    0% {opacity: 0;}
    70% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes image_fadein2 {
    0% {opacity: 0;}
    70% {opacity: 0;}
    100% {opacity: 1;}
}
@-ms-keyframes image_fadein2 { 
    0% {opacity: 0;}
    70% {opacity: 0;}
    100% {opacity: 1;}
}
/* 201907セール用 1050x740 終わり */








/* 背景画像をわざとはみ出させたときの、最初のリンク項目 */
.head_menu2 {
	position: relative;
	display:block;
	height: 80px;
	overflow: hidden;
	float: left;
	margin: 0px 0px 0px 1050px;
	background-repeat: no-repeat;
	z-index: 801;
}  

.head_menu2 a:hover img {
	margin: -80px 0px 0px 0px;
}

/* 背景画像をわざとはみ出させたときの、２番目以降のリンク項目 */
.head_menu3 {
	position: relative;
	display:block;
	height: 80px;
	overflow: hidden;
	float: left;
	margin: 0px 0px 0px 0px;
	background-repeat: no-repeat;
	z-index: 801;
}  

.head_menu3 a:hover img {
	margin: -80px 0px 0px 0px;
}
















#body_back {
	background-color: #FFFFFF;
	background-image: url(../images/20170220body_wood_white.png);
	background-size: 1050px 485px;
	background-image: url(../images/whitewool400x400.png);/* 冬用の白毛糸 */
	background-size: 400px 400px;
	background-image: url(../images/20160215body_shirt_white.png);/* 冬用の白毛糸 */
	background-size: 200px 200px;
	background-repeat: repeat;
	background-position: left top;
}
/* ふだんは20160215body_shirt_white */
/* ふだんはbackground-size: 200px 200px */


#body_back_wool {
	background-color: #FFFFFF;
	background-image: url(../images/whiteshirt400x400.png);/* 春用の白シャツ */
	background-size: 400px 400px;
	background-repeat: repeat;
	background-position: left top;
	z-index: 1;
}



#body_back_coffee {
	background-image: url(../images/hemp_cloth2.png);
	background-size: 500px 340px;
	background-repeat: repeat;
	background-position: left top;
	z-index: 1;
}

#body_back_tavola {
	background-color: #ffffff;
	background-size: 500px 340px;
	background-repeat: repeat;
	background-position: left top;
	z-index: 1;
}

.tavola_bodycopy {
	display: table-cell;
	width: 1050px;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	line-height: 1.6;
	vertical-align: middle;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
@media only screen and (max-width: 1200px) {
  .tavola_bodycopy br {
    display: none;
  }
  .tavola_bodycopy p {
	padding: 0px 0px 0px 0px;
  }
  .tavola_bodycopy {
	width: 80%;
	font-size: 1.3em;
	text-align: left;
	padding: 0px 0px 0px 0px;
  }
  .tavola_bodycopy img {
	width: 1050px;
	height: auto;
  }
}


.tavola_rotate {
  width: 318px;
  height: 257px;
  margin-bottom: 0;
  animation: tavola_rotate 16s linear infinite;
  transform-style: preserve-3d;
  font-size: 5em;
}
 
@keyframes tavola_rotate {
  0%   { transform: rotateY(0deg); }
  5%   { transform: rotateY(180deg); }
  50%   { transform: rotateY(180deg); }
  55% { transform: rotateY(360deg); }
  100% { transform: rotateY(360deg); }
}
 
.tavola_rotate_front, .tavola_rotate_back {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
 
.tavola_rotate_back {
  transform: rotateY(180deg);
}


.tavola_ray_mask1 {
  -webkit-animation: tavola_ray_mask1 11.1s ease-in 2.2s infinite;
  background-image: url(../images_shop_item/tavola_ray_green400x170.png);
  color: transparent;
}
@-webkit-keyframes tavola_ray_mask1 {
  0% {background-position: -90% 0;}
  100% {background-position: 100% 0;}
}

.tavola_ray_mask2 {
  -webkit-animation: tavola_ray_mask2 8.1s ease-in 2.3s infinite;
  background-image: url(../images_shop_item/tavola_ray_purple2100x590.png);
  color: transparent;
}
@-webkit-keyframes tavola_ray_mask2 {
  0% {background-position: 100% 0;}
  100% {background-position: -90% 0;}
}





.centering {
	margin: 0px 0px 0px -150px;
}






#body_back_wine {
	background-color: #504e4e;
	background-image: url(../images/gray_wine.png);
	background-size: 1200px 150px;
	background-repeat: repeat;
	background-position: left top;
	z-index: 1;
}

#body_back_tea {
	background-color: #c75002; /* 冬用 */
	background-color: #ddddff; /* 夏用 */
	background-image: url(../images/gingham440x440fullorange.png); /* 冬用 */
	background-image: url(../images/gingham440x440lightblue2.png); /* 夏用 */
	background-size: 440px 440px;
	background-repeat: repeat;
	background-position: left top;
	z-index: 1;
}


.side_menu {
	float: left;
	width: 240px;
	max-height: 100%;
	margin: 220px 0px 0px 30px;
	padding: 0px 0px 0px 0px;
	float: left;
}

.menu {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 3px 0px;
}

.menu_naname0 {
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 3px 0px;
transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
}

.menu_naname1 {
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 3px 0px;
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}

.menu_naname2 {
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 3px 0px;
transform: rotate(8deg);
-moz-transform: rotate(8deg);
-webkit-transform: rotate(8deg);
}


.menu_naname3 {
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 3px 0px;
transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
}

.menu_naname4 {
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 3px 0px;
transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
}

.menu_naname5 {
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
}


.side_menu2 {
	margin: 0px 0px 0px 30px;
	padding: 0px 0px 0px 0px;
	background-image: url(../images/top_boshu2.png);
}

.menu2 {
	margin: 0px 0px 0px 12px;
	padding: 0px 0px 3px 0px;
	font-size: 0.8em;
	letter-spacing: -1px
}

.side_menu3 {
	margin: 0px 0px 0px 30px;
	padding: 0px 0px 0px 0px;
	background-image: url(../images/top_boshu3.png);
}


.head_copy {
	float: right;
	max-height: 100%;
	width: 750px;
	margin:  63px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	z-index: 100;
}
.head_copy1050 {
	float: right;
	max-height: 100%;
	width: 1050px;
	margin:  63px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	z-index: 100;
}


#body_main {
	max-height: 100%;
	margin: -90px 30px 0 0;
	padding: 0;
	float: right;
	width: 720px;
}
#body_main950 {
	max-height: 100%;
	margin: -90px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	float: right;
	width: 950px;
}
#body_main720 {
	max-height: 100%;
	margin: -90px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	float: right;
	width: 720px;
}
#body_main_lineup {
	max-height: 100%;
	margin: -150px 0px 0px 170px;
	padding: 0px 0px 0px 0px;
	float: left;
	width: 1050px;
}
#body_main1050_with_logo { /* body_main始まり 本文幅1050 左上にロゴがある場合 */
	max-height: 100%;
	margin: -100px 0px 0px -300px;
	padding: 0px 0px 0px 0px;
	float: left;
	width: 1050px;
}
#body_main1050 { /* body_main始まり 本文幅1050 左上にロゴが無い場合 */
	max-height: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	float: left;
	width: 1050px;
}


.shop_title1050 {
	height: 200px;
	width: 1050px;
	margin: -100px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-image: url(../images_shop_item/shop1050x200earlysummer.png); /* 初夏用その１ */
	background-image: url(../images_shop_item/shop1050x200easter.png); /* イースター用 */
	background-image: url(../images_shop_item/shop1050x200check.png); /* 赤いチェック地の布とミル */
	background-image: url(../images_shop_item/shop1050x200pine.png); /* 初夏用その２ */
	background-image: url(../images_shop_item/shop1050x200c.png); /* 夏用 */
	background-image: url(../images_shop_item/shop1050x200iced_coffee2.png); /* アイスコーヒー用（日陰なし） */
	background-image: url(../images_shop_item/shop1050x200pine_cookies.png); /* パイン板とビスケット */
	background-image: url(../images_shop_item/shop1050x200woody.png); /* 冬向け天板用 */
	background-image: url(../images_shop_item/shop1050x200iced_coffee_noleaf.png); /* アイスコーヒー用（葉なし） */
	background-image: url(../images_shop_item/shop1050x200woodbrown_fall.png); /* 秋用 */
	background-image: url(../images_shop_item/shop1050x200christmas.png); /* クリスマス用 */
	background-image: url(../images_shop_item/shop1050x200woody.png); /* 冬向け天板用 */
	background-repeat: no-repeat; 
	color: #ffffff;
	line-height: 200%;
	z-index: 2;
}


.shop_title {
	height: 200px;
	width: 1050px;
	margin: -10px 0px 0px -300px;
	padding: 0px 0px 0px 0px;
	background-image: url(../images_shop_item/shop1050x200easter.png); /* イースター用 */
	background-image: url(../images_shop_item/shop1050x200check.png); /* 赤いチェック地の布とミル */
	background-image: url(../images_shop_item/shop1050x200c.png); /* 夏用 */
	background-image: url(../images_shop_item/shop1050x200pine_cookies.png); /* パイン板とビスケット */
	background-image: url(../images_shop_item/shop1050x200earlysummer.png); /* 初夏用その１ */
	background-image: url(../images_shop_item/shop1050x200pine.png); /* 初夏用その２ */
	background-image: url(../images_shop_item/shop1050x200iced_coffee2.png); /* アイスコーヒー用（日陰なし） */
	background-image: url(../images_shop_item/shop1050x200woodbrown_fall.png); /* 秋用 */
	background-image: url(../images_shop_item/shop1050x200christmas.png); /* クリスマス用 */
	background-image: url(../images_shop_item/shop1050x200woody.png); /* 冬向け天板用 */
    background-repeat: no-repeat; 
	color: #ffffff;
	line-height: 200%;
	z-index: 2;
}

/* アイスコーヒー用の葉がゆらぐ効果 */
.iced_coffee_leaf1 {
  background-repeat: no-repeat;
  animation: leaf1 45s; 
  animation-iteration-count: infinite; 
  -webkit-animation: leaf1 45s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: leaf1 45s;
  -ms-animation-iteration-count: infinite; 
}
@keyframes leaf1 {
    0% {opacity: 1; transform: translate(0px,0px) rotateZ(0deg) scaleZ(0);}
    50% {opacity: 1; transform: translate(2px,5px) rotateZ(10deg) scaleZ(5);}
    100% {opacity: 1; transform: translate(0px,0px) rotateZ(0deg) scaleZ(0);}
}
@-webkit-keyframes leaf1 {
    0% {opacity: 1; transform: translate(0px,0px) rotateZ(0deg) scaleZ(0);}
    50% {opacity: 1; transform: translate(2px,5px) rotateZ(10deg) scaleZ(5);}
    100% {opacity: 1; transform: translate(0px,0px) rotateZ(0deg) scaleZ(0);}
}
@-ms-keyframes leaf1 { 
    0% {opacity: 1; transform: translate(0px,0px) rotateZ(0deg) scaleZ(0);}
    50% {opacity: 1; transform: translate(2px,5px) rotateZ(10deg) scaleZ(5);}
    100% {opacity: 1; transform: translate(0px,0px) rotateZ(0deg) scaleZ(0);}
}
.iced_coffee_leaf2 {
  background-repeat: no-repeat;
  animation: leaf2 25s; 
  animation-iteration-count: infinite;
  -webkit-animation: leaf2 25s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: leaf2 25s;
  -ms-animation-iteration-count: infinite; 
}
@keyframes leaf2 {
    0% {opacity: 1; transform: translate(0px,0px);}
    45% {opacity: 1; transform: translate(2px,8px);}
    100% {opacity: 1; transform: translate(0px,0px);}
}
@-webkit-keyframes leaf2 {
    0% {opacity: 1; transform: translate(0px,0px);}
    45% {opacity: 1; transform: translate(2px,8px);}
    100% {opacity: 1; transform: translate(0px,0px);}
}
@-ms-keyframes leaf2 { 
    0% {opacity: 1; transform: translate(0px,0px);}
    45% {opacity: 1; transform: translate(2px,8px);}
    100% {opacity: 1; transform: translate(0px,0px);}
}
.iced_coffee_ray1 {
  background-repeat: no-repeat;
  animation: ray 18s; 
  animation-iteration-count: infinite;
  -webkit-animation: ray 18s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: ray 18s;
  -ms-animation-iteration-count: infinite; 
}
.iced_coffee_ray2 {
  background-repeat: no-repeat;
  animation: ray 16s; 
  animation-iteration-count: infinite;
  -webkit-animation: ray 16s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: ray 16s;
  -ms-animation-iteration-count: infinite; 
}
.iced_coffee_ray3 {
  background-repeat: no-repeat;
  animation: ray 4.8s; 
  animation-iteration-count: infinite;
  -webkit-animation: ray 4.8s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: ray 4.8s;
  -ms-animation-iteration-count: infinite; 
}
.iced_coffee_ray4 {
  background-repeat: no-repeat;
  animation: ray 6.5s; 
  animation-iteration-count: infinite;
  -webkit-animation: ray 6.5s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: ray 6.5s;
  -ms-animation-iteration-count: infinite; 
}
.iced_coffee_ray5 {
  background-repeat: no-repeat;
  animation: ray 12.1s; 
  animation-iteration-count: infinite;
  -webkit-animation: ray 12.1s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: ray 12.1s;
  -ms-animation-iteration-count: infinite; 
}
.iced_coffee_ray6 {
  background-repeat: no-repeat;
  animation: ray 9.9s; 
  animation-iteration-count: infinite;
  -webkit-animation: ray 9.9s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: ray 9.9s;
  -ms-animation-iteration-count: infinite; 
}
.iced_coffee_ray7 {
  background-repeat: no-repeat;
  animation: ray 17s; 
  animation-iteration-count: infinite;
  -webkit-animation: ray 17s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite; 
  -ms-animation: ray 17s;
  -ms-animation-iteration-count: infinite; 
}
@keyframes ray {
    0% {opacity: 0;}
    50% {opacity: 0.5;}
    100% {opacity: 0;}
}
@-webkit-keyframes ray {
    0% {opacity: 0;}
    50% {opacity: 0.5;}
    100% {opacity: 0;}
}
@-ms-keyframes ray { 
    0% {opacity: 0;}
    50% {opacity: 0.5;}
    100% {opacity: 0;}
}
















.shop_title_shadow {
	text-shadow: 2px 2px 4px #000000;
	text-shadow: 2px 2px 5px #000000,
    -2px 2px 5px #000000,
    2px -2px 5px #000000,
    -2px -2px 5px #000000;
}
/* (右距離) (下距離) (ぼかし具合) (影の色) */


.shop_title_shadow_white {
	text-shadow: 2px 2px 4px #ffffff;
	text-shadow: 2px 2px 3px #ffffff,
    -2px 2px 3px #ffffff,
    2px -2px 3px #ffffff,
    -2px -2px 3px #ffffff;
}
/* (右距離) (下距離) (ぼかし具合) (影の色) */









.ending_logo {
	text-align: center;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}




#foot_index {
	   height: auto;
	   padding: 20px 10px 20px 10px;
	   margin: 0px 0px -33px 0px;
	   text-align: center;
	   text-shadow: 0.1em 0.1em 5px #000000; /* 春用・秋用・冬用 */
	   letter-spacing: 0px;
	   color: #ffffff; /* 春用・秋用・冬用 */
	   background-image: url(../images/20160901footer2.png);
	   background-image: url(../images/footermenuback_halloween.png); /* ハロウィーン用 */
	   background-image: url(../images/footermenuback_halloween2.png); /* ハロウィーン用その２ */
	   background-image: url(../images/footermenuback_white.png); /* 夏用 */
	   background-image: url(../images/20170331footermenuback.png); /* 春用・秋用・冬用 */
	   font-size: 1.1em;
	}
#foot_index a {
	   text-decoration: none;
       line-height: 1.5;
    }
#foot_index  { color: #ffffff; } /* 春用・秋用・冬用・ハロウィン用 */
#foot_index a:link { color: #ffffff; } /* 春用・秋用・冬用・ハロウィン用 */
#foot_index a:visited { color: #ffffff; } /* 春用・秋用・冬用・ハロウィン用 */










#main_container {
	margin: 0px auto;
	padding: 0px;
	width: 1000px;
}

#main_container_btm {
	margin: 0px 0px 2px 0px;
	padding: 0px 0px 2px 0px;
	background-repeat: repeat;
}


#container {
background-color: #FFFFFF;
background-image: url(../images/20160215body_shirt_white.png);/* ふだんは20160215body_shirt_white */
background-size: 200px 200px;
background-repeat: repeat;
background-position: left top;
z-index: 1;
}

#container_coffee {
background-color: #FFFFFF;
background-image: url(../images/20160215body_asanuno.png);
background-size: 200px 200px;
background-repeat: repeat;
background-position: left top;
z-index: 1;
}

#container2 {
background-color: #FFFFFF;
background-image: url(../images/white_wool2.png);
background-repeat: repeat;
background-position: right top;
}



.shopinfo {
	float: left;
	margin: 0px 5px 5px 0px;
}

.shopinfo0 {
	float: left;
	margin: 0px 0px 0px 0px;
}

.clothred {
	background-color: #f5397a;
	float: left;
	margin: 0px 5px 5px 0px;
	background-image: url(../images/cloth_red.png);
	color: #ffffff;
	text-align: center;
	line-height: 120%;
	padding: 5px 0 0 0;;
	height: 55px;
	width: 235px;
}

.clothgreen {
	background-color: #33dc86;
	float: left;
	margin: 0px 5px 5px 0px;
	background-image: url(../images/cloth_green.png);
	color: #ffffff;
	text-align: center;
	line-height: 120%;
	padding: 5px 0 0 0;;
	height: 55px;
	width: 235px;
}

.clothblue {
	background-color: #2983eb;
	float: left;
	margin: 0px 5px 5px 0px;
	background-image: url(../images/cloth_blue.png);
	color: #ffffff;
	text-align: center;
	line-height: 120%;
	padding: 5px 0 0 0;;
	height: 55px;
	width: 235px;
}

.clothpurple {
	background-color: #dc31ea;
	float: left;
	margin: 0px 5px 5px 0px;
	background-image: url(../images/cloth_purple.png);
	color: #ffffff;
	text-align: center;
	line-height: 120%;
	padding: 5px 0 0 0;;
	height: 55px;
	width: 235px;
}

.clothyellow {
	background-color: #edef3d;
	float: left;
	margin: 0px 5px 5px 0px;
	background-image: url(../images/cloth_yellow.png);
	color: #333333;
	text-align: center;
	line-height: 120%;
	padding: 5px 0 0 0;;
	height: 55px;
	width: 235px;
}


.tea1 {
	float: left;
	padding: 5px 8px 0px 8px;
	width: 163px;
	height: 500px;
	line-height: 100%;
}

.tea11 {
	float: left;
	padding: 10px 10px 10px 10px;
	width: 220px;
	height: 600px;
	line-height: 130%;
	box-shadow:rgba(0, 0, 0, 0.4) 3px 3px 0px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.4) 3px 3px 0px 0px;
	-webkit-filter: dropshadow(3px 3px 0px 0px rgba(0, 0, 0, 0.4));
	-moz-box-shadow:rgba(0, 0, 0, 0.4) 3px 3px 0px 0px;
}
/* 影の指定は、右・下・左・上の順番 */
/* 影のrgbは0〜255で指定。影の透明度aは0〜1で指定 */

.tea12 {
	float: left;
	padding: 20px 25px 10px 25px;
	width: 300px;
	height: 550px;
	line-height: 130%;
	margin: 0px;
}

.tea13 {
	float: left;
	padding: -40px 0px 0px -50px;
	margin: -20px 0px -110px -25px;
	width: 170px;
	height: 110px;
	line-height: 100%;
}

.tea14 {
	float: top;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.tea2 {
	float: left;
	padding: 0px 10px 0px 20px;
	width: 500px;
	height: 500px;
	line-height: 130%;
}





.tea20 {
	font-size: 1.1em;
	float: left;
	padding: 20px 25px 10px 25px;
	width: 300px;
	height: 550px;
	line-height: 150%;
	margin: 0px;
}
@media only screen and (max-width: 1200px) {
  .tea20 {
	width: 80%;
	height: auto;
  	font-size: 1.3em;
	line-height: 1.8em;
	padding: 40px 60px 40px 60px;
	margin: 0px 40px 0px 20px;
  }
  .tea20 img {
	width: 100%;
	height: auto;
  }
  .tea20 br {
    display: none;
  }
  .tea20 p {
	padding: 25px 0px 15px 0px;
  }
}


.tea21 {
	float: left;
	padding: 20px 25px 10px 25px;
	width: 300px;
	height: 550px;
	line-height: 130%;
	margin: 0px;
}
@media only screen and (max-width: 1200px) {
  .tea21 {
	width: 80%;
	height: auto;
  	font-size: 1.3em;
	line-height: 1.8em;
	padding: 40px 60px 40px 60px;
	margin: 0px 40px 0px 20px;
  }
  .tea21 img {
	width: 50%;
	height: auto;
  }
  .tea21 br {
    display: none;
  }
  .tea21 p {
	padding: 25px 0px 15px 0px;
  }
}


.tea22 {
	font-size: 1.1em;
	float: left;
	padding: 15px 40px 15px 40px;
	width: 620px;
	height: 550px;
	background-color: #fff3bc;
	line-height: 1.5em;
}
  .tea22 p {
	padding: 15px 0px 0px 0px;
  }
@media only screen and (max-width: 1200px) {
  .tea22 {
	width: 80%;
	height: auto;
  	font-size: 1.3em;
	line-height: 1.8em;
	padding: 40px 60px 40px 60px;
	margin: 0px 40px 0px 20px;
  }
  .tea22 img {
	width: 100%;
	height: auto;
  }
  .tea22 br {
    display: none;
  }
  .tea22 p {
	padding: 25px 0px 15px 0px;
  }
}







.tea3 {
	float: left;
	padding: 20px 20px 0px 20px;
	width: 200px;
	height: 500px;
	line-height: 120%;
}

.tea4 {
	float: left;
	padding: 15px 8px 0px 8px;
	width: 163px;
	height: 500px;
	line-height: 100%;
}

.tea5 {
	float: left;
	padding: 0px 8px 0px 8px;
	width: 163px;
	height: 500px;
	line-height: 100%;
}

.clearfix:before, .clearfix:after {
    content:"";
    display:table
}
.clearfix:after { clear:both }
.clearfix { zoom:1 } /* For IE 6/7 */



.pasta {
	display: table;
	background-color: #fec8c8;
	padding: 35px 35px 20px 20px;
	height: 400px;
	width: 665px;
}


.oil {
	display: table;
	background-color: #f1fd9c;
	padding: 20px 35px 20px 20px;
	height: 400px;
	width: 665px;
}

.cocoa {
	display: table;
	background-color: #fdcebf;
	padding: 20px 35px 20px 20px;
	height: 400px;
	width: 665px;
}

.red {
	display: table;
	background-color: #ffcccc;
	padding: 20px 35px 20px 20px;
	height: 360px;
	width: 665px;
}

.yellow {
	display: table;
	background-color: #ffff99;
	padding: 20px 35px 20px 20px;
	height: 360px;
	width: 665px;
}

.green {
	display: table;
	background-color: #ccffcc;
	padding: 20px 35px 20px 20px;
	height: 360px;
	width: 665px;
}

.blue {
	display: table;
	background-color: #ccccff;
	padding: 20px 35px 20px 20px;
	height: 360px;
	width: 665px;
}




/* ワインのななめリボン（始まり） */

.side-corner-tag {
    position: relative;
    color: #ff0000;
    display: inline-block;
    padding: 5px;
    overflow: hidden;
} 
 
.side-corner-tag p {
    display: inline;    
}


.side-corner-tag p span {
    position: absolute;
    display: inline-block;
    left: -25px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
    text-align: center;
    text-transform: uppercase;
    top: 22px;
    background: #ffff00;
    width: 100px;
    padding: 3px 10px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}


.side-corner-tag p:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -17px;
    left: -69px;
    z-index: -1;
    border: 17px solid;
    border-color: transparent transparent #666600 transparent;
}
 
.side-corner-tag p:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -74px;
    z-index: -1;
    left: -10px;
    border: 17px solid;
    border-color: #666600 transparent transparent transparent;
}

/* ワインのななめリボン（終わり） */


.lightbody {
	background-color: #fd6a78;
	padding: 20px 20px 20px 40px;
	height: 400px;
}

.midbody {
	background-color: #ce2939;
	padding: 20px 20px 20px 40px;
	height: 400px;
}

.fullbody {
	background-color: #70050f;
	padding: 20px 20px 20px 40px;
	height: 400px;
}

.whitewine1 {
	background-color: #fbf8c9;
	padding: 20px 20px 20px 40px;
	height: 400px;
}

.whitewine2 {
	background-color: #e9fcae;
	padding: 20px 20px 20px 40px;
	height: 400px;
}

.sparkling {
	background-color: #fcfdd0;
	padding: 20px 20px 20px 40px;
	height: 400px;
}

img .hidari {
float:left;
}




.column_lightred {
	background-color: #fedbdb;
	padding: 30px 60px 30px 120px;
	margin: 4px 40px 40px 40px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}

.column_lightyellow {
	font-size: 1.1em;
	width: 700px;
	margin: 0px 0px 0px 120px;
	background-color: #fafdaf;
	padding: 30px 30px 30px 30px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}
.column_lightblue {
	font-size: 1.1em;
	width: 700px;
	margin: 0px 0px 0px 120px;
	background-color: #ededfd;
	padding: 40px 60px 40px 60px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}




.column_lightred600 {
	font-size: 1.1em;
	width: 700px;
	margin: 0px 0px 0px 120px;
	background-color: #ffdddd;
	padding: 40px 60px 40px 60px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}
@media only screen and (max-width: 1200px) {
  .column_lightred600 {
	width: 90%;
  	font-size: 1.3em;
	line-height: 1.6;
	padding: 40px 30px 40px 30px;
	margin: 0px 20px 0px 20px;
  }
  .column_lightred600 br {
    display: none;
  }
  .column_lightred600 center {
    display: none;
  }
  .column_lightred600 p {
	line-height: 1.4;
  }
	.column_lightred600 img {
	width: 90%;
    height: auto;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-align: center;
	display:block;
	}
}

.column_lightyellow600 {
	font-size: 1.1em;
	width: 700px;
	margin: 0px 0px 0px 120px;
	background-color: #ffffdd;
	padding: 40px 60px 40px 60px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}
@media only screen and (max-width: 1200px) {
  .column_lightyellow600 {
	width: 90%;
  	font-size: 1.3em;
	line-height: 1.6;
	padding: 40px 30px 40px 30px;
	margin: 0px 20px 0px 20px;
  }
  .column_lightyellow600 center {
    display: none;
  }
  .column_lightyellow600 br {
    display: none;
  }
  .column_lightyellow600 p {
	line-height: 1.4;
  }
	.column_lightyellow600 img {
	width: 90%;
    height: auto;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-align: center;
	display:block;
	}
}






.column_lightblue600 {
	font-size: 1.1em;
	width: 700px;
	margin: 0px 0px 0px 120px;
	background-color: #eeeeff;
	padding: 40px 60px 40px 60px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}
@media only screen and (max-width: 1200px) {
  .column_lightblue600 {
	width: 90%;
  	font-size: 1.3em;
	line-height: 1.6;
	padding: 40px 30px 40px 30px;
	margin: 0px 20px 0px 20px;
  }
  .column_lightblue600 center {
    display: none;
  }
  .column_lightblue600 br {
    display: none;
  }
  .column_lightblue600 p {
	line-height: 1.4;
  }
	.column_lightblue600 img {
	width: 90%;
    height: auto;
	padding: 20px 30px 20px 30px;
	margin: 0px 0px 0px 0px;
	text-align: center;
	display:block;
	}
}

.column_lightwhite600 {
	font-size: 1.1em;
	width: 700px;
	margin: 0px 0px 0px 120px;
	background-color: #ffffff;
	padding: 40px 60px 40px 60px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}
@media only screen and (max-width: 1200px) {
  .column_lightwhite600 {
	width: 90%;
  	font-size: 1.3em;
	line-height: 1.6;
	padding: 40px 30px 40px 30px;
	margin: 0px 20px 0px 20px;
  }
  .column_lightwhite600 center {
    display: none;
  }
  .column_lightwhite600 br {
    display: none;
  }
  .column_lightwhite600 p {
	line-height: 1.4;
  }
	.column_lightwhite600 img {
	width: 90%;
    height: auto;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-align: center;
	display:block;
	}
}

.column_lightwhite980 {
	font-size: 1.1em;
	width: 900px;
	margin: 0px 50px 0px 50px;
	background-color: #ffffff;
	padding: 40px 20px 40px 20px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}
@media only screen and (max-width: 1200px) {
  .column_lightwhite980 {
	width: 90%;
  	font-size: 1.3em;
	line-height: 1.6;
	padding: 40px 40px 40px 40px;
	margin: 0px 20px 0px 20px;
  }
  .column_lightwhite980 br {
    display: none;
  }
  .column_lightwhite980 p {
	line-height: 1.4;
  }
	.column_lightwhite980 img {
	width: 45%;
    height: auto;
	text-align: center;
	display:block;
	}
}

.column_lightred450 {
	font-size: 1.1em;
	width: 450px;
	margin: 0px 245px 0px 245px;
	background-color: #ffdddd;
	padding: 40px 60px 40px 60px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}
@media only screen and (max-width: 1200px) {
  .column_lightred450 {
	width: 90%;
  	font-size: 1.3em;
	line-height: 1.6;
	padding: 40px 40px 40px 40px;
	margin: 0px 20px 0px 20px;
   }
  .column_lightred450 br {
    display: none;
  }
  .column_lightred450 p {
	padding: 10px 0px 10px 0px;
	line-height: 1.4;
  }
	.column_lightred450 img {
	width: 90%;
    height: auto;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-align: center;
	display:block;
	}
}



.column_450a {
	font-size: 1.1em;
	width: 400px;
	margin: 0px 0px 0px 30px;
	background-color: #fffebb;
	padding: 40px 60px 40px 60px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}
@media only screen and (max-width: 1200px) {
  .column_450a {
	width: 90%;
  	font-size: 1.3em;
	line-height: 1.6;
	padding: 40px 30px 40px 30px;
	margin: 0px 20px 0px 20px;
  }
  .column_450a br {
    display: none;
  }
  .column_yellow450_a p {
	padding: 10px 0px 10px 0px;
	line-height: 1.4;
  }
	.column_450a img {
	width: 90%;
    height: auto;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-align: center;
	display:block;
	}
}


.column_450b {
	font-size: 1.1em;
	width: 400px;
	margin: -300px 0px 0px 500px;
	background-color: #ffdddd;
	padding: 40px 60px 40px 60px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}
@media only screen and (max-width: 1200px) {
  .column_450b {
	width: 90%;
  	font-size: 1.3em;
	line-height: 1.6;
	padding: 40px 30px 40px 30px;
	margin: 0px 20px 0px 20px;
  }
  .column_450b br {
    display: none;
  }
  .column_yellow450_b p {
	padding: 10px 0px 10px 0px;
	line-height: 1.4;
  }
	.column_450b img {
	width: 90%;
    height: auto;
	text-align: center;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-align: center;
	display:block;
	}
}

.column_450c {
	font-size: 1.1em;
	width: 400px;
	margin: -20px 0px 0px 70px;
	background-color: #ffccdd;
	padding: 40px 60px 40px 60px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}
@media only screen and (max-width: 1200px) {
  .column_450c {
	width: 90%;
  	font-size: 1.3em;
	line-height: 1.6;
	padding: 40px 30px 40px 30px;
	margin: 0px 20px 0px 20px;
  }
  .column_450c br {
    display: none;
  }
  .column_450c p {
	padding: 10px 0px 10px 0px;
	line-height: 1.4;
  }
	.column_450c img {
	width: 90%;
    height: auto;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-align: center;
	display:block;
	}
}


.column_450d {
	font-size: 1.1em;
	width: 300px;
	margin: -250px 0px 0px 570px;
	background-color: #ffd9ee;
	padding: 40px 60px 40px 60px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}
@media only screen and (max-width: 1200px) {
  .column_450d {
	width: 90%;
  	font-size: 1.3em;
	line-height: 1.6;
	padding: 40px 30px 40px 30px;
	margin: 0px 20px 0px 20px;
  }
  .column_450d br {
    display: none;
  }
  .column_450d p {
	padding: 10px 0px 10px 0px;
	line-height: 1.4;
  }
	.column_450d img {
	width: 90%;
    height: auto;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-align: center;
	display:block;
	}
}

.column_450e {
	font-size: 1.1em;
	width: 350px;
	margin: -10px 0px 0px 50px;
	background-color: #ccffcc;
	padding: 40px 60px 40px 60px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}
@media only screen and (max-width: 1200px) {
  .column_450e {
	width: 90%;
  	font-size: 1.3em;
	line-height: 1.6;
	padding: 40px 30px 40px 30px;
	margin: 0px 20px 0px 20px;
  }
  .column_450e br {
    display: none;
  }
  .column_450e p {
	padding: 10px 0px 10px 0px;
	line-height: 1.4;
  }
	.column_450e img {
	width: 90%;
    height: auto;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-align: center;
	display:block;
	}
}

.column_450f {
	font-size: 1.1em;
	width: 400px;
	margin: -450px 0px 0px 480px;
	background-color: #b7f3fe;
	padding: 40px 60px 40px 60px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}
@media only screen and (max-width: 1200px) {
  .column_450f {
	width: 90%;
  	font-size: 1.3em;
	line-height: 1.6;
	padding: 40px 30px 40px 30px;
	margin: 0px 20px 0px 20px;
  }
  .column_450f br {
    display: none;
  }
  .column_450f p {
	padding: 10px 0px 10px 0px;
	line-height: 1.4;
  }
	.column_450f img {
	width: 90%;
    height: auto;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-align: center;
	display:block;
	}
}

.column_450g {
	font-size: 1.1em;
	width: 700px;
	margin: -15px 0px 100px 110px;
	background-color: #fffd73;
	padding: 40px 60px 40px 60px;
	border-radius: 70px;        /* CSS3草案 */  
    -webkit-border-radius: 70px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 70px;   /* Firefox用 */  
}
@media only screen and (max-width: 1200px) {
  .column_450g {
	width: 90%;
  	font-size: 1.3em;
	line-height: 1.6;
	padding: 40px 30px 40px 30px;
	margin: 0px 20px 0px 20px;
  }
  .column_450g br {
    display: none;
  }
  .column_450g p {
	padding: 10px 0px 10px 0px;
	line-height: 1.4;
  }
	.column_450g img {
	width: 90%;
    height: auto;
	text-align: center;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	text-align: center;
	display:block;
	}
}




.column_nocolor720 {
	font-size: 1.1em;
	line-height: 1.6;
	width: 700px;
	margin: 0px 100px 0px 100px;
	padding: 0px 0px 0px 0px;
}
@media only screen and (max-width: 1200px) {
  .column_nocolor720 {
	width: 95%;
  	font-size: 1.3em;
	line-height: 1.6;
	padding: 0px 0px 0px 0px;
	margin: 20px 40px 20px 20px;
  }
  .column_nocolor br {
    display: none;
  }
  .column_nocolor720 p {
	line-height: 1.4;
  }
	.column_nocolor720 img {
	width: 90%;
    height: auto;
	text-align: center;
	text-align: center;
	display:block;
	}
}


.column_img {
	max-width: 100%;
    height: auto;
	text-align: center;
	margin: 30px 170px 0px 170px;
	text-align: center;
	display:block;
}
@media only screen and (max-width: 1200px) {
	.column_img img {
	min-width: 100%;
	}
}


.image45 img {
	max-width: 100%;
    height: auto;
	text-align: center;
	text-align: center;
	display:block;
}
@media only screen and (max-width: 1200px) {
	.image45 img {
	width: 45%;
	}
}






.coffeebeans_character {
	width: 720px;
    height: 115px;
	text-align: center;
	margin: 0px 0px 20px 170px;
	text-align: center;
	display:block;
}
@media only screen and (max-width: 1200px) {
	.coffeebeans_character {
	width: 95%;
    height: auto;
	text-align: center;
	margin: 0px 20px 15px 25px;
	text-align: center;
	display:block;
	}
}

.coffeebeans_character870 {
	width: 870px;
    height: 115px;
	text-align: center;
	margin: 0px 0px 20px 95px;
	text-align: center;
	display:block;
}
@media only screen and (max-width: 1200px) {
	.coffeebeans_character870 {
	width: 95%;
    height: auto;
	text-align: center;
	margin: 0px 20px 15px 25px;
	text-align: center;
	display:block;
	}
}














#header {
	padding: 0px 0px 0px 0px;
	margin: 0px 20px 0px 0px;
}







.header_logo_pasta {
	position: absolute;
	float: left;
	z-index: 999;
	margin: -3px 0px 0px -45px;
}

.header_logo_easter {
	position: absolute;
	float: left;
	z-index: 999;
	margin: -3px 0px 0px -45px;
}

.header_logo_chocolate {
	position: absolute;
	float: left;
	z-index: 999;
	margin: -3px 0px 30px -45px;
}

.header_logo_icedcoffee {
	position: absolute;
	float: left;
	z-index: 999;
	margin: -3px 0px 0px -45px;
}

.header_logo_coffeemill {
	position: absolute;
	float: left;
	z-index: 999;
	margin: -3px 0px 0px -45px;
}

.header_logo_coffeemill2 {
	position: absolute;
	float: left;
	z-index: 999;
	margin: -3px 0px 0px -45px;
}

.header_logo_animated {
	position: absolute;
	float: left;
	z-index: 999;
	margin: -3px 0px 0px -45px;
}

.header_logo_animated_halloween {
	position: absolute;
	float: left;
	z-index: 999;
	margin: -3px 0px 0px -5px;
}

.header_logo_wine {
	position: absolute;
	float: left;
	z-index: 999;
	margin: -3px 0px 0px -45px;
}

.header_logo_aulait {
	position: absolute;
	float: left;
	z-index: 999;
	margin: -3px 0px 30px -20px;
}

.header_logo_christmas {
	position: absolute;
	float: left;
	z-index: 999;
	margin: 0px 0px 60px -10px;
	top: 13px;
}

.header_logo_tea {
	position: absolute;
	float: left;
	z-index: 999;
	margin: -10px 0px 30px -20px;

}

.header_logo_halloween {
	position: absolute;
	float: left;
	z-index: 999;
	margin: 0px 0px 0px -15px;
}

.header_logo {
	position: absolute;
	float: left;
	z-index: 999;
	margin: 0px 0px 0px 0px;
}

.header_logo_coffeemill_sp {
	position: absolute;
	z-index: 999;
}

.copy{
	padding: 0px 0px 0px 0px;
              font-size: 96%;
	height: 55px;
}




.navi_utility_usual {
	position: fixed;
	width: 1000px;
	font-size:0.85em;
	color: #ffffff;
	letter-spacing: 0px;
	text-align: right;
	height: 30px;
	padding: 15px 0px 0px 0px;
	z-index: 800;
	background: #ffbb77;
	background: url(../images/navi_uti_usual.png);

}

.navi_utility_usual a {
	text-decoration: none;
}
.navi_utility_usual :hover {
	text-decoration: underline;
}



.navi_utility2 {
	position: fixed;
	width: 1000px;
	font-size:0.85em;
	color: #ffffff;
	letter-spacing: 0px;
	text-align: right;
	height: 30px;
	padding: 15px 0px 0px 0px;
	z-index: 800;
	background: #ffbb77;
	background: url(../images/navi_uti.png);

}

.navi_utility2 a {
	text-decoration: none;
}
.navi_utility2 :hover {
	text-decoration: underline;
}




/* ヘッダー背景指定（通常はheight:30px 企画時60pxまで） */
/* ヘッダー背景指定（通常はbackground:url(../images/20160901header.png) */
.navi_utility {
	position: fixed;
	width: 1000px;
	font-size:0.85em;
	color: #ffffff;
	letter-spacing: 0px;
	text-align: right;
	text-shadow: 0.1em 0.1em 6px #000000;
	height: 30px;
	padding: 15px 0px 0px 0px;
	z-index: 800;
	background: #ffbb77;
	background: url(../images/20160901header.png);
}



.navi_utility a {
	text-decoration: none;
}
.navi_utility :hover {
	text-decoration: underline;
}

.navi_utility a:link { color: #ffffff; }
.navi_utility a:visited { color: #ffffff; }
.navi_utility a:hover { color: #ffff00; }
.navi_utility a:active { color: #ffff00; }













.top_navi {
	float: right;
	height: 95px;
	width: 720px;
	margin:  20px 0px 0px 0px;
	padding: 30px 0px 0px 0px;
	z-index: 100;
}


.top_navi_flex {
	float: right;
	height: 0px;
	width: 0px;
	margin:  20px 0px 0px 0px;
	padding: 30px 0px 0px 0px;
	z-index: 100;
}


.header_navi {
	margin: 55px 0px -10px 0px; 
}

.header_navi2 {
	margin: -105px 0px -10px 0px; 
}

.header_navi a { color: #377411; }


#globalNavi {
	margin: 0px 0px 25px 0px;
	float: left;
	margin: 0 auto;
	padding: 3px 0 0px;
}

#globalNavi ul {
	list-style-type: none;
	margin: 0px auto;
}

#globalNavi .NavItem {
	float: left;
	margin-right: 5px;
}

#globalNavi .NavItem1 {
	width: 173px;
	margin-bottom: 3px;
}

#globalNavi3 .NavItem1 {
	width: 173px;
	margin-bottom: 0px;
}

#globalNavi .NavItem_end { float: left; }

/* flash_div */ 
.flash_visual {
	margin: 0px 0px 20px ;
	padding: 0px;
}
.main_visual {
	margin: 0px;
	padding: 0px;
}

/* content */
#container_head {
	margin: 0px;
	padding: 0px;
}

.content_head {
	margin: 0px;
	padding: 5px;
}

#content_top {
	margin: 0px;
	padding: 0px 20px;
}

/*======================================

	3-6.main_comtents
	
=======================================*/ 
#main_contents {
	max-height: 100%;
	margin: 0px 0px 0px 15px;
	padding: 0px;
	float: right;
}


.ribon960 {
	height: 180px;
	width: 960px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background-image: url(../images/ribon960x180.png);
	background-repeat: no-repeat; 
	z-index: -1;
}


.textpadding {
	padding: 0px 0px 0px 0px;
	line-height: 180%;
}

.textmiddle {
	vertical-align: middle;
}







.beans0 {
	height: 100px;
	width: 10px;
	line-height: 140%;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	text-align: left;
	z-index: -1;
}
.beans1 {
	height: 100px;
	width: 35px;
	line-height: 140%;
	float : left;
	margin: 0px 0px 20px -35px;
	padding: 0px 0px 0px 0px;
	text-align: center;
	z-index: -1;
}
.beans2 {
	height: 100px;
	width: 145px;
	line-height: 140%;
	float : left;
	top: 50%;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	text-align: center;
	z-index: -1;
}
.beans3 {
	height: 100px;
	width: 65px;
	line-height: 140%;
	float : left;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	text-align: center;
	z-index: -1;
}
.beans4 {
	height: 100px;
	width: 315px;
	line-height: 140%;
	float : left;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	text-align: center;
	z-index: -1;
}
#beans_color0 {
	background-color: #dbdbda;
}
#beans_color1 {
	background-color: #d7fef6;
}

.beans1 p {
  display: block;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.beans2 p {
  display: block;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.beans3 p {
  display: block;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.beans4 p {
  display: block;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}










/* 店舗情報（shoplist）【冬用】毛糸テクスチャ */
.shoplist01 {
	height: 140px;
	width: 240px;
	line-height: 140%;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #ffbe75;
	background-image: url(../images/wool-orange-light.png);
	text-align: center;
	z-index: -1;
	box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);
}
.shoplist02 {
	height: 140px;
	width: 360px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f1f3b3;
	background-image: url(../images/wool-green-light.png);
	z-index: -1;
	box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);
}
.shoplist03 {
	height: 140px;
	width: 114px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f9f4a0;
	background-image: url(../images/wool-yellow-light.png);
	z-index: -1;
	box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);
}


.shoplist012 {
	height: 140px;
	width: 240px;
	line-height: 140%;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #ffbe75;
	background-image: url(../images/wool-orange-light.png);
	text-align: center;
	z-index: -1;
	box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);
}
.shoplist022 {
	height: 140px;
	width: 360px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f1f3b3;
	background-image: url(../images/wool-green-light.png);
	z-index: -1;
	box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);
}
.shoplist032 {
	height: 140px;
	width: 114px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f9f4a0;
	background-image: url(../images/wool-yellow-light.png);
	z-index: -1;
	box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);
}


.shoplist013 {
	height: 140px;
	width: 240px;
	line-height: 140%;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #ffbe75;
	background-image: url(../images/wool-orange-light.png);
	text-align: center;
	z-index: -1;
	box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);
}
.shoplist023 {
	height: 140px;
	width: 360px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f1f3b3;
	background-image: url(../images/wool-green-light.png);
	z-index: -1;
	box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);
}
.shoplist033 {
	height: 140px;
	width: 114px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f9f4a0;
	background-image: url(../images/wool-yellow-light.png);
	z-index: -1;
	box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);
}

.shoplist014 {
	height: 140px;
	width: 240px;
	line-height: 140%;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #ffbe75;
	background-image: url(../images/wool-orange-light.png);
	text-align: center;
	z-index: -1;
	box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);
}
.shoplist024 {
	height: 140px;
	width: 360px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f1f3b3;
	background-image: url(../images/wool-green-light.png);
	z-index: -1;
	box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);
}
.shoplist034 {
	height: 140px;
	width: 114px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f9f4a0;
	background-image: url(../images/wool-yellow-light.png);
	z-index: -1;
	box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.3);
}
/* 店舗情報（shoplist）【冬用】毛糸テクスチャ　終わり */











/* 店舗情報（shoplist）【春夏秋用】板テクスチャ */
.shoplist01 {
	height: 140px;
	width: 240px;
	line-height: 140%;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #ffbe75;
	background-image: url(../images/wood-orange-light.png);
	text-align: center;
	z-index: -1;
	box-shadow:3px 3px 10px;
}
.shoplist02 {
	height: 140px;
	width: 360px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f1f3b3;
	background-image: url(../images/wood-green-light.png);
	z-index: -1;
	box-shadow:3px 3px 10px;
}
.shoplist03 {
	height: 140px;
	width: 114px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f9f4a0;
	background-image: url(../images/wood-yellow-light.png);
	z-index: -1;
	box-shadow:3px 3px 10px;
}


.shoplist012 {
	height: 140px;
	width: 240px;
	line-height: 140%;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #ffbe75;
	background-image: url(../images/wood-orange-light2.png);
	text-align: center;
	z-index: -1;
	box-shadow:3px 3px 10px;
}
.shoplist022 {
	height: 140px;
	width: 360px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f1f3b3;
	background-image: url(../images/wood-green-light2.png);
	z-index: -1;
	box-shadow:3px 3px 10px;
}
.shoplist032 {
	height: 140px;
	width: 114px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f9f4a0;
	background-image: url(../images/wood-yellow-light2.png);
	z-index: -1;
	box-shadow:3px 3px 10px;
}


.shoplist013 {
	height: 140px;
	width: 240px;
	line-height: 140%;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #ffbe75;
	background-image: url(../images/wood-orange-light3.png);
	text-align: center;
	z-index: -1;
	box-shadow:3px 3px 10px;
}
.shoplist023 {
	height: 140px;
	width: 360px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f1f3b3;
	background-image: url(../images/wood-green-light3.png);
	z-index: -1;
	box-shadow:3px 3px 10px;
}
.shoplist033 {
	height: 140px;
	width: 114px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f9f4a0;
	background-image: url(../images/wood-yellow-light3.png);
	z-index: -1;
	box-shadow:3px 3px 10px;
}

.shoplist014 {
	height: 140px;
	width: 240px;
	line-height: 140%;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #ffbe75;
	background-image: url(../images/wood-orange-light4.png);
	text-align: center;
	z-index: -1;
	box-shadow:3px 3px 10px;
}
.shoplist024 {
	height: 140px;
	width: 360px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f1f3b3;
	background-image: url(../images/wood-green-light4.png);
	z-index: -1;
	box-shadow:3px 3px 10px;
}
.shoplist034 {
	height: 140px;
	width: 114px;
	float : left ;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	background-color: #f9f4a0;
	background-image: url(../images/wood-yellow-light4.png);
	z-index: -1;
	box-shadow:3px 3px 10px;
}
/* 店舗情報（shoplist）【春夏秋用】板テクスチャ　終わり */










#content {
	max-height: 100%;
	margin: 0px;
	width: 720px;
}

#content650 {
	max-height: 100%;
	margin: 0px;
	width: 650px;
}

#main_contents2 {
	margin: 0px 15px 0px 15px;
	padding: 0px;
	float: right;
}

#content2 {
	max-height: 100%;
	margin: 0px;
	width: 780px;
}

#content3 {
	max-height: 100%;
	margin: 0px;
	width: 930px;
}

#content_info {
	margin: 0px;
	width: 580px;
	float: left;
}

#center_contents {
	padding: 0px;
	margin: 0px;
}

.center_contents_head {
	margin: 0px 0px 10px;
	font-size: 130%;
	color: #377411;
	height: 35px;
	background: center;
	padding-left: 10px;
}

.contents_head {
	margin: 0px 0px 5px;
	color: #377411;
	height: 27px;
	background: center;
	background: url(../images/bg_head_sub.jpg);
	padding: 3px 0px 0px 5px;
}

.contents_head_shop { background: url(../images/title_shop.jpg); }
.contents_head_lineup { background: url(../images/title_lineup.jpg); }
.contents_head_topic { background: url(../images/title_topic.jpg); }
.contents_head_recruite { background: url(../images/title_recruite.jpg); }
.contents_head_contact { background: url(../images/title_contact.jpg); }
.contents_head_bg { background: url(../images/bg_head.jpg); }
.contents_headsub_bg { background: url(../images/bg_head_sub.jpg); }
.contents_head2_bg { background: url(../images/bg_head2.jpg); }


.contents_head_store01 { background: url(../images/title_store01.jpg); }
.contents_head_store02 { background: url(../images/title_store02.jpg); }
.contents_head_wine { background: url(../images/title_wine.jpg); }
.contents_head_straight { background: url(../images/title_straight.jpg); }
.contents_head_brend { background: url(../images/title_brend.jpg); }
.contents_head_food { background: url(../images/title_food.jpg); }
.contents_head_tea { background: url(../images/title_tea.jpg); }

.contents_head_company { background: url(../images/title_company.jpg); }
.contents_head_privacypolicy { background: url(../images/title_privacypolicy.jpg); }
.contents_head_sitemap { background: url(../images/title_sitemap.jpg); }




.center_contents {
	padding: 0px;
	margin: 0px 0px 20px 0px;
}

.center_contents_bottom {
	margin: 0px;
	padding: 5px;
}

.00headtitle {
	background-color: #CCCCCC;
	color: #FFFFFF;
	padding: 5px;
}

.column_body { margin: 0px 0px 10px 0px; }

.column_img {
	float: right;
	border: 1px dotted #CCCCCC;
	padding: 5px;
}

.column { float: left; }

.column_title {
	padding: 0px;
	margin: 0px;
	color: #3E72A1;
	border-bottom: 1px solid #3E72A1;
	font-size: 130%;
	letter-spacing: 0.5em;
}

.column_text {
	padding: 3px;
	margin: 0px 0px 4px;
	letter-spacing: -1px;
}

.column_text_shoplist {
	padding: 3px;
	margin: 300px 0px 4px;
	letter-spacing: -2px;
}

.column_text_shoplist_new {
	padding: 3px;
	margin: 0px 0px 0px;
	letter-spacing: 0px;
}

.column_text_att {
	background-color: #FFFFFF;
	padding: 5px;
	font-size: 90%;
}


.column_top_body {
	padding: 3px;
	margin: 10px 0px 10px 0px;
	border: 1px solid #326799;
}

.column_top_img {
	float: left;
	border-right: 1px dotted #326799;
	padding-right: 10px;
	padding-left: 10px;
}

.column_top {
	padding: 0px 0px 0px 5px;
	float: left;
	margin: 0px 0px 0px 5px;
	color: #326799;
}

/*======================================

	div#sub
	
=======================================*/

#sub_contents {
	padding: 0px;
	float: right;
	width: 190px;
}

strong { font-size: 110%; }

/*======================================

	3-6.div#footer
	
=======================================*/

#footer2 {
	padding: 10px 20px 10px;
	color: #000000;
	font-size: 90%;
	letter-spacing: 0px;
	background: #ffffff;
	background-image: url(../images/footer_uti.png);
}

.footer_navi2 a {
	text-decoration: none;
}
.footer_navi2 :hover {
	text-decoration: underline;
}


/* フッター背景指定（通常はbackground-image: url(../images/20160901footer.png) */
#footer {
	height: 70px;
	padding: 5px 20px 0px 20px;
	font-color: #ffffff;
	text-shadow: 0.1em 0.1em 5px #000000;
	letter-spacing: 0px;
	background: #99ff99;
	background-image: url(../images/20160901footer.png);
	color: #ffffff;
}

.footer_navi a {
	text-decoration: none;
}
.footer_navi :hover {
	text-decoration: underline;
}

.footer_navi a:link { color: #ffffff; }
.footer_navi a:visited { color: #ffffff; }
.footer_navi a:hover { color: #ffff00; }
.footer_navi a:active { color: #ffff00; }





/*======================================

	3-6.utility
	
=======================================*/
.f_right {
	float: right;
}
.f_left {
	float: left;
}
.clear {
	clear: both;
	margin: 0px;
	padding: 0px;
}

.clear_left {
	clear: left;
	margin: 0px;
	padding: 0px;
}

.return {
	background-color: #CCFFFF;
	margin: 10px 0px;
}

p.gotop{
	font-size:0.9em;
	text-align:right;
	padding:0;
	margin:10px 0 12px;	
}

p.goto{
	font-size:0.9em;
	text-align:left;
	padding:0;
	margin:10px 0 12px;	
}

.contact_cheak {
	color: #FF0000;
	font-size: 1.3em;
	line-height: 1.4;
}

.contact {
	border: 1px solid #FF9900;
	padding: 5px;
	font-size: 1.3em;
	line-height: 1.4;
}

.contact_top {
	border: 1px solid #3E72A1;
	color: #FFFFFF;
	background: #3E72A1;
	padding: 0px 0px 0px 0px;
	font-size: 1.3em;
	line-height: 1.4;
}



.otoiawase_form {
	position: float;
	text-align: center;
}

.nyuuryoku_form {
	margin: 0px 0px 0px -200px;
	padding: 0px 20px 0px 0px;
	list-style-type: none;
	border: 0px;
}
@media only screen and (max-width: 1050px) {
  .nyuuryoku_form {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style-type: none;
	border: 0px;
  }
}



/*banner
==================================================*/
.banners {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.banner {
	font-size: 0.8em;
	padding: 0px 0px 3px 0px;
	margin: 0px 0px 0px 0px;
	letter-spacing: -1px
}

.banners2 {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	background-image: url(../images/top_boshu2.png);
}

.banner2 {
	font-size: 0.8em;
	padding: 0px 0px 3px 0px;
	margin: 0px 0px 0px 12px;
	letter-spacing: -1px
}

.banners3 {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	background-image: url(../images/top_boshu3.png);
}






.unvidi { display: none; }

.data {
	color: #377411;
	font-weight: bold;
}


.link_btn { text-align: right; }