﻿@charset "utf-8";

/* =================================================================
		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 {
	font-weight: normal;
	font-family: "Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3",Meiryo,"メイリオ","MS P Gothic","ＭＳ Ｐゴシック",sans-serif;
	line-height: 1.2;
	margin: 0;
	padding: 0;
}


/* HTML5 */
article, aside, figure, figcaption, footer, header,
hgroup, nav, section, summary{
	display: block;
}


/* Base Styles */
body{
	font: 12px/1.231 "Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3",Meiryo,"メイリオ","MS P Gothic","ＭＳ Ｐゴシック",sans-serif;
	*font-size:small;
	*font:x-small;
	color: #000000;
}

select,input,button,textarea{
	font: 99% "Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3",Meiryo,"メイリオ","MS P Gothic","ＭＳ Ｐゴシック",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;
}

h1,h2,h3,h4,h5,h6{
	font-size: 100%;
}


/* form */
select,input,button,textarea{
	font: 99% "Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3",Meiryo,"メイリオ","MS P Gothic","ＭＳ Ｐゴシック",sans-serif;
}
select option {
	padding : 0 5px 0 5px;
}
form label{
	cursor : pointer;
}

a,
input{
	outline: none;
}

/*	Basic Text Link	*/
a {
	color: #1181ea;	text-decoration: underline;
}

a:link {
	color: #1181ea;	text-decoration: underline;
}
a:visited {
	color: #1181ea;	text-decoration: underline;
}
a:hover {
	color: #1181ea;	text-decoration: none;
}
a:focus {
	color: #1181ea;	text-decoration: underline;
}
a:active {
	color: #1181ea;	text-decoration: underline;
}

/* clearfix
===========================================*/

/* Clearfix?*/
.clearfix:after{
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
	font-size: 0.1em;
}
.clearfix{
 display:inline-block;
}
/*Hides from IE-mac\*/
*html .clearfix{
 height:1%;
}
.clearfix{
 display:block;
}

.clearfix:after{
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
	font-size: 0.1em;
}
/* WinIE7 MacIE5 */
.Clear{
	display:inline-table;
	zoom:100%;
}
/* WinIE5-6 */
/* Hides from IE-mac \*/
* html html .Clear{
	height:1px;
}
.Clear{
	display:block;
}


/* iphonのinputのradiusを0にする  ただしこれをつけるとinputの矢印が消える*/
input[type="button"],
input[type="text"],
input[type="submit"],
select
{
	-webkit-appearance: none;
   border-radius: 0;
}




/* =================================================================
	common
================================================================= */
body{
}

.container{
	width:320px;
	margin:0 auto;
}


/* header
------------------------------------------------------------------*/
.header{
	margin:0 0 0 0;
	border-top:solid #e05ca6 2px;
	border-bottom:#dad8d8 solid 1px;

}
.header .logo{
	float:left;
	margin-left:20px;
/*	padding:8px 0;*/
}
.gnav{
	padding:8px 0;
}
.gnav li{
	float:left;
	border-left:#dedede solid 1px;
}
.menu_list{
	display:none;
}
.menu_list li{
	border-bottom:#f5f4f4 solid 1px;
	font-size:16px;
}
.menu_list li a{
	display:block;
	color:#101010;
	text-decoration:none;
	padding:10px 0 10px 7px ;
}
.menu_list li img{
	margin-right:10px;
	vertical-align:middle;
}
.menu_list li.close img{
	margin-right:13px;
}
.menu_list li.close{
	text-align:center;
	padding:10px 0;
	background:#df5ca6;
	color:#ffffff;
}
.menu_list li.product_li a{
	border-left:#df5ca6 solid 5px;
    padding-left: 12px;
}
.menu_list li.head_li{
	padding:10px 0 10px 7px;
}
/* main
------------------------------------------------------------------*/
.main{
	margin-bottom:25px;
}
/* topix
------------------------------------------------------------------*/
.topix{
	background:url(../../img/index/topix.gif) no-repeat left center;
	background-size:63px;
	padding:16px 0 16px 75px;
}

.topix span{
	display:block;
}

/* product_list
------------------------------------------------------------------*/
.apology{
    width: 87%;
    margin: 15px auto 30px auto;
    padding: 10px 3%;
    background: #fff;
    box-shadow:0px 0px 2px 2px #dfdfdf;
    border-radius:4px;
}
.apology h3{
    background: #939393;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    padding: 13px 0 8px 0;
    margin-bottom: 10px;
}

