@charset "UTF-8";
@import url('base.css');

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

 コンテンツページのスタイル

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

/* --------------------------------------------------------------------------------------
 共通
--------------------------------------------------------------------------------------- */

.txtCenter {
	text-align: center;
}
.txtRight {
	text-align: right;
}
.txtBold {
	font-weight: bold;
}
.txtSmall {
   font-size: 90%;
   letter-spacing: 0em;}

.txtLarge {
   font-size: 14px;}

.txStrong {
   font-size: 120%;
   font-weight: bold;
   color: #ff388c;}


.img03 {
   margin-bottom: 3px;}
.img10 {
   margin-bottom: 10px;}
.img15 {
   margin-bottom: 15px;}
.img20 {
   margin-bottom: 20px;}
.img25 {
   margin-bottom: 25px;}
.img30 {
   margin-bottom: 30px;}
.img35 {
   margin-bottom: 35px;}
.img40 {
   margin-bottom: 40px;}
.img05 {
   margin-bottom: 5px;}
.img50 {
   margin-bottom: 50px;}
.img60 {
   margin-bottom: 60px;}
.img65 {
   margin-bottom: 65px;}
.img70 {
   margin-bottom: 70px;}
.img80 {
   margin-bottom: 80px;}
.img90 {
   margin-bottom: 90px;}

.red {
	color: #e0006f;
	font-size: 100%!important;}


.s {/*スマホ用要素 PC用ではnone*/
	display: none;
}

.l {/*PC用要素 スマホ用ではnone*/
	display: block;
}

.box150826 {
    color: #fff;
    padding: 10px;
    background: #951F2B none repeat scroll 0% 0%;
    border: 1px dotted #535233;
    box-shadow: 0px 0px 3px 1px #BABABA;
    margin: 0px auto 20px;
    width:100%;
}

@media screen and (max-width: 768px) {

.s {/*スマホ用要素 PC用ではnone*/
	display: block;
}

.l {/*PC用要素 スマホ用ではnone*/
	display: none;
}
}



/*==========ラップ=========*/
#wrap {
}



/* --------------------------------------------------------------------------------------
 汎用
--------------------------------------------------------------------------------------- */
#page_title {
	background: url(../img/title_obi.gif) top left repeat-x;
	margin-bottom: 10px;}

#page_titleIn {
	width: 980px;
	margin: 0 auto;
	text-align: left;}

@media screen and (max-width: 768px) {
#page_titleIn {
	width: 100%;
	margin: 0 auto;
	text-align: left;}
}

#header {
	width: 980px;
	margin: 0 auto;
	padding-bottom: 20px;
	text-align: left;}

#header h1 {
	font-size: 85%;
	margin-bottom: 15px;}

#header .total_logo {
	float: left;}

#header ul {
	float: right;}

#header li {
	float: left;}

@media screen and (max-width: 768px) {
#header_sp {
   width: 100%;
   padding: 10px 0;}

#header_sp .logo {
   float: left;}

#header_sp .menu_sp {
   float: right;
   padding: 12px 10px 0 0;}


#modal { display: none; }

#modal h2{
	font-size:18px;
	border-bottom:1px solid #fff;
}

#modal h2,
#modal ul li a{
	padding:10px 0;
}

#modal ul{
	margin-bottom:20px;
}

#modal ul li a{
	border-bottom:1px dashed #6f6f6f;
	display:block;
	color:#fff;
}

.close{
	font-weight:bold;
}

.close a{
	color:#000;
	padding:3px 10px;
	background:#ccc;
}

}
@media screen and (max-width: 768px) {
.imw100 img {
	width: 100%;}
}

#footer {
   background: url(../img/foot_back.jpg) top left repeat;
   padding: 60px 0;}

#footerIn {
   width: 980px;
   margin: 0 auto;}

address {
   font-size: 75%;
   color: #FFFFFF;}
   
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
#page-top a {
   background: url(../img/pagetop.png) top left no-repeat;
   width: 50px;
   display: block;
   height: 50px;
   text-indent: -9999em;}

#footerIn ul {
   text-align: center;
   margin-bottom: 35px;}

#footerIn ul li {
  display: -moz-inline-box;
  display: inline-block;
  /display: inline;
  /zoom: 1;
  padding-right: 15px;
  color: #FFFFFF;}

#footerIn a {
	color: #FFFFFF;}
@media screen and (max-width: 768px) {
#footer {
   background: url(../img/foot_back.jpg) top left repeat;
   padding: 20px 0;}

#footerIn {
   width: 96%;
   margin: 0 2%;}

address {
   font-size: 85%;
   color: #FFFFFF;}
   
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
#page-top a {
   background: url(../img/pagetop.png) top left no-repeat;
   width: 50px;
   display: block;
   height: 50px;
   text-indent: -9999em;}

#footerIn ul {
   text-align: center;
   margin-bottom: 35px;}

#footerIn ul li {
  display: -moz-inline-box;
  display: inline-block;
  /display: inline;
  /zoom: 1;
  padding-right: 15px;
  color: #FFFFFF;}
}


