@charset "UTF-8";



/*---------------------------------------------------------
 page-common
---------------------------------------------------------*/


/* page-common - col
-----------------------------------------------*/
/* col2 */
.p-col2 {
    margin-inline: auto;
    margin-top: var(--gap-60);
}
.p-col2__img {
    position: relative;
    max-width: max-content;
    margin: 0 auto 4%;
}
.p-col2__img-abs {
    position: absolute;
    width: 38%;
    max-width: max-content;
    right: 21%;
    top: -5.5%;
    translate: 50% 0;
}
.p-col2__txt {
    text-align: left;
    max-width: 540px;
    margin-inline: auto;
}
.p-col2 .u-ft-min {
    position: relative;
    line-height: 1.4;
    padding-left: .7em;
    margin-bottom: .4em;
}
.p-col2 .u-ft-min::before {
	content: "";
	position: absolute;
	width: 1px;
	height: 1.0em;
	background: currentcolor;
	left: 0;
	top: .2em;
}
/* bg */
.p-col-bg {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 2em 3%;
}
.p-col-bg > li {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0;
    text-align: center;
}
.p-col-bg__img {
    position: relative;
    width: 70%;
    max-width: max-content;
    margin: 0 auto;
    z-index: 1;
}
.p-col-bg__txt {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em 1% 2em;
}
.p-col-bg__txt::before {
    position: absolute;
    content: "";
    background-color: rgb(38 146 158 / 0.7);
    width: 100%;
    height: 180%;
    border: 1px solid #FFF;
    inset: auto 0 0 0;
}
.p-col-bg__txt .u-ft-min {
    position: relative;
    font-size: var(--fs-24);
    line-height: 1.4;
}
.p-col-bg__txt small {
    position: relative;
    display: block;
    font-size: 100%;
    line-height: 1.4;
    letter-spacing: .04em;
    margin-top: .4em;
}

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.p-col2,
.p-col-bg,
.p-col-img {
    max-width: 1200px;
    margin-inline: auto;
}
/* col2 */
.p-col2 {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(2,min(48%,533px));
    gap: var(--gap-60) 2.6%;
}
/* bg */
.p-col-bg__txt .u-ft-min {
    font-size: min(2.4rem,1.8vw);
}
/* img */
.p-col-img {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

/* col2 */
.p-col2 > li:nth-of-type(n+2) {
    margin-top: var(--gap-80);
}
.p-col2__img {
    width: 80%;
}
/* bg */
.p-col-bg {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.4em 2.5%;
}
.p-col-bg__txt {
    padding: .8em 1% 1.5em;
}
.p-col-bg__txt small {
    font-size: 90%;
}
/* img */
.p-col-img {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
}


/*---------------------------------------------------------
 Lead
---------------------------------------------------------*/
.lead {
    position: relative;
    background: linear-gradient(to top, #f8f9f8, #FFF 400px);
}
.p-lead__inner {
    position: relative;
}
.lead__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: max-content;
    max-height: max-content;
    inset: 0 auto auto 0;
    overflow: hidden;
}
.lead__bg > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lead__img {
    width: 44%;
    max-width: max-content;
    margin: 1.5em auto;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.lead__img {
    width: 90%;
}
}


/*---------------------------------------------------------
 Feature
---------------------------------------------------------*/
.feature {
	counter-reset: feaCounter;
}
.feature__item {
    position: relative;
    height: 100%;
    color: #FFF;
    background-color: var(--bg-color);
    padding: var(--gap-80) 6%;
}
.feature__bg {
    position: absolute;
    width: 100%;
    /* height: 100%; */
    max-height: 100%;
    inset: 0 0 auto auto;
    aspect-ratio: 1536/816;
    overflow: hidden;
}
.feature__bg.pos-rb {
    inset: auto 0 0 auto;
}
.feature__bg > img {
    width: 100%;
    height: 100%;
    height: auto;
    object-fit: cover;
}

.feature__inner {
    position: relative;
    max-width: 1276px;
    margin-inline: auto;
}
.feature__lead {
    max-width: 1200px;
    text-align: left;
    margin: 0 auto var(--gap-40);
}
.feature__lead .u-ft-min {
    margin-bottom: .4em;
}
.feature__box {
    background-color: var(--box-color);
    box-sizing: border-box;
    padding: var(--gap-40) 4.5%;
}
.feature__box .c-list-check {
    max-width: max-content;
    max-width: 500px;
    margin-inline: auto;
}
.feature__box .c-list-check > li::before {
    border-color: rgb(255 255 255 / 0.4);
}
.feature__box .c-list-check.--col2 {
	gap: 1.0em 2%;
}
.feature__item .u-ta-c {
    margin-top: 2.5em;
}

#standard {
    --bg-color: #6fa9c3;
}
#safety {
    --bg-color: #d8b473;
}
#hygiene {
    --bg-color: #6fcac3;
}
#hygiene .feature__bg {
    top: 160px;
}
#grade {
    --bg-color: #86be81;
    --box-color: rgb(66 119 63 / 0.3);
}
#disposable {
    --bg-color: #86a0be;
    --box-color: rgb(56 99 148 / 0.3);
}
#visual {
    --bg-color: #d5a59f;
    --box-color: rgb(176 85 74 / 0.3);
}
#quality {
    --bg-color: #ada06f;
    --box-color: rgb(125 105 27 / 0.3);
}

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.feature {
    display: flex;
    flex-wrap: wrap;
}
.feature > * {
    width: 100%;
}
.feature__half {
    width: 50%;
}
.feature__half .feature__inner {
    max-width: 600px;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.feature__item {
    padding: var(--gap-80) 5%;
}
.feature__item .u-ta-c {
    margin-top: 1.5em;
}

#hygiene .feature__bg {
    top: 25vw;
}
}


