@charset "utf-8";

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

	スマートフォン向けcommon.css
	
-------------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------------
	リセット
-------------------------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video{
	margin:0;
	padding:0;
}

html{
	font-size:62.5%;
}
body{
	max-width:800px;
	margin:0 auto 20%;
	line-height:1.5;
	font-family:Helvetica, Arial,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
	font-size:1.4em;
	-webkit-text-size-adjust:100%;
	color:#222;
}
h1,h2,h3,h4,h5,h6,
input,
textarea{
	font-weight:normal;
	font-size:100%;
}
ol,ul{
	list-style:none;
}
blockquote,q{
	quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
	content:'';
	content:none;
}
input,
textarea,
select{
	font-family:Helvetica, Arial,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}

img{
	max-width:100%;
	height:auto;
	border:none;
	-ms-interpolation-mode:bicubic;
	vertical-align:bottom;
}
a img{
	border:none;
	vertical-align:bottom;
}


@media screen and (min-width: 200px) and (max-width: 299px){
	body{
		font-size:1em;
	}
}
@media screen and (min-width: 300px) and (max-width: 399px){
	body{
		font-size:1.05em;
	}
}
@media screen and (min-width: 400px) and (max-width: 499px){
	body{
		font-size:1.1em;
	}
}
@media screen and (min-width: 500px) and (max-width: 599px){
	body{
		font-size:1.15em;
	}
}
@media screen and (min-width: 600px) and (max-width: 699px){
	body{
		font-size:1.2em;
	}
}
@media screen and (min-width: 700px) and (max-width: 799px){
	body{
		font-size:1.25em;
	}
}
@media screen and (min-width: 800px) and (max-width: 899px){
	body{
		font-size:1.3em;
	}
}
@media screen and (min-width: 900px) and (max-width: 999px){
	body{
		font-size:1.35em;
	}
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
    display:block;
}
ul{
	list-style:none;
	margin:0;
	padding:0;
}

a{
    -webkit-tap-highlight-color:rgba(0,0,0,0.1);
	tap-highlight-color:rgba(0,0,0,0.8);
	text-decoration:none;
	color:#222;
}

input{
	max-width:100%;
	height:auto;
	-webkit-border-radius:100%;
	border-radius:0;
}
input, select{
	vertical-align:middle;
}


/* --------------------------------------------------------------------------------
	共通クラス
-------------------------------------------------------------------------------- */
.clear{
	clear:both;
}
br.clear{
	display:block;
	margin:0;
	padding:0;
	clear:both;
	height:0;
	border:none;
	visibility:hidden;
	font-size:0;
}
.clearfix:after{
	content:".";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
}
.clearfix{
	min-height:1%;
}
* html .clearfix{
	height:1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

ul.ul{
	list-style:disc;
	padding:0 0 0 1.5em;
}
ol.ol{
	list-style:decimal;
	padding:0 0 0 1.75em;
}

/********** プレースホルダー **********/
::-webkit-input-placeholder{
}

/* --------------------------------------------------------------------------------
	デバイスごとの表示・非表示
-------------------------------------------------------------------------------- */
.device-sp{
	display:block;
}
.device-sp-inline{
	display:inline;
}
.device-pc{
	display:none;
}
.device-pc-inline{
	display:none;
}

.inner{
	padding:0 2%;
}


/* --------------------------------------------------------------------------------
	container
-------------------------------------------------------------------------------- */
#container{
	position:relative;
}


/* --------------------------------------------------------------------------------
	header
-------------------------------------------------------------------------------- */
#header{
}

/********** ロゴ・ナビ **********/
#header .logo-h-nav{
	background:#efefef;
}

/********** ロゴ **********/
#header .logo{
	width:37.2%;
	float:left;
}

/********** マイページ **********/
#header .h-nav-btn ul li{
	width:15.7%;
	float:left;
}

/********** メニュー **********/
#header .h-menu-content{
	display:none;
	position:absolute;
	width:88%;
	padding:4.5% 2% 0;
	right:0;
	z-index:250;
	background:#222;
}

