.entry-header {
    display: none
}

.entry-content {
    margin: 0 auto
}

.l-breadcrumb__item:nth-child(2) {
    display: none
}

.l-breadcrumb__item:nth-child(3) {
    margin-left: 5px
}

.w880 {
    width: 100%;
    max-width: 880px;
    margin: 0 auto
}

.w920 {
    width: 100%;
    max-width: 920px;
    margin: 0 auto
}

.w960 {
    width: 100%;
    max-width: 960px;
    margin: 0 auto
}

.w1920 {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto
}

.button {
    box-shadow: 5px 5px 0px -2px #a5a5a5;
    border-radius: 5px;
    transition: box-shadow .3s, transform 0.3s
}

.button:hover {
    transform: translateY(3px) translateX(3px);
    box-shadow: none;
    opacity: .7
}

*,
*:after,
*:before {
    box-sizing: border-box
}

#wrap {
    background-color: #fff;
    text-align: center;
    font: 100% Gothic MB101 Regular, YuGothic, "Yu Gothic", Helvetica, sans-serif;
    letter-spacing: -0.01em;
}

.text_center {
    text-align: center
}

.red {
    color: #ce1c40
}

.yellow {
    color: #f0d86d
}

.sans_bold {
    font-weight: bold !important;
    font-family: 'Noto Sans JP', YuGothic, 'Yu Gothic', Helvetica, sans-serif;
    font-display: swap
}

.serif {
    font-family: 'Shippori Mincho B1', YuMincho, serif;
    font-display: swap
}

.serif_bold {
    font-weight: 600 !important
}

.tel_font {
    font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Baskerville', serif;
    font-display: swap
}

.f00 {
    font-size: 40px
}

.f01 {
    font-size: 35px
}

.f02 {
    font-size: 30px
}

.f03 {
    font-size: 27px
}

.f04 {
    font-size: 25px
}

.f05 {
    font-size: 22px
}

.f06 {
    font-size: 20px;
    line-height: 1.8em
}

.f07 {
    font-size: 18px;
    line-height: 32px
}

.f08 {
    font-size: 16px
}

.f09 {
    font-size: 14px
}

.t_left {
    text-align: left
}

.fade01 {
    transition: all 1s ease;
    opacity: 0
}

.fade01.fadeIn {
    opacity: 1
}

.fade02 {
    transition: all 2s ease;
    transform: translateY(-6%);
    opacity: 0
}

.fade02.fadeIn {
    transform: translateY(0%);
    opacity: 1
}

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%
}

#page-top a {
    background: rgba(206, 28, 64, 0.7);
    color: #fff;
    width: 80px;
    padding: 20px 0;
    text-align: center;
    display: block;
    border-radius: 5px
}

#page-top a:hover {
    color: #fff;
    background: #ce1c40
}

/* SP用改行 */
@media screen and (min-width: 650px) {
    .br-sp {
        display: none;
    }
}


.hr-header {
    background-image: url("/wp-content/uploads/2021/10/hakko-rose_rose_bg_01.png"), url("/wp-content/uploads/2021/10/hakko-rose_rose_bg_02.png");
    background-repeat: repeat-x;
    background-size: 400px;
    background-position: top, bottom;
    border-bottom: 15px solid #c0986b
}

.hr-header .w880 {
    padding: 180px 10px
}

@media screen and (min-width: 650px) {
    .hr-header .w880 {
        padding: 180px 0
    }
}

.hr-header h1 {
    margin: 0 auto;
    width: 100%
}

.hr-header h1 img {
    display: block;
    max-width: 90%;
    margin: 20px auto
}

@media screen and (min-width: 650px) {

    .hr-header h1 img {
        display: block;
        max-width: 600px;
    }

}

.hr-header p span.bl {
    display: inline
}

@media screen and (min-width: 880px) {
    .hr-header p span.bl {
        display: block
    }
}

