@charset "utf-8";


/*-------------------------------------------------------------------
	1.　common
	2.  index
	3.  company
	4.  privacy
	5.  guide
	6.  product

-----------------------------------------------------------------------*/


/* =================================================================
		Reset Styles
================================================================= */
html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td,
form, fieldset {
	color: #101010;
	font-weight: normal;
	margin: 0;
	padding: 0;
}


/* Base Styles */
body{
	text-align: left;
	font: 14px/2 Meiryo,'A-OTF UD新ゴ Pro','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'ＭＳ Ｐゴシック',sans-serif;
	*font-size:small;
	*font:x-small;
	line-height:2;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
select,input,button,textarea{
	font: 99% "ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}

pre,code,kbd,samp,tt{
	font-family: monospace;
	*font-size: 108%;
	line-height: 100%;
}

img{
	border: none;
	vertical-align: bottom;
}

table{
	font-size: inherit;
	font: 100%;
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
}

label{
	cursor: pointer;
}

input,
select,
textarea{
	padding: 2px;
}

ol,ul{
	list-style: none;
}

a,
input{
	outline: none;
}

/*	Basic Text Link	*/
a {
	color: #101010;	text-decoration: underline;
}

a:link {
	color: #101010;	text-decoration: underline;
}
a:visited {
	color: #101010;	text-decoration: underline;
}
a:hover {
	color: #101010;	text-decoration: none;
}
a:focus {
	color: #101010;	text-decoration: underline;
}
a:active {
	color: #101010;	text-decoration: underline;
}






/* =================================================================
		1 common
================================================================= */
#wrapper{
	background:url("../../img/common/bg.gif") repeat left top;
}
/* ------------------------------------------------------------------
		header 
------------------------------------------------------------------ */
#header{
}
.header_top_bg{
	background:#FFFFFF;
	padding:0 0 12px;
}
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

.header_top{
	margin:0 auto;
	width:940px;
	position: relative;
}
.header_top  .logo{
	float:left;
	margin-right:;
	padding-top:17px;
	margin:0 30px 0 23px;
	font-size:12px;
}

.header_top  .logo img{
	vertical-align: middle;
}

	
.header_top ul{
	float:left;
}
.header_top ul li{
	float:left;
	line-height:24px;
}

.header_top ul.attention{
	margin-right:19px;
	width:286px;
    padding-top: 10px;
}
.header_top ul.sns{
	position: absolute;
	top: 44px;
	right: 346px;
}
.header_top ul.sns li{
	margin: 0 7px;
}

.gnav_bg{
	background: url(../../img/common/gnav_bg.png) repeat-x top;
}
#gnav{
	clear:both;
	width:940px;
	margin:0 auto;
	position:relative;
}
#gnav > li{
	float:left;
}
.product_gnav a,
.guide_gnav a{
	color:#ffffff;
	text-decoration:none;
	background:url(../../img/common/arrow02.gif) no-repeat center left;
	display:inline-block;
	text-decoration:none;
}
.product_gnav a{
	color:#ffffff;
	text-decoration:none;
	background:url(../../img/common/arrow02.gif) no-repeat center left;
	display:inline-block;
	text-decoration:none;
	/*padding:10px 20px 10px 20px; one line*/
	padding:10px 25px 10px 25px;
}
.guide_gnav a{
	padding:10px 20px;	
/*	padding:10px 60px 10px 20px;	*/
}
.product_gnav a:hover,
.guide_gnav a:hover{
	text-decoration:underline;
}

.product_gnav li,
.guide_gnav li{
	display:inline;
	text-align:center;
}

.product_gnav,
.guide_gnav {
	color:#ffffff;
	background:#e89fc8;
	display: none;
	position: absolute;
	top: 41px;
	left: -1px;
	text-align:center;
	width: 100%;
	/*height:50px; one line*/
	height:50px;

}
/*  ------------------------------------------------------------------
		main
 ------------------------------------------------------------------ */