.obubu-image {
   width: 100%;}

.obubu-L .image{
   float: left;
   margin: 0 20px 0 0;}

.obubu-R .image{
   float: right;
   margin: 0 0 0 20px;}

.obubu-L .column,
.obubu-R .column{
   overflow: hidden;
   zoom: 1;}

.obubu-image:after{
   display: block;
   visibility: hidden;
   clear: both;
   height: 0;
   content: " ";}

.obubu-image{
   zoom: 1;}

@media screen and (max-width: 768px) {
.obubu-image {
   width: 100%;}

.obubu-L .image{
   float: none;
   margin: 0 0 20px 0;
   text-align: center;}

.obubu-R .image{
   float: none;
   margin: 0 0 20px 0;
   text-align: center;}

.obubu-L .column,
.obubu-R .column{
   overflow: hidden;
   zoom: 1;}

}


/* --------------------------------------------------------------------------------------
 TOP
--------------------------------------------------------------------------------------- */
#slider {
   z-index: 10;
   top: 0;
   left: 0;}

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 10px;
	display: block;}


#main_img {
   position: relative;
   z-index: -999;
   padding-bottom: 40px;
   background: url(../img/main_under.gif) bottom center repeat-x;}

#main_img .toplogo {
   position: absolute;
   top: 25px;
   left: 20%;
   z-index: 60;}

@media screen and (max-width: 768px) {
#main_img img {
	width: 100%;
	height: auto;}
}

#wrapper {
	width: 980px;
	text-align: left;
	margin: 0 auto;
	padding-top: 40px;}

#contents_left {
	float: left;
	width: 200px;}

#contents_right {
	float: right;
	width: 730px;}

#menu {
    font-size: 110%;
}

#menu li {
	z-index: 999;
	margin-bottom: 5px;
	position: relative;}

#menu li img {
	position: absolute;
	top: 7px;
	left: 3px;}

#menu li a {
    text-decoration: none;
    display: block;
    color: #333333;
    width: 200px;
    padding: 2px 0 2px 20px;
    background: url(../img/menu_back.gif) repeat-y -200px 0;
}


@media screen and (max-width: 768px) {
#wrapper {
	width: 98%;
	text-align: left;
	margin: 0 1%;
	padding-top: 20px;}

#contents_left {
	float: none;
	width: 100%;}

#contents_right {
	float: none;
	width: 100%;}

#menu {
    font-size: 100%;
	width: 100%
}

#menu li {
	z-index: 999;
	margin-bottom: 5px;
	position: relative;
	width: 50%;
	float: left;}

#menu li img {
	position: absolute;
	top: 7px;
	left: 3px;}

#menu li a {
    text-decoration: none;
    display: block;
    color: #333333;
    width: auto;
    padding: 2px 0 2px 20px;
    background: url(../img/menu_back.gif) repeat-y -200px 0;
}
}



.top_txt {
	background: url(../img/top_catch01.png) top right no-repeat;
	padding-top: 65px;
	margin-bottom: 60px;}

.top_txt h2 {
	text-indent: -999em;
	background: url(../img/top_catch02.png) top left no-repeat;
	height: 32px;
	width: 385px;
	margin-bottom: 20px;}
.top_txt h3 {
	width: 525px;
	line-height: 190%;}
	
@media screen and (max-width: 768px) {
.top_txt {
	background: none;
	padding-top: 5px;
	margin-bottom: 20px;
	width: 100%;}
.top_txt h2 {
	text-indent: -999em;
	background: url(../img/top_catch02.png) top left no-repeat;
	height: 32px;
	width: 100%;
	margin-bottom: 20px;}
.top_txt h3 {
	width: 100%;
	line-height: 130%;}
	
}



ul.top_chara {
	margin-bottom: 20px;
	margin-left: -35px;}

ul.top_chara li {
	float: left;
	margin: 0 0 45px 35px;}

@media screen and (max-width: 768px) {
ul.top_chara {
   margin-bottom: 10px;
   margin-left: 0;}

ul.top_chara li {
	float: left;
	width: 48%;
	margin: 2% 1%;}
ul.top_chara li img {
	width: 100%;
	height: auto;}
}

.midashi_left {
	float: left;}

.midashi_right {
	float: right;}


.top_voice {
	margin-bottom: 30px;}

.top_voice li {
	float: left;
	margin: 0 30px 30px 30px;
	width: 300px;}

.top_voice li h3 {
	font-size: 14px;
	margin-bottom: 10px;
	font-weight: bold;}

dl.top_news {
	margin-bottom: 80px;}

dl.top_news dt {
	float: left;}

dl.top_news dd {
	padding-left: 185px;
	margin-bottom: 25px;}

dl.top_news dd h3 {
	font-size: 14px;
	margin-bottom: 10px;
	font-weight: bold;}



/* --------------------------------------------------------------------------------------
 FAQ
--------------------------------------------------------------------------------------- */
.faq {}

