@charset "utf-8";
/*
Theme Name: himawarimilk
Theme URI: http:www.himawarimilk.co.jp/
Description: ひまわり乳業CSS
Author: 生活創造工房
Version: 1.0(2014/02/01)
*/

/*-------------------------------------------------------------- */
/* フォントアイコンの設定	2013/06/26追加*/
/*-------------------------------------------------------------- */
@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?83703018');
  src: url('../font/fontello.eot?83703018#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?83703018') format('woff'),
       url('../font/fontello.ttf?83703018') format('truetype'),
       url('../font/fontello.svg?83703018#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?83703018#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-menu:before { content: '\61'; } /* 'a' */
.icon-right-dir:before { content: '\62'; } /* 'b' */
.icon-angle-double-right:before { content: '\64'; } /* 'd' */
.icon-up-hand:after { content: '\63'; } /* 'c' */
.icon-play:before { content: '\65'; } /* 'e' */
.icon-menu-1:before { content: '\67'; } /* 'g' */
.icon-facebook-rect:before { content: '\66'; } /* 'f' */
.icon-facebook-rect-1:before { content: '\68'; } /* 'h' */
/*-------------------------------------------------------------- */
/* 基本項目の設定*/
/*-------------------------------------------------------------- */
html{
	background: #FFCC33; 
}

body {
	width: 100%;
	height: auto;
	background-color: #FFFFFF;
	margin: 0px auto;		/* autoでセンタリング */
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;	
	padding-left: 0px;
	line-height: 1.5;	/* 行の高さ */
	font-family: "Hiragino Kaku Gothic Pro","Yu Gothic Pro","Yu Gothic","Meiryo","sans-serif";
	overflow-x:hidden;
	}

a {				/* a要素の下線を非表示 */
	text-decoration: none;
	color: #990033;			/* 文字色-海老茶 */
}

:hover > a {		/*	マウスオーバー時 */
	text-decoration: underline;
}

ul {			/* リストの点を表示しない */
	list-style: none;	
	margin: 0px;
	padding: 5px;
	font-size: 11px;
	line-height: 1.5;	
}

li { 
	position: relative;	
	margin-top : 0px; 
	margin-right: 0px; 
	margin-bottom: 0px; 
	margin-left: 0px;
	padding: 3px;
	list-style-position: outside;
}

p {
	font-size: 16px;
	line-height: 1.5;	
}

.tex-s {
	font-size: 12px;
	padding-left: 10px;
	clear: both;
}

.mienai {					
		display : none;		/* 非表示*/
}

/* 禁則処理の追加 */
/*-------------------------------------------------------------- */

p,li,dt,dd,th,td,pre {
	-ms-line-break: strict;
	line-break: strict;
	-ms-word-break: break-strict;
	word-break: break-strict;
}

/*-------------------------------------------------------------- */
/* 3）ヘッダーエリア設定<header>タグ内*/
/*-------------------------------------------------------------- */

header {
	margin: 0 auto;
	padding: 0;
	clear: both;	
}

#header-area {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding-bottom: 0px;
	clear: both;
}

#toplogo {			/* ひまわり乳業株式会社のロゴ */
	width: 300px;
	height: 30px;
	margin-left:7px;
	margin: 0px ;
	padding: 0px
}

#headerimg {			/* TOPのグラスに入った牛乳の画像 */
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding: 0px ;
}
	
/*-------------------------------------------------------------- */
/* 4）ナビゲーションエリア設定<nav>タグ内*/
/*-------------------------------------------------------------- */
nav {
	margin: 0 auto;
	padding: 0;
	clear: both;	
}

/*-------------------------------------------------------------- */
/* 5）コンテンツエリア #main 内共通設定 */
/*-------------------------------------------------------------- */

section {
	width: 100%;
	margin: 0px auto;
	padding: 0;
	font-size: 12px;
}

section p {
	font-size: 16px;
}

/*-------------------------------------------------------------- */
/* コンテンツエリア<article>タグ再定義　*/
/*-------------------------------------------------------------- */

article {
	margin: 0px auto;
	padding: 0px;
}

/*-------------------------------------------------------------- */
/* コンテンツエリア<article>タグ再定義　*/
/*-------------------------------------------------------------- */

#main {
	float: left;
	overflow: hidden;
	background: #ffffff;	/* 背景色-白 */
}

#main p {
	font-size: 16px;
	margin-bottom: 1px;
	padding: 5px;
}

