@charset "utf-8";

/* 基本設定 */

body {
    font-family:"Microsoft YaHei", "微软雅黑",'SimSun',"SimHei" sans-serif;
}

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, form, blockquote, th, td, img {
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
address, caption, th {
	font-style: normal;
	font-weight: normal;
}
img {
	vertical-align: bottom;
	border: none;
}
li {
	list-style-type: none;
}
input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

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

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block }
/* End hide from IE-mac */

.imgLeft {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}
.imgRight {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}

.textCenter {
	text-align: center;
}

.textRight {
	text-align: right;
}

.mb10 {
	margin-bottom: 10px !important;
}

.mb15 {
	margin-bottom: 15px !important;
}

.mb20 {
	margin-bottom: 20px !important;
}

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

#gHeader h1 {
	margin-bottom: 40px;
}

#footer_logoarea {
    width: 965px;
    margin: 0 auto;
    padding: 40px 0 25px 35px;
}

#container a:hover img {
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

/*---------------- メイクアップ共通 ----------------*/

#makeup .makeupNavi {
	padding: 10px 8px;
	background: #FFF;
}

#makeup .makeupNavi li {
	height: 42px;
	width: 115px;
	float: left;
	padding-right: 9px;
	background: url(https://www.chifure.co.jp/beauty/lesson/img/beauty/makeup_ar01.gif) no-repeat;
	background-position: right center;
}

#makeup .makeupNavi .last {
	padding: 0;
	background: none;
}

#makeup {
	width: 1000px;
	margin: 0 auto;
}

#makeup .makeupContents {
	background: url(https://www.chifure.co.jp/beauty/lesson/img/beauty/makeup_bg03.gif) repeat;
	padding-bottom: 35px;
}

#makeup .mainContents {
	padding: 20px 0 40px;
	border: 1px solid #B469C8;
	background: #FFF;

}

#makeup .mainContentsBox {
	width: 750px;
	margin: 0 auto;
}

#makeup .mainContents .introArea {
	padding: 45px 50px 60px;
	margin-bottom: 35px;
}

#makeup .mainContents .introArea h3 {
	margin-bottom: 20px;
}

#makeup .mainContents .introArea .introText {
	margin-bottom: 60px;
}

.bt01 {
	margin-left: 68px;
}

.fPink {
	color: #CA528E;
}

.fPurple {
	color: #B469C8;
}


/* Before Afterスライド */

.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
	width: 0;
	height: 0;
	border: 8px inset transparent;
	position: absolute;
}

.twentytwenty-left-arrow, .twentytwenty-right-arrow {
	top: 50%;
	margin-top: -6px;
}

.twentytwenty-up-arrow, .twentytwenty-down-arrow {
	left: 50%;
	margin-left: -6px;
}

.twentytwenty-container {
	position: absolute;
	top: 46px;
	left: 85px;
	width: 310px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	z-index: 0;
	overflow: hidden;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
}

.twentytwenty-container img {
    max-width: 100%;
    position: absolute;
    top: 0;
    display: block;
}

  .twentytwenty-container * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.twentytwenty-before {
    z-index: 20;
}

.twentytwenty-after {
    z-index: 10;
}

.twentytwenty-handle {
    height: 100%;
    width: 30px;
    position: absolute;
    z-index: 40;
    cursor: pointer;
   margin-left: -15px; }

.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
    content: " ";
    display: block;
    background: #F9F3F5;
    position: absolute;
    z-index: 30;
}

.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
    width: 3px;
    height: 9999px;
    left: 50%;
 }

.twentytwenty-left-arrow {
    border-right: 8px solid #139ED2;
    left: 50%;
    top:90%;
    margin-left: -23px;
}

.twentytwenty-right-arrow {
    border-left: 8px solid #139ED2;
    top:90%;
    right: 50%;
    margin-right: -26px;
}

/* メイクアップページ メインビジュアルエリア */

#makeup .mainVisualArea {
	position: relative;
	height: 324px;
}

#makeup .mainVisualArea h1 {
	position: absolute;
	top: 20px;
	left: 37px;
}

#makeup .mainVisualArea h2 {
	position: absolute;
	top: 123px;
	left: 70px;
}

#makeup .mainVisualArea .catch {
	position: absolute;
	top: 240px;
	left: 70px;
}

#makeup .mainVisualArea .slideArea {
	position: absolute;
	top: 48px;
	left: 613px;
}

/* メイクアップページ SNSボタン */
.snsArea {
	position: absolute;
	top: 10px;
	left: 967px;
	height: 243px;
	z-index: 9999;
}

#sns li {
	margin-bottom: 4px;
}