section.sA {
    max-width: 1300px !important;
    background: url("/wp-content/uploads/2021/10/hakko-rose_a_bg.png") no-repeat top center;
    background-size: 390px;
    padding-top: 50px;
    margin-bottom: 180px;
}

@media screen and (min-width: 650px) {
    section.sA {
        padding-top: 100px;
        background-position: top left 10%;
        margin-bottom: 80px;
    }
}

section.sA h1 span {
    display: block
}

@media screen and (min-width: 650px) {
    section.sA h1 span {
        display: inline
    }
}

section.sA h1 img {
    display: block;
    margin: 1.5% auto 0;
    padding: 3% 10%
}

@media screen and (min-width: 650px) {
    section.sA h1 img {
        padding: 0
    }
}

section.sA p {
    padding: 3% 10%;
    margin: 0 auto;
    text-align: left
}

@media screen and (min-width: 880px) {
    section.sA p.catch {
        padding: 3% 0%;
        text-align: center
    }
}

section.sA ul.list {
    margin: 7% auto
}

@media screen and (min-width: 650px) {
    section.sA ul.list {
        margin: 5% auto;
        padding: 0 3%;
        display: flex;
        flex-wrap: wrap
    }
}

section.sA ul.list>li {
    margin: 1% auto
}

@media screen and (min-width: 650px) {
    section.sA ul.list>li {
        width: 50%
    }
}

@media screen and (min-width: 650px) {
    section.sA ul.list>li>ul {
        display: flex
    }
}

section.sA ul.list>li>ul>li {
    margin: 0 auto
}

section.sA ul.list>li>ul>li:last-child {
    width: 300px
}

@media screen and (min-width: 650px) {
    section.sA ul.list>li>ul h2 {
        text-align: left;
        padding-left: 5%
    }
}

section.sA ul.list>li>ul p {
    max-width: 500px;
    margin-bottom: 20px;
}

@media screen and (min-width: 650px) {
    section.sA ul.list>li>ul p {
        padding-left: 5%;
        padding-right: 0
    }
}

section.sA p.kiseki {
    display: inline-block;
    position: relative;
    padding: 3% 10%;
    text-align: center;
    letter-spacing: -0.03rm;
    display: block
}

@media screen and (min-width: 650px) {
    section.sA p.kiseki {
        padding: 3% 0 0
    }
}

@media screen and (min-width: 650px) {
    section.sA p.kiseki:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-bottom: 1px solid #ce1c40
    }
}

section.sA ul.kiseki {
    padding: 3% 10%
}

@media screen and (min-width: 650px) {
    section.sA ul.kiseki {
        display: flex;
        justify-content: center
    }
}

section.sA ul.kiseki li {
    border: 1px solid #ce1c40;
    padding: 1.5% 2%;
    margin-bottom: 3%
}

@media screen and (min-width: 650px) {
    section.sA ul.kiseki li {
        margin: 3% 3% 3% 0
    }
}

section.sA ul.kiseki li:last-child {
    padding: 1.8% 3%
}

@media screen and (min-width: 650px) {
    section.sA ul.kiseki li:last-child {
        margin-right: 0
    }
}

section.sA>div.small {
    padding-right: 3%
}

section.sA>div.small small {
    display: block;
    text-align: right
}

section.sA .s1 {
    margin-top: 120px;
}

section.sA .s1 h2 {
    padding-top: 4%;
    padding-bottom: 4%;
    color: #fff;
    background-color: #DD1D44;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
}

@media screen and (min-width: 650px) {
    section.sA .s1 h2 {
        padding-top: 8px;
        padding-bottom: 8px;
        margin-bottom: 45px;
    }
}

section.sA .s1 .skincare_flex {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 650px) {
    section.sA .s1 .skincare_flex {
        display: block
    }
}

section.sA .s1 p {
    margin: 0;
    padding: 0;
}

section.sA .s1 .skincare_flex .skincare_left {
    width: 90%;
    margin: 0 auto;
}

