@charset "utf-8";

#content {font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","Osaka","ＭＳ Ｐゴシック","MS P Gothic",Verdana,Arial,Helvetica,sans-serif; -webkit-text-size-adjust: 100%; font-size:inherit; margin-bottom: 140px; letter-spacing: 0; }


.mincho {font-family: 'Shippori Mincho',serif; }
.en {font-family: 'EB Garamond','Shippori Mincho',serif; letter-spacing: 0.04em; }

#content .red {color: #a15b5b;}
#content a { transition: opacity .4s ease; }
#content a:hover,
#content a:focus {color: inherit !important; text-decoration: none; opacity: 0.8; }
#content br.onlySP,
#content br.onlySP--force{ display: none; }
#content .pc_view {display:inline;}
#content .smp_view {display:none;}
@media screen and (max-width: 767px) {
  #content br.force,
  #content br.onlySP--force { display: inline-block!important; }
  #content .pc_view {display:none;}
  #content .smp_view {display:inline;}
  #content .smp_hidden {display:none;}
  #content br.onlySP{ display: inline; }
}



main {position:relative; color:#363636; width: auto; }
main h1 {padding:78px 5.9% 21px; margin:0 auto; width:auto; line-height:1em; font-size:22px; font-weight: normal; letter-spacing: 0; }
main .main_inner {margin:0 auto 100px; width:auto;}
@media screen and (max-width: 767px) {
  main {margin-bottom:50px;}
  main h1 {margin:0; padding:40px 0 14px; font-size:16px; text-align:center; width:auto;}
  main .main_inner {width:auto; margin:0 0 30px; overflow: visible;}
}






#content{-webkit-font-smoothing: antialiased; width: auto; float:none;}

/* header */
#content header {*zoom:1; border:0; margin: 0; padding: 0 5.9%; text-align: left; display: block; }
#content header time { display:block; font-size:12px; margin-bottom: 51px; color: #999; }
#content header h2 { display:block; font-size:36px !important; margin-bottom: 33px; font-weight: normal !important; line-height: 1.4; word-break:keep-all; overflow-wrap: anywhere; }
#content header h2 small { display: block; font-size:22px; font-weight: normal; margin-top: 14px; }
#content header .icon { display: block; margin-bottom: 13px; }
#content header .icon span { display: inline-block; font-size:11px; background: #eed2cd; height: 22px; line-height: 23px; padding: 0 15px; }
#content header .release { display: block; font-size:12px; margin-bottom: 5px; }
#content header .reserve { display: block; font-size:12px; margin-bottom: 30px; }
@media screen and (max-width: 767px) {
  #content header { width: auto; }
  #content header * { text-align: center; }
  #content header time { font-size: 12px; margin-bottom: 30px; }
  #content header h2 { margin-bottom: 26px; font-size: 36px!important; line-height: 1.2; }
  #content header h2 .jill { display: block; font-size: 18px; margin-bottom: 10px; }
  #content header h2 small { margin-top: 17px; font-size: 18px; color: #999; }
  #content header .icon { margin: 0 auto 13px; }
}

#content .main_visual { display:block; margin:0; text-align: center; }
#content .main_visual img { width: 100%; margin: 0 auto; }
@media screen and (max-width: 767px) {
  #content .main_visual { margin: 0; }
  #content .main_visual img{ width: 100%; }
}




/* introduction */
#content #introduction-wrapper { padding: 0; margin: 0 0 200px; }
#content #introduction { margin: 0; position: relative; padding: 100px 0; background: url("images/introduction_bg@2x.png") no-repeat; background-size: cover; background-position: center center;}
#content #introduction #introduction-inner { padding: 123px 20px; margin: 0 auto; letter-spacing: normal; background: rgba(255,255,255,0.7); width: 900px; }
#content #introduction * { text-align: center; }
#content #introduction h3 {margin:0 0 50px;}
#content #introduction p { line-height: 2; font-size: 18px; color: #4c4948; margin: 1em 0 0; }
#content #introduction p span { display: inline-block; word-break:keep-all; overflow-wrap: anywhere; }
@media screen and (max-width: 767px) {
  #content #introduction-wrapper { width: auto; }
  #content #introduction { padding: 100px 10px 200px; background-size: cover; }
  #content #introduction #introduction-inner { padding: 80px 20px; margin: 0; border: 0; width: auto; }
  #content #introduction h3 { margin-bottom: 30px; }
  #content #introduction h3 img { width: 75%; max-width: 320px; }
  #content #introduction p { line-height: 2; margin-top: 0.8rem; font-size: 16px; display: inline-block; word-break:keep-all; overflow-wrap: anywhere; }
  #content #introduction p br{ display: none; }
}




/* lineup */
#content #lineup{ padding: 0; margin: 0 auto 100px; }
#content #lineup-body { padding: 0; }
#content #lineup-body:before {display: none;}
#content #lineup-inner { padding: 0; }
#content #lineup .lineup__title { text-align: center; margin-bottom: 10px !important; position: relative; padding: 0; }
#content #lineup .lineup__items { display: flex; justify-content: center; flex-wrap: wrap; margin:0;}
#content #lineup .lineup__items li { text-align: center; margin:0 18px 25px; }
#content #lineup .lineup__items li a { color: #333!important; display: flex; justify-content: space-between; flex-direction: column; }
#content #lineup .lineup__items li span { display: block; padding: 3px 0; text-align: center; font-weight: normal; margin: 0; }
#content #lineup .lineup__items .item__img { display: flex; justify-content: center; align-items: flex-end; width: 100%; margin-bottom:7px; }
#content #lineup .lineup__items .item__title { font-size: 14px; line-height: inherit; padding: 0; margin: 0; }
#content #lineup .lineup__items .item__title span { margin: 0; display: inline-block; word-break:keep-all; overflow-wrap: anywhere; padding: 0; letter-spacing: inherit; }
#content #lineup .lineup__items .item__tag { color: #dc6185; background: #fcf3f5; display: inline-block; font-size: 9px; line-height: 15px; height: 15px; width: 120px; margin: 5px auto 0; }
#content #lineup .lineup__items .item__img img { }
@media screen and (max-width: 767px) {
  #content #lineup { margin: 0 -7.13% 140px;}
  #content #lineup-body { margin: 0; padding: 5px; }
  #content #lineup-inner { padding: 5px; margin: 0; }
  #content #lineup .lineup__title { margin: 30px 0 10px!important; }
  #content #lineup .lineup__title img { max-width: 200px; }
  #content #lineup .lineup__lists {margin: 0;}
  #content #lineup .lineup__items {justify-content:center; margin: 0 !important; width: 100%;}
  #content #lineup .lineup__items li {padding: 0 5px; margin: 0 2% 20px; width: 43%; max-width: 160px; }
  #content #lineup .lineup__items li br {display: none;}
  #content #lineup .lineup__items li img {max-width: none;}
  #content #lineup .lineup__items li span {}
  #content #lineup .lineup__items .item__img {}
  #content #lineup .lineup__items .item__img img {height: auto; }
  #content #lineup .lineup__items .item__title { margin: 0; }
}




.gradation,
.gradation2{ position: relative; }
.gradation:before { display: block; content: ""; position: absolute; top: 0; width: 100%; height: 200px; z-index: -1;
background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(228,181,178,0.25) 100%); }
.gradation2:before { display: block; content: ""; position: absolute; top: 0; width: 100%; height: 200px; z-index: -1;
   background: #faf9f9; background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(246,243,243,0.35) 100%);}






/* .section */
#content .sections { }
#content .section { padding: 120px 0 200px; margin: 0; position: relative; }
#content .section .section__before { display: block; position: absolute; top: -25px; right: 0; }
#content .section .section__before .pagetop { display: inline-block; text-align: right; background: url(/img/jill/images/pc/general/icon_up.png) no-repeat top 2px left; color: #333; font-size: 14px; padding-left: 20px; }
#content .section .description { font-size: 20px; line-height: 1.8; color: #666; margin: 0 0 100px; position: relative; text-align: center; padding: 60px 0 46px; word-break:keep-all; overflow-wrap: anywhere; }
#content .section .description:before,
#content .section .description:after { content: " "; display: block; left: 0; position: absolute; width: 100%; }
#content .section .description:before { background: url("images/deco_top.png") no-repeat 50% 0; height: 33px; top: 0; }
#content .section .description:after { background: url("images/deco_bottom.png") no-repeat 50% 0; bottom: 0; height: 16px; }
#content .section .description rt { font-size: 8px; letter-spacing: 0; }
#content .section .description sup { vertical-align: super; font-size: 9px; }
#content .section .description span small { font-size: 10px; }
#content .section .description span.kome { word-break: normal; display: block; text-align: center; font-size: 10px; margin-top: 15px; }
#content .section .sectionMain { max-width: 1000px; margin: 0 auto; }
#content .section .sectionMain-inner { display: flex; justify-content: space-between; }
#content .section .sectionMain-inner > .item_img { width: 48%; }
#content .section .sectionMain-inner > .meta { width: 50%; }
#content .section .item_img { padding: 0; text-align: center; position: relative;}
#content .section .item_img img { width: 100%; }
#content .section .item_img .slider { margin-bottom: 50px; text-align: center; }
#content .section .item_img .slider .slick-slide img { margin: 0 auto; }
#content .section .item_img .thumbnail { }
#content .section .item_img .thumbnail .slick-list { text-align: center; }
#content .section .item_img .thumbnail .slick-track { display: inline-block; width: auto !important; }
#content .section .item_img .thumbnail .slick-track:hover { cursor: pointer; }
#content .section .item_img .thumbnail .slick-slide { width: 90px !important; border: 1px solid #eee; padding: 10px 0; margin: 0 5px; border-radius: 5px; background: #fff; }
#content .section .item_img .thumbnail .slick-slide img { width: 90px !important; }
#content .section .item_img .thumbnail .slick-current { border-color: #eed2cd; }
#content .section .meta { }
#content .section .meta .icon { display: block; margin-bottom: 26px; }
#content .section .meta .icon span { display: inline-block; font-size:11px; background: #eed2cd; height: 22px; line-height: 23px; padding: 0 15px; }
#content .section .meta * { text-align: left; }
#content .section .meta h4 { font-size:26px; line-height:1.6; margin-bottom:14px; display: block; margin-left: -0.35em; word-break:keep-all; overflow-wrap: anywhere;  }
#content .section .meta h4 small { font-size:14px; color: #666; display: block; margin: 5px 0 9px 0.5em; line-height: 1; }
#content .section .meta h4 small.sub { font-size: 14px; color: #999; margin: 9px 0 22px; font-weight: normal; }
#content .section .meta h5 { font-size:18px; line-height:1.4; color:#a8a8a8; margin-bottom:35px; word-break:keep-all; overflow-wrap: anywhere; }
#content .section .meta .color { margin: 40px 0; }
#content .section .meta .color .name {}
#content .section .meta .color .tama { margin-bottom: 20px; }
#content .section .meta .color strong { display: block; color: #333; font-size: 18px; margin-bottom: 14px; line-height: 20px; font-weight: normal; letter-spacing: inherit; }
#content .section .meta .color small { display: inline-block; font-size: 13px; }
#content .section .meta .color p { font-size: 10px; line-height: 1.7; letter-spacing: 0; margin: 0; word-break:keep-all; overflow-wrap: anywhere; color: #a8a8a8; }
#content .section .meta .color .limited { font-size: 10px; line-height: 1.7; text-align: right; color: #666; width: 450px; }
#content .section .meta .color .color { display: block; margin: 10px 0 0; }
#content .section .meta .color .color ul { }
#content .section .meta .color .color ul li { font-size: 9px; width: auto; margin: 0 0 2px 1.8em; text-indent: -1.8em; }
#content .section .meta .info { font-size: 13px; line-height: 1.7; margin-bottom: 5px; color: #666; }
#content .section .meta .price { font-size: 13px; line-height: 1.7; padding: 0; margin-bottom: 12px; color: inherit; }
#content .section .meta .price small { font-size: 12px; padding: 0 4px; }
#content .section .meta .price .large { font-size: 23px; padding: 0 2px; }
#content .section .meta .release { display: block; font-size: 12px; padding: 0 0 5px; }
#content .section .meta .reserve { display: block; font-size: 12px; margin: 0 0 25px; }
#content .section .meta .detailBtn { display: block; font-size: 16px; line-height: 1; border: 1px solid #939393; padding: 12px 0; margin: 10px 0 0; transition: background .4s ease; text-align: center; max-width: 370px; background: url('images/common_icon_arrow_right_black_12.png') no-repeat center right 12px; background-size: 12px; }
#content .section .meta .detailBtn:hover { background-color: #f8f5f4; color: inherit !important; }
#content .section .meta .cartBtn { display: block; font-size: 16px; line-height: 1; font-weight: bold; color: #fff; border: 1px solid #332e2d; padding: 12px 0; margin: 10px 0 0; transition: opacity .4s ease; text-align: center; max-width: 370px; background: #332e2d url('images/common_icon_cart_white_24.png') no-repeat center left 12px; background-size: 24px; }
#content .section .meta .cartBtn:hover { opacity: 0.7; color: #fff !important; }
@media screen and (max-width: 767px) {
  #content .section { padding: 70px 0 140px; }
  #content .section:before { margin: 0 0 50px; background-repeat: repeat-x; }
  #content .section .section__before { right: 10px; }
  #content .section .section__before .pagetop { font-size: 12px; }
  #content .section .description { font-size: 18px; line-height: 1.8; letter-spacing: 0; margin: 0 5px 50px;}
  #content .section .description br { }
  #content .section .sectionMain-inner { display: block; margin: 0 5px; text-align: center; }
  #content .section .sectionMain-inner > .item_img,
  #content .section .sectionMain-inner > .meta { width: auto; }
  #content .section .item_img { margin-bottom: 40px; }
  #content .section .item_img img { width: 100%; max-width: 480px; }
  #content .section .item_img .slider { margin-bottom: 20px; }
  #content .section .item_img .thumbnail .slick-list { width: auto; }
  #content .section .meta {}
  #content .section .meta .icon { margin-bottom: 20px; }
  #content .section .meta .icon span { font-size: 12px; padding: 0 20px; }
  #content .section .meta * { text-align: center; }
  #content .section .meta h4 { font-size: 22px; font-weight: bold; margin: 0 10px 14px; line-height: 1.4; }
  #content .section .meta h4 small { font-size: 14px; margin-bottom: 12px; margin: 12px 0 11px; }
  #content .section .meta h4 small.sub { font-size: 16px; color: #999; margin: 9px 0 18px; font-weight: normal; }
  #content .section .meta h4 span { margin-left: 0; }
  #content .section .meta h5 { font-size: 18px; margin: 0 10px 22px; color: #a8a8a8; }
  #content .section .meta .color .limited { width: auto; text-align: center; padding-top: 7px; }
  #content .section .meta .color .color { margin: 10px 5px 0; display: inline-block; }
  #content .section .meta .color .color ul { float: none; display: block; }
  #content .section .meta .color .color ul li { font-size: 9px; text-align: left; }
  #content .section .meta .color .color ul li br { display: none; }
  #content .section .meta .info { font-size: 14px; margin: 0; }
  #content .section .meta .price .large { font-size: 28px; }
  #content .section .meta .release { font-size: 13px; }
  #content .section .meta .reserve { font-size: 13px; margin-bottom: 30px; }
  #content .section .meta .detailBtn { width: 90%; max-width: 420px; margin: 10px auto 0; font-size: 16px; font-weight: bold; padding: 16px 0; }
  #content .section .meta .cartBtn { width: 90%; max-width: 420px; margin: 10px auto 0; font-weight: normal; background-size: 28px; font-weight: bold; padding: 16px 0; }
}


#content .section .meta .additional_informations { display: flex; justify-content: space-around; flex-wrap: wrap; margin: 20px 0 30px; background: rgba(246,243,243,0.45); padding: 30px 10px 0; max-width: 370px; }
#content .section .meta .additional_informations.wide { max-width: none; }
#content .section .meta .additional_information { display: flex; flex-flow: column; justify-content: flex-end; padding: 0 10px; margin-bottom: 20px; }
#content .section .meta .additional_information.flex { display: flex; flex-flow: row; }
#content .section .meta .additional_information.flex > span { display: flex; flex-flow: column; padding: 0 5px; }
#content .section .meta .additional_information img { margin: 0 auto; display: block; }
#content .section .meta .additional_information p { text-align: center; margin-top: 11px; font-size: 9px; line-height: 1.6; color: #666; }
#content .section .meta .additional_information a { color: inherit; text-decoration: underline; }
@media screen and (max-width: 767px) {
  #content .section .meta .additional_informations { width: auto; max-width: none; justify-content: space-evenly; }
  #content .section .meta .additional_information { padding: 0 10px; }
}










/* .colors */
#content div[class^="colors"] { margin: 66px 0 0; padding: 66px 10px 0; position: relative; }
#content div[class^="colors"] .color_title { font-size: 16px; color: #363636; text-align: center; position: relative; padding: 58px 0 43px; margin: 0 0 50px; line-height: 28px; }
#content div[class^="colors"] .color_title:before,
#content div[class^="colors"] .color_title:after { content: " "; display: block; left: 0; position: absolute; width: 100%; }
#content div[class^="colors"] .color_title:before { background: url("images/deco_top.png") no-repeat 50% 0; height: 33px; top: 0; }
#content div[class^="colors"] .color_title:after { background: url("images/deco_bottom.png") no-repeat 50% 0; bottom: 0; height: 16px; }
#content div[class^="colors"] .color_title h5 { text-align: center; color: #363636; word-break:keep-all; overflow-wrap: anywhere; }
#content div[class^="colors"] > ul { display: flex; flex-wrap: wrap; justify-content:center; font-size: 0; margin: 0 auto; text-align: center; max-width: 1400px; }
#content div[class^="colors"] > ul > li { display: flex; justify-content: space-between; flex-direction: column; align-items: center; padding: 0; vertical-align: top; text-align: center; margin: 0 10px 56px; }
#content div[class^="colors"] > ul > li .color { margin: 10px 0 0; }
#content div[class^="colors"] > ul > li .color ul { }
#content div[class^="colors"] > ul > li .color ul li { text-align: center; font-size: 9px; width: auto; margin: 0 0 2px 1.8em; text-indent: -1.8em; }
#content div[class^="colors"] > ul > li * { display: block; text-align: center; }
#content div[class^="colors"] > ul > li img { margin: 0 auto 12px; }
#content div[class^="colors"] > ul > li strong { display: block; color: #333; font-size: 18px; margin-bottom: 14px; line-height: 20px; font-weight: normal; letter-spacing: inherit; }
#content div[class^="colors"] > ul > li strong small { display: inline-block; font-size: 13px; }
#content div[class^="colors"] > ul > li p { font-size: 10px; line-height: 1.7; letter-spacing: 0; margin: 0; word-break:keep-all; overflow-wrap: anywhere; }
#content div[class^="colors"] > ul > li p.maincolor { border: 1px solid #ddd; background: #fff; color: #666; font-size: 9px; display: inline-block; padding: 0 7px; line-height: 15px; height: 15px; margin-top: 6px; }
#content div[class^="colors"] > ul > li .cartBtn { display: block; font-size: 11px; font-weight: bold; line-height: 26px; height: 26px; color: #fff; border: 1px solid #332e2d; padding: 0; margin-top: 14px; transition: opacity .4s ease; text-align: center; background: #332e2d url('images/common_icon_cart_white_24.png') no-repeat top 3px left 10px; background-size: 17px; text-indent: 1.5em; width: 100%; max-width: 240px; }
#content div[class^="colors"] > ul > li .cartBtn:hover { opacity: .7; color: #fff !important; }
#content div[class^="colors"] .limited{ display: block; font-size: 11px; text-align: right; margin: -30px auto 0; padding-bottom: 10px; max-width: 1000px; }
@media screen and (max-width: 767px) {
  #content div[class^="colors"] { position: relative; padding: 40px 0 0; width: auto;}
  #content div[class^="colors"] .color_title { font-size: 16px; }
  #content div[class^="colors"] .note { width: auto; }
  #content div[class^="colors"] > ul{ display: flex; flex-wrap: wrap; text-align: left; margin: 0 10px; }
  #content div[class^="colors"] > ul { justify-content: center; }
  #content div[class^="colors"] > ul > li { padding: 0; margin: 0 5px 56px; }
  #content div[class^="colors"] > ul > li > a { width: 100%; }
  #content div[class^="colors"] > ul > li .color { margin: 10px 5px 0; display: inline-block; }
  #content div[class^="colors"] > ul > li .color ul { float: none; display: block; }
  #content div[class^="colors"] > ul > li .color ul li { font-size: 9px; text-align: left; }
  #content div[class^="colors"] > ul > li .color ul li br { display: none; }
  #content div[class^="colors"] > ul > li strong { word-break:keep-all; overflow-wrap: anywhere; }
  #content div[class^="colors"] > ul > li p { font-size: 10px; }
  #content div[class^="colors"] > ul > li p span { font-size: inherit; width: auto !important; }
  #content div[class^="colors"] > ul > li p br{ display: none; }
  #content div[class^="colors"] > ul > li img { margin-bottom: 15px; max-width: 100%; }
  #content div[class^="colors"] > ul > li .cartBtn {  }
  #content div[class^="colors"] .limited { margin: -30px 10px 0; }
}



#content .section .colors-1col > ul > li { width: calc( 1100px - 20px ); }
#content .section .colors-2col > ul > li { width: calc( 1100px / 3 - 20px ); }
#content .section .colors-2col.wide > ul > li { width: calc( 1100px / 2 - 20px ); }
#content .section .colors-3col > ul > li { width: calc( 1100px / 3 - 20px ); }
#content .section .colors-4col > ul > li { width: calc( 1100px / 4 - 20px ); }
#content .section .colors-5col > ul > li { width: calc( 1100px / 5 - 20px ); }
#content .section .colors-6col > ul > li { width: calc( 1100px / 6 - 20px ); }
@media screen and (max-width: 767px) {
  #content .section div[class^="colors"] > ul > li { width: calc( 50% - 10px ); max-width: 300px; }
  #content .section div.colors-1col > ul > li { width: 100%; max-width: 480px; }
}







/* toggle */
#content .toggle__body { visibility:hidden; height: 0; opacity: 0; flex-wrap: wrap; justify-content: center; padding: 0;
  -webkit-transition: all 1.0s;
	-moz-transition: all 1.0s;
	-ms-transition: all 1.0s;
	-o-transition: all 1.0s;
	transition: all 1.0s;
  overflow: hidden;
}
#content .toggle__buttons { text-align: center; }
#content .toggle__button { }
#content .toggle__button:hover { opacity: .8; }
#content .toggle__button--detail { background: #fbfbfb; color: #333; border: 1px solid #efefef; border-radius: 5px; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; font-size: 13px; line-height: 22px; text-align: center; transition: opacity .4s ; width: 100%; padding: 22px 0; position: relative;}
#content .toggle__button--detail:after { content: ""; background: url("images/icon_down.png") no-repeat center; display: inline-block; width: 35px; height: 18px; margin-left: 10px; position: absolute; right: 18px;}
#content .toggle__button--detail > span { display: inline-block; text-align: center; }
#content .toggle__button--detail > span > span { display: inline-block; }
#content .toggle__button--close { font-size: 12px; display: none; margin-top: 30px; text-align: center;}
#content .toggle__button--close:hover { opacity: .8; cursor: pointer; }
#content .toggle__button--close:after { content: ""; background: url("images/icon_down.png") no-repeat center top -6px; display: inline-block; width: 25px; height: 12px; margin-left: 10px; transform: rotate(180deg) scale(1); }
@media screen and (max-width: 767px) {
  #content .toggle__button--detail { font-size: 12px; line-height: 18px; }
  #content .toggle__button--detail:after { background-size: 22px auto; right: 10px; }
  #content .toggle__buttons { margin-bottom: 30px; }
  #content .toggle__button { }
  #content .toggle__button--detail { width: 100%; padding: 10px 0; margin: 0; }
}