/* product_list
------------------------------------------------------------------*/
.product_list{
	margin-bottom:15px;
}
.product_list li{
	border-bottom:#ebebeb solid 1px;
}
.product_list li:last-child{
	border-bottom:none;
}

/* course
------------------------------------------------------------------*/
.course{
	position:relative;
	margin:0 0 10px 0;
}
.course a{
	position:absolute;
    top: 256px;
    left: 25px;
}

/* btn_admission btn_guide
------------------------------------------------------------------*/
.btn_admission,
.btn_guide{
	margin-bottom:15px;
	text-align:center;
}

.sns{
	display: flex;
	justify-content: center;
	margin: 20px 0;
}
.sns li{
	margin: 0 10px;

}


/* support
------------------------------------------------------------------*/
.support{
	position:relative;
	width:300px;
	margin:0 auto 15px;
}
.support a{
	position:absolute;
	top: 163px;
	left: 15px;
}
.tel_btn{
	text-align:center;
}

.footer_nav{
	background:url(../../img/common/footer_bg.gif) repeat-x top left;
	background-size:9px;
	font-size:9px;
	text-align:center;
    padding: 13px 0 15px;
}
.footer_nav a{
	color:#111111;
}
.copy{
	text-align:center;
	font-size:9px;
    padding: 13px 0 15px;
}

/* =================================================================
	product
================================================================= */

/* common
------------------------------------------------------------------*/
.product_title{
	text-align:center;
	margin-bottom:25px;
}
.product_title02{
	text-align:center;
}
.product_lead{
	text-align:center;
}
.product_box {
	margin-bottom:13px;
	margin-top:24px;
}
.product_box .img{
	text-align:center;
	border-bottom:dashed 1px #ebebeb;
	width:290px;
	margin:0 auto 18px;

}
.product_box .text{
	width:290px;
	margin:0 auto;
	line-height:1.6;
	padding-bottom:20px;
}

.product_material{
	margin:-5px auto 27px;
	padding-bottom:20px;
	text-align:left;
	background:#fdf5ee;
	width:320px;
	border:none;
}

#bbcc .product_material{
	padding:0 0 10px;
}

#bbcc .product_material p{
	margin:0;
	text-align: center;
}

.product_material p{
	margin:0 15px;
}
.price_area{
	text-align:center;
}

.price_area ul li{
	border-bottom:dashed 1px #ebebeb;
	padding:0 0 20px 0;
	margin-bottom:20px;
}
.price_area ul li:last-child{
	border-bottom:none;
}
.price_area  h3{
	border-bottom:#b7b7b7 solid 1px;
	text-align:left;
	font-size:14px;
	padding-bottom:5px;
	width:290px;
	margin:0 auto 10px;
}
.price_area .price{
	margin-bottom:20px;
}
.price_area .btn{

}
.product p.more{
    width: 274px;
    margin: 15px auto 0;
    text-align: right;
}
.product p.more a{
	color:#1a1616;
}
.product p.more img{
	vertical-align:middle;
	margin-right:2px;
}
.component{
	background:#faeef5;
	padding:15px 10px 15px;
    margin: 0 auto;
    width: 290px;
}
.component .title{
	color:#d3488d;
	padding-bottom:5px;
	font-weight:bold;
	border-bottom:#d3488d solid 1px;
	width:290px;
	margin:0 auto 8px;
}
.product_box .component p.text{
	font-size:9px;
	margin-bottom:10px;
	padding-bottom:0;
}
/******PRODUCT追加***/
.product_head_mes{
	margin-bottom: 20px;
}
.product_head_mes img,.price_area .price img,.price_area .btn img,.product_body_mes img{width: 100%;}
.price_area{padding: 0 10px;
}
.product_body_mes{margin-bottom: 15px;}
.price_area ul li:first-child{border-top: 2px dotted #b7b7b7;padding-top: 20px;border-bottom: 2px dotted #b7b7b7;}
/* #milk 
------------------------------------------------------------------*/

#milk .product_material p{
	font-size:11px;
	margin-bottom:0.5em;
	line-height:1.3;
}
#milk .product_box .text{
	border:none;
	margin-bottom:0;
}
/* #water
------------------------------------------------------------------*/
#water .price_area ul {
	margin-bottom:20px;
}
#water .product_box p.text img{
	float:right;
	margin-left:10px;
}
#water .product_material{
}