@media screen and (min-width: 650px) {
    section.sA .s1 .skincare_flex .skincare_left {
        width: 60%;
    }
}

section.sA .s1 .skincare_flex .skincare_right {
    text-align: center;
    padding-top: 30px;
    margin-bottom: 40px;
}

@media screen and (min-width: 650px) {
    section.sA .s1 .skincare_flex .skincare_right {
        width: 30%;
        padding-top: 0
    }
}

section.sA .s1 .skincare_flex .skincare_right img {
    max-width: 240px;
    margin-left: 40px;
}

@media screen and (min-width: 650px) {
    section.sA .s1 .skincare_flex .skincare_right img {
        margin-left: 0;
    }
}


.about_natural-origin-contents {
    height: 284px;
}

@media screen and (min-width: 650px) {
    .about_natural-origin-contents {
        position: relative;
        height: 284px;
    }
}

.about_natural-origin-contents .skincare_left p {
    padding: 20px !important;
    border: 1px solid #000000;
}

@media screen and (min-width: 650px) {
    .about_natural-origin-contents .skincare_left p {
        position: absolute;
        width: 60%;
        z-index: 2;
    }
}

.about_natural-origin-contents .skincare_right img {
    max-width: 300px !important;
    margin-top: -20px;
    margin-left: 0 !important;
}

@media screen and (min-width: 650px) {
    .about_natural-origin-contents .skincare_right img {
        position: absolute;
        max-width: 440px !important;
        margin-top: 0;
        right: 0;
        z-index: 1;
    }
}


.about_natural-origin-contents span {
    font-weight: bold;
}


section.sB h2 {
    margin: 30px auto 0;
    width: 100%
}

section.sB h2 img {
    display: none
}

@media screen and (min-width: 650px) {
    section.sB h2 img {
        display: inline-block
    }
}

section.sB h2 span {
    display: inline-block;
    background-color: #ce1c40;
    color: #fff;
    width: 100%;
    padding: 4% 0
}

@media screen and (min-width: 650px) {
    section.sB h2 span {
        display: none
    }
}

section.sB p {
    padding: 7%
}

@media screen and (min-width: 650px) {
    section.sB p {
        padding: 3% 10%
    }
}

section.sB ul {
    margin: 10px auto 0 !important;
    max-width: 700px
}

@media screen and (min-width: 650px) {
    section.sB ul {
        display: flex;
        justify-content: center;
        align-items: start
    }
}

section.sB ul li:nth-child(2) {
    margin: 7% auto
}

@media screen and (min-width: 650px) {
    section.sB ul li:nth-child(2) {
        margin: 7% auto 5% 9%
    }
}

section.sB ul li:nth-child(2) img.pc {
    display: none
}

@media screen and (min-width: 650px) {
    section.sB ul li:nth-child(2) img.pc {
        display: block
    }
}

@media screen and (min-width: 650px) {
    section.sB ul li:nth-child(2) img.sp {
        display: none
    }
}

section.sB ul li:last-child {
    padding-right: 4.5%
}

@media screen and (min-width: 650px) {
    section.sB div.s1 h2 {
        margin: 100px auto 0
    }
}

section.sB div.s2 ul li:last-child {
    margin-right: 4%
}

section.sB div.s3 {
    position: relative;
    padding: 3% 5%
}

@media screen and (min-width: 650px) {
    section.sB div.s3 {
        padding: 3% 10%
    }
}

section.sB div.s3 h3 {
    position: relative;
    top: 10px;
    width: 90%;
    margin: 0 auto;
    background-color: #fff
}

section.sB div.s3>div {
    border: 1px solid #000;
    padding: 10% 5% 5%
}

@media screen and (min-width: 650px) {
    section.sB div.s3>div {
        padding: 5% 5% 3% 5%
    }
}

section.sB div.s3>div div {
    text-align: center;
    margin-top: 5%
}

@media screen and (min-width: 650px) {
    section.sB div.s3>div div {
        margin-top: 2%
    }
}