/* checked */
#content .toggle { height: 1px; left: -9999px; position: absolute; visibility: hidden; width: 1px; }
#content .toggle:checked ~ .toggle__body { visibility: visible; height: auto; opacity: 1; }
#content .toggle:checked ~ .toggle__body .toggle__button--close { display: block; }
#content .toggle:checked ~ .toggle__buttons .toggle__button--detail { display: none; }



/* makeup */
#content .howtomakeup { }
#content .howtomakeup h3 { text-align: center; margin-bottom: 35px; font-size: 30px; color: #4c4948; }
#content .howtomakeup h4 { text-align: center; margin-bottom: 0px; font-size: 44px; color: #d68bb9; }
#content .howtomakeup h5 { text-align: center; font-size: 18px; line-height: 2; font-weight: normal; margin-bottom: 80px; color: #666; word-break:keep-all; overflow-wrap: anywhere; }
#content .howtomakeup .pattern { display: block; margin: 0 auto 26px; }
#content .howtomakeup .makeup_img { display: block; margin: 0 auto 70px; }
#content .howtomakeup .makeup_sec { margin: 0 auto; width: 900px; }
#content .howtomakeup .makeup_sec .ttl_sec { text-align: center; border-bottom: solid 1px #ddd; padding-bottom: 2px; margin-bottom: 40px; font-size: 24px; color: #a8a8a8;}
#content .howtomakeup .makeup_sec .step { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 100px; }
#content .howtomakeup .makeup_sec .step:last-of-type { margin-bottom: 0; }
#content .howtomakeup .makeup_sec .step .img { width: 200px; text-align: center; padding: 0; position: relative; margin-bottom: 20px; }
#content .howtomakeup .makeup_sec .step .img img { margin: -5px auto 15px; }
#content .howtomakeup .makeup_sec .step .text { width: 660px; }
#content .howtomakeup .makeup_sec .step .text.ttl { font-size: 24px; margin-bottom: 40px; color: #a15b5b; }
#content .howtomakeup .makeup_sec .step .text p { margin: 0 0 20px; font-size: 15px; line-height: 25px; color: #363636; letter-spacing: 0; }
#content .howtomakeup .makeup_sec .step .text p.num { text-indent: -14px; padding-left: 14px; }
#content .howtomakeup .makeup_sec .step .text > img { margin: 0; }
#content .howtomakeup .makeup_sec .step .text > img.eye { margin: 50px auto; }
#content .howtomakeup .makeup_sec .step .text > img.ttl { margin: 0 0 20px; }
#content .howtomakeup .makeup_sec .step .text .makeup_data { }
#content .howtomakeup .makeup_sec .step .text .makeup_data .ttl_makeup_data { border-bottom: 1px solid #ddd; margin: 2px 0 16px; font-size: 13px; color: #999; }
#content .howtomakeup .makeup_sec .step .text .makeup_data .ttl_makeup_data img {}
#content .howtomakeup .makeup_sec .step .text .makeup_data .subttl_makeup_data { margin: 15px 0 16px; }
#content .howtomakeup .makeup_sec .step .text .makeup_data .subttl_makeup_data img {}
#content .howtomakeup .makeup_sec .step .text .makeup_data a.item { display: block; font-size: 11px; line-height: 18px; color: #666; text-decoration: underline; margin-bottom: 10px; }
#content .howtomakeup .makeup_sec .step .text .makeup_data div.item { font-size: 11px; line-height: 19px; color: #666; margin-bottom: 10px; }
#content .howtomakeup .makeup_sec .step .text .makeup_data div.item a { color: #d68bb9; text-decoration: underline; }
#content .howtomakeup .makeup_sec .step .text .makeup_data div.item a.gray { color: #a8a8a8; }
#content .howtomakeup .makeup_sec .step .text .makeup_data div.item small { font-size: 10px; margin-left: 10px; color: #999; }
@media screen and (max-width: 767px) {
  #content .howtomakeup { }
  #content .howtomakeup h3 { margin-bottom: 30px; font-size: 22px; }
  #content .howtomakeup h4 { margin-bottom: 10px; font-size: 40px; }
  #content .howtomakeup h5 { line-height: 1.8; }
  #content .howtomakeup .makeup_img  { margin: 0 auto 80px; width: 80%; max-width: 300px; }
  #content .howtomakeup .makeup_sec  { margin: 0 10px 100px; width: auto; }
  #content .howtomakeup .makeup_sec .ttl_sec { margin: 0 0 70px; }
  #content .howtomakeup .makeup_sec .ttl_sec img { }
  #content .howtomakeup .makeup_sec .step { }
  #content .howtomakeup .makeup_sec .step .img { width: auto; text-align: left; flex: 0 0 20%; }
  #content .howtomakeup .makeup_sec .step .img img { margin: 0 0 15px; width: 90%; }
  #content .howtomakeup .makeup_sec .step .text > img.eye { margin: 20px auto 30px; }
  #content .howtomakeup .makeup_sec .step .text { width: auto; flex: 0 0 77%;}
  #content .howtomakeup .makeup_sec .step .text.ttl { font-size: 22px; text-align: left; border: 0; padding: 0; margin: 0 0 20px; }
  #content .howtomakeup .makeup_sec .step .text p { line-height: 1.6; font-size: 14px; }
  #content .howtomakeup .makeup_sec .step .text > img  { max-width: 100%; margin-bottom: 10px; }
  #content .howtomakeup .makeup_sec .step .text .makeup_data .subttl_makeup_data  { margin-bottom: 13px; }
}