#main{
    position: relative;
	padding-bottom:40px;
	background:url(../../img/common/bg_back.jpg) no-repeat bottom right;
}

.common_inquiry{
	text-align:center;
}
/* ------------------------------------------------------------------
		footer
------------------------------------------------------------------ */
.footer_bg{
	clear:both;
	padding: 21px 0 43px;
	background:url(../../img/common/footer_bg.gif) no-repeat top center;
	background-color:#f5f4f4;
}

#footer{
	width:940px;
	margin:0 auto;
}
#footer p{
	font-size:12px;
	color:#101010;
}
.footer_logo{
	float:left;
    margin-right: 40px;
    margin-top: 34px;
    margin-left: 24px;
}
#footer .footer_nav{
	float:left;
	background:url(../../img/common/footer_line.gif) repeat-y top left;
}
#footer .footer_nav ul{
    float: left;
    width: 222px;
    padding: 8px 0 8px 19px;
}
#footer ul li{
	margin-bottom:2px;
	line-height: 1.5;
}
#footer ul li a{
	margin-left:3px;
}
#footer ul li .footer_nav_title{
	margin-bottom:10px;
}
#footer ul li a{
	font-size:12px;
	color:#101010;
	text-decoration:none;
	background: url(../../img/common/footer_arrow.gif) no-repeat left center;
	padding-left:15px;

}
#footer ul li a:hover{
	color:#101010;
	text-decoration:none;
}
.copy{
	padding:27px 0;
	text-align:center;
	font-size:12px;
	clear:both;
}
/* 	ページトップ
----------------------------------------------------- */
.pagetop {
	display: none;
	position: fixed;
    bottom: 200px;
    right: 70px;
}
.pagetop a {
	display: block;
	width: 64px;
	height: 64px;
	text-align: center;
	text-decoration: none;
	line-height: 64px;
}


/* パンクズ
----------------------------------------------------- */
.pan{
	margin:7px auto 40px;
	width:940px;
	padding-top:7px;
}
.pan p,
.pan h1{
	display:inline-block;
	font-size:14px;
}
.pan a{
	background:url(../../img/common/arrow_pan.gif) no-repeat center right;
	padding-right:17px;
	margin-right:8px;
	color:#101010;
}
/* メインタイトル
----------------------------------------------------- */
.main_title{
	text-align:center;
	margin:0 0 60px 0;
}



/* =================================================================
		2 index
================================================================= */

#key{
	position:relative;
	width:948px;
	margin:62px auto 0;
/*margin:130px auto 0;*/
	clear:both;
}
.key_bg{
	background:url(../../img/index/key_bg.jpg) no-repeat center;

}
.topic{
	background:url(../../img/common/topic_bg.png) no-repeat center top;
	width:948px;
	height:40px;
	position:absolute;
	bottom:62px;
	left:0;
}
.topic p{
	text-align:left;
	line-height:40px;
    padding-left: 130px;
	font-size:14px;
}
#home #main{
	    margin: -42px 0 0 0;
}

.product_box{
	background: url(../../img/index/box_bg.png) no-repeat top center;
	width:948px;
	margin:0 auto 49px;
	padding-top:20px;

}
.product_box h2{
	text-align:center;
	margin-bottom:16px;
}
.product_box ul{
	width:908px;
	margin:0 auto;
}
.product_box ul li{
    width: 47%;
    text-align: center;
	float:left;
	background:url(../../img/index/box_line.gif) no-repeat right center;
	padding: 0 17px 40px 19px;
	margin:0 0 0 0;
}
.product_box ul li.first{
    padding-left: 0;
    padding-right: 24px;
}
.product_box ul li.last{
	background:none;
	padding: 0 0 40px 12px;
	margin:0 0 0 0;
}
.product_box p.price span{
    vertical-align: top;
    display: inline-block;
    margin-top: 8px;
}
.apology{
    width: 840px;
    margin: 0 auto 30px auto;
    padding: 40px 50px;
    background: #fff;
    box-shadow:0px 0px 2px 2px #dfdfdf;
    border-radius:4px;
}
.apology h3{
    background: #939393;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 13px 0 8px 0;
    margin-bottom: 20px;
}
.course_btn{
	text-align:center;
	background:url(../../img/common/footer_bg.gif) no-repeat top center;
	background-color:#f6f4f4;
	padding:18px 0;
	clear:both;
	margin-bottom:35px;
}
.course_btn p{
	background:#ffffff;
}
.btn_area{
	text-align:center;
	margin-bottom:35px;
}
.btn_area a.admission{
	margin-right:20px;
}