/* Feature - title
-----------------------------------------------*/
.feature-ttl {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    white-space: nowrap;
    margin-bottom: 1.5em;
}

.feature-ttl__en {
    display: flex;
    align-items: center;
    gap: 1.5em;
    font: var(--font-en);
    font-size: var(--fs-24);
    margin-bottom: 1em;
}
.feature-ttl__en p {
    font-style: italic;
}
.feature-ttl__no {
	counter-increment: feaCounter;
    font-style: italic;
    font-size: 130%;
    letter-spacing: .14em;
}
.feature-ttl__no::after {
	content: counter(feaCounter, decimal-leading-zero);
    font-size: 172%;
    vertical-align: -0.3em;
}

.feature-ttl__jp {
    text-align: center;
    font: var(--font-min);
    font-size: var(--fs-40);
    line-height: 1.3;
}
.feature-ttl__jp span {
    display: inline-block;
}
.feature-ttl__jp .brc {
    position: relative;
    font-size: 190%;
    line-height: 1.1;
    padding: .1em .8em .1em .7em;
}
.feature-ttl__jp .brc::before,
.feature-ttl__jp .brc::after {
    position: absolute;
    display: block;
    content: "『";
    font-size: 76%;
    inset: 0 auto auto -0.4em;
}
.feature-ttl__jp .brc::after {
    content: "』";
    inset: auto -0.3em 0 auto;
}
.feature-ttl__jp .brc > span {
    font-size: 77%;
}
.feature-ttl__jp .brc .dot {
    display: block;
    font-size: 81%;
    line-height: 0.4;
}
.feature-ttl__jp > small {
    display: block;
    font-size: 80%;
    margin-left: .5em;
    margin-top: .5em;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.feature__half .feature-ttl__jp {
    font-size: min(4.0rem,2.8vw);
}
.feature-ttl__jp > small {
    font-size: 60%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.feature-ttl__en {
    font-size: 4.5vw;
}
.feature-ttl__no {
    font-size: 120%;
}
}


/*---------------------------------------------------------
 Numbers
---------------------------------------------------------*/
.numbers__point {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--gap-40);
}
.numbers__point > li {
    width: 33%;
    border-right: 1px solid #ecebe7;
}
.numbers__point > li:last-child {
    border-right: none;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.numbers__point > li:nth-child(3n) {
    border-right: none;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.numbers__point > li {
    width: 50%;
}
.numbers__point > li:nth-child(even) {
    border-right: none;
}
}



/*---------------------------------------------------------
 Policy
---------------------------------------------------------*/
.policy {
    text-align: center;
}
.policy__inner {
    position: relative;
    padding: var(--gap-150) 0;
}
.policy__bg {
    position: absolute;
    width: 100%;
    height: calc(100% + var(--gap-120));
    opacity: 0.15;
    inset: 0 0 auto 0;
}
.policy__bg > img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 85%, transparent);
	mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 85%, transparent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: auto;
    mask-size: auto;
}
.policy__heading {
    text-align: center;
    margin-bottom: 2em;
}
.policy__lead {
    text-align: center;
}
.policy__lead .u-fs-40 {
    margin-bottom: .5em;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {


}



/*---------------------------------------------------------
 
---------------------------------------------------------*/

/*  - 
-----------------------------------------------*/

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {


}