#content #howtomakeup1 h4 { color: #d95097; }
#content #howtomakeup2 h4 { color: #dd6b74; }
#content #howtomakeup1 .makeup_sec .step .text.ttl { color: #d95097; }
#content #howtomakeup2 .makeup_sec .step .text.ttl { color: #dd6b74; }
#content #howtomakeup1 .makeup_sec .step .text .makeup_data div.item a { color: #d95097; }
#content #howtomakeup2 .makeup_sec .step .text .makeup_data div.item a { color: #dd6b74; }
#content #howtomakeup1 .makeup_sec .step .text .makeup_data div.item a.gray,
#content #howtomakeup2 .makeup_sec .step .text .makeup_data div.item a.gray { color: #a8a8a8; }





/*
 *
 * for this page
 *
 */
#content #introduction-wrapper { position: relative; padding: 140px 0; margin: 0; background: url("images/introduction_bg.png") no-repeat; background-size: cover; }
#content #introduction { max-width: 800px; width: 80%; margin: 0 auto; padding: 0; position: relative; border: 2px solid #d2d4d6; background: none; }
#content #introduction *{ text-align: center; }
#content #introduction #introduction-inner { background: none; border: 1px solid #d2d4d6; margin: 4px; padding: 85px 0; position: relative; width: auto; }
#content #introduction:before,
#content #introduction:after,
#content #introduction-inner:before,
#content #introduction-inner:after { position: absolute; content:""; display: block; background: url("images/poem_corner.png") no-repeat; background-size: cover; height: 86px; width: 86px; }
#content #introduction:before       { top: -33px; left: -33px; }
#content #introduction:after        { top: -33px; right: -33px; transform:rotate(90deg); }
#content #introduction-inner:before { bottom: -39px; left: -39px; transform:rotate(-90deg); }
#content #introduction-inner:after  { bottom: -39px; right: -39px; transform:rotate(180deg); }
#content #introduction h3 {margin:0 0 44px;}
#content #introduction h3 strong { padding: 0; }
#content #introduction h4 { margin: 50px 0 40px; }
#content #introduction p { line-height: 2; font-size: 18px; color: #4c4948; margin: 1em 0 0; }
#content #introduction p span { display: inline-block; word-break:keep-all; }
@media screen and (max-width: 767px) {
  #content #introduction-wrapper { width: auto; padding: 80px 0 100px; }
  #content #introduction { width: 87%; }
  #content #introduction #introduction-inner { padding: 60px 5%; }
  #content #introduction:before,
  #content #introduction:after,
  #content #introduction-inner:before,
  #content #introduction-inner:after { width: 60.2px; height: 60.2px; }
  #content #introduction:before       { top: -24px; left: -24px; }
  #content #introduction:after        { top: -24px; right: -24px; }
  #content #introduction-inner:before { bottom: -30px; left: -30px; }
  #content #introduction-inner:after  { bottom: -30px; right: -30px; }
  #content #introduction h3 { margin-bottom: 20px; }
  #content #introduction h3 img,
  #content #introduction h4 img { width: 90%; max-width: 203px;}
  #content #introduction p { line-height: 2; font-size: 16px; margin-top: 0.8rem; }
  #content #introduction p br{ display: none; }
}