#main h1 {
	clear: both;
	font-size: 18px;
	padding-right: 10px;
	padding-left: 5px;
	margin-top : 0px;		
	margin-bottom : 0px;	
}

#main h2 {
	clear: both;
	font-size: 16px;
	padding-right: 10px;
	padding-left: 5px;
	margin-top : 0px;		
	margin-bottom : 0px;	
}

#main h3 {
	clear: both;
	font-size: 14px;
	padding-right: 10px;
	padding-left: 5px;
	margin-top : 0px;		
	margin-bottom : 0px;	
}

#main h4 {
	clear: both;
	font-size: 12px;
	padding-right: 10px;
	padding-left: 5px;
	margin-top : 0px;		
	margin-bottom : 0px;	
}

#main .colorG {						/* H2,H3の色のコントロール*/
	border-color: #009966;
}

#main .colorY {						/* H2,H3の色のコントロール*/
	border-color: #FFCC33;
}

#main .colorB {						/* H2,H3の色のコントロール*/
	border-color: #330000;
}

#main .colorR {						/* H2,H3の色のコントロール*/
	border-color: #FF0000;
}

#main ul li {
	font-size: 16px;
	padding-right: 5px;
	padding-left: 5px;
	list-style: none;	
}

#main .content li {
	margin: 3px 0 3px 5px;
	padding: 3px;
	position: relative;	
	list-style-position: outside;
	line-height: 1.5;
}
	
#main .content li:before {
	font-family: 'fontello';
	content: '\62';
	color: #FFCC33;
	margin:0 3px;
}

#main .content ol {
	margin: 3px 0 3px 20px;
	padding: 3px;
	position: relative;	
	list-style-type: decimal;
	list-style-position: outside;
	line-height: 1;
}

#main a {
	color: #000000;
	font-weight: none;
	text-decoration: underline;
}

#main img {
	float: right;
	margin-top: 3px;
	margin-bottom: 3px;
	padding: 3px 0px 3px 3px;
}

#main .product {
	float: none;
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: 80px;
	padding: 3px 0px 3px 3px;
	width: 240px;
	height: 240px;
	border: 0;
}

#main .deliverybox {
	display: block;
	float: none;
	margin: 0 auto;
	width: 120px;
	height: auto;
	}

#main .deliveryline {
	float: left;
	display: block;
	width: 140px;
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: 0px auto;
	padding: 3px 0px 3px 3px;
	border: 0;
}

#main table {
	clear: both;
	width: 95%;
	font-size: 14px;
	border: 1px #000000 solid;
	border-collapse: collapse;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	padding: 2px;
	line-height: 1.5;
}

#main .bbs {
	font-size: 11px;
}

#main .bbs table {
	font-size: 14px;
}

#main tr td {
	border: 1px #000000 solid;
	padding: 2px;
}

#main th {
	border: 1px #000000 solid;
	padding: 2px;
	vertical-align: top;
	text-align: center;
}

#main .orikaesi{
	white-space: nowrap;
}

#main .box01 {
	clear: both;
	border: 1px #FFCC33 solid;
	margin: 5px 0 0 0;
	padding: 5px 5px 5px 5px;
	width: 100%;
	font-size: 11px;
}

#main .text-01 {			/* 文字色赤茶 */
	color:#990000;
}

#main .text-naka {						/* 文字位置中央 */
	text-align: center;
}

#main .text-L {						/* 文字位置左 */
	text-align: left;
}

#main .text-R {						/* 文字位置右 */
	text-align: right;
}

#main .pagetop {
	clear: both;
	font-size: 12px;
	padding-left: 20px;
	text-align: right;
}

#main .bkcolir01 {
	background-color: #FFCC33;
}

#main .bkcolir02 {
	background-color: #FFFFCC;
}

#main .nakaimg {		/* 追加	 幅410pxの画像に対して回り込みしない。*/
	float: none;
	margin-top: 3px;
	margin-bottom: 3px;
	padding: 3px 0px 3px 5px;
	width: 100%;
}

#main .tex-s {
	font-size: 12px;
	padding-left: 10px;
	clear: both;
}

.moretex {
	text-decoration: none;
}

/*お問合せフォーム用指定*/
*/-------------------------------------------------------------- */
input.error , textarea.error {
	background-color: #FFCCFF;
	font-size:12px;
}
label.error {
	color: red;
	font-style: italic;
	font-size:12px;
}
.imeon{
	ime-mode:active;
}
.imeoff{
	ime-mode:disabled;
}