.sB_s3_evidence_list {
    color: #ce1c40;
    font-size: smaller;
    margin-right: 2px;
}

section.sC {
    background-color: #c0986b;
}

section.sC .w1920 {
    background-image: url("/wp-content/uploads/2021/10/hakko-rose_c_bg01.png"), url("/wp-content/uploads/2021/10/hakko-rose_c_bg02.png");
    background-repeat: no-repeat;
    background-size: 35%;
    background-position: top left, bottom right;
    max-width: 1300px;
    padding-top: 40px;
    padding-bottom: 80px
}

@media screen and (min-width: 650px) {
    section.sC div.w1920 {
        background-size: 354px, 396px;
        padding-top: 80px;
        padding-bottom: 120px
    }
}

/* item-list */
section#hakko-rose_skincare_list {
    margin-top: 60px;
}

@media screen and (min-width: 650px) {
    section#hakko-rose_skincare_list {
        margin-top: 80px;
    }
}

section#hakko-rose_skincare_list h1 {
    text-align: center;
    margin-bottom: 40px
}

@media screen and (min-width: 650px) {
    section#hakko-rose_skincare_list h1 {
        margin-bottom: 80px
    }
}

section#hakko-rose_skincare_list h1 img {
    width: 880px
}


.sC_title_pc {
    display: none
}

@media screen and (min-width: 650px) {
    .sC_title_pc {
        display: inline-block
    }
}

.sC_title_sp {
    display: inline-block;
    width: 100%;
}

@media screen and (min-width: 650px) {
    .sC_title_sp {
        display: none
    }
}





section#hakko-rose_skincare_list h2 {
    font-size: 26px;
    letter-spacing: 0.2em;
    margin: 24px auto;
    color: #000000;
}

section#hakko-rose_skincare_list p {
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.8em;
    color: #fff;
    margin: 30px auto 20px !important
}


section#hakko-rose_skincare_list .skincare_list_flex {
    margin: 60px auto
}

section#hakko-rose_skincare_list .skincare_list_flex>ul {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 650px) {
    section#hakko-rose_skincare_list .skincare_list_flex>ul {
        display: block
    }
}

section#hakko-rose_skincare_list .skincare_list_flex>ul li {
    width: 300px;
    margin: 0 auto;
}

@media screen and (min-width: 650px) {
    section#hakko-rose_skincare_list .skincare_list_flex>ul li {
        max-width: 260px;
    }
}

section#hakko-rose_skincare_list .skincare_list_flex>ul li:last-child {
    margin-right: 0
}

@media screen and (max-width: 650px) {
    section#hakko-rose_skincare_list .skincare_list_flex>ul li:last-child {
        margin: 0 auto
    }
}


.skincare_list_item {
    margin-bottom: 40px !important;
}

@media screen and (min-width: 650px) {
    .skincare_list_item {
        margin-bottom: 0 !important;
    }
}

.skincare_list_item .natural-origin-contents_95 {
    width: 300px;
    height: auto;
}

@media screen and (min-width: 650px) {
    .skincare_list_item .natural-origin-contents_95 {
        width: 260px;
        height: auto;
    }
}


/*  freelist_table  */
#freelist_sec {
    width: 96%;
    margin: 0 auto !important;
}

@media screen and (min-width: 650px) {
    #freelist_sec {
        width: 100%;
    }
}

.freelist_title {
    font-size: 16px;
    color: #fff;
}

@media screen and (min-width: 650px) {
    .freelist_title {
        font-size: 20px;
    }

}

.freelist {
    font-size: 11px;
    border-collapse: collapse;
    border: solid 1px #000000;
    color: #000000;
    margin-bottom: 0;
}

@media screen and (min-width: 650px) {
    .freelist {
        font-size: 16px;
    }
}

.freelist th,
.freelist td {
    border-collapse: collapse;
    border: solid 1px #000000;
    padding: 8px 10px;
}

.freelist tr.item th {
    background-color: #fff;
}