#content #SIOB .sectionMain { margin-bottom: 200px; }
#content #SIOB .meta h4 { margin-left: 0; }
#content #SIOB .meta h4 small { margin-left: 0; }
#content #SIOB__subcontents.point { padding: 70px 0 0; margin: 120px auto 200px; }
#content #SIOB__subcontents.point .description { margin-bottom: 70px; }
#content #SIOB__subcontents.point .contents { background: #faf4f6; padding: 36px 0; margin: 0 auto; width: 90%; max-width: 900px; }
#content #SIOB__subcontents.point .contents .contents_inner { background: #fff; width: 80%; max-width: 650px; padding: 10px 30px 50px; border-radius: 10px; margin: 0 auto; }
#content #SIOB__subcontents.point .contents .img { padding: 0; margin: 0 auto 37px; display: block; }
#content #SIOB__subcontents.point .contents .points {}
#content #SIOB__subcontents.point .contents .points .point { margin-top: 60px; }
#content #SIOB__subcontents.point .contents .points .point .ttl { display: block; text-align: center; }
#content #SIOB__subcontents.point .contents .points .point .ttl .lbl { display: block; text-align: center; margin-bottom: 20px; }
#content #SIOB__subcontents.point .contents .points .point .ttl p { margin-bottom: 20px; color: #ed7a9b; display: block; text-align: center; font-size: 16px; font-weight: bold; line-height: 1.8; text-decoration: underline; word-break:keep-all; overflow-wrap: anywhere; }
#content #SIOB__subcontents.point .contents .points .point .ttl p img { vertical-align: middle; margin-right: 5px; }
@media screen and (max-width: 767px) {
  #content #SIOB .sectionMain { margin-bottom: 100px; }
  #content #SIOB__subcontents.point { margin-top: 100px; width: auto; }
  #content #SIOB__subcontents.point .contents .title { font-size: 13px; line-height: 1.8; }
  #content #SIOB__subcontents.point .contents { padding: 50px 20px; width: auto; }
  #content #SIOB__subcontents.point .contents .contents_inner { padding: 40px 10px 10px; width: auto; }
  #content #SIOB__subcontents.point .contents .points { margin-bottom: 30px; }
  #content #SIOB__subcontents.point .contents .points .point { margin-top: 30px; }
  #content #SIOB__subcontents.point .contents .points .point .ttl { margin: 0; padding: 0; border: 0; }
  #content #SIOB__subcontents.point .contents .points .point .ttl p { font-size: 16px; line-height: 1.8; margin-bottom: 50px; }
  #content #SIOB__subcontents.point .contents .points .point .ttl p img { display: block; margin: 0 auto 5px; }
}