.faq dt {
	background: url(../img/faq_q.gif) center left no-repeat;
	padding: 2px 0 5px 30px;
	border-bottom: 1px solid #C4C4C4;
	color: #dc1c5b;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 7px;}

.faq dd {
	background: url(../img/faq_a.gif) top left no-repeat;
	padding: 0 0 0 30px;
	margin-bottom: 25px;}

.merit {
	background: url(../img/merit_13.gif) bottom left repeat-x;
	padding-bottom: 40px;}




/* --------------------------------------------------------------------------------------
 茶畑オーナーになると
--------------------------------------------------------------------------------------- */
ul.naruto {
	margin: 0 0 30px -50px;
	width: 1030px;}
	
ul.naruto li {
	float: left;
	width: 340px;
	margin: 0 0 40px 50px;
	background: url(../img/merit_13.gif) bottom left repeat-x;
	padding-bottom: 15px;}

.cha_title01 {
	color: #bbcc00;
	font-size: 120%;
	font-weight: bold;}
	
@media screen and (max-width: 768px) {
ul.naruto {
	margin: 0;
	width: 100%;}
	
ul.naruto li {
	float: none;
	width: 100%;
	margin: 0 0 20px 0;
	background: url(../img/merit_13.gif) bottom left repeat-x;
	padding-bottom: 15px;
}
}

/* --------------------------------------------------------------------------------------
 届くもの
--------------------------------------------------------------------------------------- */
.send01 {
	margin-bottom: 50px;}

.send01 dt {
	float: left;
	width: 120px;}

.send01 dd {
	padding-left: 150px;
	margin-bottom: 30px;}

.send02 {
	margin: 0 0 50px -60px;}

.send02 li {
	float: left;
	margin: 0 0 0 60px;
	text-align: center;}

@media screen and (max-width: 768px) {
.send01 {
	margin-bottom: 30px;}

.send01 dt {
	float: none;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;}

.send01 dd {
	padding-left: 0;
	margin-bottom: 20px;}

.send02 {
	margin: 0 0 30px 0;}

.send02 li {
	float: left;
	margin: 0 2%;
	width: 45%;
	text-align: center;}
.send02 li img {
	width: 100%;
	height: auto;}
}


/* --------------------------------------------------------------------------------------
 お客様の声
--------------------------------------------------------------------------------------- */
.voice_base {
	margin: 0 0 50px 20px;
	width: 685px;
	font-size: 16px;}

.voice01 {
	background: url(../img/voice_11.gif) top left no-repeat;
	width: 685px;
	height: 85px;
	position: relative;}

.voice01 h3 {
	color: #477c13;
	position: absolute;
	top: 20px;
	left: 20px;
	font-weight: bold;}

.voice02 {
	background: url(../img/voice_14.gif) top left no-repeat;
	width: 685px;
	height: 85px;
	position: relative;}

.voice02 h3 {
	color: #477c13;
	position: absolute;
	top: 20px;
	left: 20px;
	font-weight: bold;}

@media screen and (max-width: 768px) {
.voice_base {
	margin: 0 0 30px 0;
	width: 100%;
	font-size: 16px;}

.voice01 {
	background: none;
	border-bottom: 3px solid #97D321;
	width: 100%;
	height: auto;
	position: relative;}

.voice01 h3 {
	color: #477c13;
	position: relative;
	top: auto;
	left: auto;
	font-weight: bold;}

.voice02 {
	background: none;
	border-bottom: 3px solid #97D321;
	width: 100%;
	height: auto;
	position: relative;}

.voice02 h3 {
	color: #477c13;
	position: relative;
	top: auto;
	left: auto;
	font-weight: bold;}
}


/* --------------------------------------------------------------------------------------
 お支払い方法
--------------------------------------------------------------------------------------- */
.price01 {
	border: 2px solid #5e8f00;
	margin-bottom: 35px;}

.price01_title {
	text-align: center;
	background-color: #5e8f00;}

.price01 ul {
	padding: 15px;}

.price01 li {
	margin-bottom: 10px;}


.price02 {
	border: 2px solid #00a3cb;
	margin-bottom: 35px;}

.price02_title {
	text-align: center;
	background-color: #00a3cb;}

.price02 ul {
	padding: 15px;}

.price02 li {
	margin-bottom: 10px;}


/* --------------------------------------------------------------------------------------
 流れ
--------------------------------------------------------------------------------------- */
.flow01 {
	width: 100%;}

.flow01 td {
	padding: 10px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #D3D3D3;
	font-size: 110%;
	font-weight: bold;}

.flow01 td h3 {
	font-size: 110%;
	font-weight: bold;}

.flow01 td.bgbeije {
	background-color: #F8F2E6;}

.flow01 td.bggreen {
	background-color: #F8FCE8;}



.title01 {
	background: url(../img/price_34.gif) top left no-repeat;
	height: 41px;
	line-height: 38px;}

.title01 h2 {
	padding-left: 50px;
	color: #FFFFFF;
	font-size: 130%;
	font-weight: bold;}