.namae{
	istyle: 1;
	type:text;
	size:50;
	width: 280px;
}

.densimail{
	type: email;
	size: 50;
	width: 280px;
}

.ichimojiake{
	margin-left : 1em;
	margin-right : 1em;
}

.toiawase{
	margin-left : 5px;
	margin-right : 5px;
	width: 95%;
	height: 150px;
	type:text;
	maxlength:1000;
}

/* ヘルプ　サブウインド指定*/
/*-------------------------------------------------------------- */
#help-body {
	width: 900px;
	background: #fff; 
	background: rgba(255,255,255,1.0); 
	background-attachment: scroll;
	margin: 20px auto;
	padding: 10px;
	line-height: 1;
}

#help-sub {
	float: none;
	overflow: hidden;
	margin: 20px auto;
	padding: 20px;
	width: 720px;
	height: auto;
	background: -moz-linear-gradient(
		top,
		#ffffff 0%,
		#ffffff);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ffffff),
		to(#ffffff));
	border-radius: 30px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border: 2px solid #ff0000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
}

/* 菜食健美宅配ページ用*/
/*-------------------------------------------------------------- */
#main .goto {
	height: 40px;
	margin: 0 auto;
	padding: 10px 10px 10px 10px;
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ff0000),
		to(#ff0000));
		border-radius: 30px;
	-	webkit-border-radius: 30px;
	border: 2px solid #ff0000;
		-webkit-box-shadow:	
		0px 1px 3px rgba(000,000,000,0.5),	
		inset 0px 0px 1px rgba(255,255,255,0.7);	
	background-color : #FF0000;	
	color : #ffffff;
	font-weight: bold;
	text-decoration: none;
}

#main .goto a:hover {	/* マウスオーバー時の動作	*/
	text-decoration: underline;
}

/* TOP-Page　メッセージ */

#message {
	clear: both;
  background: #FFFFFF;				/* 背景色-白 */
	margin: 0 auto;
	padding: 0px;
}

/* おすすめ（今は菜食健美） */

#recommend {
	clear: both;
	background: #FFFFFF;				/* 背景色-白 */
	margin: 0 auto;
	padding: 0px;
	}

/* お知らせ */

#news {
	clear: both;
	background: #FFFFFF;				/* 背景色-白 */
	margin: 0 auto;
	padding: 0px;
}

#slideBox-news {
	clear: both;
	background: #FFFFFF;				/* 背景色-白 */
	margin: 0 auto;
	padding: 0px
}

/* 今日のにっこりひまわり（index　main） */

#diary {
	clear: both;
	background: #FFFFFF;				/* 背景色-白 */
	margin: 0 auto;
	padding: 0px;
}


/* ＣＭギャラリーと宅配ビン　サブウインド指定
-------------------------------------------------------------- */
#movie-body {
	width: 450px;
	background: #fff; 
	background: rgba(255,255,255,1.0); 
	background-attachment: scroll;
	margin: 20px auto;
	padding: 10px;
	line-height: 1;
}

#movie-sub {
	float: none;
	overflow: hidden;
	margin: 20px auto;
	padding: 20px;
	width: 360px;
	height: auto;
	background: -moz-linear-gradient(
		top,
		#ffffff 0%,
		#ffffff);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ffffff),
		to(#ffffff));
	border-radius: 30px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border: 2px solid #ff0000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
}

#movie-sub iframe {
	float: none;
	margin: 15px auto;
	padding: 10px;
}

#movie-sub img {
	float: right;
	margin-top: 3px;
	margin-bottom: 3px;
	padding: 3px 0px 3px 3px;
	width: 130px;
	height: auto;
	border: 0;
}


#movie-sub table {
	width: 60%;
	font-size: 80%;
	border: 0px #000000 solid;
	border-collapse: collapse;
	margin: 0 0 10px 0;
	padding: 2px;
	line-height: 1.5;
}

/*-------------------------------------------------------------- */
/* 右サイド　CMギャラリーとにっこりひまわりエリア */
/*-------------------------------------------------------------- */
#sideR {
	position: relative; 
	top: 0px;
	right: 0px;
	overflow: hidden;
	margin: 0px auto;
	padding: 0;
	background: #ffffff;				/* 背景色-白 */
	z-index: 1;
	}

#sideR h1 {
	font-size: 16px;
	}

