@charset "utf-8";

#main .content .end-caption{ margin-top: 10px; font-size: 0.8rem; }
#main .content{ background-color: #f0edec; border: solid #cccccc; border-width: 0 1px; }
#main .content .content-body{ box-sizing: border-box; width: 100%; padding: 10% 5%; }
#main .content .content-body .intro .txt{ margin-top: 10px; font-size: 1rem; font-weight: bold; }
#main .content .content-body .eyebrow{ background-color: #ffffff; padding: 7% 5%; margin-top: 7%; }
#main .content .content-body .eyebrow .ttl{ margin-bottom: 3%; }
#main .content .content-body .eyebrow .copy{ font-size: 1rem; }
#main .content .content-body .eyebrow .beforeafter{ margin-top: 3%; }
#main .content .content-body .eyebrow .flow-list{ margin-top: 5%; }
#main .content .content-body .eyebrow .flow-list .item{ display: flex; display: -ms-flex; }
#main .content .content-body .eyebrow .flow-list .item:nth-child(n+2){ margin-top: 4%; }
#main .content .content-body .eyebrow .flow-list .item .num{ font-size: 1.5rem; font-weight: bold; margin-right: 2%; }
#main .content .content-body .eyebrow .flow-list .item .photo{ width: 30%; margin-right: 2%; }
#main .content .content-body .eyebrow .flow-list .item .txt-body{ flex: 1; }
#main .content .content-body .eyebrow .flow-list .item .txt-body .txt{ font-size: 1rem; }
#main .content .content-body .eyebrow .flow-list .item .txt-body .txt .en-icon{ display: inline-block; font-size: 80%; background-color: #231815; color: #ffffff; min-width: 1.2em; text-align: center; }
#main .content .content-body .eyebrow .flow-list .item .txt-body .txt .star-icon{ color: #e61673; }
#main .content .content-body .eyebrow .cosme-item{ margin-top: 10%; }
#main .content .content-body .eyebrow .cosme-item .head{ font-size: 1.25rem; font-weight: bold; margin-top: 3%; }
#main .content .content-body .eyebrow .cosme-item .txt{ font-size: 1rem; color: #231815; }
#main .content .content-body .eyebrow .cosme-item .marker{ color: #b81744; }
#main .content .content-body .eyebrow .cosme-item .marker .icon{ color: #231815; padding: 2px 5px; border: 1px solid #666666; font-size: 80%; background-color: #ffffff; margin-left: 0.2em; }
#main .content .content-body .eyebrow .cosme-item .txt~.txt{ margin-top: 15px; }
#main .content .content-body .eyebrow .cosme-item .txt.marker{ margin-top: 0; }
#main .content .content-body .eyebrow .cosme-item .txt .en-icon{ display: inline-block; font-size: 80%; background-color: #231815; color: #ffffff; min-width: 1.2em; text-align: center; margin-right: 0.2em; }
#main .content .content-body .eyebrow .movie{ position: relative; width: 100%; padding-top: 177.7778%; margin-top: 5%; }
#main .content .content-body .eyebrow .movie::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid #000000; box-sizing: border-box; pointer-events: none; z-index: 5; }
#main .content .content-body .eyebrow .movie video{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#main .content .content-body .eyebrow .movie-navi{ text-align: center; margin-top: 5%; }
#main .content .content-body .eyebrow .movie-navi a{ display: inline-block; background-color: #000000; color: #ffffff; font-size: 0.9230rem; text-decoration: none; padding: 10px 10%; border-radius: 33px; position: relative; }
#main .content .content-body .eyebrow .movie-navi a::before{ content: ""; position: absolute; right: 5%; top: 50%; transform: translateY(-50%); border: solid transparent; border-width: 5px 0 5px 8px; border-left-color: #ffffff; }

#main .content .content-body .eyebrow01 .ttl{ width: 80%; }
#main .content .content-body .eyebrow02 .ttl{ width: 76.1904%; }
#main .content .content-body .netshop-btn{ margin-top: 10px; }
#main .content .content-body .netshop-btn a{ display: block; background-color: #000000; padding: 10px 0; font-size: 1rem; text-align: center; color: #ffffff; text-decoration: none; border-radius: 22px; }
#main .content .content-body .store-list{ display: flex; display: -ms-flex; margin-top: 5px; }
#main .content .content-body .store-list .store{ font-size: 0.8rem; border: 1px solid #666666; padding: 0 3px; border-radius: 3px; }
#main .content .content-body .store-list .store:nth-child(n+2){ margin-left: 2px; }




@media screen and (max-width: 780px){ /*780px以下のcss*/
}
@media screen and (max-width: 480px){ /*480px以下のcss*/
}