#content #SIOB__subcontents.primer { padding: 70px 0 0; margin: 120px auto 0; }
#content #SIOB__subcontents.primer * { text-align: center; }
#content #SIOB__subcontents.primer .description { font-size: 28px; color: #7d7d7d; word-break: keep-all; overflow-wrap: anywhere; }
#content #SIOB__subcontents.primer .items { display: flex; justify-content: center; }
#content #SIOB__subcontents.primer .items .item { width: 30%; max-width: 400px; margin: 0 10px; }
#content #SIOB__subcontents.primer .items .item_description { font-size: 16px; line-height: 26px; word-break: keep-all; overflow-wrap: anywhere; margin-bottom: 36px; }
#content #SIOB__subcontents.primer .items .item_img { margin-bottom: 32px; }
#content #SIOB__subcontents.primer .items .item_img img { max-width: 320px; }
#content #SIOB__subcontents.primer .items .meta {}
#content #SIOB__subcontents.primer .items .meta h4 { font-size: 18px; line-height: 28px; word-break: keep-all; overflow-wrap: anywhere; }
#content #SIOB__subcontents.primer .items .meta p.info { font-size: 13px; }
#content #SIOB__subcontents.primer .items .meta p.price {}
#content #SIOB__subcontents.primer .items .meta p.price .large {}
#content #SIOB__subcontents.primer .items .meta p.price small {}
#content #SIOB__subcontents.primer .items .meta .color {}
#content #SIOB__subcontents.primer .items .meta .color ul { }
#content #SIOB__subcontents.primer .items .meta .color li { display: block; width: 200px; margin: 0 auto; height: 80px; }
#content #SIOB__subcontents.primer .items .meta .color li a { display: flex; justify-content: flex-start; align-items: center; }
#content #SIOB__subcontents.primer .items .meta .color li a img { margin: 0; }
#content #SIOB__subcontents.primer .items .meta .color li a strong { margin: 0; text-align: left; padding-left: 20px; font-size: 16px; color: #666; word-break: keep-all; overflow-wrap: anywhere; }
#content #SIOB__subcontents.primer .items .meta .color li a strong.mincho { font-size: 12px; }
#content #SIOB__subcontents.primer .items .meta .types { background: #fbf7f7; padding: 40px 20px; border-radius: 10px; }
#content #SIOB__subcontents.primer .items .meta .types .inner { background: #fff; padding: 34px 0 10px; border-radius: 10px; }
#content #SIOB__subcontents.primer .items .meta .types .type { margin-bottom: 24px; }
#content #SIOB__subcontents.primer .items .meta .types .type .label { font-size: 13px; color: #ed7a9b; margin-bottom: 10px; }
#content #SIOB__subcontents.primer .items .meta .types .type .text { font-size: 16px; color: #666; word-break: keep-all; overflow-wrap: anywhere; }
@media screen and (max-width: 767px) {
  #content #SIOB__subcontents.primer .description { font-size: 32px; margin-bottom: 50px; }
  #content #SIOB__subcontents.primer .description small { display: block; font-size: 22px; }
  #content #SIOB__subcontents.primer .items { display: block; }
  #content #SIOB__subcontents.primer .items .item { width: auto; max-width: none; margin: 0 0 50px; padding-top: 70px; position: relative; }
  #content #SIOB__subcontents.primer .items .item:before { display: block; content: ""; position: absolute; top: 0; width: 100%; height: 200px; z-index: -1; background: #faf9f9; background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(246,243,243,0.35) 100%);}
  #content #SIOB__subcontents.primer .items .meta .color ul { display: flex; justify-content: center; }
  #content #SIOB__subcontents.primer .items .meta .color li { height: auto; width: 28%; max-width: 150px; margin: 0; }
  #content #SIOB__subcontents.primer .items .meta .color li.pc_view { display: none; }
  #content #SIOB__subcontents.primer .items .meta .color li a { display: block; align-items: center; }
  #content #SIOB__subcontents.primer .items .meta .color li a strong { text-align: center; padding: 10px 0 0; }
  #content #SIOB__subcontents.primer .items .item_description { margin: 0 5px 40px; font-size: 18px; line-height: 1.8; }
  #content #SIOB__subcontents.primer .items .item_description br { display: none; }
  #content #SIOB__subcontents.primer .items .meta h4 br { display: none; }
  #content #SIOB__subcontents.primer .items .meta .types { padding: 20px 10px; margin: 0 5px; }
  #content #SIOB__subcontents.primer .items .meta .types .inner { padding: 20px 10px 8px; }
  #content #SIOB__subcontents.primer .items .meta .types .type { display: flex; justify-content: center; margin-bottom: 12px; }
  #content #SIOB__subcontents.primer .items .meta .types .type .label { font-size: 13px; margin: 0; }
  #content #SIOB__subcontents.primer .items .meta .types .type .text { font-size: 13px; }

}



