@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 span { display: inline-block; 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; }
#content header .dates { display: flex; justify-content: flex-start; flex-wrap: wrap; }
#content header .dates .date { width: 25%; max-width: 270px; min-width: 220px; }
#content header .dates .date .month { display: block; font-size: 15px; color: #888; margin-bottom: 14px; line-height: 1; }
@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 header .dates { justify-content: center; margin-bottom: 30px; }
  #content header .dates .date { width: auto; margin: 0 20px; }
  #content header .dates .date .month { margin-bottom: 7px; }
  #content header .dates .date .reserve { margin-bottom: 15px; }
}

#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.9); width: 900px; border-radius: 10px; }
#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: 80px 0 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 { display: block; font-size: 24px; line-height: 38px; color: #363636; margin: 0 0 100px; position: relative; text-align: center; padding: 60px 0 46px; }
#content #lineup .lineup__title:before,
#content #lineup .lineup__title:after { content: " "; display: block; left: 0; position: absolute; width: 100%; }
#content #lineup .lineup__title:before { background: url("images/deco_top.png") no-repeat 50% 0; height: 33px; top: 0; }
#content #lineup .lineup__title:after { background: url("images/deco_bottom.png") no-repeat 50% 0; bottom: 0; height: 16px; }
#content #lineup .lineup__items { display: flex; justify-content:space-around; 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:20px; }
#content #lineup .lineup__items .item__title { font-size: 14px; line-height: inherit; padding: 0; margin: 0; color: #888; }
#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 0 100px;}
  #content #lineup-body { margin: 0; padding: 5px; }
  #content #lineup-inner { padding: 5px; margin: 0; }
  #content #lineup .lineup__title { margin: 0 0 70px!important; font-size: 20px; line-height: 1.8; }
  #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; width: 100%; }
  #content #lineup .lineup__items li span {}
  #content #lineup .lineup__items .item__img {}
  #content #lineup .lineup__items .item__img img { height: auto; width: 50%; }
  #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 { padding-top: 100px; }
#content .howtomakeup h3 { text-align: center; margin-bottom: 30px; font-size: 35px; color: #4c4948; word-break:keep-all; }
#content .howtomakeup .desc { text-align: center; margin-bottom: 0px; font-size: 20px; color: #4c4948; word-break:keep-all; }
#content .howtomakeup h4 { text-align: center; margin-bottom: 0px; font-size: 54px; color: #4c4948; word-break:keep-all; }
#content .howtomakeup h5 { text-align: center; font-size: 16px; 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 { padding-top: 70px; padding-bottom: 70px; }
  #content .howtomakeup h3 { margin-bottom: 30px; font-size: 32px; }
  #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 #howtomakeup { padding-bottom: 110px; }
#content #howtomakeup1 h4 { color: #cb6892; }
#content #howtomakeup2 h4 { color: #d57b99; }
#content #howtomakeup1 .makeup_sec .step .text.ttl { color: #a15b5b; }
#content #howtomakeup2 .makeup_sec .step .text.ttl { color: #a15b5b; }
#content #howtomakeup1 .makeup_sec .step .text .makeup_data div.item a { color: #cb6892; }
#content #howtomakeup2 .makeup_sec .step .text .makeup_data div.item a { color: #d57b99; }
#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; }
@media screen and (max-width: 767px) {
  #content #howtomakeup { padding-bottom: 70px; }
}




#content .section__footer { display: block; text-align: right; margin: 180px 0 -180px; }
#content .section__footer .pagetop { display: inline-block; color: #333; font-size: 14px; margin-right: 20px; }
#content .section__footer .pagetop img { width: 14px; margin: 0 3px 4px 0; transform: rotate(-90deg); }
@media screen and (max-width: 767px) {
  #content .section__footer { margin: 130px 10px -130px; }
  #content .section__footer .pagetop { margin-right: 0; }
}



/*
 *
 * for this page
 *
 */