/********** カテゴリー **********/
#h-cat{
	max-width:800px;
}
.fix {
	position: fixed;
	top: 0;
	z-index: 5000;
	width: 100%;
}
#h-cat ul {
	display: -webkit-flex;
	display: flex;
    background: #222;
    padding: 0 0 0 2%;
	align-items: center;
	text-align: center;
}
#h-cat ul li {
	height: 100%;
	padding: 0;
	flex: 3;
}
#h-cat ul li:nth-child(4) {
	flex: 4;
}
#h-cat ul li a {
	display: block;
	padding: 12px 1%;
	color: #FFF;
	font-size: 3.4vw;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.4;
}
#h-cat ul li a:hover {
	color: #e50782;
}

/* dead */
#h-cat ul li a img {
	display:block;
}

/********** 検索 **********/
#header .h-menu-content-search{
	margin:0 0 6%;
}
#header .h-menu-content-search .h-menu-content-search-box{
	box-sizing:content-box;
	display:table;
	width:100%;
	padding:0;
}
#header .h-menu-content-search .input-txt{
	display:table-cell;
	width:85%;
	vertical-align:middle;
	position:relative;
}
#header .h-menu-content-search .input-txt input{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width:94%;
	height:100%;
	padding:0 3%;
	border:none;
	font-size:1.5em;
}
#header .h-menu-content-search .input-submit{
	width:15%;
	display:table-cell;
	vertical-align:middle;
	text-align:right;
}
#header .h-menu-content-search .input-submit input{
	display:block;
	right:0;
}

/********** ヘッダーメニュー **********/
#header .h-navigation ul li{
	padding:0 0 3%;
}
#header .h-navigation ul li ul li:last-child{
	padding:0 0 0;
}
#header .h-navigation ul li a {
	display:block;
	padding:2% 12% 2% 2%;
	font-size:1.5em;
	color:#222;
	background:#fff url(../images/common/h-icon-arr.png) no-repeat 97% 50%;
	background-size:4% auto;
	text-decoration: none;
}

/********** アイコン付きナビ **********/
#header .h-navigation ul li.icon-nav a .icon-nav-box{
	width:100%;
	display:table;
}
#header .h-navigation ul li.icon-nav a .icon{
	width:10%;
	display:table-cell;
	padding:0 3% 0 0;
}
#header .h-navigation ul li.icon-nav a .label{
	display:table-cell;
	width:90%;
	vertical-align:middle;
}

/********** サブメニュー **********/
#header .h-navigation ul li.submenu .btn-submenu{
}
#header .h-navigation ul li.submenu .btn-submenu a{
	color:#fff;
	background:#a6860c url(../images/common/h-icon-arr-down.png) no-repeat 97% 50%;
	background-size:4% auto;
}
#header .h-navigation ul li.submenu.active .btn-submenu a{
	background-image:url(../images/common/h-icon-arr-up.png);
}
#header .h-navigation ul li.submenu .submenu-content{
	padding:3% 0 0;
	display:none;
}

/********** 検索＆ボタン **********/
#header .search-btns{
	padding:3%;
}

/********** 検索 **********/
#header .h-search{
	margin:0 0 4%;
}
#header .h-search .h-search-box{
	box-sizing:content-box;
	display:table;
	width:100%;
	padding:0;
}
#header .h-search .input-txt{
	display:table-cell;
	width:85%;
	vertical-align:middle;
	position:relative;
	border-top:solid 1px #000;
	border-bottom:solid 1px #000;
	border-left:solid 1px #000;
}
#header .h-search .input-txt input{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width:94%;
	height:100%;
	padding:0 3%;
	border:none;
	font-size:1.5em;
}
#header .h-search .input-submit{
	width:15%;
	display:table-cell;
	vertical-align:middle;
	text-align:right;
}
#header .h-search .input-submit input{
	display:block;
	right:0;
}

/********** はじめてのお客様・商品一覧 **********/
#header .search-btns ul li{
	float:left;
	width:48.5%;
}
#header .search-btns ul li:nth-child(2){
	float:right;
}