.support_box{
	width:938px;
	margin:0 auto 25px;
	border:#de7fb5 solid 1px;
}
.support_box h2{
	position:relative;
}
.support_box h2 a{
	position:absolute;
	right:10px;
	top:10px;
}
.support_box a img{
	vertical-align:top;
}
.support_box ul{
margin: 15px 20px 20px 20px;
}
.support_box ul li{
	float:left;
	padding-top:7px;
}
.support_box ul li.odd{
	margin-right:22px;
	border-right:#e8e8e8 solid 1px;
	padding-right:20px;

}


/* =================================================================
		3.company
================================================================= */
#company #main,
#specified #main{
	margin:126px auto 0;
}
#company h2{
	margin-bottom:30px;
}
.table_style01{
	border-collapse:collapse;
	width:940px;
	margin:0 auto 50px;
	color:#050505;
}
.table_style01 tr{
	border-top:#dedede dashed 1px;
	border-bottom:#dedede dashed 1px;
}
.table_style01 tr:nth-child(odd){
	background:#f8f8f8;
}

.table_style01 th{
	border-collapse:collapse;
	font-weight:bold;
	width:160px;
	padding:15px;
	text-align:left;
	vertical-align:top;s
}
.table_style01 td{
	border-collapse:collapse;

	padding:15px;
}
.table_style01 td p{
	margin-bottom:1em;
}

/* =================================================================
		4 privacy
================================================================= */
#privacy #main{
	margin:126px auto 0;
}
.privacy .lead{
	text-align:center;
	margin-bottom:65px;
}
.privacy_list h3{
	border-bottom: dashed 1px #dedede;
	font-size:16px;
	margin-bottom:8px;
	font-weight:bold;
}
.privacy_list{
	width:940px;
	margin:0 auto 100px;

}
.privacy_list > li{
	margin-bottom:60px;
	line-height:1.7;
}
.privacy_list > li > p{
	padding:0 10px;
}
.privacy_list li ol li{
	text-indent:1em;
	padding:0 10px;
}


/* =================================================================
		5 guide
================================================================= */
#guide #main {
    margin: 126px auto 0;
}
.guide_box{
	width:942px;
	margin:0 auto 55px;
/*	clear:both;*/
}
.guide_box.last{
	margin-bottom:40px;
}
.guide_box .lead{
	text-align:center;
	margin-bottom:24px;
}
.guide_box h2{
	margin-bottom:30px;
}
.item_list {
	margin-bottom:60px;
}
.item_list li{
	float:left;
}
.note_list{
	margin:30px 0 0;}