#sideR p {
	font-size: 14px;
	margin-bottom: 0px;
	padding-right: 8px;
	padding-left: 15px;
	}

#sideR .movie {
	margin: 0px auto;
	padding: 3px 25px 3px 30px;
	}

#sideR ul {
	list-style: none;
	font-size: 14px;
}

#sideR li {
	margin: 3px 0px 3px 0px;
	padding: 3px 1px 3px 0px;
	position: relative;
	font-size: 14px;
	line-height: 1.5;	
	list-style-position: outside;
	}

#sideR a {
	color: #000000;
	font-weight: none;
	text-decoration: underline;
	}

#sideR li:hover > a,
#sideR ul ul :hover > a {
	background: #FFCC33;
	}

/* TOP-Page　今日のにっこりひまわり */

#nikori {							/*にっこりのエリア設定*/
	clear: both;
	height: auto;
	margin: 0 auto;
	padding: 0px;
	background: #FFFFFF;	/* 背景色-白 */
}

#nikori h1 {
	text-align: center;
	margin: 0px 10px 5px 10px;
	padding: 5px 10px 5px 10px;
	border-top: 2px #FF0000 solid;
	border-bottom: 2px #FF0000 solid;
	text-decoration: none;
	}

#nikori h2 {
	clear: both;
	margin-right: 20px;
	margin-left: 20px;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 10px;
	font-size: 16px;
	border-bottom: 2px #FF0000 dotted;
	}

.diary-searchbox {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 20px;
	padding: 5px;
	font-size: 16px;
	}

.nikori-area {
	margin: 0px auto;
	padding: 0px;
	}

#seachlist {
	list-style-type: none;
	}

#seachlist li{
	display: list-item;
	font-size: 11px;
	margin: 5px 0 3px 20px;
	list-style-type: none;
	list-style-image: none;
	list-style-position: outside;
	}

#nikori li:before {
	font-family: 'fontello';
	content: '\62';
	color: #FFCC33;
	margin:0 3px;
	}

.waku01 {
	width:90%;
	margin-left: 15px;
	}

#waku01 p{
	font-size: 12px;
	}

/* 左サイドにっこりひまわり設定*/

.open-diary {
	color: #000000;		/* 文字色-黒*/			
	cursor: pointer;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	text-align: left;
	font-size: 16px;
	font-weight: bold;
	margin: 0 auto;
	background:#FFFFCC;	/* 背景色-クリーム色 */
}

#slideBox-diary {
	margin: 0 auto;
	padding: 0px;
	font-size: 16px;
	display:none;
}

#slideBox-diary p{
	margin: 5px auto;
	padding: 5px;
	font-size: 12px;
}

#slideBox-diary :hover > a {		/*	マウスオーバー時 */
	text-decoration: underline;
	}

/* YY → MM 表示 */
.open-diary-y {		/* 年 */
	clear: both;
	color: #000000;		/* 文字色-黒*/
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	text-align: left;
	font-weight: bold;
	margin: 0 auto;
	background:#FFFFCC;	/* 背景色-クリーム色 */
}
     
.slideBox-diary-m {	/* 月表示 */
	margin: 0 auto;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	font-size: 12px;
	display:block;
}

.yokonarabi {		/* 横に並べる */
	cursor: pointer;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 10px;
	text-align: left;
	font-size: 10px;
	margin: 0 auto;
	float: left;
}

#waku01 h3:after {
	font-family: 'fontello';
	content: '\63';
	padding-left: 10px;
	}

#waku01 h4:after {
	font-family: 'fontello';
	content: '\63';
	padding-left: 10px;
	}

/* 7）<footer>タグ内 */
/*-------------------------------------------------------------- */
#footer-area {
	clear: both;
	display: block;
	margin: 10px auto;
	padding: 0px;
	width: 100%;
	height: auto;
	text-align: center;
	}

#footer-area p {
	margin-bottom: 8px;
	padding-top: 15px;
	padding-bottom: 0px;
	font-size: 16px;
	line-height: 1;	
	text-align: center;
	}

#office {
	width: 300px;
	height: auto;
	margin: 0 auto;
	padding: 5px ;
	}

#office p {
	padding-top: 1px;
	padding-bottom: 0px;
	font-size: 12px;
	line-height: 0.8;	
	text-align: center;
	}

#office span:after {
	content:"　"
	}

#toTop {	/*上への画像表示設定*/
	opacity: 0.5;
	z-index: 9999;
	display:none;
	position:fixed;
	}