/* --------------------------------------------------------------------------------
	wrapper
-------------------------------------------------------------------------------- */
#wrapper{
	width:auto !important;
	margin:auto !important;
}


/* --------------------------------------------------------------------------------
	main
-------------------------------------------------------------------------------- */
#main {
    width: auto !important;
    margin: 0 4% !important;
    line-height: 2em !important;
    font-size: 120%;
}

#main .breadcrumbs {
    margin-bottom: 3%;
}

.entry-body{
	margin-bottom: 8%;
}

.single #main .main-inner .article h2 a,
.page-id-119 #main .main-inner .article h2 a {
    color: #fff !important;
    background: #666;
    padding: 2% 0;
    display: block;
}
.main-inner .entry-metadata {
    background: #eee;
    margin-bottom: 3%;
}
.main-inner .entry-date, .main-inner .category {
    float: right;
    margin-left: 3%;
}

.single #main .blogtop a,
.page-id-119 #main .blogtop a {
    display: block;
    border: #ccc solid 2px;
    text-align: center;
    margin-top: 5%;
    padding: 1%;
}

/* --------------------------------------------------------------------------------
	footer
-------------------------------------------------------------------------------- */
/********** ページトップ **********/
#footer .f-btn-pagetop{
	position: fixed;
	padding:0% 0 5% 85%;
	bottom: 50px;
}

/********** 外側 **********/
#footer .footer-outer{
	padding:5% 0 0;
	background:#efefef;
	font-size:1.2em;
}

/********** 内側 **********/
#footer .footer-inner{
}

/********** col1 **********/
#footer .col1{
}

/********** お支払い方法 **********/
#footer .payment{
	line-height:1.6;
}
#footer .payment .payment-box{
	padding:2% 2% 5%;
}
#footer .heading{
	padding:0 0 1%;
}
#footer p{
	margin:0;
}
#footer ul{
	list-style:none;
	margin:0;
	padding:0;
}
#footer .payment .mark1{
	font-weight:bold;
	color:#e50682;
}
#footer .payment .f-icon-credit{
	padding:1% 0 2%;
}
#footer .payment .list-payment ul li{
	padding:0 0 1%;
}
#footer .payment .list-payment ul li a{
	font-weight:bold;
	color:#e50682;
}

/********** col2 **********/
#footer .col2{
}

/********** 配送について **********/
#footer .delivery{
	line-height:1.6;
}
#footer .delivery .f-icon-timetable{
	padding:2% 0 0;
}
#footer .delivery .delivery-box{
	padding:2% 2% 5%;
}
#footer .delivery .mark1{
	font-weight:bold;
	color:#e50682;
}

/********** 営業時間について **********/
#footer .hours{
	line-height:1.6;
}
#footer .hours .hours-box{
	padding:2% 2% 5%;
}
#footer .hours .mark1{
	font-weight:bold;
	color:#e50682;
}

/********** col3 **********/
#footer .col3{
}

/********** その他 **********/
#footer .col3 .etc .etc-box{
	padding:2% 2% 5%;
}
#footer .col3 .etc ul{
	float:left;
	width:49.5%;
}
#footer .col3 .etc ul:nth-of-type(2n){
	float:right;
}
#footer .col3 .etc ul li{
	padding:0 0 2%;
}
#footer .col3 .etc ul li a{
	display:block;
	padding:4% 12% 4% 3%;
	color:#222;
	background:#fff url(../../common/f-icon-arr.png) no-repeat 97% 50%;
	background-size:6% auto;
}

/********** プライバシーポリシー **********/
#footer .privacy .privacy-box{
	padding:3% 3% 8%;
	line-height:1.6;
}

/********** コピーライト **********/
#footer .copyright{
	padding:3%;
	text-align:center;
	color:#fff;
	background:#e50682;
}

