@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
  }
  @keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
  }

/* ========================================
  @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px), print {

/* fv
-------------------------------------*/
.p-fv {
    background: url(../images/reform/fv_bg.jpg) no-repeat top center/cover;
    display: grid;
    grid-template-rows: 1fr auto;
    margin-inline: auto;
    max-width: 1920px;
    width: 100%;
}
.p-fv .l-inner.l-fv {
    padding-block: 221px 109px;
}
.p-fv .p-fv__copy {
    position: relative;
    left: 13px;
    width: min(95%,1125px);
    margin-inline: auto;
}
.p-fv .p-fv__ttl {
    margin-bottom: 20px;
}
.p-fv .p-fv__ttl span {
    color: #ffffff;
    font-size: 66px;
    font-size: clamp(2.5rem, 1.417rem + 2.26vw, 4.125rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.81818;
    margin-bottom: 0px;
    white-space: nowrap;
}
.p-fv .p-fv__txt {
    color: #ffffff;
    font-size: 22px;
    font-size: clamp(1.125rem, 0.958rem + 0.35vw, 1.375rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 2.0909090909;
    min-width: 0;
    text-align: left;
    width: 100%;
}

.p-fv .p-fv__loop {
    overflow: hidden;
    position: relative;
    width: 100%;
}
.p-fv .p-fv__loop-box {
    display: flex;
    width: 100vw;
}
.p-fv .p-fv__loop-box img {
    box-sizing: content-box;
    min-width: 151.6vw;
    height: auto;
    padding-right: 40px;
}
.p-fv .p-fv__loop-box img:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
}
.p-fv .p-fv__loop-box img:last-child {
    -webkit-animation: loop2 50s linear infinite;
    animation: loop2 50s linear infinite;
}

/* about
-------------------------------------*/
.p-about {
    background: #302C17;
    position: relative;
    z-index: 2;
}
.p-about .l-inner.l-about {
    padding-block: 136px 210px;
}
.p-about .p-about__en {
    color: #ffffff;
    font-size: clamp(13.438rem, 9.521rem + 8.16vw, 19.313rem);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: -199px;
    opacity: 0.12;
    text-align: center;
}
.p-about .p-about__ttl {
    color: #ffffff;
    font-size: clamp(3.438rem, 3.063rem + 0.78vw, 4rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.5;
    margin-bottom: 178px;
    position: relative;
    text-align: center;
    z-index: 1;
    margin-left: 34px;
}
.p-about .p-about__items {
    display: grid;
    gap: 31px 40px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: auto;
    width: min(95%, 1100px);
    margin-bottom: 111px;
}
.p-about .p-about__item {
    position: relative;
}
.p-about .p-about__media {
    margin-bottom: 4px;
}
.p-about .p-about__media img {
    height: auto;
    width: 100%;
}
.p-about .p-about__name {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 2.1428;
    text-align: left;
}
.p-about .p-about__partner {
    background: #ffffff;
    margin-inline: auto;
    padding-block: 40px 35px;
    position: absolute;
    text-align: center;
    width: min(95%, 820px);
    z-index: 3;
    /* bottom: 0; */
    left: 50%;
    transform: translateX(-50%);
}
.p-about .p-about__partner-logo {
    margin-bottom: 51px;
    margin-inline: auto;
    width: min(95%,505px);
}
.p-about .p-about__partner-logo img {
    height: auto;
    width: 100%;
}
.p-about .p-about__partner-ttl {
    font-weight: bold;
    font-size: 28px;
    letter-spacing: 0.05em;
    line-height: 1.35714;
    text-align: center;
    margin-bottom: 27px;
}
.p-about .p-about__partner-txt {
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 1.9;
    text-align: center;
}


/* quality
-------------------------------------*/
.p-quality {
    background: #1B190C;
    position: relative;
    z-index: 1;
}
.p-quality .l-inner.l-quality {
    padding-block: 282px 160px;
}
.p-quality .p-quality__ttl {
    color: #ffffff;
    font-size: 50px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.6;
    margin-bottom: 75px;
    text-align: center;
    margin-left: 24px;
}
.p-quality .p-quality__ttl span {
    color: #bca32b;
    padding-inline: 4px;
}
.p-quality .p-quality__row {
    align-items: center;
    display: grid;
    gap: 0 40px;
    grid-template-columns: 50% 46.3636%;
    margin-bottom: 80px;
    margin-inline: auto;
    width: min(95%, 1100px);
}
.p-quality .p-quality__row:last-child {
    margin-bottom: 0;
}
.p-quality .p-quality__name {
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin-bottom: 36px;
    text-align: left;
}
.p-quality .p-quality__txt {
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.9;
    text-align: left;
}
.p-quality .p-quality__media img {
    height: auto;
    width: 100%;
}


/* pet
-------------------------------------*/
.p-pet {
    background: url(../images/reform/pet_bg.jpg) no-repeat center / cover;
    position: relative;
}
.p-pet .l-inner.l-pet {
    padding-block: 115px 130px;
}
.p-pet .p-pet__ttl {
    color: #ffffff;
    font-size: 64px;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.56;
    margin-bottom: 52px;
    text-align: center;
    margin-left: 32px;
    text-indent: -34px;
}
.p-pet .p-pet__ttl span {
    color: #bca32b;
    padding-inline: 4px;
}
.p-pet .p-pet__lead {
    align-items: center;
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 38px;
}
.p-pet .p-pet__lead-txt {
    font-weight: bold;
    font-size: 32px;
    letter-spacing: 0.05em;
    line-height: 1.5625;
    text-align: center;
    color: #fff;    
    position: relative;
}
.p-pet .p-pet__lead-txt::after {
    position: absolute;
    content: "";
    background: url(../images/reform/pet_icon.png)no-repeat;
    background-size: contain;
    width: 153px;
    height: 88px;
    top: 46%;
    transform: translateY(-50%);
    right: -148px;
}
.p-pet .p-pet__row {
    align-items: center;
    display: grid;
    gap: 0 40px;
    grid-template-columns: 46.3636% 50%;
    margin-inline: auto;
    width: min(95%, 1100px);
}
.p-pet .p-pet__txt {
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.9;
    text-align: left;
}
.p-pet .p-pet__txt:not(:last-child) {
    margin-bottom: 37px;
}
.p-pet .p-pet__media img {
    height: auto;
    width: 100%;
}


/* links
-------------------------------------*/
.p-links .p-links__items {
    display: grid;
    gap: 0 40px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: auto;
    width: min(95%, 1100px);
}
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1100px) {
======================================== */
@media screen and (min-width: 768px) and (max-width: 1100px) {

/* pet
-------------------------------------*/
.p-pet .l-inner.l-pet {
    padding-block: 10.455vw 11.818vw;
}
.p-pet .p-pet__ttl {
    font-size: 5.818vw;
    margin-bottom: 4.727vw;
    margin-left: 2.909vw;
    text-indent: -3.091vw;
}
.p-pet .p-pet__ttl span {
    padding-inline: 0.364vw;
}
.p-pet .p-pet__lead {
    gap: 0.545vw;
    margin-bottom: 3.455vw;
}
.p-pet .p-pet__lead-txt {
    font-size: 2.909vw;
}
.p-pet .p-pet__lead-txt::after {
    height: 8vw;
    right: -13.455vw;
    width: 13.909vw;
}
.p-pet .p-pet__row {
    gap: 0 3.636vw;
    width: min(95%, 100vw);
}
.p-pet .p-pet__txt {
    font-size: 1.818vw;
}
.p-pet .p-pet__txt:not(:last-child) {
    margin-bottom: 3.364vw;
}

/* links
-------------------------------------*/
.p-links .p-links__items {
    gap: 0 3.636vw;
}
.p-links .p-links__item {
    min-width: 0;
}
.p-links .p-links__item .top .en img {
    height: auto;
    max-width: 100%;
    width: auto;
}
.p-links .p-links__item .top .txt {
    font-size: 1.636vw;
    max-width: 100%;
    padding: 0 1.273vw;
}
.p-links .p-links__item .top .en {
    max-width: 90%;
}
.p-links .p-links__item .wrap .left h3 {
    font-size: 2.364vw;
}
.p-links .p-links__item .bottom-txt {
    font-size: 1.636vw;
    padding-block: 0 1.091vw;
}

}

/* ========================================
  @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* fv
-------------------------------------*/
.p-fv {
    background: url(../images/reform/fv_bg_sp.jpg) no-repeat top center/cover;
    display: grid;
    grid-template-rows: 1fr auto;
    margin-inline: auto;
    max-width: 100vw;
    width: 100%;
    margin: -7.4vw auto 0 auto;
}
.p-fv .l-inner.l-fv {
    width: min(95%, 87.92vw);
    margin-inline: auto;
    padding-block: 50.4vw 0;
    margin-bottom: -5vw;
}
.p-fv .p-fv__copy {
    margin-inline: auto;
    position: relative;
}
.p-fv .p-fv__ttl {
    margin-bottom: 6.97vw;
}
.p-fv .p-fv__ttl span {
    color: #ffffff;
    font-size:7.729vw;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.6;
    margin-bottom: 0px;
    white-space: nowrap;
    display: block;
}
.p-fv .p-fv__ttl span.span01 {
    text-indent: 4.5vw;
    margin-left: -4.5vw;
<<<<<<< HEAD
    margin-bottom: 1vw;
=======
    margin-bottom: 0.5vw;
>>>>>>> yui
}
.p-fv .p-fv__ttl span.span02 {
    margin: -1.5vw 0 0 0.5vw;
}
.p-fv .p-fv__txt {
    color: #ffffff;
    font-size:5.314vw;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 2;
    min-width: 0;
    text-align: left;
    width: 100%;
}

.p-fv .p-fv__loop {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-bottom: -0.5vw;
}
.p-fv .p-fv__loop-box {
    display: flex;
    width: 100vw;
}
.p-fv .p-fv__loop-box img {
    box-sizing: content-box;
    min-width: 338.6vw;
    height: auto;
    padding-right: 9.66vw;
}
.p-fv .p-fv__loop-box img:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
}
.p-fv .p-fv__loop-box img:last-child {
    -webkit-animation: loop2 50s linear infinite;
    animation: loop2 50s linear infinite;
}

/* about
-------------------------------------*/
.p-about {
    background: #302C17;
    position: relative;
    z-index: 2;
}
.p-about .l-inner.l-about {
    padding-block: 16.164vw 41.727vw;
}
.p-about .p-about__en {
    color: #ffffff;
    font-size: 28.26vw;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: -18.6vw;
    opacity: 0.12;
    text-align: center;
}
.p-about .p-about__ttl {
    color: #ffffff;
    font-size:7.729vw;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.5;
    margin-bottom: 9.12vw;
    position: relative;
    text-align: center;
    z-index: 1;
    margin-left: 3.75vw;
    text-indent: -3.5vw;
}
.p-about .p-about__items {
    display: grid;
    gap: 6.45vw 3.86vw;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: auto;
    width: min(95%, 91.79vw);
    margin-bottom: 11.58vw;
}
.p-about .p-about__item {
    position: relative;
}
.p-about .p-about__media {
    margin-bottom: 2.42vw;
}
.p-about .p-about__media img {
    height: auto;
    width: 100%;
}
.p-about .p-about__name {
    color: #ffffff;
    font-size:4.831vw;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: left;
}
.p-about .p-about__partner {
    background: #ffffff;
    margin-inline: auto;
    padding-block: 12.08vw 8.66vw;
    position: absolute;
    text-align: center;
    width: min(95%, 91.79vw);
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
}
.p-about .p-about__partner-logo {
    margin-bottom: 9.66vw;
    margin-inline: auto;
    width: min(95%,75.60vw);
}
.p-about .p-about__partner-logo img {
    height: auto;
    width: 100%;
}
.p-about .p-about__partner-ttl {
    font-weight: bold;
    font-size:6.28vw;
    letter-spacing: 0.05em;
    line-height: 1.46153;
    text-align: left;
    margin-bottom: 5.04vw;
    width: 82.13vw;
    margin-inline: auto;
}
.p-about .p-about__partner-txt {
    font-size:4.831vw;
    letter-spacing: 0.05em;
    line-height: 1.9;
    width: 82.13vw;
    margin-inline: auto;
    text-align: left;
}


/* quality
-------------------------------------*/
.p-quality {
    background: #1B190C;
    position: relative;
    z-index: 1;
}
.p-quality .l-inner.l-quality {
    padding-block: 93.98vw 13.14vw;
}
.p-quality .p-quality__ttl {
    color: #ffffff;
    font-size:6.763vw;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.46428;
    margin-bottom: 8.66vw;
    text-align: center;
    text-indent: 3.5vw;
}
.p-quality .p-quality__ttl span {
    color: #bca32b;
    padding-inline: 0.231vw;
}
.p-quality .p-quality__row {
    align-items: center;
    display: grid;
    gap: 10.63vw 0;
    margin-bottom: 10.98vw;
    margin-inline: auto;
    width: min(95%, 91.79vw);
}
.p-quality .p-quality__row:last-child {
    margin-bottom: 0;
}
.p-quality .p-quality__name {
    color: #ffffff;
    font-size:6.763vw;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.57142;
    margin-bottom: 6.25vw;
    text-align: left;
}
.p-quality .p-quality__txt {
    color: #ffffff;
    font-size:4.348vw;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.77777;
    text-align: left;
}
.p-quality .p-quality__media img {
    height: auto;
    width: 100%;
}


/* pet
-------------------------------------*/
.p-pet {
    background: url(../images/reform/pet_bg_sp.jpg) no-repeat center / cover;
    position: relative;
}
.p-pet .l-inner.l-pet {
    padding-block: 14.38vw 13.69vw;
}
.p-pet .p-pet__ttl {
    color: #ffffff;
    font-size:6.763vw;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.46428;
    margin-bottom: 6.25vw;
    text-align: center;
}
.p-pet .p-pet__ttl span {
    color: #bca32b;
    padding-inline: 0.531vw;
}
.p-pet .p-pet__lead {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 8.66vw;
}
.p-pet .p-pet__lead-txt {
    font-weight: bold;
    font-size:4.831vw;
    letter-spacing: 0.05em;
    line-height: 1.7;
    text-align: center;
    color: #fff;
    position: relative;
    margin-left: 3.5vw;
}
.p-pet .p-pet__lead-txt::before {
    position: absolute;
    content: "";
    background: url(../images/reform/pet_icon.png)no-repeat;
    background-size: contain;
    width: 23.19vw;
    height: 13.29vw;
    top: -22vw;
    right: -0.27vw;
}
.p-pet .p-pet__row {
    align-items: center;
    display: grid;
    gap: 7.25vw 0;
    margin-inline: auto;
    width: min(95%, 91.79vw);
}
.p-pet .p-pet__body {
    order: 2;
}
.p-pet .p-pet__txt {
    color: #ffffff;
    font-size:4.348vw;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.7777;
    text-align: left;
}
.p-pet .p-pet__txt:not(:last-child) {
    margin-bottom: 7.59vw;
}
.p-pet .p-pet__media {
    order: 1;
}
.p-pet .p-pet__media img {
    height: auto;
    width: 100%;
}

/* links
-------------------------------------*/
.p-links .p-links__item:last-child .top {
    padding-block: 23.014vw 21.014vw;
}


}