@charset "utf-8";
/* CSS Document */
/* #contents */
#contents .cts-top {
    height: 479px;
    padding: 0;
}
#stage .cts-body {
    padding-bottom: 51px;
}
#contents .cts-body .inner {
    background: #fff;
    box-sizing: border-box;
}
#contents .lay-bg-red {
    overflow: hidden;
}
#contents .cts-body .inner-box {
    padding: 0 5.435%;
}
#contents .wrap-double+.inner-box {
    padding-bottom: 6.7%;
}
#contents .tl-sec {
    padding-top: 7.9%;
    margin-bottom: 5.5%;
    font-size: 2.5em;
}
#contents .txt-lead {
    font-size: 2em;
    padding: 0 0 5.7%;
    letter-spacing: 0.1em;
}
#contents .stl-double {
    font-size: 1.75em;
    padding: 0 0 2.5%;
}
#contents .txt-double {
    font-size: 0.938em;
}
#contents .col-right .txt-double {
    text-indent: 0;
}
#contents .stl-double-02 {
    font-size: 1.688em;
    padding: 8% 0 7%;
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1.407;
    left: 0;
}
#contents .icon-gaseri {
    width: 26.342%;
    margin: 0 5.6% 0 20.6%;
}
#contents .icon-bifidus {
    width: 26.586%;
}
#contents .box-cts:last-child {
    padding-bottom: 0;
}
#contents .lay-bg-red .tl-sec {
    padding-top: 14.2%;
}
#contents .box-num-stl {
    padding: 0 2.4% 0 0;
    margin: 0 0 0 -0.4%;
}
#contents .num-stl {
    height: 4em;
}
#contents .tl-dhf .txt-stl,
#contents .txt-stl {
    height: 0.813em;
    margin: 0 0 1.6%;
}
#contents .top__note-01 {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 0.688em;
    line-height: 1.455;
    margin: 0 0 0.8%;
    margin-left: clamp(-220px, calc((100% - 97.7vw) / 2), 0px);
    letter-spacing: 0.03em;
}
#contents .top__note-02 {
    font-size: 0.688em;
    line-height: 1.455;
    margin: 0 0 0.7%;
}
#contents .top__note-02:after {
    display: none;
}
#contents .copy-main {
    width: 74.674%;
    margin: 2.1% 0 0 -5.7%;
}
#contents .img-top {
    width: 23.227%;
    margin: 27.6% 0 0 -1.1%;
}
#contents .cts-top .img-tl {
    width: 152.174%;
    margin: 0 0 0 -26.087%;
}
#contents .lay-bg-red .stl-box-cts,
#contents .cts-lead-nature h3 {
    font-size: 2em;
    padding: 11.4% 0 0.4em;
}
#contents .cts-lead-nature p {
    font-size: 1em;
    padding: 0 0 4.5% 0;
}
#contents .stl-box-cts {
    font-size: 1.625em;
    padding: 0 0 0.6em;
}
#contents .txt-box-cts {
    font-size: 0.875em;
    line-height: 1.715;
    letter-spacing: 0.16em;
}
#contents .img-box {
    padding: 8.2% 0 20.8%;
    width: 56.522%;
}
#contents .col-left {
    width: 49%;
    padding: 0;
}
#contents .img-col-03 {
    width: 28.9%;
    margin: 55.1% 0 0 11.1%;
}
#contents .img-col-03-02 {
    width: 74.2%;
    margin: 23.3% -14.8% 0 -8.3%;
    vertical-align: top;
    padding: 0 0 13.7%;
}
#contents .col-right {
    width: 33.334%;
    float: right;
    padding: 11.3% 0 0;
}
#contents .col-right {
    width: 46.049%;
    padding: 0;
    margin: -0.1% 0% -7.1% 0;
}
#contents .col-right a {
    transition: opacity 200ms ease-out;
}
#contents .col-right a:hover {
    opacity: .8;
}
#contents .acc-gaseri {
    background: #f7f7f7;
    display: block;
    margin-bottom: 0;
    margin-top: 4.7%;
}
#contents .acc-gaseri h4 {
    font-size: 1.2em;
    background: #f5f5f5;
}
#contents .btn-open-acc:before {
    content: "";
}
#contents .btn-open-acc {
    text-align: center;
    padding: 2.5% 0 1.9% 0;
    display: grid;
    grid-template-columns: 5.4% 1fr 5.4%;
}
#contents .btn-open-acc:after {
    position: relative;
    display: block;
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    margin: 12.8% 56% 0 0;
    top: 0;
    width: auto;
    padding: 0 0 29%;
    transform-origin: 50% 34%;
}
#contents .acc-gaseri__stl {
    font-size: 1.25em;
    line-height: 1.7;
    font-weight: bold;
    letter-spacing: 0.12em;
    margin: 0 0 0.6em;
}
#contents .acc-gaseri__stl strong {
    color: #e60012;
}
#contents .acc-gaseri__hr {
    background: url(/nature/img/bg_dot.png) repeat-x;
    background-size: 5px auto;
    border: none;
    width: 100%;
    height: 2px;
    margin: 1.4% 0 6.8%;
}
#contents .acc-gaseri__arw {
    margin: 10% 0 0;
}
#contents .acc-gaseri__graph {
    position: relative;
    background: #fff;
    margin: 4.8% 0 13.2% 0.7%;
    width: 98.7%;
}
#contents .acc-gaseri__graph-figure {
    padding: 7.4% 8.3% 0 7.1%;
}
#contents .acc-gaseri__graph-img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32.149%;
    margin: 0 0 -17.1% 0.7%;
}
#contents .acc-gaseri__graph-caption {
    font-size: 0.719em;
    line-height: 1.809;
    padding: 7.3% 0 6% 31.5%;
    letter-spacing: 0.14em;
}
#contents .lay-open .btn-open-acc:after {
    transform: rotateX(180deg) translateY(-0%);
}
#contents .body-acc {
    padding: 0 13.3%;
}
#contents .body-acc>div {
    padding: 10.9% 0 0;
}
#contents .body-acc p {
    font-size: 0.875em;
    line-height: 1.858;
    letter-spacing: 0.12em;
}
#contents .body-acc .acc-gaseri__cite {
    font-size: 0.688em;
    line-height: 1.56;
    margin: 2em 0 0;
    display: block;
    letter-spacing: 0.08em;
}
#contents .img-acc {
    width: 61.419%;
    margin: 0 auto;
    display: block;
    padding: 1.3% 0 5.1%;
}
#contents .wrap-col-acc {
    padding: 6.9% 0 6.6%;
    display: grid;
    grid-template-columns: 27.453% 13.1% 27.453%;
    justify-content: center;
    align-items: start;
    gap: 0 3.8%;
}
#contents .box-txt-acc {
    left: 0;
    padding: 0 0 1em;
    position: relative;
    top: 0;
    transform: translate(0, 0);
    text-align: center;
    padding: 0;
}
#contents .box-txt-acc small {
    font-size: 10px;
    display: block;
    margin-top: 6px;
}
#contents .col-acc {
    display: flex;
    flex-direction: column-reverse;
}
#contents .body-acc .col-acc--arw {
    font-size: 0.938em;
    padding: 49% 0 0;
    text-align: center;
}
#contents .col-acc img {
    padding: 0;
    width: 100%;
}
#contents .col-acc h5 {
    font-size: 1em;
    margin: 1em 0 0;
    padding: 0 0 0.25em;
}
#contents .btn-close-acc {
    padding: 3.6% 0 2.7%;
    margin: 4.4% -18.2% 0;
    display: flex;
    justify-content: flex-end;
}
#contents .btn-close-acc:before {
    font-size: 1.2em;
    margin: 0 3% 0 0;
    padding: 0 0 0 0;
}
#contents .lay-bg-red .inner-box {
    background: #e60012;
    color: #fff;
}
#contents .lay-bg-red .sstl-sec {
    font-size: 0.875em;
    margin: 1.5% 0 2.2% 0;
}
#contents .lay-bg-red .cap-sec {
    display: block;
    font-size: 0.938em;
    text-align: left;
    margin-left: 5.7%;
    margin: 0 0 4.7% 5.7%;
    font-weight: 700;
    width: auto;
    letter-spacing: 0.1em;
}
/* #breadcrumbs */
#breadcrumbs {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -4.35%;
}
#breadcrumbs li,
#breadcrumbs li a {
    color: #333;
}
/* cts-series */
#stage .cts-series {
    background: #fff;
}
#stage .cts-series h2 {
    width: 34.837%;
    padding: 8.4% 0 1.6%;
}
#stage .cts-series ul {
    padding-bottom: 1.5%;
}
#stage .cts-series ul h3 {
    color: #e60012;
    font-weight: 400;
    font-size: 1.286em;
    vertical-align: middle;
    padding: 6.1% 0 2.6% 5.9%;
    width: 67.2%;
}
#stage .cts-series h2+ul>li:last-child:after {
    display: none;
}
#stage .cts-series .txt {
    padding: 0 7.8%;
    letter-spacing: 0;
    font-size: 0.875em;
    line-height: 1.572;
}
#stage .cts-series .lay-ti {
    text-indent: -0.5em;
}
#stage .cts-series .wrap-img {
    padding: 0.3% 0 0 0;
}
#stage .cts-series .wrap-img li {
    padding: 0;
}
#stage .cts-series .cfx>li:last-child:after {
    display: none;
}
#stage .cts-series .wrap-img li:nth-child(3) .txt,
#stage .cts-series .wrap-img li:nth-child(4) .txt {
    border-bottom: none;
}
#stage .cts-series .wrap-img li:nth-child(even) {
    margin-right: 0;
    float: right;
}
#stage .cts-series .wrap-img li:nth-child(even) a:before {
    content: "";
    position: absolute;
    top: 0.714em;
    bottom: 0.714em;
    border-right: solid 1px #fff;
    left: -0.4em;
}
#stage .cts-series .wrap-img li:nth-child(even) a:before {
    content: none;
}
#stage .cts-series .wrap-img li:after {
    margin-bottom: 0.3em;
}
#stage .series_fruit-wrap .img {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8%;
}
#stage .cts-series .wrap-img .txt img {
    width: auto;
    height: 2.368em;
}
#stage .flex-ctn {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
}
#stage .flex-ctn:after {
    content: none;
}
#stage .flex-ctn>div {
    width: 48.914%;
    background-color: #ededed;
    display: flex;
    position: relative;
}
#stage .flex-ctn .flex-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
}
#stage .flex-ctn .flex-item {
    height: auto;
    float: unset;
    flex-grow: 1;
    margin-top: 8.5%;
    padding: 0 0 5%;
}
#stage .flex-ctn .flex-item h3 {
    margin-left: 7.7%;
    margin-bottom: 2%;
}
#stage .flex-ctn .li-megumi0 h3 img {
    width: 69.578%;
}
#stage .flex-ctn .li-megumi-plant_label h3 img {
    width: 54%;
}
#stage .flex-ctn div .img {
    padding: 0 0 71%;
    margin-top: 4.1%;
    position: relative;
    height: 0;
}
#stage .flex-ctn div .img::before {
    content: "";
    border-top: solid 1px #fff;
    display: block;
    margin: 0 auto;
    width: 96%;
}
#stage .flex-ctn .img img {
    width: 43.556%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 0 10.75% 0.5%;
}
#stage .flex-ctn .li-megumi-plant_label .img img {
    width: 43.556%;
    margin-bottom: 14.3%;
    margin-left: 0.8%;
}
#stage .flex-ctn .flex-wrap:after {
    content: "\21d2";
    font-family: icon;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 1.4em;
    margin: 0 0.6em 0.3em 0;
}
#stage .flex-ctn .li-megumi-plant_label .flex-wrap:after {
    margin: 0 0.7em 2.5em 0;
}
#stage .flex-ctn .li-megumi-plant_label-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #42a974;
    text-align: center;
    padding: 2.6% 0 1.2%;
}
#stage .flex-ctn .li-megumi-plant_label a:before {
    content: "\21d2";
    font-family: icon;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 1.3em;
    margin: 0em 0.8em 0.2em 0;
    color: #fff;
}
#stage .flex-ctn .li-megumi-plant_label-btn img {
    width: 46.667%;
    position: relative;
}
.series_fruit-wrap {
    display: grid;
    grid-template-rows: auto 1fr;
    background-color: #ededed;
    margin: 2.2% 0% 0;
}
.series-note {
    color: #e60012;
    font-size: 0.75em;
    margin: 1.65em 0 0;
    display: block;
    letter-spacing: 0.08em;
    padding: 0 0 2%;
}
.series_fruit-text {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    padding: 4.2% 0 3.3%;
}
.series_fruit-text h3 {
    display: flex;
    justify-content: center;
}
#stage .series_fruit-text h3 img {
    width: 78.757%;
}
#stage .series_fruit-text .lay-ti {
    padding: 0;
    font-size: 0.875em;
    line-height: 1.572;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 95%;
}
.series_fruit-text:after {
    content: "";
    width: 98%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: 1%;
}
#stage .series_fruit-wrap .wrap-img {
    display: flex;
    padding: 0;
    position: relative;
}
#stage .series_fruit-wrap .wrap-img li:before {
    width: 0.1em;
    height: 90%;
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 5%;
}
#stage .series_fruit-wrap .img {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 9.8%;
}
#stage .series_fruit-wrap .img img {
    width: 58.696%;
}
#stage .series_fruit-wrap .wrap-img .txt {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6.8% 0% 6.5%;
}
#stage .series_fruit-wrap .wrap-img .txt img {
    width: auto;
    height: 2.36em;
}
#stage .series_fruit-wrap .wrap-img li:after {
    font-size: 1.2em;
    margin: 0 0.9em 0.6em 0;
}
#stage .series_fruit-wrap .wrap-img li:before {
    content: "";
    width: 1px;
    height: 90%;
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 5%;
}
#stage .series_fruit-wrap .wrap-img li:last-child:before {
    content: none;
}
/* hover */
#contents .btn-open-acc {
    transition: 400ms ease;
    transition-property: background, color;
}
#contents .btn-open-acc:hover {
    color: #fff;
    background: #e60012;
}
#contents .btn-open-acc:hover::after {
    filter: brightness(0) invert(1);
}
@media all and (max-width: 1160px) {
    #contents .img-top {
        margin-top: 25.9%;
    }
}
@media all and (max-width: 920px) {
    .lay-mobile #contents .cts-top {
        height: 0;
        padding: 0 0 46.566%;
    }
    .lay-mobile #stage .cts-body {
        padding-bottom: 9.5%;
    }
    .lay-mobile #contents .cts-body .inner {
        padding: 0;
    }
}
@media (hover:hover) {
    .li-megumi-plant_label a,
    .li-megumi0 a {
        transition: opacity 200ms;
    }
    .li-megumi-plant_label a:hover,
    .li-megumi0 a:hover {
        opacity: .6;
    }
}