.fixed {
	position: fixed;
	top: 20px;
}

/*---------------- メイクアップトップ ----------------*/

.makeupTop {
	width: 970px;
	background: #F5E7EE;
	margin: 0 auto;
	padding: 20px 15px 0;
}

#makeup .makeupinfotop {
	height: 268px;
}

#makeup .makeupinfotop h1 {
	top: 0;
	left: 0;
}

.makeupTop .flowcontentsArea .contentsArea {
	background: #FFF;
	width: 221px;
	height: 340px;
	-webkit-border-radius: 7px;/* for Safari and Chrome */
	-moz-border-radius: 7px; /* for Firefox */
	-o-border-radius: 7px; /* for opera */
	border-radius: 7px;
}

.makeupTop .flowcontentsArea .contentsArea a {
	display: block;
}

.makeupTop .flowcontentsArea .fcontentsSet {
	margin-bottom: 35px;
}

.makeupTop .flowcontentsArea .left {
	float: left;
}

.makeupTop .flowcontentsArea .contentsBox {
	padding: 15px 15px 20px;
}

.makeupTop .flowcontentsArea .fArrow {
	width: 19px;
	float: left;
	margin: 143px 4px 0;
}

.makeupTop .flowcontentsArea .fArrow2 {
	width: 29px;
	float: left;
	margin: 143px 4px 0 10px;
}

.makeupTop .flowcontentsArea .contentsBox h2 {
	margin-bottom: 15px;
}

.makeupTop .flowcontentsArea .contentsBox h3 {
	margin-bottom: 37px;
}

.makeupTop .flowcontentsArea .contentsBox .mb {
	margin-bottom: 10px;
}

.makeupTop .flowcontentsArea .contentsBox .fImg {
	text-align: center;
	margin-bottom: 10px;
}

.makeupTop p {
	font-size: 13px;
	line-height: 1.6;
	color: #000;
}

.makeupTop .flowcontentsArea .left2 {
	float: left;
}

.makeupTop .flowcontentsArea .right {
	float: right;
}

/*---------------- メイクアップ下地 ----------------*/

#makeup .makeupBase {
	background: url(../images/base_bg01.png) no-repeat;
	background-position: left top;
}

#makeup .makeupBaseWrap {
	padding: 20px 45px 30px;
}

#makeup .makeupBaseWrap .mainContents .introArea {
	background: url(../images/base_bg02.gif) no-repeat;
	background-position: top left;
	padding-bottom: 80px;
}

#makeup .makeupBaseWrap .mainContents .introArea .introText {
	margin-bottom: 95px;
}

/*---------------- メイクアップファンデーション ----------------*/

#makeup .foundation h1 {
	position: absolute;
	top: 20px;
	left: 55px;
}


#makeup .foundation {
	background: url(../images/foundation_bg01.png) no-repeat;
	background-position: left top;
}

#makeup .foundation h1 {
	top: 40px;
	left: 20px;
}

#makeup .foundation h2 {
	top: 120px;
	left: 60px;
}

#makeup .foundation .catch {
	top: 270px;
	left: 60px;
}
#makeup .foundationWrap {
	padding: 20px 45px 30px;
}

#makeup .foundationWrap .mainContents .introArea {
	background: url(https://www.chifure.co.jp/beauty/lesson/img/beauty/foundation_bg02.gif) no-repeat;
	background-position: top left;
	padding-bottom: 105px;
}

/*---------------- アイブロウ ----------------*/

#makeup .eyebrow {
	background: url(../images/eyebrow_bg01.png) no-repeat;
	background-position: left top;
}

#makeup .eyebrow h1 {
	top: 40px;
	left: 35px;
}

#makeup .eyebrow h2 {
	top: 140px;
	left: 70px;
}

#makeup .eyebrow .catch {
	top: 245px;
	left: 70px;
}

#makeup .eyebrowWrap {
	padding: 20px 45px 30px;
}

#makeup .eyebrowWrap .mainContents .introArea {
	background: url(https://www.chifure.co.jp/beauty/lesson/img/beauty/eyebrow_bg02.gif) no-repeat;
	background-position: top left;
	padding-bottom: 90px;
}

.eyebrowBox1 {
	margin-bottom: 60px;
}

.eyebrowBox2 {
	margin-bottom: 35px;
}

/*---------------- アイシャドウ ----------------*/

#makeup .eyeshadow {
	background: url(../images/eyeshadow_bg01.png) no-repeat;
	background-position: left top;
}

#makeup .eyeshadow h1 {
	top: 10px;
	left: 35px;
}

#makeup .eyeshadow h2 {
	top: 115px;
	left: 70px;
}