#content #SICT { padding-bottom: 80px; }
#content #SICT div[class^="colors"] > ul > li p.icon { border: 1px solid #ddd; background: #fff; color: #666; font-size: 10px; display: inline-block; width: 90px; line-height: 19px; height: 19px; margin-bottom: 14px; }

#content #SICT__subcontents { padding: 70px 0 0; margin: 120px auto 0; }
#content #SICT__subcontents .inner { margin: 0 5px; }
#content #SICT__subcontents .description { word-break: keep-all; overflow-wrap: anywhere; }
#content #SICT__subcontents .box { word-break: keep-all; overflow-wrap: anywhere; text-align: center; border: 3px dotted #fadbd6; max-width: 990px; padding: 0 20px 60px; margin: 0 auto 120px; border-radius: 20px; }
#content #SICT__subcontents .box .title { color: #666; display: inline-block; background: #fff; padding: 0 50px; margin: -50px auto 0; text-align: center; font-size: 24px; line-height: 28px; }
#content #SICT__subcontents .box .title small { font-size: 14px; }
#content #SICT__subcontents .box .subtitle { color: #666; margin: 60px auto 14px; text-align: center; font-size: 16px; }
#content #SICT__subcontents div[class^="colors"] { margin: 0; padding: 0; }
#content #SICT__subcontents div[class^="colors"] .icon.hidden { border-color: #fff; }
#content #SICT__subcontents .pearl div[class^="colors"] .icon.hidden { font-size: 1px; margin: 0; }
#content #SICT__subcontents .colors-4col > ul > li { width: 24%; margin: 0 0.5%; }
#content #SICT__subcontents .colors-3col > ul > li { width: 28%; margin: 0 0.5%; }
#content #SICT__subcontents .colors-1col > ul > li { width: 99%; margin: 0 0.5%; }
#content #SICT__subcontents .gage { display: flex; justify-content: center; margin-top: 26px; }
#content #SICT__subcontents .gage .label { color: #d9a497; font-size: 16px; margin: 0 7px; }
#content #SICT__subcontents .gage .arrow { }