/********** スクロールすると出現する固定メニュー **********/
#f-fix-menu{
	max-width:800px;
	position: fixed;
	z-index: 200;
	bottom: -20%;
	left: 0;
	width: 100%;
	background:#222;
}
#f-fix-menu ul.f-fix-menu-inner{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#f-fix-menu ul.f-fix-menu-inner li {
	float: left;
	margin: 0;
	padding: 0;
	text-align: center;
}
#f-fix-menu ul.f-fix-menu-inner li:nth-of-type(1) {
	width:16.8%;
}
#f-fix-menu ul.f-fix-menu-inner li:nth-of-type(2) {
	width:16.6%;
}
#f-fix-menu ul.f-fix-menu-inner li:nth-of-type(3) {
	width:16.7%;
}
#f-fix-menu ul.f-fix-menu-inner li:nth-of-type(4) {
	width:16.6%;
}
#f-fix-menu ul.f-fix-menu-inner li:nth-of-type(5) {
	width:16.7%;
}
#f-fix-menu ul.f-fix-menu-inner li:nth-of-type(6) {
	width:16.6%;
}
#f-fix-menu ul.f-fix-menu-inner li a {
	display: block;
	width : 100%;
	padding: 0;
	line-height: 1;
}




/********** Lesson **********/


#lesson{
	margin:0 auto;
	}


#lesson p{
	line-height:1.8;
	}
#lesson a{
	color: #39c;
	}


#lesson .intro{
	margin:1% 0 4%;
	padding:0 2%;
	}

#lesson .bg{
	background:url(http://cosmejitan.com/image/lesson/bg.jpg);
	padding:10px;
	}
	
#lesson .bg .event{
	background:#fff;
	padding:0 3%;
	}
	
	
	
	
#lesson .bg .event h3{
	text-align:center;
	padding:1% 0;
	margin:0;
	}
	
	
#lesson .bg .event p{
	padding:1% 0;
	}
	
#lesson .bg .event p em{
	color:#F00;
	font-style:normal;
	}
	
#lesson .bg .event p span{
	text-decoration:underline;
	}
#lesson .bg .event p .mark1{
	text-decoration:none;
	border-bottom: double 3px #000000 !important;
	}

#lesson .btn{
	}

#lesson .lesson_form form{
	background:#f9f6f0;
	padding:2%;
	}

#lesson .sec02{
	background:url(http://cosmejitan.com/image/lesson/lesson-sec02-bg.jpg);
	margin:4% 0 0;

	}


#lesson .sec02-inner{
	padding:0 2% 2%;
	}

#lesson .lesson-txt{
	margin:0 0 5%;
	}
	
	
#lesson .lesson-txt span{
	color:#fff;
	background:#ff467f;
	}
	
	
	
#lesson .lesson_form{
	margin:2% 0;
	padding:2%;
	background:#fff;
	}
	
#lesson .lesson_form em{
	color:#F00;
	font-style:normal;
	}

#lesson .lesson_form span{
	display:block;
	margin:1% 0; 
	}

#lesson .tel span{
	display:inline-block;
	font-size:1.4em;
	font-weight:bold;
	margin:-1% 0 0 1%;
	}

#lesson .yoyaku span{
	display:block;
	color:#ff467f;
	}

#lesson .company{
	margin:2% 0;
	background:#FFF;
	 }

#lesson .company p {
	padding:0 2% 2%;
	 }
	 
#lesson .company p span{
	display:block;
	color:#ff467f;
	 }


.select-language{
	margin:0 0 1em;
	}
	
.select-language a{
	background:#F00;
	color:#fff;
	display:inline-block;
	padding:0.2em 1.5em;
	font-size:16px;
	
	}


.h-catch ul li {
    display: inline-block;
    width: 49.5%;
}


#guide_link01, #guide_link01b{
}




.f-info {
	/* border-top: solid 1px #f00; */
	/* border-bottom: solid 1px #f00; */
	padding: 0 0 1.5em;
	/*font-size: 1.25em;*/
}

.f-info span {
	display: inline-block;
	font-weight: bold;
	color: #f00;
}
.f-info h3 {
	font-size: 22px;
	padding: 0.5em;
	margin: 0 0 1em;
	background: #222;
	color: #fff;
	text-align: center;
}
.f-info p {	
	padding: 0 1.5em 0;
}

.f-info ul li {
	float: left;
	margin-left: 1em;
}