#makeup .eyeshadow .catch {
	left: 70px;
}

#makeup .eyeshadowWrap {
	padding: 20px 45px 30px;
}

#makeup .eyeshadowWrap .mainContents .introArea {
	background: url(https://www.chifure.co.jp/beauty/lesson/img/beauty/eyeshadow_bg02.gif) no-repeat;
	background-position: top left;
}

/*---------------- 眼线笔 ----------------*/

#makeup .eyeliner {
	background: url(../images/eyeliner_bg01.png) no-repeat;
	background-position: left top;
}

#makeup .eyeliner h1 {
	top: 33px;
	left: 25px;
}

#makeup .eyeliner h2 {
	top: 115px;
	left: 60px;
}

#makeup .eyeliner .catch {
	left: 60px;
}

#makeup .eyelinerWrap {
	padding: 20px 45px 30px;
}

#makeup .eyelinerWrap .mainContents .introArea {
	background: url(https://www.chifure.co.jp/beauty/lesson/img/beauty/eyeliner_bg02.gif) no-repeat;
	background-position: top left;
}

/*---------------- 睫毛膏 ----------------*/

#makeup .mascara {
	background: url(../images/mascara_bg01.png) no-repeat;
	background-position: left top;
}

#makeup .mascara h1 {
	top: 40px;
	left: 35px;
}

#makeup .mascara h2 {
	top: 120px;
	left: 70px;
}

#makeup .mascara .catch {
	top: 235px;
	left: 70px;
}

#makeup .mascaraWrap {
	padding: 20px 45px 30px;
}

#makeup .mascaraWrap .mainContents .introArea {
	background: url(https://www.chifure.co.jp/beauty/lesson/img/beauty/mascara_bg02.gif) no-repeat;
	background-position: top left;
}


#makeup .mascaraWrap .mainContents .introArea h3 {
	margin-bottom: 30px;
}

/*---------------- チーク ----------------*/

#makeup .cheek {
	background: url(../images/cheek_bg01.png) no-repeat;
	background-position: left top;
}

#makeup .cheek h1 {
	top: 25px;
	left: 35px;
}

#makeup .cheek h2 {
	top: 120px;
	left: 65px;
}

#makeup .cheek .catch {
	top: 245px;
	left: 65px;
}

#makeup .cheekWrap {
	padding: 20px 45px 30px;
}

#makeup .cheekWrap .mainContents .introArea {
	background: url(../images/cheek_bg02.gif) no-repeat;
	background-position: top left;
}

#makeup .cheekWrap .mainContents .introArea h3 {
	margin-bottom: 30px;
}

.cheekBox1 {
	margin-bottom: 85px;
}

.cheekBox2 {
	margin-bottom: 20px;
}

.cheekBox3 {
	margin-bottom: 96px;
}

.cheekBox4 {
	margin-bottom: 10px;
}

/*---------------- 口紅 ----------------*/


#makeup .lip {
	background: url(../images/lip_bg01.png) no-repeat;
	background-position: left top;
}

#makeup .lip h1 {
	top: 40px;
	left: 25px;
}

#makeup .lip h2 {
	top: 120px;
	left: 65px;
}

#makeup .lip .catch {
	top: 235px;
	left: 70px;
}

#makeup .lipWrap {
	padding: 20px 45px 30px;
}

#makeup .lipWrap .mainContents .introArea {
	background: url(https://www.chifure.co.jp/beauty/lesson/img/beauty/lip_bg02.gif) no-repeat;
	background-position: top left;
	padding: 45px 50px 70px;
}

#makeup .lipWrap .mainContents .introArea h3 {
	margin-bottom: 30px;
}

.lipBox1 {
	margin-bottom: 30px;
}

.lipBox2 {
	margin-left: 72px;
}

/* メイクステップ */

.stepContentsArea {
	color: #231815;
	font-size: 15px;
	line-height: 1.6;
}