#content #introduction-wrapper { padding: 0; margin: 0; }
#content #introduction { padding: 110px 0; }
#content #introduction #introduction-inner { position: relative; max-width: 900px; width: 90%; }
#content #introduction #introduction-inner:before,
#content #introduction #introduction-inner:after { content: ""; display: block; position:absolute; top: 30px; left: 30px; width: 173px; height: 168px; background: url("images/introduction_corner.png");}
#content #introduction #introduction-inner:after { top:auto; left: auto; bottom: 30px; right: 30px; transform: rotate(180deg) scale(1); }
@media screen and (max-width: 767px) {
  #content #introduction #introduction-inner { margin: 0 auto; }
  #content #introduction #introduction-inner:before,
  #content #introduction #introduction-inner:after { content: ""; display: block; position:absolute; top: 10px; left: 10px; width: 86.5px; height: 84px; background-size: 86.5px 84px; }
  #content #introduction #introduction-inner:after { top:auto; left: auto; bottom: 10px; right: 10px; }
}




#content .frags { padding: 160px 0 100px; overflow: hidden; }
#content .frags .frag .color { color: #b75a86; }
#content .frags .frag { max-width: 1000px; padding: 0 20px; margin: 0 auto 55px; border-radius: 10px; position: relative; text-align: center; }
#content .frags .frag * { text-align: center; }
#content .frags .frag .subttl { font-size: 20px; margin: 0 auto 80px; line-height: 1.8; position: relative; display: inline-block; }
#content .frags .frag .subttl:before ,
#content .frags .frag .subttl:after { content: ""; display: block; position: absolute; }
#content .frags .frag .subttl:before { width: 64px; height: 72px; background: url("images/frag_img1.png"); top: -10px; left: -90px; }
#content .frags .frag .subttl:after { width: 46px; height: 54px; background: url("images/frag_img2.png"); top: 20px; right: -70px; }
#content .frags .frag p { font-size: 16px; line-height: 2; color: #4c4948; margin-bottom: 80px; }
#content .frags .frag .step_ttl { font-size: 13px; margin-bottom: 25px; position: relative; }
#content .frags .frag .steps { }
#content .frags .frag .step:after { content: ""; display: block; height: 40px; background: url("images/icon_arrow.png") no-repeat center center; }
#content .frags .frag .step:last-child:after { display: none; }
#content .frags .frag .step .ttl { font-size: 13px; margin-bottom: 12px; }
#content .frags .frag .step .val { font-size: 12px; margin-bottom: 0; line-height: 2; }
#content .frags .frag .step .val span { text-decoration: underline; }
#content .frags .exp { text-align: right; margin: 0 auto 40px; width: 700px; color: #666; }
#content .frags .exp .txt { margin-left: 14px; }
#content .frags .exp .ul { text-decoration: underline; }
#content .frags .note { text-align: right; margin: 0 20px; }
#content .frags .agent { padding: 30px 0; margin: 0 auto 170px; width: 700px; position: relative; border: 1px solid #b75a86; }
#content .frags .agent > * { text-align: center; }
#content .frags .agent .ttl { color: #666; font-size: 18px; font-weight: normal; margin-bottom: 16px; }
#content .frags .agent .body { color: #666; font-size: 16px; line-height: 22px; margin-bottom: 10px; }
#content .frags .agent .comment { color: #666; font-size: 13px; line-height: 18px; }
@media screen and (max-width: 767px) {
  #content .frags { margin: 0; padding: 120px 0 0; }
  #content .frags .frag .subttl { width: 100%; padding: 0 60px; word-break:keep-all; }
  #content .frags .frag .subttl:before { top: -30px; left: 0; }
  #content .frags .frag .subttl:after { top: auto; bottom: -30px; right: 0; }
  #content .frags .frag { margin: 0 10px 20px; padding: 0; width: auto; }
  #content .frags .frag p { font-size: 13px; line-height: 1.8; word-break:keep-all; }
  #content .frags .frag .step_ttl { margin-bottom: 10px; }
  #content .frags .frag .step_ttl span { font-size: 12px; }
  #content .frags .frag .step br { display: none; }
  #content .frags .exp { margin: 40px 10px 20px; width: auto; }
  #content .frags .agent { width: auto; margin: 0 10px 100px; padding: 25px 15px; }
  #content .frags .agent .ttl { margin-bottom: 15px; font-size: 16px; word-break:keep-all; }
  #content .frags .agent .body { font-size: 14px; word-break:keep-all; }
  #content .frags .agent .comment { word-break:keep-all; }
}






