@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: 200px 0 210px; margin: 0; background: url("images/introduction_bg@2x.png") no-repeat; background-size: cover; background-position: center center;}
#content #introduction { margin: 0; position: relative; padding: 0 0 160px; }
#content #introduction #introduction-inner { padding: 0 20px; margin: 0 auto; letter-spacing: normal; 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; word-break:keep-all; overflow-wrap: anywhere; }
@media screen and (max-width: 767px) {
  #content #introduction-wrapper { width: auto; padding: 140px 0; }
  #content #introduction { padding: 0 10px 100px; 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: 80%; max-width: 280px; }
  #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: 20px; line-height: 36px; color: #363636; margin: 0 0 80px; position: relative; text-align: center; padding: 60px 0 46px; word-break:keep-all; overflow-wrap: anywhere; }
#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:center; flex-wrap: wrap; margin:0;}
#content #lineup .lineup__items li { text-align: center; margin:0 25px 45px; max-width: 320px; width: 33%;}
#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%; max-width: 294px; 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 70px;}
  #content #lineup-body { margin: 0; padding: 0 5px; }
  #content #lineup-inner { 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: space-around;; margin: 0 !important; width: 100%;}
  #content #lineup .lineup__items li {padding: 0; margin: 0 10px 40px; width: calc(50% - 20px); max-width: 200px; }
  #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: 100%; }
  #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: #464646; }
#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: 30px; }
  #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.6; }
  #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-start; 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 20px 0; padding: 66px 0 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; margin: 66px 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( 100% - 20px ); min-width: 306px; }
#content .section .colors-2col > ul > li { width: calc( 100% / 2 - 20px ); min-width: 306px; max-width: 360px; }
#content .section .colors-2col.wide > ul > li { width: calc( 100% / 2 - 20px ); min-width: 306px; max-width: 530px; }
#content .section .colors-3col > ul > li { width: calc( 100% / 3 - 20px ); min-width: 220px; max-width: 300px; }
#content .section .colors-4col > ul > li { width: calc( 100% / 4 - 20px ); min-width: 220px; max-width: 300px; }
#content .section .colors-5col > ul > li { width: calc( 100% / 5 - 20px ); min-width: 210px; max-width: 260px; }
#content .section .colors-6col > ul > li { width: calc( 100% / 6 - 20px ); min-width: 210px; max-width: 220px; }
@media screen and (max-width: 767px) {
  #content .section div[class^="colors"] > ul > li { min-width: calc( 50% - 10px ); max-width: 300px; }
  #content .section div.colors-1col > ul > li ,
  #content .section div.colors-2col.wide > 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: 24px; font-size: 31px; color: #4c4948; word-break:keep-all; overflow-wrap: anywhere; }
#content .howtomakeup .desc { text-align: center; margin-bottom: 0px; font-size: 20px; color: #4c4948; word-break:keep-all; overflow-wrap: anywhere; }
#content .howtomakeup h4 { text-align: center; margin-bottom: 8px; font-size: 44px; color: #df7794; word-break:keep-all; overflow-wrap: anywhere; }
#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; max-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: #df7794; }
#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: 14px; 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: 12px; 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 .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 { margin: 0; background: url("images/introduction_bg.png") no-repeat cover; border: 0; padding: 0; }
#content #introduction { margin: 0; padding: 0; text-align: center; }
#content #introduction #introduction-inner { background: none; width: auto; padding: 160px 20px 200px; }
#content #introduction #introduction-inner .poem.no1 { margin-bottom: 110px; }
@media screen and (max-width: 767px) {
  #content #introduction-wrapper { width: auto; padding: 0; }
  #content #introduction { margin: 0 1%; padding: 40px 0; width: auto; background-size: 95%; background-position: center 40px; }
  #content #introduction #introduction-inner { padding: 70px 15px; }
}


#content #introduction__subcontents_1 {padding: 140px 0 200px; margin: 0 auto; }
#content #introduction__subcontents_1 h4 { font-size: 22px; font-weight: normal!important; padding: 0!important; margin: 0 0 100px!important; text-align: center; }
#content #introduction__subcontents_1 h4 span { display: block; font-size: 18px; line-height: 32px; padding: 65px 0 0; text-align: center; }
#content #introduction__subcontents_1 h5 { display: block; width: 510px; text-align: center; font-size: 18px; font-weight: normal!important; line-height: 25px; padding: 0!important; margin: 0 auto 45px!important; position: relative; }
#content #introduction__subcontents_1 h5:before,
#content #introduction__subcontents_1 h5:after { content: ""; position: absolute; display: block; }
#content #introduction__subcontents_1 h5:before { background: url("images/flower01.png") no-repeat; width: 94px; height: 103px; top: -41px; left: 0; }
#content #introduction__subcontents_1 h5:after { background: url("images/flower02.png") no-repeat; width: 100px; height: 73px; top: -24px; right: 0; }
#content #introduction__subcontents_1 p { font-size: 13px; letter-spacing: 0; line-height: 25px; margin: 0; padding: 30px 0 0; text-align: center; }
#content #introduction__subcontents_1 img { margin: 0; }
#content #introduction__subcontents_1 .notes { font-size: 0; padding: 0; margin: 0 auto 40px; width: 650px; }
#content #introduction__subcontents_1 .notes:last-of-type { margin-bottom: 0; }
/* #content #introduction__subcontents_1 .notes:after { display: block; content: ""; background: url("images/icon_arrow.png") no-repeat center center; height: 8px; margin-top: 40px; }
#content #introduction__subcontents_1 .notes:last-of-type:after { display: none; }*/
#content #introduction__subcontents_1 .notes .notes__box__ttl { text-align: center; margin-bottom: 17px; }
#content #introduction__subcontents_1 .notes p { font-size: 14px; line-height: 2; margin-bottom: 14px; color: #333; padding: 0; }
#content #introduction__subcontents_1 .notes p.sub { font-size: 11px; line-height: 20px; margin-bottom: 20px; padding: 0; }
#content #introduction__subcontents_1 .notes p.small { font-size: 10px; line-height: 17px; margin-top: 18px; padding-top: 10px; border-top: 1px solid #ddd; color: #4c4948; }
#content #introduction__subcontents_1 .notes p.small span { text-decoration: underline;}
#content #introduction__subcontents_1 .notes p.small span.essence { display: block; margin: 10px 0 7px; text-decoration: none; font-weight: bold; text-align: center; }
#content #introduction__subcontents_1 .notes p.small strong { color: #666; font-weight: bold; margin-top: 8px; display: inline-block; }
#content #introduction__subcontents_1 .note { text-align: right; font-size: 10px; margin: 0 auto; max-width: 850px; width: 100%; }
@media screen and (max-width: 767px) {
  #content #introduction__subcontents_1 { margin: 0; width: auto; }
  #content #introduction__subcontents_1 h4 { }
  #content #introduction__subcontents_1 h4 span { line-height: 1.8; word-break: keep-all; padding: 40px 0 0; }
  #content #introduction__subcontents_1 h4 span br { display: none;}
  #content #introduction__subcontents_1 h5 { width: auto; margin-bottom: 30px !important;  word-break: keep-all; overflow-wrap: anywhere; }
  #content #introduction__subcontents_1 h5:before { background-size: 47px; width: 47px; height: 51.5px; top: 0; left: 15px; }
  #content #introduction__subcontents_1 h5:after { background-size: 50px; width: 50px; height: 36.5px; top: 5px; right: 15px; }
  #content #introduction__subcontents_1 p { font-size: 13px; line-height: 1.8; padding: 20px 0 0; word-break: keep-all; }
  #content #introduction__subcontents_1 p br { display: none; }
  #content #introduction__subcontents_1 img { margin-top: 20px!important; }
  #content #introduction__subcontents_1 .toggle + label { font-size: 12px; margin: 0; }
  #content #introduction__subcontents_1 .notes { padding: 0 10px; width: auto; }
  #content #introduction__subcontents_1 .notes:after { margin-top: 30px; }
  #content #introduction__subcontents_1 .notes p.small { word-break: keep-all; }
  #content #introduction__subcontents_1 .notes p.small strong { display: block; margin-bottom: 4px; }
  #content #introduction__subcontents_1 .note { text-align: right; font-size: 9px; padding: 30px 10px 0 0;}
}



#content #SHSA .sakura { margin: 0 5px; }
#content #SHSA .sakura * { text-align: center; color: #666; }
#content #SHSA .sakura h4 { margin-bottom: 30px; }
#content #SHSA .sakura h5 { margin-bottom: 24px; font-size: 16px; word-break: keep-all; overflow-wrap: anywhere; }
#content #SHSA .sakura .text { margin-bottom: 90px; font-size: 13px; line-height: 26px; word-break: keep-all; overflow-wrap: anywhere; }
@media screen and (max-width: 767px) {
  #content #SHSA .sakura .text { font-size: 13px; line-height: 2; }
  #content #SHSA .sakura .text br { display: none; }
}



#content #fragrance { margin: 0; padding: 130px 0; background: url("images/fragrance_bg.png") no-repeat; background-size: cover; }
#content #fragrance-inner { width: 900px; margin: 0 auto; background: rgba(255,255,255,0.8); padding: 80px 0 29px; color: #666; border-radius: 10px; }
#content #fragrance h4 { font-size: 32px; font-weight: normal!important; padding: 0!important; margin: 0 0 20px!important; text-align: center; }
#content #fragrance .description { display: block; font-size: 16px; line-height: 28px; padding: 0; margin-bottom: 38px; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
#content #fragrance .description:before,
#content #fragrance .description::after { display: none; }
#content #fragrance .description2 { display: block; font-size: 14px; line-height: 28px; padding: 0; margin-bottom: 45px; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
#content #fragrance h5 { display: block; font-size: 12px; font-weight: normal!important; padding: 0!important; margin-bottom: 25px; text-align: center; }
#content #fragrance .notes { font-size: 0; padding: 0; }
#content #fragrance .notes .note { margin-top: 18px; }
#content #fragrance .notes .note { position: relative; }
#content #fragrance .notes .note:after { content: ""; display: block; height: 8px; margin-top: 18px; background: url("images/icon_arrow.png") no-repeat center center; }
#content #fragrance .notes .note:nth-child(3):after { display: none; }
#content #fragrance .notes .notes__box__ttl { color: #da90bb; font-size: 13px; text-align: center; margin: 0 auto 17px; padding: 0; }
#content #fragrance .notes p.small { text-align: center; font-size: 11px; line-height: 17px; color: #4c4948; word-break: keep-all; overflow-wrap: anywhere; }
#content #fragrance .notes p.small > span { text-decoration: underline; display: inline; }
#content #fragrance .kome { text-align: right; font-size: 10px; margin: 31px 24px 0; line-height: 1; }
@media screen and (max-width: 767px) {
  #content #fragrance { padding: 70px 10px; }
  #content #fragrance-inner { width: auto; margin: 0 10px; padding: 70px 10px 20px; }
  #content #fragrance h4 { font-size: 30px; margin: 0 0 5% !important; }
  #content #fragrance .description2 { font-size: 13px; line-height: 24px; }
  #content #fragrance h5 { font-size: 13px; }
  #content #fragrance p { font-size: 13px; line-height: 1.8; padding: 20px 0 0; }
  #content #fragrance p.small { padding: 0; }
  #content #fragrance p br { display: none; }
  #content #fragrance .notes p.small { width: auto; text-align: center; font-size: 11px; }
  #content #fragrance .kome { text-align: right; font-size: 9px; margin-bottom: 0; padding: 30px 0 0; margin: 0; }
}



#content #SHSF .pallet { display: block; margin-top: 30px; }
#content #SHSF .pallet p { margin-top: 4px; }




#content #GIFTSET { padding-bottom: 80px; }
#content #GIFTSET .description { margin-bottom: 70px; }
#content #GIFTSET .description > span { display: block; text-align: center; }
#content #GIFTSET .description .ttl_set { font-size: 36px; margin-bottom: 10px; line-height: 1; }
#content #GIFTSET .description .ttl_set_ja { font-size: 14px; }
#content #GIFTSET .description2 { margin-bottom: 50px; }
#content #GIFTSET .description2 span { display: block; text-align: center; }
#content #GIFTSET .description2 .txt { color: #666; font-size: 20px; margin-bottom: 24px; line-height: 2; word-break:keep-all; display: block; }
#content #GIFTSET .description2 .txt .small { color: #666; font-size: 20px; display: block; margin: 14px 0 20px; }
#content #GIFTSET .date { display: block; margin-bottom: 80px; }
#content #GIFTSET .date * { text-align: center; }
#content #GIFTSET .date .release { display: block; font-size: 16px; padding: 0 0 10px; }
#content #GIFTSET .date .reserve { display: block; font-size: 16px; margin: 0; }
#content #GIFTSET .sectionMains { display: flex; flex-wrap: wrap; justify-content: space-around; max-width: 1300px; margin: 0 auto; }
#content #GIFTSET .sectionMain { margin-bottom: 120px; max-width: none; width: 50%; }
#content #GIFTSET .sectionMain.gradation2 { padding-top: 100px; }
#content #GIFTSET .sectionMain-inner { display: block; }
#content #GIFTSET .sectionMain-inner > * { width: auto; }
#content #GIFTSET .text { text-align: center; font-size: 16px; line-height: 1.9; margin-bottom: 20px; word-break:keep-all; color: #666; }
#content #GIFTSET .small { text-align: center; font-size: 13px; line-height: 1.8; margin-bottom: 20px; word-break:keep-all; color: #c5688f; }
#content #GIFTSET .item_img { margin-bottom: 17px; }
#content #GIFTSET .item_img img { width: 90%; max-width: 480px; }
#content #GIFTSET .meta { width: 90%; margin: 0 auto; }
#content #GIFTSET .meta * { text-align: center; }
#content #GIFTSET .meta h4 { margin-bottom: 6px; font-size: 26px; word-break: keep-all; overflow-wrap: anywhere; }
#content #GIFTSET .meta h4 small.sub { margin-top: 6px; }
#content #GIFTSET .meta h5 { margin-bottom: 25px; }
#content #GIFTSET .meta .price { margin-bottom: 17px; }
#content #GIFTSET .meta .detailBtn { margin: 10px auto 0; }
#content #GIFTSET .meta .cartBtn { margin: 10px auto 0; }
#content #GIFTSET .kome {}
#content #GIFTSET .kome p { font-size: 11px; margin-bottom: 8px; text-align: center; color: #666; }
@media screen and (max-width: 767px) {
  #content #GIFTSET .sectionMains { display: block; }
  #content #GIFTSET .sectionMain { max-width: 600px; width: auto; margin-bottom: 70px; }
  #content #GIFTSET .text { font-size: 15px; }
  #content #GIFTSET .small { font-size: 15px; }
  #content #GIFTSET .item_img .thumbnail .slick-slide { margin: 0 5px; }
  #content #GIFTSET .item_img img {  }
  #content #GIFTSET .meta h4 { font-size: 22px; }
  #content #GIFTSET .meta h4 small.sub { font-size: 13px; }
  #content #GIFTSET .meta .text br ,
  #content #GIFTSET .meta .text .small br { display: none; }
  #content #GIFTSET .kome { margin: 0 10px; }
}


#content #CAMPAIGN { padding: 107px 0 0; margin: 0 auto 300px; }
#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 { }
#content #CAMPAIGN .img img {}
#content #CAMPAIGN .ttl { font-size: 20px; margin-bottom: 30px; word-break: keep-all; overflow-wrap: anywhere; }
#content #CAMPAIGN .ttl:before { content: "◆"; display: block; padding: 50px 0 0; margin-bottom: 40px; text-align: center; font-size: 14px; color: #a8a8a8; }
#content #CAMPAIGN .box { background: #faf7f7; width: 100%; max-width: 600px; padding: 40px 0; margin: 0 auto; }
#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; line-height: 1.8; color: #2b0c0c; font-weight: bold; margin: 0 10px 40px; word-break: keep-all; overflow-wrap: anywhere; }
#content #CAMPAIGN .box .term span { display: inline-block; 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 .button { display: block; font-size: 18px; line-height: 1.4; border: 1px solid #939393; border-radius: 10px; padding: 16px 30px; margin: 10px auto 0; transition: all .4s ease ; text-align: center; max-width: 600px; background: #f8f5f4 url('images/common_icon_arrow_right_black_12.png') no-repeat center right 12px; background-size: 12px; word-break: keep-all; overflow-wrap: anywhere; }
#content #CAMPAIGN .button:hover { color: inherit !important; opacity: 0.8; border: 1px solid #f3dbdb; }
#content #CAMPAIGN .komes {  }
#content #CAMPAIGN .komes:before { content: "◆"; display: block; padding: 50px 0 0; margin-bottom: 40px; text-align: center; font-size: 14px; color: #a8a8a8; }
#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: 4%; 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; }
}