.note_list li{
	float:left;
}
p.notes{
	font-size:12px;
	line-height:1.4 !important;
}
ul.notes li{
	text-indent:-1em;
font-size: 12px;
	line-height:1.5;
    margin-left: 10px;
}
/* サポート
------------------------------------------------------------------*/
#support.guide_box,
#pay.guide_box,
#course.guide_box,
#return.guide_box{
    margin-top: -180px;
    padding-top: 180px;
}
.support_list{
	width:908px;
	margin:0 auto;
}
.support_list > li{
	border:#dedede solid 1px;
	width:402px;
	padding:24px 20px 18px;
	float:left;
	margin:0 20px 20px 0;
}
.support_list > li.even{
	margin-right:0;
}
.support_list li h3{
	text-align:center;
	margin-bottom:10px;
}
.support_list li p{
	line-height:1.5;
	margin-bottom:15px;
}
.support_list li p.img{
	text-align:center;
	margin-bottom:1.5em;
}
/* お支払いについて
------------------------------------------------------------------*/
.pay_list{
    width: 900px;
    margin: 0 auto;
}
.pay_list > li{
	border-bottom:#c4c4c4 dashed 1px;
	padding:10px 0 0 70px;
	margin:0 0 20px 0;
}
.pay_list li h3{
    color: #d85fa4;
    font-size: 145%;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 6px;
}
.pay_list > li > p{
    margin-bottom: 1.5em;
    line-height: 1.5;
}
/*送料*/
.postage{
	background:url(../../img/guide/pay_postage_icon.gif) no-repeat left top;
}
/*発送*/
.shipping{
	background:url(../../img/guide/pay_shipping_icon.gif) no-repeat top left;
}
/*時間*/
.time{
	background: url(../../img/guide/pay_time_icon.gif) no-repeat top left;
}
/*お支払い*/
.pay_list > .pay_li{
	background: url(../../img/guide/pay_icon.gif) no-repeat top left;
	border-bottom:none;
	margin-bottom:0;
	padding-bottom:0;
}
.pay_li ul {
	margin:0 0 10px ;
	}
.pay_li ul li{
  box-sizing:border-box;
	line-height:1.5;
	border-bottom:#ebebeb solid 1px;
	padding:0px 10px;
	margin-bottom: 20px;
}



.pay_li ul li p{
	margin-bottom:1.5em;
}
/*.pay_li ul li.convenience{
	width:271px;
}
.pay_li ul li.exchange{
	width:250px;
}
.pay_li ul li.card{
	border:none;
	margin-right:0;
	width:277px;
	padding-right:0;
}*/

.pay_li ul li h4 img{
	vertical-align:middle;
}



.attention_box{
	background:#f6f4f4;
	padding:24px;
	margin:24px 0 1.5em 0;
}
.pay_list li .attention_box h3{
	margin-bottom:15px;
	color:#000000;
}
.attention_box .notes{
	text-indent:-1em;
	margin-left:1em;
	line-height:1.7!important;
}

/* =================================================================
		6.product
================================================================= */
.product #main{
   margin: 126px auto 0;
}
.product_area{
	width:940px;
	margin:0 auto 40px;
}
.product_img{
	float:left;
	width:362px;
}
.product_area .date{
	float:left;
	width:578px;
}
.product_name{
	margin-bottom:26px;
}
.product_name{
	margin-bottom:16px;
}
.product_lead{
	margin-bottom:20px;
}
.product_area .text{
	line-height:1.5;
	margin-bottom:23px;
}
.product_area .text span{
	font-size:80%;
	vertical-align:super;
}
.product_area span.notes{
	display: inline-block;
	margin-top:5px;
}
.product_material{
	margin-bottom:6px;
}
.product_area h3{
	font-weight:bold;
	font-size:120%;
	border-bottom:#b7b7b7 solid 1px;
	margin-top:28px;
}
.product_area  table{
	width:100%;
	border-collapse:collapse;
    margin-bottom: 28px;
}
.product_area  table tr{
	border-bottom:#b7b7b7 dashed 1px;

}
.product_area  table tr td{
	padding-bottom:12px;
	padding-top:17px;
	border-collapse:collapse;
	vertical-align: baseline;
}
.product_area  table tr.last{
	border-bottom:none;
	padding-bottom:0;
	margin-bottom:0;
}
.product_area  table tr td.free{
	width:47px;
}
/* 成分表示 */
.component{
	background:#f1f1f1;
	padding:26px 30px;
	clear:both;
}

.product_area .component p.title{
	font-weight:bold;
	border-bottom:#cacaca solid 1px;
    padding-bottom: 2px;
    margin-bottom: 14px;
}

.product_area  .component p.text{
	font-size:11px;
	margin-bottom:20px;
}