#content #COFFRET { padding-bottom: 110px; }
#content #COFFRET .ttl { text-align: center; }
#content #COFFRET .description { padding: 40px 0 54px; margin: 0; }
#content #COFFRET .description:before,
#content #COFFRET .description:after { display: none; }
#content #COFFRET .description .early { display: block; text-align: center; color: #a15b5b; font-size: 25px; margin-bottom: 20px; }
#content #COFFRET .sectionMain-inner { display: block; }
#content #COFFRET .sectionMain-inner > .item_img,
#content #COFFRET .sectionMain-inner > .meta { width: auto; }
#content #COFFRET .sectionMain-inner > .meta h5 { margin-bottom: 25px; }
#content #COFFRET .sectionMain-inner > .meta .additional_informations { margin: 20px auto 40px; }
#content #COFFRET .sectionMain-inner > .meta .caution { display: block; width: 90%; max-width: 522px; padding: 14px 20px; margin: 0 auto 20px; border: 1px solid #f6ccd7; background: #fffafa; font-size: 12px; color: #8b202d; }
#content #COFFRET .sectionMain-inner > .item_img img { margin-bottom: 37px; width: 90%; max-width: 669px; }
#content #COFFRET .sectionMain-inner > .meta * { text-align: center; }
#content #COFFRET .sectionMain-inner > .meta .info { font-size: 15px; }
#content #COFFRET .sectionMain-inner > .meta .detailBtn,
#content #COFFRET .sectionMain-inner > .meta .cartBtn { margin: 10px auto 0; }
@media screen and (max-width: 767px) {
  #content #COFFRET .ttl img { width: 90%; max-width: 503px; }
  #content #COFFRET .description { padding: 50px 0 40px; margin: 0; }
  #content #COFFRET .sectionMain-inner > .item_img img { max-width: 753px; margin-bottom: 0; }
  #content #COFFRET .sectionMain-inner > .meta .info { margin-bottom: 20px; }

}


#content #COFFRET_detail { padding-top: 100px; }
#content #COFFRET_detail .sectionMain { margin-bottom: 130px; }
#content #COFFRET_detail .sectionMain:last-child { margin-bottom: 0; }
#content #COFFRET_detail .ttl { text-align: center; margin-bottom: 124px; }
#content #COFFRET_detail .meta h4 { font-size: 20px; margin-bottom: 10px; }
#content #COFFRET_detail .meta h5 { font-size: 14px; margin-bottom: 27px; }
#content #COFFRET_detail .description { padding: 0; margin: 0; font-size: 14px; line-height: 1.8; }
#content #COFFRET_detail .description:before,
#content #COFFRET_detail .description:after { display: none; }
#content #COFFRET_detail .meta .color { margin-bottom: 0; }
@media screen and (max-width: 767px) {
  #content #COFFRET_detail .sectionMain { padding-bottom: 90px; margin-bottom: 60px; position: relative; }
  #content #COFFRET_detail .sectionMain:after { content: "◆"; color: #b75a86; display: block; width: 100%; text-align: center; height: 1em; font-size: 18px; bottom: 0; position: absolute; }
  #content #COFFRET_detail .sectionMain:last-child:after { display: none; }
  #content #COFFRET_detail .ttl { margin-bottom: 20%; }
  #content #COFFRET_detail .ttl img { width: 85%; max-width: 485px; }
}


#content #COFFRET .arrows { margin: 30px 0 0; }
#content #COFFRET .arrow a { display: block; font-size: 15px; color: #fff; line-height: 1; border: 1px solid #d96080; padding: 12px 0; margin: 10px auto 0; transition: background .4s ease; text-align: center; max-width: 370px; background: #d96080 url('images/common_icon_arrow_right_white_12.png') no-repeat center right 12px; background-size: 12px; }
#content #COFFRET .arrow a:hover { opacity: .8; color: #fff !important; }