@media screen and (max-width: 767px) {
  #content #SICT__subcontents .description br { display: none; }
  #content #SICT__subcontents .box { margin: 120px 5px; padding: 0 5px 50px; }
  #content #SICT__subcontents .box .title { font-size: 20px; padding: 0 20px; }
  #content #SICT__subcontents .box .title small { font-size: 13px; }
  #content #SICT__subcontents .box .subtitle { font-size: 14px; margin: 30px auto 20px; }
  #content #SICT__subcontents div[class^="colors"] {}
  #content #SICT__subcontents div[class^="colors"] > ul { margin: 0; justify-content: space-around; }
  #content #SICT__subcontents div[class^="colors"] > ul > li p.icon { width: auto; padding: 0 20px; }
  #content #SICT__subcontents div[class^="colors"] .icon.hidden {}
  #content #SICT__subcontents div[class^="colors"] > ul > li img { max-width: 80px; }
  #content #SICT__subcontents div[class^="colors"] > ul > li strong { font-size: 14px; }
  #content #SICT__subcontents .colors-4col > ul > li {}
  #content #SICT__subcontents .colors-3col > ul > li { }
  #content #SICT__subcontents .colors-1col > ul > li { }
  #content #SICT__subcontents .gage {}
  #content #SICT__subcontents .gage .label { font-size: 12px; width: 100px; margin: 0; text-align: center;}
  #content #SICT__subcontents .gage .arrow {}

}