/* スムージー
------------------------------------------------------------------*/
.btn_list{
	text-align: center;
	margin-bottom: 20px;
}
.btn_list a{
	background: url(../../img/common/arrow03.gif) no-repeat left center;
	-webkit-background-size: 15px;
	background-size: 15px;
	padding-left: 25px;	

	color:#000;
	margin: 0px 10px;
}
/* =================================================================
	guide
================================================================= */
.close_btn{
	text-align:center;
}
.btn_close,
.guide-contents{
	display:none;
}

.btn_open,
.btn_close{
	border-top:#d7d7d7 solid 1px;
}
.guide-contents{
	padding-bottom:28px;
}
#guide-hide01 .lead{
    text-align: center;
    width: 313px;
    margin: 8px auto 0;
	padding-bottom:22px;
	line-height:1.6;
}

#guide-hide01 .tem_list {
	width:300px;
	margin:0 auto 22px;

}
#guide-hide01 .tem_list li{
	border-top:1px #ebebeb  solid;

}
.guide_teiki{
	margin-bottom:15px;
}

h3.sab_title{
	text-align:center;
	margin-bottom:10px;
}
.guide_offer,
.guide_deliver,
.guide_stop{
	width:300px;
	margin:0 auto 25px;
	line-height:1.6;
}
.guide_offer >  p,
.guide_deliver > p,
.guide_stop >  p{
	line-height:1.5;
	margin:0 5px 1em;
}
.guide_stop p img{
	float:right;
}
.guide_offer ul li{
	line-height:1.6;
	background:url(../../img/guide/arrow01.gif) no-repeat bottom center;
	background-size:24px;
	padding:0 0 14px 0;
}
.guide_offer ul li > p{
	border:#d6d6d6 solid 1px;
	text-align:center;
	padding:14px 0;
}
.guide_offer ul li:last-child{
	background:none;
	padding-bottom:0;
}
.guide_deliver ul li{
    border: #d6d6d6 solid 1px;
    padding: 14px 8px;
    text-indent: -3.5em;
    padding-left: 4em;
	line-height:1.6;
}

#guide-hide02{
	background:#f4f2f2;
}
#guide-hide02 > ul{
	width:300px;
	margin:0 auto;
}
#guide-hide02 > ul >li{
	border:#bcb8b9 solid 1px;
	border-radius:3px;
	background:#ffffff;
	padding:10px;
	margin-bottom:20px;
}
#guide-hide02 > ul > li h3{
	text-align:center;
	margin-bottom:5px;
}
#guide-hide02 > ul > li p{
	line-height:1.6;
}

#guide-hide02 > ul > li p.img{
	text-align:center;
	margin-top:18px;
}
#guide-hide02 > ul > li .attention{
	font-size:83%;
}
/* お届けお支払いについて
------------------------------------------------------------------*/
#guide-hide03.guide-contents{
	padding-top:0;
}
#close-003{
	margin-top:15px;
}
.pay_box{
}
.pay_box h3{
	margin-bottom:10px;
}
.pay_box p{
	width:290px;
	margin:0 auto 15px;
	line-height:1.6;
}
.pay_box p.img{
	text-align:center;
}
.pay_box .lead{
	font-weight:bold;
	margin-bottom:10px;
}
.pay_box .lead strong{
	color:#d85fa4;
}
/* ご注意 */
.attention_box{
    background: #f4f2f2;
    width: 265px;
    margin: 10px auto 15px;
    padding: 10px 17px 10px 10px;

}
.attention_box h3{
	font-size:116%;
}
.notes_text{
	font-size:83%;
}
.pay_box .attention_box p.notes{
	text-indent:-1em;
	margin-left: 1em;
	margin-right:1em;
	width:100%;
	line-height:1.6;
	font-size:83%;
	margin-bottom:0;
}


/* 支払い方法 */
.how_pay ul li h4{
	border: solid 1px #d14f97;
	text-align:center;
    padding: 9px 5px;
	width:290px;
	margin:0 auto 8px;
	color:#d14f97;
	font-weight:bold;
	font-size:116%;

}
.pay_box.how_pay .lead{
	margin-bottom:17px;
}
.how_pay ul li .lead span{
	font-size:60%;
}

.how_pay ul li.card .notes{
	font-size: 10px;
	line-height: 1.3;
	margin-bottom: 0;
	text-indent: -1em;
	padding-left: 1em;
}
.how_pay ul li.rakuten{
	padding-top:8px;
	}