#content #CAMPAIGN { padding: 107px 0 0; margin: 150px auto 200px; }
#content #CAMPAIGN .campaign { margin: 0 auto; padding: 110px 0; background: #fff; overflow:visible; width: 900px; position: relative; text-align: center; border: 2px solid #cbcccd; }
#content #CAMPAIGN .campaign:before,
#content #CAMPAIGN .campaign:after { content: ""; position: absolute; top: -9px; left: -9px; width: 914px; height: 196px; background: url("images/campaign_corner@2x.png") no-repeat center center; background-size: 914px; }
#content #CAMPAIGN .campaign:after { top: auto; bottom: -9px; transform: rotate(180deg); }
#content #CAMPAIGN .campaign-inner { }
#content #CAMPAIGN .campaign * { text-align: center; }

#content #CAMPAIGN .mainttl { font-size: 32px; margin-bottom: 30px; }
#content #CAMPAIGN .subttl { font-size: 18px; margin-bottom: 40px; }
#content #CAMPAIGN .subttl:after { content: "◆"; display: block; padding: 45px 0 0; text-align: center; font-size: 14px; color: #a8a8a8; }
#content #CAMPAIGN .subttl .en { font-size: 20px; }
#content #CAMPAIGN .subttl .mincho { font-size: 20px; }
#content #CAMPAIGN .text { margin-bottom: 40px; }
#content #CAMPAIGN .text p { font-size: 16px; line-height: 2; word-break:keep-all; margin-bottom: 1em; }
#content #CAMPAIGN .text p span { color: #b22755; }
#content #CAMPAIGN .img { margin-bottom: 50px; }
#content #CAMPAIGN .img:after { content: "◆"; display: block; padding: 60px 0 0; text-align: center; font-size: 14px; color: #a8a8a8; }
#content #CAMPAIGN .img img {}
#content #CAMPAIGN .ttl { font-size: 20px; margin-bottom: 30px; }
#content #CAMPAIGN .box { background: #faf7f7; width: 100%; max-width: 600px; padding: 40px 0; margin: 0 auto 55px; }
#content #CAMPAIGN .box img { width: 80%; max-width: 386px; }
#content #CAMPAIGN .box .icon { background: #eed2cd; font-size: 13px; line-height: 1; padding: 7px 22px; display: inline-block; margin-bottom: 20px; }
#content #CAMPAIGN .box .term { font-size: 16px; color: #2b0c0c; font-weight: bold; margin: 0 10px 40px; word-break:keep-all; }
#content #CAMPAIGN .box .term.last { margin-bottom: 0; }
#content #CAMPAIGN .box img {}
#content #CAMPAIGN .box .name { font-size: 14px; margin-top: -20px; }
#content #CAMPAIGN .box .name a { text-decoration: underline; line-height: 1.8; }
#content #CAMPAIGN .komes {}
#content #CAMPAIGN .komes .kome { font-size: 12px; margin-bottom: 4px; line-height: 1.6; word-break:keep-all; }



@media screen and (max-width: 767px) {
  #content #CAMPAIGN { padding: 100px 0 0; margin: 0; width: auto; }
  #content #CAMPAIGN .subttl .en { font-size: 24px; padding-bottom: 7px; display: inline-block; }
  #content #CAMPAIGN .subttl .mincho { font-size: 22px; }
  #content #CAMPAIGN .campaign { margin: 0 1% 60px; width: auto; }
  #content #CAMPAIGN .campaign:before,
  #content #CAMPAIGN .campaign:after { background-size: 100%; background-position: top center; width: calc(100% + 12px); height: 24%; left: -6px; }
  #content #CAMPAIGN .campaign:before { top: -6px; }
  #content #CAMPAIGN .campaign:after { bottom: -6px; }
  #content #CAMPAIGN .campaign-inner { padding: 0 15px; }
  #content #CAMPAIGN .campaign p { font-size: 16px; line-height: 1.8; }
  #content #CAMPAIGN .campaign p br { display: none; }
  #content #CAMPAIGN .campaign .mainttl { word-break:keep-all; }
}