.guide_link{
	text-align:right;
	margin-top:10px;
	padding-right:6px;
}
.guide_link img{
	vertical-align:middle;
}

.product .product_box ul{
	width:920px;
	margin:0 auto;
}
.product .product_box .current{
	border: solid #e264a1 1px;
}
.product .product_box{
	background:none;
}

.product .product_box ul li{
	float:left;
	background:url(../../img/index/box_line.gif) no-repeat right center;
	padding: 0 15px 20px 17px;
	margin:0 0 0 0;
	border: solid #fff 1px;
    width: 47%;
}
.product .product_box ul li.first{
    padding-left: 0;
    padding-right: 24px;
}

.product .product_box ul li.last{
	background:none;
    padding:0 0 40px 12px;
}


/******PRODUCT文に追加****/
.product_head_mes{margin-bottom: 40px;}
.product_body_mes{
  margin-top: 20px;
}
.product_price{margin-bottom: 120px;
}
.product_price li{
	display: inline-block;
	width: 100%;
	border-bottom: 1px dotted #b7b7b7;
}
.product_price li:last-child{border-bottom: none;}
/* ミルク
------------------------------------------------------------------*/
#milk .product_img img{
	margin-left:-16px;

}
/* 水
------------------------------------------------------------------*/
#water .component{
	padding:15px 20px;
	margin-right:47px;
}
#water .product_img{
	margin-top:-30px;
}
#water .product_area  table{
	width:100%;
	border-collapse:collapse;
    margin-bottom:0;
}
#water .product_area{
	margin-bottom:0;
}
.water_end{
	margin-bottom: 60px;
}
.space{
	padding: 23px;
}
/* BB&CCクリーム
------------------------------------------------------------------*/
#prod_bb .product__img{
	float:right;
	margin:0 0 40px 20px;
}

#prod_bb .color table{
	width: 578px;
}
#prod_bb .color_box{
	position: relative;
	padding: 10px 0 0 0;
}
#prod_bb .icon_color{
	position: absolute;
	top: 5px;
	right: 0;
	
}
/* チャイ
------------------------------------------------------------------*/
.series_list{
	width:940px;
	margin:0 auto 40px;
	text-align: center;
}
.series_list a{
	margin: 0px 25px;
}
#chai,
#nomal{
	padding-top: 156px;
	margin-top: -156px;
}

/*===============================================================
		共通
================================================================= */
.clear {
	clear:both;

}
.txtC {
	text-align:center;
}
.disnon {
  display: none;
}

.f_right{
	float: right;
}
.f_left{
	float:left;
}
.section{
	width:1050px;
	margin:0 auto;
}
/*
===== CLEARFIX ==========================================
*/


.clearfix
{
	min-height:1px; /* IE 7*/
}


.clearfix:after
{
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
}

.clearfix
{
	display:inline-table; 
}

/* Mac IE  \*/

* html .clearfix
{
	height:1px;
}

.clearfix
{
	display:block;
}
/*==========================================
#margin
==========================================*/
.mb05{
	margin-bottom:5px;
}
.mb10{
	margin-bottom:10px;
}
.mb15{
	margin-bottom:15px;
}
.mb20{
	margin-bottom:20px;
}
.mb25{
	margin-bottom:25px;
}
.mb30{
	margin-bottom:30px;
}
.mb35{
	margin-bottom:35px;
}
.mb40{
	margin-bottom:40px;
}
.mb45{
	margin-bottom:45px;
}
.mb50{
	margin-bottom:50px;
}
.mb55{
	margin-bottom:55px;
}
.mb60{
	margin-bottom:60px;
}
.mb65{
	margin-bottom:65px;
}
.mb70{
	margin-bottom:70px;
}
.mb85{
	margin-bottom:85px;
}
.mb95{
	margin-bottom:95px;
}

.mt-40{
	margin-top:-40px;
}

.mr50{
	margin-right:50px;
}
.ml80{
	margin-left:80px;
}