.freelist_header {
    color: #fff;
    background-color: #7f7f7f !important;
}

.freelist tr.free-material th {
    background-color: #e5e5e5;
    width: 46%;
}

.freelist tr.free-material td {
    background-color: #f3eae1;
    width: 18%;
}

.freelist tr.free-material td .registered {
    font-size: 50%;
    vertical-align: super
}

.freelist tr.hakko-rose_ratio th {
    background-color: #f5d1d9;
}

.freelist tr.hakko-rose_ratio td {
    background-color: #fbedf0;
}

.freelist tr.natural-origin-contents th {
    background-color: #d8e7d6;
}

.freelist tr.natural-origin-contents td {
    background-color: #ebf3ea;
}

.freelist_caption {
    text-align: right;
    margin-top: 10px;
    color: #000000;
}


@media screen and (min-width: 650px) {
    section.sD .title-border {
        display: flex;
        align-items: center
    }

    section.sD .title-border:before,
    section.sD .title-border:after {
        border-top: 1px solid;
        content: "";
        flex-grow: 1
    }

    section.sD .title-border:before {
        margin-right: 1rem
    }

    section.sD .title-border:after {
        margin-left: 1rem
    }
}

section.sD h1 {
    margin: 7% auto 3%;
    padding: 3% 10%
}

section.sD ul.list {
    margin-bottom: 20%
}

@media screen and (min-width: 650px) {
    section.sD ul.list {
        display: flex;
        margin-bottom: 8%
    }
}

section.sD ul.list>li ul {
    margin-bottom: 20% !important;
}

@media screen and (min-width: 650px) {
    section.sD ul.list>li ul {
        margin-bottom: 10% !important;
    }
}

section.sD ul.list>li ul li {
    margin-bottom: 8% !important
}

section.sD ul.list>li ul li:nth-child(3) {
    padding: 0 10%
}

section.sD ul.list>li ul li:nth-child(3) small {
    display: inline-block;
    text-align: left;
    margin-top: 8%
}

section.sD ul.list>li.list01 ul li:first-child {
    margin-right: 8%
}

@media screen and (min-width: 650px) {
    section.sD ul.list>li.list01 ul li:first-child img {
        width: 200px
    }
}

section.sD ul.list>li.list01 ul li:nth-child(2) h2,
section.sD ul.list>li.list01 ul li:nth-child(2) h3 {
    color: #001976
}

@media screen and (min-width: 650px) {
    section.sD ul.list>li.list01 ul li:nth-child(3) p {
        margin: 5% 0 17.5%
    }
}

section.sD ul.list>li.list02 ul {
    margin-bottom: 20%
}

section.sD ul.list>li.list02 ul li:first-child {
    margin-right: 8%
}

@media screen and (min-width: 650px) {
    section.sD ul.list>li.list02 ul li:first-child img {
        width: 200px
    }
}

section.sD ul.list>li.list02 ul li:nth-child(2) h2,
section.sD ul.list>li.list02 ul li:nth-child(2) h3 {
    color: #005726
}

@media screen and (min-width: 650px) {
    section.sD ul.list>li.list02 ul li:nth-child(3) p {
        margin: 6% 0 0
    }
}

@media screen and (min-width: 650px) {
    section.sD ul.list>li.list03 ul>li:first-child img {
        width: 167.3px;
        padding-top: 35.5px
    }
}

section.sD ul.list>li.list03 ul>li:nth-child(2) h2,
section.sD ul.list>li.list03 ul>li:nth-child(2) h3 {
    color: #6D3C17
}

@media screen and (min-width: 650px) {
    section.sD ul.list>li.list03 ul>li:nth-child(3) p {
        margin: 5% 0 15%
    }
}

.btn-section {
    width: 880px;
    max-width: 100%;
    margin: 80px auto 160px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.btn-section .link05 {
    padding: 20px 10px;
    margin: 0 auto;
}

.btn-section .link05 img {
    width: 260px;
}