.stepContentsArea .stepContentsSet {
	margin-bottom: 40px;
	padding-bottom: 40px;
	background: url(https://www.chifure.co.jp/beauty/lesson/img/beauty/step_underline.gif) repeat-x;
	background-position: left bottom;
}

.stepContentsArea .lastContents {
	background: none;
	padding: 0;
}

.stepContentsArea .stepContentsSet .contentsBox {
	margin-bottom: 40px;
}

.stepContentsArea .stepContentsSet .stepContents .imageArea {
	float: left;
	width: 350px;
}

.stepContentsArea .stepContentsSet .stepContents .firstImg {
	margin-bottom: 30px;
}

.stepContentsArea .stepContentsSet .stepContents .textArea {
	float: right;
	width: 370px;
}

.stepContentsArea .stepContentsSet .stepContents .textArea2 {
	width: 350px;
}

.stepContentsArea .stepContentsSet .stepContents .textArea .textSet {
	margin-bottom: 60px;
}

.stepContentsArea .stepContentsSet .stepContents .textArea h3,
.stepContentsArea .stepContentsSet .stepContents .textArea h4 {
	margin-bottom: 25px;
}

.stepContentsArea .stepContentsSet .stepContents .textArea h5 {
	margin-bottom: 20px;
}

.stepContentsArea .stepContentsSet .stepContents .textArea h6 {
	font-weight: bold;
}

.stepContentsArea .stepContentsSet .stepContents .textBox {
	margin-bottom: 20px;
}

.stepContentsArea .stepContentsSet .stepContents .textBox2 {
	margin-bottom: 20px;
	padding-left: 1em;
	text-indent: -1em;
}

.stepContentsArea .stepContentsSet .stepContents .pointSet .kotsu {
	float: left;
	width: 56px;
	margin: 0;
}

.stepContentsArea .stepContentsSet .stepContents .pointSet .pointContents {
	float: right;
	width: 300px;
}

.finishContents {
	margin-bottom: 40px;
}

.finishContents2 {
	margin-bottom: 30px;
}

.beforeImg {
	float: left;
	width: 380px;
	margin-top: 78px;
}

.beforeImg2 {
	float: left;
	width: 380px;
}

.finishBox {
	float: right;
	width: 353px;
}

.productLink {
	text-align: center;
}

.finishContents .afterImg {
	margin-bottom: 15px;
}

.kokopointContents {
	background: url(https://www.chifure.co.jp/beauty/lesson/img/beauty/kokopoint_bg01.gif) no-repeat;
	background-position: left top;
	width: 750px;
	margin-bottom: 30px;
}

.kokopointContents  .kokopointContentsbox {
	background: url(https://www.chifure.co.jp/beauty/lesson/img/beauty/kokopoint_bg02.gif) no-repeat;
	background-position: left bottom;
	padding: 0 45px 60px 45px;
}

.kokopointContents h3 {
	padding-top: 26px;
	margin: 0 0 5px 192px;
}

.kokopointContents .kokopointContentsbox .left {
	float: left;
	width: 310px;
}

.kokopointContents .kokopointContentsbox .right {
	float: right;
	width: 326px;
}

.kokopointContents .kokopointContentsbox .right h4 {
	margin-bottom: 15px;
}

#concealer {
	background: url(https://www.chifure.co.jp/beauty/lesson/img/beauty/foundation_bg04.gif) no-repeat;
	background-position: left top;
	padding: 25px 40px;
	margin: 0 0 40px 6px;
}

#concealer h3 {
	margin-bottom: 30px;
}

#concealer h4 {
	margin-bottom: 15px;
}

#makeup .mainContents #concealer .introArea  {
	background: url(https://www.chifure.co.jp/beauty/lesson/img/beauty/foundation_bg05.gif) no-repeat;
	background-position: left top;
	margin-bottom: 10px;
}

#concealer .concealerStep .left {
	float: left;
	width: 205px;
	margin-right: 23px;
}

#concealer .concealerStep .center {
	float: left;
	width: 205px;
	margin-right: 23px;
}

#concealer .concealerStep .right {
	float: right;
	width: 205px;
}

#concealer .concealerStep p {
	margin-bottom: 10px;
}

.campaignLink {
	text-align: center;
	margin-top: 40px;
}
/*20170317miya言語切り替えCSS*/
.beauty_language{
  *zoom: 1;
  list-style-type: none;
  width: 960px;
  height:160px;
  padding: 0;

  position:relative;

  top:20px;
  left:630px;
  z-index:100;
  margin-bottom:-50px;
}
.beauty_language:before, .beauty_language:after{
  content: "";
  display: table;
}
.beauty_language:after{
  clear: both;
}
.beauty_language li{
  position: relative;
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
.beauty_language li a{/*通常時*/
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  background: #968578;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}
.beauty_language li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}
.beauty_language li ul li{
  width: 100%;
}
.beauty_language li ul li a{/*展開時*/
  padding: 13px 15px;
  border-top: 1px solid #E7E2E0;
  background: #B4A8A0;
  text-align: left;
}
.beauty_language li:hover > a{
  background: #7A6A5F;
}
.beauty_language li a:hover{
  background: #7A6A5F;
}

#beauty_language li ul li{
  overflow: hidden;
  height: 0;
  transition: .2s;
}
#beauty_language li:hover ul li{
  overflow: visible;
  height: 38px;
}


/*ここまで20170317miya言語切り替えCSS*/