#content #DIAMOND {}
#content #DIAMOND * { text-align: center; }
#content #DIAMOND > .title { font-size: 46px; color: #ee8591; padding: 0; }
#content #DIAMOND > .description { margin-bottom: 0; padding-bottom: 0; }
#content #DIAMOND > .description:before,
#content #DIAMOND > .description:after { display: none; }
#content #DIAMOND .description p { margin-bottom: 1em; }
#content #DIAMOND__subcontents { padding: 70px 0 0; margin: 120px auto 0; }
#content #DIAMOND__subcontents * { text-align: center; }
#content #DIAMOND__subcontents .inner { margin: 0 5px; }
#content #DIAMOND__subcontents .description { font-size: 20px; margin-bottom: 87px; color: #7d7d7d; word-break: keep-all; overflow-wrap: anywhere; }
#content #DIAMOND__subcontents .tips { display: flex; justify-content: center; }
#content #DIAMOND__subcontents .tip { width: 50%; max-width: 500px; }
#content #DIAMOND__subcontents .tip .title { font-size: 18px; line-height: 28px; margin-bottom: 42px; word-break: keep-all; overflow-wrap: anywhere; }
#content #DIAMOND__subcontents .tip .color { color: #666; margin-bottom: 24px; }
#content #DIAMOND__subcontents .tip .color .label { font-size: 14px; }
#content #DIAMOND__subcontents .tip .color .name { font-size: 18px; font-weight: bold; }
#content #DIAMOND__subcontents .tip .tama { margin-bottom: 50px; }
#content #DIAMOND__subcontents .tip .face { margin-bottom: 46px; }
#content #DIAMOND__subcontents .tip p { color: #666; font-size: 15px; line-height: 26px; }
@media screen and (max-width: 767px) {
  #content #DIAMOND { padding-top: 100px; }
  #content #DIAMOND > .title { font-size: 30px; margin: 0 10px; }
  #content #DIAMOND > .description { font-size: 16px; margin: 0 10px; }
  #content #DIAMOND > .description br { display: none; }
  #content #DIAMOND__subcontents { margin: 80px 5px 0; }
  #content #DIAMOND__subcontents .description { font-size: 18px; }
  #content #DIAMOND__subcontents .description br { display: none; }
  #content #DIAMOND__subcontents .tips { display: block; }
  #content #DIAMOND__subcontents .tip { width: auto; margin: 0 5px 120px; }
  #content #DIAMOND__subcontents .tip .title { font-size: 20px; line-height: 1.8; margin-bottom: 30px; color: #ee8591; }
  #content #DIAMOND__subcontents .tip .title br { display: none; }
  #content #DIAMOND__subcontents .tip .color .label { font-size: 13px; }
  #content #DIAMOND__subcontents .tip .color .name { font-size: 16px; }
  #content #DIAMOND__subcontents .tip .face img { width: 80%; max-width: 326px; }
  #content #DIAMOND__subcontents .tip p { font-size: 13px; line-height: 1.8; }


}