@charset "utf-8";

/*
 * style.css
 *
 *  version --- 1.0
 *  updated --- 2017/11/30
 */

/* !HTML5 elements
---------------------------------------------------------- */
header, 
footer, 
nav, 
section, 
aside, 
article {
    display: block;
}

/* !Reseting
---------------------------------------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
  scroll-behavior: smooth!important;
}
html{
	overflow-y: scroll;
}
fieldset {
  border: none;
}

ul,
ol,
li {
	list-style: none;
}

img {
	max-width: 100%;
    height: auto;
	vertical-align: top;
}

table {
	border-collapse: collapse;
}

button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}

select::-ms-expand {
	display: none;
}

select,
input[type=text],
input[type=password],
input[type=email],
input[type=tel],
input[type=number],
input[type=reset],
input[type=button],
input[type=submit],
textarea {
	appearance: none;
	border-radius: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
    color: #313131;
}

input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear{
	display: none;
}

input[type=reset],
input[type=button],
input[type=submit]  {
	font-family: 'Zen Kaku Gothic New', sans-serif;
	cursor: pointer;
}

input[type=text],
input[type=password],
input[type=email],
input[type=tel],
input[type=number],
textarea {
    width: 100%;
    border: .05rem solid #ADADAD;
    border-radius: .5rem;
    height: 4.6rem;
    padding: 0 2rem;
    font-size: 1.4rem;
    font-weight: 500;
    outline: none;
}

textarea {
    height: 25.6rem;
    padding: 1rem 2rem;
}

label {
    cursor: pointer;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {

    textarea {
        height: 20.5rem;
    }
}

*,
*:before,
*::after {
	box-sizing: border-box;
}
/* !Clearfix
---------------------------------------------------------- */
.clearfix {
    display: block;
    min-height: 1%;
}

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

* html .clearfix {
    height: 1%;
}

/* !Layout
---------------------------------------------------------- */
html {
    overflow-y: scroll;
    font-size: 62.5%;
}

/*** タブレット 768x ~ 1300px***/
@media screen and (min-width: 768px) and (max-width: 1300px) {
    html {
        font-size: 0.714vw;
    }
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    html {
        font-size: 62.5%;
    }
}

body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 1.6rem;
    -webkit-text-size-adjust: none;
    line-height: 1.5;
    font-weight: normal;
    color: #313131;
}

@media screen and (max-width: 767px) {
	body {
		font-size: 1.4rem;
	}
}

/* !Base Fonts -------------------------------------------------------------- */
a {
    color: #313131;
    text-decoration: none;
    transition: all 0.5s;
}

a:hover {
    text-decoration: underline;
    transition: all 0.5s;
}

.op img, .op input , .op button {
    transition: opacity 0.5s ease-out;
}

.op:hover img, .op:hover input , .op:hover button {
    opacity: .7;
    transition: opacity 0.5s ease-out;
}

a[href^="tel:"] {
    cursor: default;
    pointer-events:none;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {

	a:hover {
	    text-decoration: none;
	}

    a[href^="tel:"] {
        cursor: pointer;
        pointer-events: inherit;
    }
}

.is-hide {
	display: none;
}

.is-pc {
    display: block;
}

.is-sp {
    display: none;
}

@media screen and (max-width: 767px) {
    .is-pc {
        display: none;
    }

    .is-sp {
        display: block;
    }

}

.en-font {
    font-family: 'Figtree', sans-serif;
}

.roboto {
    font-family: 'Roboto', sans-serif;
}

body {
    visibility: visible;
    opacity: 1;
    transition: opacity .6s ease;
}

.is-loading {
    visibility: hidden;
    opacity: 0;
    transition: opacity .6s ease;
}

/* !button
---------------------------------------------------------- */
.btn-link {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: .05em;
    line-height: 1.5;
    color: #313131;
    min-width: 22rem;
    height: 6.4rem;
    border-radius: 3.2rem;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 2.4rem;
    background: #fff;
}

.btn-link:after {
    width: 2.89rem;
    height: 2.89rem;
    background: url("../img/common/icon_link_right_purple.svg") center center no-repeat;
    background-size: cover;
    display: block;
    content: '';
    margin-left: 2rem;
    transition: .5s ease;
}

.btn-link:hover {
    color: #fff;
    background: #82349D;
    text-decoration: none;
}

.btn-link:hover:after {
    background-image: url("../img/common/icon_link_right_hover.svg");
    transition: .5s ease;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    .btn-link {
        font-size: 1.4rem;
        letter-spacing: 0;
        min-width: 15rem;
        height: 4.5rem;
        padding: 0 1.2rem;
    }

    .btn-link:after {
        width: 2rem;
        height: 2rem;
        margin-left: 1.4rem;
    }

    .btn-link:hover {
        color: #313131;
        background: #fff;
    }

    .btn-link:hover:after {
        background-image: url(../img/common/icon_link_right_purple.svg);
    }
}


/* !heading
---------------------------------------------------------- */
.heading-large {
    font-size: 4rem;
    font-weight: bold;
    letter-spacing: .05em;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 5rem;
}

.heading-medium {
    font-size: 3rem;
    font-weight: bold;
    letter-spacing: .08em;
    line-height: 1.5;
    margin-bottom: 6.5rem;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    .heading-large {
        font-size: 2.2rem;
        letter-spacing: .05em;
        line-height: 1.45;
        margin-bottom: 3.2rem;
    }
    .heading-medium {
        font-size: 2.5rem;
        letter-spacing: .08em;
        font-weight: 500;
        margin-bottom: 4.4rem;
    }
}

/* !wrapper
---------------------------------------------------------- */
#wrapper {
    width: 100%;
}

/* !header
---------------------------------------------------------- */
#header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2.5rem 0 4.6rem;
    width: 100%;
    height: 9rem;
    transform: translateY(-100%);
}

#header.is-zindex {
    transition: z-index .3s cubic-bezier(.4,.4,0,1);
    z-index: 1;
}

.is-loaded #header {
    transition: .3s cubic-bezier(.4,.4,0,1);
    transform: translateY(0);
}

.header-logo {
    width: 25.7rem;
}

.header-links {
    display: flex;
    align-items: center;
}

.header-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-left: 1.8rem;
    width: 17.5rem;
    height: 5.4rem;
    border: .1rem solid #82349D;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .05em;
}

.header-links a:hover {
    text-decoration: none;
}

.header-links a .en {
    display: block;
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 1.5;
    letter-spacing: .15em;
}

.header-links .header-links__item01,
.header-links .header-links__item02:hover {
    color: #8B31AA;
    background-color: #fff;
}

.header-links .header-links__item02,
.header-links .header-links__item01:hover {
    color: #fff;
    background-color: #82349D;
}

.btn-menu {
    display: none;
}
@media screen and (min-width: 1800px) {
	#header {
        justify-content: space-around!important;
    }
}
/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    #header {
        padding: 0 1.5rem;
        height: 5.8rem;
    }

    .header-logo {
        width: 14.7rem;
    }

    .header-links {
        display: block;
        margin-top: 4.2rem;
    }

    .header-links a {
        flex-direction: row;
        margin: 0;
        width: 100%;
    }

    .header-links a + a {
        margin-top: 1.5rem;
    }

    .header-links a .en {
        display: block;
        font-size: 1.4rem;
        font-weight: bold;
        letter-spacing: .05em;
        margin-left: .5em;
    }

    .header-links .header-links__item01:hover {
        color: #8B31AA;
        background-color: #fff;
    }

    .header-links .header-links__item02:hover {
        color: #fff;
        background-color: #82349D;
    }

    .btn-menu {
        display: block;
        width: 4.4rem;
        height: 5.8rem;
        position: relative;
        cursor: pointer;
    }

    .btn-menu span {
        position: absolute;
        width: 2.8rem;
        height: .2rem;
        background-color: #707070;
        left: .8rem;
        transform: .6s ease;
    }

    .btn-menu span:first-child {
        top: 2rem;
    }

    .btn-menu span:nth-child(2) {
        top: 50%;
        margin-top: -.1rem;
    }

    .btn-menu span:last-child {
        bottom: 2rem;
    }

    .btn-menu.is-active span:first-child {
        transform: translateY(.8rem) rotate(30deg);
    }

    .btn-menu.is-active span:nth-child(2) {
        opacity: 0;
    }

    .btn-menu.is-active span:last-child {
        transform: translateY(-.8rem) rotate(-30deg);
    }
}

/* !global navigation
---------------------------------------------------------- */
#g-navi {
    display: flex;
    align-items: center;
}

#g-navi > ul {
    display: flex;
    align-items: center;
}

#g-navi > ul > li {
    padding: 0 1.6rem;
}

#g-navi > ul > li > a {
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .05em;
    height: 9rem;
    position: relative;
}

#g-navi > ul > li > a:hover {
    text-decoration: none;
}

.home #g-navi > ul > li:nth-child(1) > a,
#vision #g-navi > ul > li:nth-child(2) > a,
#company #g-navi > ul > li:nth-child(3) > a,
#service01 #g-navi > ul > li:nth-child(4) > a,
#service02 #g-navi > ul > li:nth-child(4) > a,
#service03 #g-navi > ul > li:nth-child(4) > a,
#contact #g-navi > ul > li:nth-child(5) > a,
#g-navi > ul > li:hover > a {
    color: #8B31AA;
}

#g-navi > ul > li > a:before {
    position: absolute;
    width: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    content: '';
    height: .2rem;
    background-color: #8B31AA;
    transition: .5s ease;
}

.home #g-navi > ul > li:nth-child(1) > a:before,
#vision #g-navi > ul > li:nth-child(2) > a:before,
#company #g-navi > ul > li:nth-child(3) > a:before,
#service01 #g-navi > ul > li:nth-child(4) > a:before,
#service02 #g-navi > ul > li:nth-child(4) > a:before,
#service03 #g-navi > ul > li:nth-child(4) > a:before,
#contact #g-navi > ul > li:nth-child(5) > a:before,
#g-navi > ul > li:hover > a:before {
    width: 100%;
}

#g-navi .is-parents {
    pointer-events: none;
}

#g-navi .is-parents:after {
    display: block;
    width: 1.105rem;
    height: .547rem;
    background: url(../img/common/icon_arrow_down_black.svg) center center no-repeat;
    background-size: cover;
    margin-left: .8rem;
    content: '';
    transition: .5s ease;
}

#service01 #g-navi > ul > li:nth-child(4) .is-parents:after,
#service02 #g-navi > ul > li:nth-child(4) .is-parents:after,
#service03 #g-navi > ul > li:nth-child(4) .is-parents:after {
    background-image: url(../img/common/icon_arrow_down_purple.svg)
}

#g-navi > ul > li:hover .is-parents:after {
    transform: scaleY(-1);
    background-image: url(../img/common/icon_arrow_down_purple.svg)
}

#g-navi .icon-mail {
    padding-left: 3rem;
    background: url(../img/common/icon_mail_black.svg) left center no-repeat;
    background-size: 2.183rem auto;
}

#g-navi > ul > li:hover .icon-mail,
#contact #g-navi > ul > li .icon-mail {
    background-image: url(../img/common/icon_mail_purple.svg);
}

#g-navi .sub-menu {
    position: absolute;
    max-width: 120rem;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    z-index: 2;
    background-color: #F7F2FA;
    padding: 4.6rem 10rem 3.2rem;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity .6s ease;
}

#g-navi > ul > li:hover .sub-menu {
    pointer-events: inherit;
    visibility: visible;
    opacity: 1;
    transition: opacity .6s ease;
}

#g-navi .sub-menu ul {
    display: flex;
    margin-left: -3.6rem;
}

#g-navi .sub-menu ul li {
    width: 33.33%;
    padding-left: 3.6rem;
}

#g-navi .sub-menu a {
    display: block;
    width: 100%;
    background-color: #fff;
}

#g-navi .sub-menu a:hover {
    text-decoration: none;
}

#g-navi .sub-menu .sub-menu__thumb {
    display: block;
    width: 100%;
    position: relative;
    padding-top: 50.32%;
}

#g-navi .sub-menu .sub-menu__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#g-navi .sub-menu .sub-menu__box {
    background: url(../img/common/icon_link_right_gray.svg) right 2.3rem center no-repeat;
    background-size: 3.3rem;
    width: 100%;
    height: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 6rem 0 3rem;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: .05em;
    line-height: 1.5;
    transition: .5s ease;
}

#g-navi .sub-menu a:hover .sub-menu__box {
    background-image: url(../img/common/icon_link_right_purple.svg);
}

#g-navi .sub-menu .sub-menu__box .en {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    display: block;
    margin-bottom: .3rem;
    color: #B2B2B2;
}


/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    #g-navi {
        display: none;
        width: 100%;
        height: calc(100vh - 5.8rem);
        position: fixed;
        left: 0;
        top: 5.8rem;
        z-index: 10;
        background-color: #F7F2F8;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 2.5rem 1.5rem 4rem;
    }

    #g-navi > ul {
        display: block;
    }

    #g-navi > ul > li {
        padding: 0;
        border-bottom: .05rem solid #ACACAC;
    }

    #g-navi > ul > li > a {
        justify-content: space-between;
        font-weight: 500;
        letter-spacing: 0;
        height: auto;
        padding: 1.8rem 1.5rem;
    }

    #g-navi > ul > li > a:hover {
        text-decoration: none;
    }

    .home #g-navi > ul > li:nth-child(1) > a,
    #vision #g-navi > ul > li:nth-child(2) > a,
    #company #g-navi > ul > li:nth-child(3) > a,
    #service01 #g-navi > ul > li:nth-child(4) > a,
    #service02 #g-navi > ul > li:nth-child(4) > a,
    #service03 #g-navi > ul > li:nth-child(4) > a,
    #contact #g-navi > ul > li:nth-child(5) > a,
    #g-navi > ul > li:hover > a {
        color: #000000;
    }

    #g-navi > ul > li > a:before {
        display: none;
    }

    #g-navi .is-parents {
        pointer-events: inherit;
    }

    #g-navi .is-parents:after {
        width: 1.2rem;
        height: 1.2rem;
        background: url(../img/common/icon_toggle_open.svg) center center no-repeat;
        background-size: cover;
        margin-left: 0;
    }

    #g-navi .is-parents.is-active:after {
        background-image: url(../img/common/icon_toggle_close.svg) !important;
    }

    #service01 #g-navi > ul > li:nth-child(4) .is-parents:after,
    #service02 #g-navi > ul > li:nth-child(4) .is-parents:after,
    #service03 #g-navi > ul > li:nth-child(4) .is-parents:after {
        background-image: url(../img/common/icon_toggle_open.svg)
    }

    #g-navi > ul > li:hover .is-parents:after {
        transform: scaleY(1);
        background-image: url(../img/common/icon_toggle_open.svg)
    }

    #g-navi .icon-mail {
        padding-left: 5rem;
        background: url(../img/common/icon_mail_black.svg) left 1.5rem center no-repeat;
        background-size: 2.183rem auto;
    }

    #g-navi > ul > li:hover .icon-mail,
    #contact #g-navi > ul > li .icon-mail {
        background-image: url(../img/common/icon_mail_black.svg);
    }

    #g-navi .sub-menu {
        position: relative;
        max-width: 100%;
        left: 0;
        transform: translateX(0);
        top: 0;
        background: none;
        padding: 0 1.5rem 1.8rem;
        pointer-events: inherit;
        visibility: visible;
        opacity: 1;
        transition: unset;
        margin-top: -.5rem;
        display: none;
    }

    #g-navi > ul > li:hover .sub-menu {
        transition: unset;
    }

    #g-navi .sub-menu ul {
        display: block;
        margin-left: 0;
    }

    #g-navi .sub-menu ul li {
        width: 100%;
        padding-left: 0;
    }

    #g-navi .sub-menu a {
        background: none;
    }

    #g-navi .sub-menu .sub-menu__thumb {
        display: none;
    }

    #g-navi .sub-menu .sub-menu__box {
        background: none;
        height: auto;
        display: block;
        padding: 0;
        font-size: 1.3rem;
        font-weight: normal;
        letter-spacing: 0;
        line-height: 2.15;
        transition: unset;
        color: #676767;
    }

    #g-navi .sub-menu a:hover .sub-menu__box {
        background-image: none;
    }

    #g-navi .sub-menu .sub-menu__box .en {
        display: none;
    }
}

/* !breadcrumb
---------------------------------------------------------- */
#breadcrumb {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 3.5rem;
}

#breadcrumb::-webkit-scrollbar {
    display: none;
}

#breadcrumb ul {
    display: flex;
    flex-wrap: nowrap;
}

#breadcrumb ul li {
    word-break: keep-all;
    white-space: nowrap;
    position: relative;
    font-size: 1.1rem;
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.5;
    color: #313131;
    text-transform: uppercase;
}

#breadcrumb ul li a {
    color: #313131;
}

#breadcrumb ul li + li {
    padding-left: 4.5rem;
    margin-left: 1.8rem;
}

#breadcrumb ul li + li:before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: .05rem;
    background-color: #313131;
    z-index: 2;
    content: '';
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    #breadcrumb {
      margin-bottom: 1.8rem;
    }

    #breadcrumb ul li {
        font-size: .8rem;
        line-height: 1;
    }

    #breadcrumb ul li + li {
        padding-left: 2.6rem;
        margin-left: 1rem;
    }

    #breadcrumb ul li + li:before {
        width: 1.5rem;
    }
}

/* !SCROLL SNS
---------------------------------------------------------- */
.scroll-sns {
    position: fixed;
    left: 3rem;
    top: 35rem;
    z-index: 99;
    display: flex;
    align-items: center;
    transform: rotate(90deg);
    transform-origin: left bottom;
}

.scroll-sns a {
    width: 3.6rem;
    height: 3.6rem;
    display: block;
    line-height: 1;
    margin-right: 1.2rem;
    text-indent: -999rem;
    border: .03rem solid #313131;
    border-radius: 100%;
    transform: rotate(-90deg);
}

.scroll-sns a.icon-instagram {
    background: url(../img/common/icon_instagram_black.svg) center center no-repeat;
    background-size: 1.563rem auto;
}

.scroll-sns a.icon-facebook {
    background: url(../img/common/icon_facebook_black.svg) center center no-repeat;
    background-size: .801rem auto;
}

.scroll-sns a:hover {
    background-color: #313131;
}

.scroll-sns a.icon-instagram:hover {
    background-image: url(../img/common/icon_instagram_white.svg);
}

.scroll-sns a.icon-facebook:hover {
    background-image: url(../img/common/icon_facebook_white.svg);
}

.scroll-sns .scroll-line {
    display: flex;
    align-items: center;
    padding: 0 10rem 0 1.2rem;
    position: relative;
    font-size: 1rem;
    letter-spacing: .1em;
    line-height: 1.5;
    height: 3.6rem;
    font-weight: bold;
    font-family: 'Figtree', sans-serif;
}

.scroll-sns .scroll-line:after {
    position: absolute;
    content: '';
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 7rem;
    height: .1rem;
    background-color: #313131;
}


.is-home .scroll-sns a {
    border-color: #fff;
}

.is-home .scroll-sns a.icon-instagram {
    background-image: url(../img/common/icon_instagram_white.svg);
}

.is-home .scroll-sns a.icon-facebook {
    background-image: url(../img/common/icon_facebook_white.svg);
}

.is-home.scroll-sns a:hover {
    border-color: #313131;
}

.is-home .scroll-sns .scroll-line {
    color: #fff;
}

.is-home .scroll-sns .scroll-line:after {
    background-color: #fff;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    .scroll-sns {
        display: none;
    }
}

/* !main Visual
---------------------------------------------------------- */
#main-visual {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#main-visual .main-top {
    position: relative;
    padding-top: 9rem;
    width: 100%;
    height: 77rem;
    background: url(../img/top/bg_main_visual.png) center center no-repeat #6ECACA;
    background-size: auto 100%;
    z-index: 1;
    overflow: hidden;
}

#main-visual .main-top .main-top__pet {
    width: 69.8rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1;
    transform: translate(-42rem,10%);
    opacity: 0;
}

.is-loaded #main-visual .main-top .main-top__pet {
    transform: translate(-42rem,0);
    opacity: 1;
    transition: .3s cubic-bezier(.4,.4,0,1) .3s;
}

#main-visual .main-top .main-top__food {
    width: 50.1rem;
    position: absolute;
    left: 50%;
    transform: translate(12.3rem, 10%);
    bottom: 9.1rem;
    z-index: 2;
    opacity: 0;
}

.is-loaded #main-visual .main-top .main-top__food {
    transform: translate(12.3rem, 0);
    opacity: 1;
    transition: .3s cubic-bezier(.4,.4,0,1) .6s;
}

#main-visual .main-top__box {
    position: absolute;
    left: 50%;
    transform: translateX(-110%);
    width: 60rem;
    z-index: 3;
    bottom: 15.7rem;
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.375;
    color: #fff;
    opacity: 0;
}

.is-loaded #main-visual .main-top__box {
    transform: translateX(-100%);
    opacity: 1;
    transition: .3s cubic-bezier(.4,.4,0,1) .9s;
}

#main-visual .main-top__box p + p {
    margin-top: 3rem;
}


#main-visual .main-slider {
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
    width: 100%;
    z-index: 5;
    margin-top: -10.4rem;
    transform: translateY(10%);
    opacity: 0;
}

.is-loaded #main-visual .main-slider {
    transform: translateY(0);
    opacity: 1;
    transition: .3s cubic-bezier(.4,.4,0,1) .9s;
}

#main-visual .main-slider .swiper {
    padding: 0 0 1.7rem .6rem;
    /*width: 100rem;*/
	width: 111rem;
    margin: 0;
}

#main-visual .main-slider .main-slider__item {
    width: 34.1rem;
}

#main-visual .main-slider .shop-item {
    display: block;
    width: 100%;
    border-radius: 1rem;
    background: #fff;
    overflow: hidden;
    box-shadow: .4rem .7rem 1rem rgba(0, 0, 0, .13);
	scroll-behavior: smooth!important;
}

#main-visual .main-slider .shop-item .shop-item__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 10.4rem;
    background: url(../img/common/icon_arrow_right_pink.svg) right 2.5rem center no-repeat;
    background-size: 3.6rem;
    padding: 0 7rem 0 3rem;
    transition: .5s ease;
}

#main-visual .main-slider .shop-item:hover {
    text-decoration: none;
}

#main-visual .main-slider .shop-item:hover .shop-item__info {
    background-image: url(../img/common/icon_arrow_right_purple.svg);
    transition: .5s ease;
}

#main-visual .main-slider .shop-item .shop-item__name {
    font-size: 2.2rem;
    line-height: 1.45;
    font-weight: bold;
    letter-spacing: .08em;
    display: flex;
    align-items: center;
}

#main-visual .main-slider .shop-item .shop-item__name font {
    font-size: 1.8rem;
    line-height: 1.45;
    display: block;
}

#main-visual .main-slider .shop-item .shop-item__description {
    font-size: 1.3rem;
    line-height: 1.45;
    display: block;
    letter-spacing: .08em;
    color: #848484;
    font-weight: 500;
    margin-top: .5rem;
}

#main-visual .main-slider .shop-item figure {
    position: relative;
    width: 100%;
    padding-top: 92.375%;
    display: block;
}

#main-visual .main-slider .shop-item figure img {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    position: absolute;
    object-fit: cover;
}

#main-visual .main-slider .swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    width: 23%;
    padding-bottom: 1.7rem;
    margin-right: 2rem;
}

#main-visual .main-slider .swiper-pagination .swiper-pagination-bullet {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 100%;
    border: .1rem solid #D8D8D8;
    background: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    color: #B2B2B2;
    letter-spacing: .1em;
    font-family: 'Figtree', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: .6rem 0;
}

#main-visual .main-slider .swiper-pagination .swiper-pagination-bullet-active {
    background: #F7F2F8;
    color: #313131;
}
@media screen and (min-width: 1600px) {
	#main-visual .main-slider {
    justify-content: center;
}
}
/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 1300px) {
	#main-visual .main-slider .swiper-pagination{
		width: 19%;
	}
}
/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {

    #main-visual .main-top {
        padding-top: 15.467rem;
        height: 164.26vw;
        background: url(../img/top/bg_main_visual_sp.png) center center no-repeat;
        background-size: cover;
    }

    #main-visual .main-top .main-top__pet {
        width: 106.4vw;
        left:  4vw;
        transform: translate(0,10%);
    }

    #main-visual .main-top .main-top__pet img {
        width: 100%;
    }

    .is-loaded #main-visual .main-top .main-top__pet {
        transform: translate(0,0);
    }

    #main-visual .main-top .main-top__food {
        width: 47.5413vw;
        transform: translate(0, 10%);
        bottom: 20.53vw;
    }

    .is-loaded #main-visual .main-top .main-top__food {
        transform: translate(0, 0);
    }

    #main-visual .main-top__box {
        left: 0;
        transform: translateX(-10%);
        width: 50%;
        padding-left: 4vw;
        bottom: 22.93vw;
        font-size: 6.13vw;
        letter-spacing: -.03em;
        line-height: 1.6;
    }

    .is-loaded #main-visual .main-top__box {
        transform: translateX(0);
        opacity: 1;
        transition: .3s cubic-bezier(.4,.4,0,1) .9s;
    }

    #main-visual .main-top__box p + p {
        margin-top: 5.33vw;
    }


    #main-visual .main-slider {
        display: block;
        width: 100%;
        padding: 0;
        margin-top: -4.5rem;
    }

    #main-visual .main-slider .swiper {
        padding: 0;
        width: 100%;
    }

    #main-visual .main-slider .main-slider__item {
        width: 100%;
        padding: 0 2.7rem;
    }

    #main-visual .main-slider .shop-item {
        box-shadow: none;
        border: .05rem solid #A8A8A8;
    }

    #main-visual .main-slider .shop-item .shop-item__info {
        height: 9.7rem;
        background-size: 3.36rem;
        padding: 0 6.5rem 0 2.7rem;
    }

    #main-visual .main-slider .shop-item:hover .shop-item__info {
        background-image: url(../img/common/icon_arrow_right_pink.svg);
    }

    #main-visual .main-slider .shop-item .shop-item__name {
        font-size: 2.1rem;
    }

    #main-visual .main-slider .shop-item .shop-item__name font {
        font-size: 1.5rem;
    }

    #main-visual .main-slider .shop-item .shop-item__description {
        font-size: 1.2rem;
        margin-top: .7rem;
    }

    #main-visual .main-slider .swiper-pagination {
        flex-direction: row;
        width: 100%;
        padding-bottom: 0;
        margin: 2rem 0 0;
    }

    #main-visual .main-slider .swiper-pagination .swiper-pagination-bullet {
        margin: 0 .7rem;
    }
}

/* !teaser
---------------------------------------------------------- */
#teaser {
    background-color: #F7F2F9;
    width: 100%;
    padding: 18.6rem 0 4rem;
}

#teaser .teaser-inner {
    width: 100%;
    max-width: 104rem;
    padding: 0 2rem;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(10%);
}

.is-loaded #teaser .teaser-inner  {
    transform: translateY(0);
    opacity: 1;
    transition: .75s cubic-bezier(0.215, 0.61, 0.355, 1 ) .3s;
}

#teaser .teaser-inner h2 {
    font-size: 3.5rem;
    font-weight: bold;
    letter-spacing: .08em;
    line-height: 1.457;
}

#teaser .teaser-inner h2:first-letter {
    color: #82349D;
}

#teaser .teaser-inner h2 .en-font {
    display: block;
    font-size: 1.5rem;
    line-height: 2;
    letter-spacing: .1em;
    font-weight: 500;
    color: #B2B2B2;
    margin-top: .5rem;
    text-transform: uppercase;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    #teaser {
        padding: 10rem 0 2.6rem;
    }

    #teaser .teaser-inner {
        padding: 0 3.5rem;
    }

    #teaser .teaser-inner h2 {
        font-size: 2rem;
    }

    #teaser .teaser-inner h2 .en-font {
        font-size: 1.3rem;
        line-height: 1;
        margin-top: 1rem;
    }
}

/* !contents
---------------------------------------------------------- */
#contents {
    padding: 7.5rem 0 15rem;
    width: 100%;
}
.oem{
	padding-bottom: 0!important;
}

.inner {
    width: 100%;
    max-width: 140rem;
    padding: 0 10rem;
    margin: 0 auto;

}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    #contents {
        padding: 5rem 0 10rem;
    }

    .inner {
        padding: 0 2rem;

}
}

/* !page Top
---------------------------------------------------------- */
.page-top {
    width: 100%;
    height: 17.2rem;
    /*margin-bottom: .7rem;*/
    background: url(../img/common/img_footer_pet.png) center center no-repeat;
    background-size: auto 100%;
    position: relative;
}

.page-top a {
    display: block;
    line-height: 1;
    position: absolute;
    right: 50%;
    transform: translateX(25.6rem);
    top: 0;
    z-index: 2;
    width: 14.1rem;
}

@media screen and (max-width: 767px) {
    .page-top {
        height: 10.8rem;
        margin-bottom: 0;
    }

    .page-top a {
        width: 7.7rem;
        transform: translateX(15.1rem);
    }
}

/* !footer
---------------------------------------------------------- */
#footer {
    border-top: .4rem solid #9A4DB4;
	background-color: #FAFAFA;
}

#footer .footer-contact {
    border-bottom: .1rem solid #B4B4B4;
    width: 100%;
    padding: 5rem 0 3.5rem;
}

#footer .footer-contact .footer-contact__inner {
    width: 100%;
    max-width: 140rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#footer .footer-contact .footer-contact__item {
    width: 33.33%;
    height: 17rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2rem;
    letter-spacing: .05em;
    line-height: 1.667;
    text-align: center;
    padding: .8rem 0;
}

#footer .footer-contact .contact-site {
    border-left: .1rem solid #B4B4B4;
    border-right: .1rem solid #B4B4B4;
}

#footer .footer-contact .footer-contact__item h2 {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .05em;
}

#footer .contact-tel .contact-tel__phone {
    margin: 1.3rem 0 1.1rem;
}

#footer .contact-tel .contact-tel__phone a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.9rem;
    letter-spacing: .07em;
    color: #82349D;
    font-weight: 500;
    line-height: 1;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

#footer .contact-tel .contact-tel__phone a:before {
    display: block;
    width: 3.1rem;
    height: 3.1rem;
    background: url(../img/common/icon_feather_phone_call.svg) center center no-repeat;
    background-size: cover;
    content: '';
    margin-right: 1.4rem;
}

#footer .contact-site .contact-site__link {
    margin-top: 2.6rem;
}

#footer .contact-site .contact-site__link a {
    width: 31rem;
    height: 8rem;
    border-radius: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0;
    color: #fff;
    background: linear-gradient(to right, #82349D, #6C49B9);
}

#footer .contact-site .contact-site__link a:hover {
    border: .3rem solid #8B31AA;
    background: #fff;
    color: #313131;
    text-decoration: none;
}

#footer .contact-sns .contact-sns__link {
    margin: 2rem 0 1.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#footer .contact-sns .contact-sns__link a {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #82349D, #6C49B9);
}

#footer .contact-sns .contact-sns__link a + a{
    margin-left: 2rem;
}

#footer .contact-sns .contact-sns__link a:hover {
    opacity: .7;
    text-decoration: none;
}

#footer .footer-inner {
    width: 100%;
    max-width: 104rem;
    margin: 0 auto;
    padding: 8rem 2rem 0;
}

#footer .footer-box {
    display: flex;
    justify-content: space-between;
    padding-bottom: 4rem;
}

#footer .footer-box__info {
    width: 30rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    color: #A2A2A2;
}

#footer .footer-box__info .footer-logo {
    width: 25.7rem;
}

#footer .footer-box__info .footer-sitename {
    margin-top: 2.4rem;
}

#footer .footer-box__info .footer-address {
    margin-top: .7rem;
}

#footer .footer-box .footer-box__navi {
    width: 56rem;
    display: flex;
    justify-content: space-between;
}

#footer .footer-box .footer-box__navi > ul {
    width: 21.2rem;
}

#footer .footer-box .footer-box__navi > ul > li + li {
    margin-top: 2.4rem;
}

#footer .footer-box .footer-box__navi > ul > li > a {
    font-size: 1.6rem;
    letter-spacing: .05em;
    font-weight: 500;
    line-height: 1.5;
}

#footer .footer-box .footer-box__navi > ul > li > a:hover {
    text-decoration: none;
    color: #82349D;
}

#footer .footer-box .footer-box__navi .sub-menu {
    margin-top: 1.8rem;
}

#footer .footer-box .footer-box__navi .sub-menu li + li {
    margin-top: 1.6rem;
}

#footer .footer-box .footer-box__navi .sub-menu li a {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    color: rgba(49, 49, 49, .8);
}

#footer .footer-box .footer-box__navi .sub-menu li a:hover {
    text-decoration: none;
    color: rgba(130, 52, 157, .8);
}

#footer .footer-links {
    padding: 4.5rem 0;
}

#footer .footer-links h2 {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .05em;
    margin-bottom: 4rem;
    position: relative;
}

#footer .footer-links h2 span {
    display: inline-block;
    padding-right: 3rem;
    background-color: #FAFAFA;
    z-index: 2;
    position: relative;
}

#footer .footer-links h2:after {
    width: 100%;
    height: .1rem;
    background-color: #DDDDDD;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    content: '';
}

#footer .footer-links ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem;
}
#footer .footer-links ul li{
	background-color: white;
}
#footer .footer-links ul li a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 10rem;
    border: .1rem solid #B4B4B4;
    border-radius: 1rem;
    padding: 0 8rem 0 2rem;
    font-family: 'Figtree', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .07em;
    position: relative;
    background: url(../img/common/icon_link_right_white.svg) right 2rem center no-repeat;
    background-size: 5.6rem auto;
}

#footer .footer-links ul li a:hover {
    text-decoration: none;
    background-image: url(../img/common/icon_link_right_black.svg);
}


#footer .footer-links ul li a img {
    display: block;
    margin-right: 2.5rem;
}

#footer .footer-links .shop-name .jap {
    display: block;
    font-size: 1.2rem;
    line-height: 1;
    margin-top: .8rem;
    font-weight: normal;
}

#copyright {
    width: 100%;
    background-color: #82349D;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6.2rem;
    color: #fff;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    #footer .footer-contact {
        width: 100%;
        padding: .5rem 1.75rem 4.6rem;
    }

    #footer .footer-contact .footer-contact__inner {
        display: block;
    }

    #footer .footer-contact .footer-contact__item {
        width: 100%;
        height: auto;
        display: block;
        font-size: 1.4rem;
        line-height: 1.57;
        padding: 0;
    }

    #footer .footer-contact .contact-site {
        border: 0;
        border-top: .1rem solid #B4B4B4;
    }

    #footer .footer-contact .footer-contact__item h2 {
        font-size: 1.6rem;
    }

    #footer .footer-contact .footer-contact__item.contact-tel {
        padding: 4rem 0;
    }

    #footer .contact-tel .contact-tel__phone {
        margin: .8rem 0 1.8rem;
    }

    #footer .contact-tel .contact-tel__phone a {
        font-size: 3.5rem;
    }

    #footer .contact-tel .contact-tel__phone a:before {
        width: 2.9rem;
        height: 2.9rem;
        margin-right: .9rem;
    }

    #footer .footer-contact .footer-contact__item.contact-site {
        padding-top: 4rem;
    }

    #footer .contact-site .contact-site__link {
        margin-top: 2.5rem;
    }

    #footer .contact-site .contact-site__link a {
        width: 100%;
        font-size: 1.8rem;
    }

    #footer .contact-site .contact-site__link a:hover {
        color: #fff;
        background: linear-gradient(to right, #82349D, #6C49B9);
        border: 0;
    }

    #footer .footer-contact .footer-contact__item.contact-sns {
        padding-top: 2.5rem;
    }

    #footer .contact-sns h2,
    #footer .contact-sns p {
        display: none;
    }

    #footer .contact-sns .contact-sns__link {
        margin: 0;
        display: flex;
    }

    #footer .contact-sns .contact-sns__link a:hover {
        opacity: 1;
    }

    #footer .footer-inner {
        padding: 3.4rem 1.5rem 0;
    }

    #footer .footer-box {
        display: block;
        padding-bottom: 0;
    }

    #footer .footer-box__info {
        width: 100%;
        text-align: center;
        padding-bottom: 6rem;
    }

    #footer .footer-box__info .footer-logo {
        width: 23rem;
        margin: 0 auto;
    }

    #footer .footer-box__info .footer-sitename {
        margin-top: 1.3rem;
    }

    #footer .footer-box__info .footer-address {
        margin-top: .5rem;
    }

    #footer .footer-box .footer-box__navi {
        width: 100%;
        padding: 0 1.7rem;
    }

    #footer .footer-box .footer-box__navi > ul {
        width: auto;
    }

    #footer .footer-box .footer-box__navi > ul > li + li {
        margin-top: 2.2rem;
    }

    #footer .footer-box .footer-box__navi > ul > li > a {
        font-size: 1.4rem;
    }

    #footer .footer-box .footer-box__navi > ul > li > a:hover {
        color: #313131;
    }

    #footer .footer-box .footer-box__navi .sub-menu {
        margin-top: 1.2rem;
    }

    #footer .footer-box .footer-box__navi .sub-menu li + li {
        margin-top: 1.2rem;
    }

    #footer .footer-box .footer-box__navi .sub-menu li a {
        font-size: 1.4rem;
        line-height: 1.5;
    }

    #footer .footer-box .footer-box__navi .sub-menu li a:hover {
        color: rgba(49, 49, 49, .8);
    }

    #footer .footer-links {
        padding: 4rem 0 6rem;
    }

    #footer .footer-links h2 {
        font-size: 1.6rem;
        margin-bottom: 3rem;
    }

    #footer .footer-links h2 span {
        padding-right: 2rem;
    }

    #footer .footer-links ul {
        display: block;
    }

    #footer .footer-links ul li + li {
        margin-top: 1.6rem;
    }

    #footer .footer-links ul li a {
        padding: 0 8rem 0 14.3rem;
        font-size: 2.1rem;
        background: url(../img/common/icon_link_right_white.svg) right 3rem center no-repeat;
        background-size: 4.9rem auto;
        position: relative;
    }

    #footer .footer-links ul li a:hover {
        background-image: url(../img/common/icon_link_right_white.svg);
    }

    #footer .footer-links ul li a figure {
        position: absolute;
        width: 14.3rem;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    #footer .footer-links ul li a img {
        margin-right: 0;
    }

    #footer .footer-links .shop-name .jap {
        font-size: 1.5rem;
        margin-top: .4rem;
    }

    #copyright {
        font-size: 1.3rem;
    }
}



/* !wp-pagenavi
---------------------------------------------------------- */
.wp-pagenavi {
    margin-top: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wp-pagenavi a.page,
.wp-pagenavi span.current {
    background: none;
    border: 0;
    border-radius: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1;
    margin: 0 .6rem;
}

.wp-pagenavi span.current {
    color: #8B31AA;
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
    border: 0;
    border-radius: 100%;
    width: 2.5rem;
    height: 2.5rem;
    display: block;
    text-indent: -999rem;
}

.wp-pagenavi .previouspostslink {
    background: url(../img/common/icon_link_left_purple.svg) center center no-repeat;
    background-size: cover;
    margin-right: 1.4rem;
}

.wp-pagenavi .nextpostslink {
    background: url(../img/common/icon_link_right_purple.svg) center center no-repeat;
    background-size: cover;
    margin-left: 1.4rem;
}

.wp-pagenavi .previouspostslink:hover {
    background-image: url(../img/common/icon_link_left_gray.svg);
}

.wp-pagenavi .nextpostslink:hover  {
    background-image: url(../img/common/icon_link_right_gray.svg);
}

.wp-pagenavi .pages,
.wp-pagenavi .first,
.wp-pagenavi .last {
    display: none;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    .wp-pagenavi {
        margin-top: 4.5rem;
    }

    .wp-pagenavi a.page,
    .wp-pagenavi span.current {
        font-size: 1.6rem;
        margin: 0 .1rem;
    }

    .wp-pagenavi .previouspostslink,
    .wp-pagenavi .nextpostslink {
        border: 0;
        border-radius: 100%;
        width: 2.5rem;
        height: 2.5rem;
        display: block;
        text-indent: -999rem;
    }

    .wp-pagenavi .previouspostslink:hover {
        background-image: url(../img/common/icon_link_left_purple.svg);
    }

    .wp-pagenavi .nextpostslink:hover  {
        background-image: url(../img/common/icon_link_right_purple.svg);
    }
}




/* !お知らせ
---------------------------------------------------------- */
.news-area {
    padding-top: 2.5rem;
    max-width: 89.2rem;
    width: 100%;
    margin: 0 auto;
}

.news-categorys {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3.8rem;
}

.news-categorys li {
    position: relative;
}

.news-categorys li + li:before {
    position: absolute;
    content: '';
    left: -.1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: .2rem;
    height: 1.8rem;
    background-color: #E0E0E0;
}

.news-categorys li a {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
    color: #AFAFAF;
    padding: 0 6rem;
}

.news-categorys li a.is-active,
.news-categorys li a:hover {
    color: #313131;
    text-decoration: none;
}

.news-list {
    border-top: .2rem solid #CECECE;
}

.news-list .news-list__item {
    display: flex;
    align-items: center;
    border-bottom: .1rem solid #CECECE;
    padding: 3.4rem 4rem;
    background-color: #fff;
    transition: .6s ease;
}

.news-list .news-list__item:hover {
    background-color: #F7F7F7;
}

.news-list .news-list__item dt {
    width: 11rem;
    margin-right: 2.5rem;
}

.news-list .news-list__item dt a {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 70.9%;
    border-radius: 1rem;
    overflow: hidden;
}

.news-list .news-list__item dt a img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-list .news-list__item dd {
    width: calc(100% - 13.5rem);
}

.news-list .news-list__item .news-item__info {
    display: flex;
    align-items: center;
}

.news-date {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    line-height: 1.3;
    color: #B4B4B4;
    font-style: italic;
    margin-right: 1.6rem;
    letter-spacing: .06em;
}

.news-category {
    border: 0.05rem solid #C9C9C9;
    background-color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 2.3rem;
    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: 500;
    margin-right: 1.6rem;
    padding: 0 1.5rem;
    border-radius: 1.3rem;
}

.news-list .news-list__item .news-item__title {
    margin-top: .6rem;
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 500;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    .news-area {
        padding-top: .6rem;
        width: calc(100% + 4rem);
        margin: 0 -2rem;
    }

    .news-categorys {
        margin-bottom: 3rem;
    }

    .news-categorys li {
        flex: 1;
        text-align: center;
    }

    .news-categorys li + li:before {
        height: 1.4rem;
    }

    .news-categorys li a {
        font-size: 1.3rem;
        padding: 0;
    }

    .news-categorys li a:hover {
        color: #AFAFAF;
    }

    .news-list .news-list__item {
        padding: 3.5rem 1.5rem;
    }

    .news-list .news-list__item:hover {
        background-color: #fff;
    }

    .news-list .news-list__item dt {
        width: 8.8rem;
        margin-right: 1.7rem;
    }

    .news-list .news-list__item dt a {
        padding-top: 92.36%;
    }

    .news-list .news-list__item dd {
        width: calc(100% - 10.5rem);
    }

    .news-date {
        font-size: 1.2rem;
    }

    .news-category {
        height: 2.4rem;
        padding: 0 2rem;
        border-radius: 1.2rem;
    }

    .news-list .news-list__item .news-item__title {
        margin-top: .9rem;
        line-height: 1.7857;
        -webkit-line-clamp: 2;
    }
}


.news-detail {
    display: flex;
    justify-content: space-between;
    padding-top: 11.3rem;
    max-width: 104rem;
    margin: 0 auto;
}

.news-detail .news-detail__side {
    width: 26rem;
}

.news-detail .news-detail__side #teaser,
.news-detail .news-detail__side #teaser .teaser-inner {
    padding: 0;
    background: none;
}

.news-detail .news-detail__main {
    width: 74rem;
}

.news-head {
    margin-bottom: 5rem;
}

.news-head .news-head__info {
    display: flex;
    align-items: center;
}

.news-head h2 {
    margin-top: 1.3rem;
    font-size: 3rem;
    line-height: 1.5;
    font-weight: 500;
}


.news-body {
    font-size: 1.4rem;
    line-height: 2.5;
}

.news-body figure {
    display: block;
    width: 100%;
    margin-bottom: 5rem;
}

.news-body figure img {
    width: 100%;
}

.news-body p {
    margin-bottom: 2.5em;
}

.page-controller {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 6.5rem;
}

.page-controller .back {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30.6rem;
    height: 9.6rem;
    border-radius: 4.8rem;
    background-color: #F7F2F8;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .05em;
}

.page-controller .back:hover {
    background: #707070;
    color: #fff;
}

.page-controller .prev,
.page-controller .next {
    width: 2.4rem;
    height: 2.4rem;
    display: block;
    text-indent: -999rem;
}

.page-controller .prev {
    background: url(../img/common/icon_link_left_purple.svg) center center no-repeat;
    background-size: cover;
    margin-right: 2.6rem;
}

.page-controller .next {
    background: url(../img/common/icon_link_right_purple.svg) center center no-repeat;
    background-size: cover;
    margin-left: 2.6rem;
}

.page-controller .back:hover,
.page-controller .prev:hover,
.page-controller .next:hover {
    text-decoration: none;
}

.page-controller .prev:hover {
    background-image: url(../img/common/icon_link_left_gray.svg);
}

.page-controller .next:hover {
    background-image: url(../img/common/icon_link_right_gray.svg);
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    .news-detail {
        display: block;
        padding: 0;
    }

    .news-detail .news-detail__side {
        width: 100%;
    }

    .news-detail .news-detail__side #teaser {
        padding: 5rem 0 2.6rem;
    }
    .news-detail .news-detail__side #teaser .teaser-inner {
        padding: 0 1.5rem;
    }

    .news-detail .news-detail__main {
        width: 100%;
        padding-top: 2.4rem;
    }

    .news-head {
        margin-bottom: 3.6rem;
    }

    .news-head .news-head__info .news-category {
        padding: 0;
        height: auto;
        border: 0;
        border-radius: 0;
        font-weight: 500;
        font-size: 1.4rem;
        line-height: 1.5;
    }

    .news-head h2 {
        margin-top: .8rem;
        font-size: 1.8rem;
    }


    .news-body {
        line-height: 2;
    }

    .news-body figure {
        margin-bottom: 4rem;
    }

    .news-body p {
        margin-bottom: 2em;
    }

    .page-controller {
        margin-top: 4.5rem;
    }

    .page-controller .back {
        width: 17.6rem;
        height: 5.2rem;
        border-radius: 3.6rem;
        font-size: 1.4rem;
    }

    .page-controller .back:hover {
        background: #F7F2F8;
        color: #313131;
    }

    .page-controller .prev {
        margin-right: 2.4rem;
    }

    .page-controller .next {
        margin-left: 2.4rem;
    }

    .page-controller .prev:hover {
        background-image: url(../img/common/icon_link_left_purple.svg);
    }

    .page-controller .next:hover {
        background-image: url(../img/common/icon_link_right_purple.svg);
    }
}


/* !個人情報保護方針
---------------------------------------------------------- */
.policy-area {
    padding-top: 4.5rem;
    width: 100%;
    max-width: 88rem;
    margin: 0 auto;
    font-size: 1.4rem;
    line-height: 2.14;
}

.policy-list {
    margin-top: 6rem;
    border-top: .05rem solid #ADADAD;
}

.policy-list .policy-list__item {
    display: flex;
    padding: 3.5rem 0;
    border-bottom: .05rem solid #ADADAD;
}

.policy-list .policy-list__item dt {
    color: #82349D;
    font-weight: bold;
    letter-spacing: .03em;
    width: 20.5rem;
}

.policy-list .policy-list__item dd {
    width: calc(100% - 20.5rem);
}

.policy-copy {
    margin-top: 10.5rem;
    text-align: center;
    font-weight: 500;
    letter-spacing: .03em;
}

.guideTit{
	font-size: 3rem;
    margin-bottom: -3rem;
	margin-top: 7rem;
}
.guide-area{
	padding-top: 0!important;
}

.guide-area .redText{
	color: red;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    .policy-area {
        padding-top: 0;
        line-height: 1.7857;
    }

    .policy-list {
        margin-top: 3rem;
    }

    .policy-list .policy-list__item {
        padding: 3rem 0;
        display: block;
    }

    .policy-list .policy-list__item dt {
        font-size: 1.6rem;
        line-height: 1.5;
        width: 100%;
        margin-bottom: 2rem;
    }

    .policy-list .policy-list__item dd {
        width: 100%;
    }

    .policy-copy {
        margin-top: 6.3rem;
        line-height: 2.14285;
    }
	.guideTit{
	    font-size: 2.5rem;
    margin-bottom: -1rem;
    margin-top: 4rem;
}
	.guide-area {
    margin-top: -3em;
}
}




/* !お問い合わせ
---------------------------------------------------------- */
.contact-area {
    padding-top: 4.5rem;
    width: 100%;
    max-width: 106.8rem;
    margin: 0 auto;
    font-size: 1.4rem;
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
}

.contact-area .contact-checklist {
    width: 39rem;
}

.contact-area .contact-main {
    width: 59.5rem;
}

.contact-list .contact-list__item {
    margin-bottom: 4rem;
}

.contact-list .contact-list__item dt {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.4;
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.contact-list .contact-list__item dt .is-required {
    width: 3.4rem;
    height: 1.6rem;
    background-color: #BA0000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
    margin-left: 2rem;
}

.checklist-area {
    background-color: #F7F7F7;
    border-radius: 1rem;
    width: 100%;
    padding: 4rem 4rem 5rem;
    display: flex;
    flex-direction: column;
}

.checklist-area label {
    display: inline-flex;
    font-size: 1.4rem;
    line-height: 1.5;
    align-items: center;
    padding: .8rem 0;
}

.checklist-area label input {
    margin-right: 1.5rem;
}

.contact-agree {
    position: relative;
    padding-left: 3rem;
    font-size: 1.4rem;
    line-height: 1.5;
}

.contact-agree label {
    word-break: keep-all;
    white-space: nowrap;
}

.contact-agree label input {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.contact-agree .contact-agree__notes {
    display: block;
    margin-top: 1.6rem;
}

.contact-submit {
    margin-top: 9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-submit input[type=submit] {
    width: 100%;
    max-width: 27.8rem;
    height: 8rem;
    border-radius: 4rem;
    background: url(../img/common/icon_arrow_submit_white.svg) right 3.8rem center no-repeat #313131;
    background-size: 2.263rem auto;
    color: #fff;
    font-size: 1.8rem;
    letter-spacing: .05em;
    line-height: 1.5;
    font-weight: 500;
    border: 0;
    margin: 0 1rem;
    transition: .5s ease;
}

.contact-submit input[type=submit].back {
    
    background: url(../img/common/icon_arrow_submit_left_black.svg) left 3.8rem center no-repeat #fff;
    background-size: 2.263rem auto;
    color: #313131;
    border: .1rem solid #313131;
}

.contact-submit input[type=submit]:hover {
    opacity: .7;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    .contact-area {
        padding-top: 0;
        display: block;
    }

    .contact-area .contact-checklist {
        width: 100%;
        margin-bottom: 5.4rem;
    }

    .contact-area .contact-main {
        width: 100%;
    }

    .contact-list .contact-list__item {
        margin-bottom: 2.3rem;
    }

    .contact-list .contact-list__item dt {
        font-size: 1.4rem;
        line-height: 1.5;
        letter-spacing: .03em;
        margin-bottom: 1.5rem;
    }

    .contact-area .contact-checklist .contact-list .contact-list__item dt {
        letter-spacing: -.05em;
    }

    .contact-list .contact-list__item dt .is-required {
        letter-spacing: .1em;
        margin-left: 1.7rem;
    }

    .contact-area .contact-checklist .contact-list .contact-list__item dt .is-required {
        letter-spacing: .1em;
        margin-left: 0;
    }

    .checklist-area {
        padding: 2.8rem 2rem 3.2rem;
    }

    .checklist-area label {
        padding: .75rem 0;
    }

    .checklist-area label input {
        margin-right: 1.1rem;
    }

    .contact-agree {
        padding-left: 2.7rem;
        line-height: 1.857;
    }

    .contact-agree label {
        word-break: break-word;
        white-space: unset;
    }

    .contact-agree label input {
        top: .4rem;
    }

    .contact-agree .contact-agree__notes {
        margin-top: 0;
    }

    .contact-submit {
        margin-top: 5.5rem;
        flex-direction: column-reverse;
    }

    .contact-submit input[type=submit] {
        max-width: 21.1rem;
        height: 6rem;
        border-radius: 3rem;
        background: url(../img/common/icon_arrow_submit_white.svg) right 3rem center no-repeat #313131;
        background-size: 1.718rem auto;
        font-size: 1.4rem;
        margin: .5rem 0;
    }

    .contact-submit input[type=submit].back {
        background: url(../img/common/icon_arrow_submit_left_black.svg) left 3rem center no-repeat #fff;
        background-size: 1.718rem auto;
    }

    .contact-submit input[type=submit]:hover {
        opacity: 1;
    }
}


/* !会社概要
---------------------------------------------------------- */
#company #contents {
    overflow: hidden;
}

.company-area {
    padding: 1rem 0 12.3rem;
    width: 100%;
    max-width: 106.8rem;
    margin: 0 auto;
    position: relative;
}

.company-info {
    display: flex;
    justify-content: space-between;
}

.company-info__list {
    width: 59rem;
    border-top: .03rem solid #B7B7B7;
}

.company-info__list .company-info__item {
    border-bottom: .03rem solid #B7B7B7;
    font-size: 1.4rem;
    line-height: 2.42857;
    padding: 2rem 0;
    display: flex;
}

.company-info__list .company-info__item dt {
    font-weight: bold;
    width: 16.8rem;
}

.company-info__list .company-info__item dd {
    width: calc(100% - 16.8rem);
}

.notes-list li {
    padding-left: 2rem;
    position: relative;
}

.notes-list li:before {
    position: absolute;
    left: 0;
    top: 0;
    width: .8rem;
    height: .8rem;
    border-radius: 100%;
    background-color: #313131;
    content: '';
}

.company-info__list .company-info__item .notes-list li:before {
    top: 1.3rem;
}

.company-info__image {
    width: 38.2rem;
    position: relative;
}

.company-info__image .company-image {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    height: 100%;
    width: calc(100% + (50vw - 53.4rem));
}

.company-info__image .company-image .company-image__inner {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.company-info__image .company-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.circle-animation {
    position: absolute;
    right: -42rem;
    bottom: -32rem;
    z-index: -1;
    width: 81.1rem;
    height: 81.1rem;
    animation:  circle-loop 40s 0s linear infinite
}

.circle-animation img {
    width: 100%;
}

.company-info__image .company-image .company-image__inner .circle-animation {
    z-index: 2;
}

@keyframes circle-loop {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}


.access-area {
    padding-top: 10rem;
    position: relative;
    z-index: 1;
}

.access-area:before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    z-index: -1;
    content: '';
    width: 100vw;
    height: .1rem;
    background-color: #CECECE;
}

.access-head {
    text-align: center;
    margin-bottom: 5rem;
}

.access-head .access-head__title {
    font-size: 3rem;
    letter-spacing: .08em;
    line-height: 1.466;
    font-weight: bold;
}

.access-head .access-head__title:first-letter {
    color: #82349D;
}

.access-head .access-head__en {
    margin-bottom: 1.4rem;
    font-size: 1.5rem;
    letter-spacing: .1em;
    line-height: 1;
    color: #C3C3C3;
    font-weight: 500;
}

.access-map {
    width: 100%;
    max-width: 95.5rem;
    margin: 0 auto;
    position: relative;
    border: .1rem solid #707070;
    height: 32.3rem;
}

.access-map #map {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.access-map .access-map__pet {
    position: absolute;
    left: -5.2rem;
    top: 18rem;
    z-index: 2;
}

.access-map .access-map__pet .pet-said {
    position: absolute;
    left: -8.7rem;
    top: -4.4rem;
    z-index: 3;
}
.access-map::before {
    content: '';
    background: url(../img/company/icon_logo_marker.svg) no-repeat;
    background-size: contain;
    width: 100px;
    height: 130px;
    position: absolute;
    top: 15%;
    left: 45%;
    z-index: 1;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {

    .company-area {
        padding: 0;
    }

    .company-info {
        display: block;
        padding: 0 1.5rem;
    }

    .company-info__list {
        width: 100%;
    }

    .company-info__list .company-info__item {
        line-height: 1.785;
        padding: 1.8rem 0;
        display: block;
    }

    .company-info__list .company-info__item dt {
        width: 100%;
        margin-bottom: .5rem;
    }

    .company-info__list .company-info__item dd {
        width: 100%;
    }

    .notes-list li:before {
        width: .5rem;
        height: .5rem;
    }

    .company-info__list .company-info__item .notes-list li:before {
        top: 1rem;
    }

    .company-info__image {
        width: calc(100% + 7rem);
        margin: 0 -3.5rem;
        height: 38.2rem;
    }

    .company-info__image .company-image {
        width: 100%;
    }

    .company-info__image .company-image .circle-animation {
        right: -17.6rem;
        bottom: -12.6rem;
        width: 35.8rem;
        height: 35.8rem;
        animation:  circle-loop 20s 0s linear infinite
    }

    .access-area:before {
        display: none;
    }

    .access-head {
        margin-bottom: 3.8rem;
    }

    .access-head .access-head__title {
        font-size: 2.8rem;
        line-height: 1.428;
    }

    .access-head .access-head__en {
        font-size: 1.6rem;
    }

    .access-map {
        height: 24.5rem;
    }

    .access-map .access-map__pet {
        width: 8.6rem;
        left: 0;
        top: 18.7rem;
    }

    .access-map .access-map__pet .pet-said {
        width: 8.9rem;
        left: 0;
        top: -4.5rem;
    }
	.access-map::before {
    content: '';
    background: url(../img/company/icon_logo_marker.svg) no-repeat;
    background-size: contain;
    width: 80px;
    height: 130px;
    position: absolute;
    top: 13%;
    left: 38%;
    z-index: 1;
}

}


/* !ペットフード系
---------------------------------------------------------- */
#pet_food #contents {
    overflow: hidden;
}

.petfood-area {
    padding-top: 3rem;
    width: calc(100% + (50vw - 60rem));
}

.petfood-list .petfood-list__item + .petfood-list__item {
    margin-top: 8.4rem;
}

.petfood-list .petfood-list__item {
    width: 100%;
    padding: 7rem 0 7rem 6rem;
    position: relative;
}

.petfood-list .petfood-list__item:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1;
    content: '';
}

.petfood-list .brand-iti {
    background: url(../img/pet_food/img_pet_food_iti_02.jpg) right center no-repeat #CFEFF5;
    background-size: auto 100%;
}

.petfood-list .brand-iti:before {
    background: url(../img/pet_food/bg_pet_food_iti.png) left center no-repeat;
    background-size: 100% 100%;
    width: 45.38%;
}

.petfood-list .brand-tribal {
    background: url(../img/pet_food/img_pet_food_tribal.jpg) right center no-repeat #10594E;
    background-size: auto 100%;
}

.petfood-list .brand-tribal:before {
    background: url(../img/pet_food/bg_pet_food_tribal.png) left center no-repeat;
    background-size: 100% 100%;
    width: 55.07%;
}

.petfood-list .brand-bf4p {
    background: url(../img/pet_food/img_pet_food_bf4p.jpg) right center no-repeat #ECEBE5;
    background-size: auto 100%;
}

.petfood-list .brand-bf4p:before {
    background: url(../img/pet_food/bg_pet_food_bf4p.png) left center no-repeat;
    background-size: 100% 100%;
    width: 47.69%;
}

.petfood-list .petfood-box {
    width: 40.6rem;
    height: 49.3rem;
    background: #fff;
    position: relative;
    z-index: 3;
    font-size: 1.8rem;
    letter-spacing: .07em;
    line-height: 1.94;
    font-family: 'Figtree', sans-serif;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.petfood-list .petfood-box .brand-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 14rem;
    margin-top: 4rem;
}

.petfood-list .brand-iti .petfood-box .brand-logo img {
    width: 14.4rem;
}

.petfood-list .brand-tribal .petfood-box .brand-logo img {
    width: 17.5rem;
}

.petfood-list .brand-bf4p .petfood-box .brand-logo img {
    width: 26rem;
}

.petfood-list .petfood-box .brand-link {
    margin-top: 3rem;
    text-align: center;
}

.petfood-list .petfood-box .brand-link a {
    width: 24.4rem;
    height: 8.4rem;
    border-radius: 4.2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    letter-spacing: .1em;
    line-height: 1;
    color: #fff;
    background: url(../img/common/icon_blank01_white.svg) right 3.5rem center no-repeat #383838;
    background-size: 1.56rem auto;
    font-family: 'Figtree', sans-serif;
}

.petfood-list .petfood-box .brand-link a:hover {
    text-decoration: none;
    opacity: .7;
}

.brand-bf4p__title {
    position: absolute;
    width: 60rem;
    left: 60rem;
    bottom: 7rem;
    background: rgba(63,139,5,.8);
    z-index: 2;
    padding: 2rem 0 2rem 11.5rem;
    font-size: 3.3rem;
    line-height: 1;
    color: #fff;
    font-weight: bold;
}

.brand-bf4p__title span {
    display: block;
    margin-bottom: .9rem;
    font-size: 2.2rem;
	font-weight: normal;
}

.brand-bf4p__title:after {
    position: absolute;
    width: 100vw;
    height: 100%;
    left: 100%;
    top: 0;
    background: rgba(63,139,5,.8);
    content: '';
    z-index: 1;
}

.brand-bf4p__goods {
    position: absolute;
    width: 38.6rem;
    height: 46.1rem;
    bottom: -1.8rem;
    left: 40.2rem;
    z-index: 2;
}

@media screen and (min-width: 1800px) {
	.petfood-list .brand-bf4p {
        background-size: auto 130%!important;
    }
}
/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    .petfood-area {
        padding-top: 1rem;
        width: calc(100% + 4rem);
        margin: 0 -2rem;
    }

    .petfood-list .petfood-list__item + .petfood-list__item {
        margin-top: 6.5rem;
    }

    .petfood-list .petfood-list__item {
        padding: 73.6vw 3.5rem 3rem;
    }

    .petfood-list .petfood-list__item:before {
        display: none;
    }

    .petfood-list .brand-iti {
        background: url(../img/pet_food/img_pet_food_iti_sp.jpg) top center no-repeat #CFEFF5;
        background-size: 100% auto;
    }

    .petfood-list .brand-tribal {
        background: url(../img/pet_food/img_pet_food_tribal_sp.jpg) top center no-repeat #10594E;
        background-size: 100% auto;
    }

    .petfood-list .brand-bf4p {
        background: url(../img/pet_food/img_pet_food_bf4p_sp.jpg) top center no-repeat #ECEBE5;
        background-size: 100% auto;
    }


    .petfood-list .petfood-box {
        width: 100%;
        height: auto;
        font-size: 1.5rem;
        line-height: 1.6;
        display: block;
        padding: 5.5rem 0 4.2rem;
    }

    .petfood-list .petfood-box .brand-logo {
        height: 11.2rem;
        margin-top: 2.4rem;
    }

    .petfood-list .brand-iti .petfood-box .brand-logo img {
        width: 11.6rem;
    }

    .petfood-list .brand-tribal .petfood-box .brand-logo img {
        width: 13.4rem;
    }

    .petfood-list .brand-bf4p .petfood-box .brand-logo img {
        width: 18rem;
    }

    .petfood-list .petfood-box .brand-link {
        margin-top: 2.7rem;
        text-align: center;
    }

    .petfood-list .petfood-box .brand-link a {
        width: 19rem;
        height: 5rem;
        border-radius: 2.5rem;
        background: url(../img/common/icon_blank01_white.svg) right 2rem center no-repeat #383838;
        background-size: 1.135rem auto;
    }

    .petfood-list .petfood-box .brand-link a:hover {
        opacity: 1;
    }

    .brand-bf4p__title,
    .brand-bf4p__goods {
        display: none;
    }
}


/* !ペットケア用品系
---------------------------------------------------------- */

#pet_case #contents {
    padding: 0;
}

.main-image {
    position: relative;
    z-index: 2;
    width: 100%;
    left: 50%;
    transform: translate(-50%,0);
}

.main-image:before {
    position: absolute;
    z-index: -1;
    width: 100%;
    left: 0;
    top: 0;
    height: 7.4rem;
    background: #F7F2F9;
    content: '';
}

.main-image .main-image__inner {
    width: 100%;
    transform: translate(0,10%);
    opacity: 0;
}

.is-loaded .main-image .main-image__inner {
    transform: translate(0,0);
    opacity: 1;
    transition: .75s cubic-bezier(0.215, 0.61, 0.355, 1 ) .6s;
}

.main-image .main-image__inner img {
    width: 100%;
    clip-path: inset(0 10% 0 10%);
    /*view-timeline-name: --revealing-image;
    view-timeline-axis: block;

    animation: linear reveal both;
    animation-timeline: --revealing-image;*/
}

/*@keyframes reveal {
    0% {
        clip-path: inset(0 10% 0 10%);
    }
    80% {
        clip-path: inset(0% 0% 0% 0%);
    }
}*/


.petcase-area {
    padding: 12rem 0 15.6rem;
    font-size: 1.4rem;
    line-height: 2.5;
    text-align: center;
}

.petcase-area .petcase-title {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: .07em;
    font-family: 'Figtree', sans-serif;
    margin-bottom: 3.6rem;
}

.petcase-area .petcase-link {
    margin-top: 8.5rem;
}

.petcase-area .petcase-link a {
    width: 30.4rem;
    height: 7.6rem;
    border-radius: 3.8rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    letter-spacing: .05em;
    line-height: 1;
    color: #fff;
    background: url(../img/common/icon_blank02_white.svg) right 2.4rem center no-repeat #383838;
    background-size: 2.411rem auto;
    font-family: 'Figtree', sans-serif;
    padding-right: 1.5rem;
}

.petcase-area .petcase-link a:hover {
    text-decoration: none;
    opacity: .7;
}

.petcase-goods {
    width: 100%;
    overflow: hidden;
}

.petcase-goods .heading-medium {
    text-align: center;
    margin-bottom: 6rem;
}

.petcase-goods .goods-list {
    position: relative;
    z-index: 2;
    padding-bottom: 25rem;
    max-width: 100rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7rem;
}

.petcase-goods .goods-list:before,
.petcase-goods .goods-list:after {
    position: absolute;
    width: 100vw;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    content: '';
}

.petcase-goods .goods-list:before {
    background: #fff;
    height: 23rem;
    z-index: -1;
}

.petcase-goods .goods-list:after {
    background: #F7F4E9;
    height: 100%;
    z-index: -2;
}


.petcase-goods .goods-list__item figure {
    width: 100%;
    background: #F7F7F7;
}

.petcase-goods .goods-list__item figure a {
    display: block;
    width: 100%;
    position: relative;
    padding-top: 100%;
}

.petcase-goods .goods-list__item figure a img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.petcase-goods .goods-info {
    position: relative;
    z-index: 2;
    width: 38.8rem;
    background: #fff;
    box-shadow: .4rem .7rem 1rem rgba(0, 0, 0, .13);
    padding: 3.4rem 3rem 2.8rem;
    margin-top: -3.3rem;
}

.petcase-goods .goods-info:after {
    position: absolute;
    z-index: 2;
    content: '';
    right: 3rem;
    bottom: 2.4rem;
    width: 5.4rem;
    height: 5.4rem;
    background: url(../img/common/icon_arrow_right_pink.svg) center center no-repeat;
    transition: .5s ease;
    background-size: cover;
}

.petcase-goods .goods-list__item:hover .goods-info:after {
    background-image: url(../img/common/icon_arrow_right_purple.svg);
    transition: .5s ease;
}

.petcase-goods .goods-info .goods-info__name {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.45;
}

.petcase-goods .goods-info .goods-info__capacity {
    font-size: 1.8rem;
    line-height: 1.44;
    margin-top: .5rem;
    letter-spacing: .08em;
}

.petcase-goods .goods-info .goods-info__price {
    font-size: 2.3rem;
    line-height: 1.478;
    font-weight: bold;
    color: #8B31AA;
    margin-top: .9rem;
    letter-spacing: .08em;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    #pet_case #contents {
        padding: 0;
    }

    .main-image:before {
        height: 5rem;
    }


    .main-image .main-image__inner img {
        width: 100%;
        height: auto;
    }

    @keyframes reveal {
        0% {
            clip-path: inset(0 20% 0 20%);
        }
        90% {
            clip-path: inset(0% 0% 0% 0%);
        }
    }

    .petcase-area {
        padding: 5rem 1.5rem 9.5rem;
        line-height: 2;
    }

    .petcase-area .petcase-title {
        font-size: 1.8rem;
        line-height: 1.778;
        font-weight: bold;
        letter-spacing: 0;
        font-family: 'Zen Kaku Gothic New', sans-serif;
        margin-bottom: 2.5rem;
    }

    .petcase-area .petcase-link {
        margin-top: 4.4rem;
    }

    .petcase-area .petcase-link a {
        width: 14.4rem;
        height: 3.6rem;
        border-radius: 1.8rem;
        font-size: 1.3rem;
        background: url(../img/common/icon_blank02_white.svg) right 1.2rem center no-repeat #383838;
        background-size: 1.146rem auto;
        padding-right: 0;
    }

    .petcase-area .petcase-link a:hover {
        opacity: 1;
    }

    .petcase-goods .heading-medium {
        margin-bottom: 4.4rem;
    }

    .petcase-goods .goods-list {
        padding-bottom: 11.2rem;
        display: block;
    }

    .petcase-goods .goods-list:before {
        height: 18.5rem;
    }

    .petcase-goods .goods-list__item + .goods-list__item {
        margin-top: 4.5rem;
    }

    .petcase-goods .goods-list__item:hover {
        opacity: 1;
    }

    .petcase-goods .goods-info {
        width: 28rem;
        padding: 2.4rem 2rem 2rem;
        margin-top: -2.4rem;
    }

    .petcase-goods .goods-info:after {
        right: 2rem;
        bottom: 1.7rem;
        width: 3.8rem;
        height: 3.8rem;
    }

    .petcase-goods .goods-list__item:hover .goods-info:after {
        background-image: url(../img/common/icon_arrow_right_pink.svg);
    }

    .petcase-goods .goods-info .goods-info__name {
        font-size: 1.4rem;
    }

    .petcase-goods .goods-info .goods-info__capacity {
        font-size: 1.2rem;
        margin-top: .3rem;
    }

    .petcase-goods .goods-info .goods-info__price {
        font-size: 1.6rem;
        line-height: 1.5;
        margin-top: .8rem;
    }
}


/* !BF4P ペット用ケアスプレー 500ml
---------------------------------------------------------- */
.single-goods #teaser {
    background: #fff;
}

.single-goods #contents {
    padding: 0;
}

.goods-detail {
    width: 100%;
    background: #F7F4E9;
    position: relative;
    padding: 3.7rem 0 27rem;
}

.goods-detail:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3.7rem;
    background: #fff;
    content: '';
    z-index: 1;
}

.goods-area {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    font-size: 1.4rem;
    line-height: 2.14;
    max-width: 100rem;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.goods-main {
    width: 52rem;
    padding-top: 9.6rem;
}

.goods-main p {
    font-size: 1.4rem;
    line-height: 2.14;
    margin-bottom: 2.14em;
}

.goods-detail .page-controller {
    margin-top: 7.5rem;
}

.goods-detail .page-controller .back {
    background: #fff;
}

.goods-detail .page-controller .back:hover {
    background: #707070;
}

.goods-side {
    width: 41.4rem;
    margin-top: -21.6rem;
}

.goods-gallery {
    position: relative;
    width: 100%;
}

.goods-gallery .swiper-thumb {
    position: absolute;
    width: 7rem;
    height: 100%;
    right: -10rem;
    top: 0;
    z-index: 2;
}


.goods-gallery .main-slide,
.goods-gallery .thumb-slide {
    width: 100%;
    padding-top: 100%;
    position: relative;
    display: block;
    cursor: pointer;
}

.goods-gallery .main-slide img,
.goods-gallery .thumb-slide img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.goods-name {
    margin-top: 3.2rem;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.44;
}

.goods-price {
    margin-top: .8rem;
    font-size: 1.8rem;
    letter-spacing: .08em;
    font-weight: bold;
    line-height: 1.44;
    color: #8B31AA;
}

.goods-online-link {
    margin-top: 3.2rem;
}

.goods-online-link a {
    width: 27rem;
    height: 6.5rem;
    background: url(../img/common/Icon_shopping_cart_white.svg) right 2.7rem center no-repeat #313131;
    background-size: 2.242rem auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.goods-online-link a:hover {
    text-decoration: none;
    opacity: .7;
}

.goods-links {
    margin-top: 4rem;
}

.goods-links li {
    line-height: 1.5;
}

.goods-links li + li {
    margin-top: 1.7rem;
}

.goods-links li a {
    font-size: 1.2rem;
    line-height: 1.5;
}

.image-popup {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99999;
    left: 0;
    top: 0;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity .6s ease;
}

.image-popup.is-active {
    pointer-events: inherit;
    visibility: visible;
    opacity: 1;
    transition: opacity .6s ease;
}

.image-popup .image-popup__overlay {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
}

.image-popup .image-popup__box {
    width: 42.8rem;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%,-50%);
}

.image-popup .image-popup__box .swiper-thumb {
    position: absolute;
    width: 8rem;
    height: 100%;
    right: -11rem;
    top: 0;
    z-index: 2;
}

.image-popup .image-popup__box .main-slide,
.image-popup .image-popup__box .thumb-slide {
    width: 100%;
    padding-top: 100%;
    position: relative;
    display: block;
    cursor: pointer;
}

.image-popup .image-popup__box .main-slide img,
.image-popup .image-popup__box .thumb-slide img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.image-popup .image-popup__close {
    position: absolute;
    width: 3.3rem;
    height: 3.3rem;
    display: block;
    text-indent: -9999rem;
    background: url(../img/common/icon_popup_close.svg) center center no-repeat;
    background-size: cover;
    z-index: 2;
    right: -19.5rem;
    top: 0;
    cursor: pointer;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {

    .goods-detail {
        padding: 16.5rem 0 12rem;
    }

    .goods-detail:before {
        height: 16.5rem;
    }

    .goods-area {
        display: block;
        line-height: 1.785;
    }

    .goods-main {
        width: 100%;
        padding-top: 4rem;
    }

    .goods-main p {
        line-height: 1.785;
        margin-bottom: 1.785em;
    }

    .goods-detail .page-controller {
        margin-top: 2rem;
    }

    .goods-detail .page-controller .back:hover {
        background: #fff;
    }

    .goods-side {
        width: 100%;
        margin-top: -15.2rem;
    }

    .goods-gallery .swiper-thumb {
        position: relative;
        width: 100%;
        height: auto;
        right: 0;
        margin-top: .7rem;
    }

    .goods-name {
        margin-top: 3rem;
        font-size: 1.8rem;
    }

    .goods-price {
        margin-top: 1.1rem;
    }

    .goods-online-link a {
        width: 22.1rem;
        height: 5.68rem;
        background: #313131;
    }

    .goods-online-link a:hover {
        opacity: 1;
    }

    .goods-links {
        margin-top: 3rem;
    }

    .goods-links li + li {
        margin-top: 1.3rem;
    }

    .goods-links li a {
        font-size: 1.3rem;
    }

    .image-popup .image-popup__box {
        width: 33.5rem;
    }

    .image-popup .image-popup__box .swiper-thumb {
        position: relative;
        width: 100%;
        height: auto;
        right: 0;
        margin-top: .7rem;
    }

    .image-popup .image-popup__close {
        right: 0;
        top: -5rem;
    }
}


/* !ペットフード・用品
---------------------------------------------------------- */
.heading-section{
    margin-bottom:10rem;
    text-align:center;
}

.heading-section .banner{
    margin-bottom:9.5rem;
}

.heading-section .hd01{
    margin-bottom:4rem;
    line-height: 1.95;
    color: #82349D;
    font-size:2.3rem;
    font-weight: bold;
}

.heading-section .txt p{
    margin-bottom:3.2rem;
    line-height:2.5;
    font-size: 1.4rem;
    font-weight: 500;
}


.lineup-wrap{
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 13rem;
}

.lineup-list {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    display: flex;
}

.lineup-list ul {
    display: flex;
    align-items: center;
}

.lineup-list ul li {
    margin-right: 2.7rem;
    word-break: keep-all;
    white-space: nowrap;
}

.lineup-list ul:nth-child(odd) {
    animation-name: image-loop-left1;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.lineup-list ul:nth-child(even) {
    animation-name: image-loop-left2;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes image-loop-left1 {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }

}


@keyframes image-loop-left2 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-200%);
    }

}

.lineup-wrap .slide{
    display:flex;
    align-items: center;
}

.lineup-wrap .img.icon-lineup01 {
    width: 16.099rem;
}

.lineup-wrap .img.icon-lineup02 {
    width: 12.643rem;
}

.lineup-wrap .img.icon-lineup03 {
    width: 12.298rem;
}

.lineup-wrap .img.icon-lineup04 {
    width: 11.415rem;
}

.lineup-wrap .img img{
    transform-origin: center bottom;
    animation: yurayura 2s steps(2, start) infinite;
}

@keyframes yurayura {
    0% , 100%{
        transform: rotate(20deg);
    }

    50%{
        transform: rotate(-10deg);
    }
}

.lineup-wrap .info{
    font-family: 'Figtree', sans-serif;
    font-size:2.3rem;
    font-weight: 600;
    font-style: italic;
}

.lineup-wrap .info .th{
    padding:0.1rem 1.6rem;
    border:1px solid #707070;
    border-radius:2rem;
    letter-spacing: 0.05em;
}

.heading-hdl{
    text-align:center;
}

.heading-hdl .con{
    display:inline-block;
    width: 33.33%;
    background: #fff;
    padding-bottom: 5rem;
}

.heading-hdl .eng{
    display:block;
    font-size:7.2rem;
    font-weight: bold;
    letter-spacing: .07em;
}

.heading-hdl .eng:first-letter{
    color: #82349D;
}

.heading-hdl .jap{
    display:block;
    font-size:1.8rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.heading-hdm{
    position: relative;
    margin-bottom: 8rem;
    text-align:center;
}

.heading-hdm .eng{
    letter-spacing: 0.07em;
    font-size:3rem;
    font-weight: 500;
    font-style: italic;
}

.heading-hdm .eng:after{
    content:"";
    display: block;
    margin:1.6rem auto 0;
    width:3.4rem;
    border-top:1px solid #000;
}

.heading-hdm .decorate{
    position:absolute;
    left:calc(50% + 12rem);
    top:50%;
}

.heading-hdm .decorate .talk{
    position: absolute;
    bottom:100%;
    left:10%;
}

.text-line{
    line-height:2.5;
    font-size:1.4rem;
}

 
/*** スマホ ***/
@media screen and (max-width: 767px) {
    .heading-section {
        margin-bottom: 6rem;
    }

    .heading-section .banner {
        margin-bottom: 5rem;
    }

    .heading-section .hd01 {
        margin-bottom: 2.4rem;
        line-height: 1.778;
        font-size: 1.8rem;
    }

    .heading-section .txt p {
        margin-bottom: 3.2rem;
        line-height: 1.778;
    }


    .lineup-wrap{
        margin-top: 6.5rem;
        padding-bottom: 1.6rem;
    }

    .lineup-list {
        position: static;
    }


    .lineup-wrap .img.icon-lineup01 {
        width: 13.136rem;
    }

    .lineup-wrap .img.icon-lineup02 {
        width: 10.316rem;
    }

    .lineup-wrap .img.icon-lineup03 {
        width: 10.555rem;
    }

    .lineup-wrap .img.icon-lineup04 {
        width: 9.797rem;
    }

    .lineup-wrap .info {
        font-size: 1.8rem;
    }

    .heading-hdl .con {
        width: 100%;
        padding: 0;
    }

    .heading-hdl .eng {
        font-size: 3.5rem;
    }

    .heading-hdl .jap {
        font-size: 1.6rem;
    }

    .heading-hdm {
        margin-bottom: 3.2rem;
    }

    .heading-hdm .eng {
        font-size: 2.4rem;
    }

    .heading-hdm .eng:after {
        margin-top: 1.4rem;
    }

    .heading-hdm .decorate {
        left: calc(50% + 7.5rem);
        transform: translateY(-50%);
    }

    .heading-hdm .decorate .pet{
        width:5.6rem;
    }

    .heading-hdm .decorate .talk {
        left: 50%;
    }


    .text-line {
        line-height: 2;
    }

}


#service01 #contents{
    padding-bottom:0;
}

.service-features{
    overflow:hidden;
    position:relative;
    z-index: 2;
    padding:17rem 0; 
    background:linear-gradient(#EDF9FC 50%, #CFEEF4 50%);
}

.contents-wrap{
    display:flex;
    justify-content: space-between;
}

.contents-wrap .contents-side{
    width:29rem;
}

.contents-wrap .contents-main{
    padding:0 5rem;
    width:calc(100% - 32rem);
}

.contents-wrap.online{
    margin:12rem -3.2rem 0;
}

.contents-wrap.online .contents-side{
    width:46rem;
}

.contents-wrap.online .contents-main{
    padding:0;
    width:calc(100% - 52rem);
}

.contents-wrap .contents-side .logo,
.contents-wrap .contents-side .image{
    text-align:center;
}

.contents-wrap .contents-side .logo img{
    max-width:24rem;
}

.service-features .feature-wrap{
	max-width: 1500px;
    margin: 10rem auto 0;
}

.service-features .hd01{
    display:flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3rem;
    font-size:3rem;
    font-weight: 600;
}

.service-features .btn-detail{
    display:flex;
    align-items: center;
    justify-content: center;
    padding:0 2rem;
    height:3.6rem;
    width:14.5rem;
    background: url("../img/service01/icon_link_italic_wh.svg")no-repeat right 1rem center #23C2BD;
    border-radius:4rem;
    color:#fff;
    font-size:1.3rem;
    font-weight: 500;
    font-style: italic;
}

.feature-wrap {
    position: relative;
    padding-bottom:8rem;
}

.feature-wrap .feature-swiper{
	overflow: hidden;
}
.feature-swiper .swiper-pagination {
    bottom:0;
    text-align: center;
    position: absolute;
    left: 0;
    width: 100%;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10;
}

.feature-swiper .swiper-pagination-bullet{
    margin: 0 1.2rem;
    width:1.2rem;
    height:1.2rem;
    cursor: pointer;
    display:inline-block;
    background:#fff;
    border-radius:2rem;
}

.feature-swiper .swiper-pagination-bullet-active{
    background:#23C2BD;
}

.feature-wrap .item{
    position: relative;
	
    padding:5.5rem 3rem 4rem;
    background: #fff;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.07);
}

.feature-wrap-iti .item{
	    height: 600px;
}
.feature-wrap-tribal .item{
	    height: 600px;
}
.feature-wrap-bf4p .item{
	    height: 550px;
}

.feature-wrap .item .step{
    position:absolute;
    left:0;
    top:5.5rem;
    transform: translateY(-50%);
    width:100%;
    text-align: center;
}

.feature-wrap .item .img{
    margin-bottom: 2.4rem;
}

.feature-wrap .item .img img{
    width: 100%;
}

.feature-wrap .item .head{
    margin-bottom: 1.6rem;
    letter-spacing: 0.07em;
    font-size:2rem;
    font-weight: 600;
}

.feature-online-swiper{
    position: relative;
    padding:2rem 0 0;
    overflow:hidden;
}

.feature-online-swiper.feature-swiper-scroll{
    padding-bottom:10rem;
}

.feature-online-swiper .swiper-slide{
    max-width:12rem;
    text-align: center;
}

.feature-online-swiper .pic{
    margin-bottom:1rem;
}

.feature-online-swiper .pic img{
    width: auto;
    max-height:11.8rem;
}

.swiper-button-next:after, .swiper-button-prev:after {
	display:none
}

.feature-online-swiper .text{
    font-size:1rem;
}

.feature-online-swiper ul{
    display:flex;
}

.feature-online-swiper li{
    margin-right:3.6rem;
    text-align: center;
}

.feature-online-swiper .swiper-scrollbar{
    position: absolute;
    left: 0;
    bottom:7.5rem;
    height:0.3rem;
    width:100%;
    background: #fff;
    border-radius:1rem;
}

.feature-online-swiper .swiper-scrollbar-drag{
    height: 100%;
    width: 100%;
    position: relative;
    background: #23C2BD;
    border-radius: 1rem;
    left: 0;
    top: 0;
}

.feature-online-swiper .feature-online-swiper .swiper-pagination{
    bottom:7.5rem;
    height:0.3rem;
    background: #fff;
}

.feature-online-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #23C2BD;
    transform: scale(0);
    transform-origin: left top;
}

.feature-online-swiper .swiper-button-prev,
.feature-online-swiper .swiper-button-next{
    cursor: pointer;
    position: absolute;
    bottom:0;
    width:4.2rem;
    height:4.2rem;
}

.feature-online-swiper .swiper-button-prev{
    right:5.2rem;
    background: url("../img/service01/icon_left_circle.svg") center center no-repeat;
    background-size: cover;
}

.feature-online-swiper .swiper-button-next{
    right:0;
    background: url("../img/service01/icon_next_circle.svg") center center no-repeat;
    background-size: cover;
}


.service-features.green-style{
    background: linear-gradient(#E8FFF7 50%, #C5F0E1 50%);
}

.service-features.green-style .btn-detail{
    background-color: #0C5A4C;
}

.green-style .swiper-pagination-bullet-active {
    background: #0C5A4C;
}

.heading-hdm .decorate .talk2{
    left: -4rem;
}

.heading-hdm .decorate .talk3{
    left: 4.5rem;
    bottom:90%;
}

.service-features.yellow-style{
    background: linear-gradient(#FDF9ED 50%, #F7EED4 50%);
}

.service-features.yellow-style .btn-detail{
    background-color: #937C3C;
}

.yellow-style .swiper-pagination-bullet-active {
    background: #937C3C;
}


/*** スマホ ***/
@media screen and (min-width: 768px){
    .service-features .btn-detail:hover{
        opacity: 0.7;
        text-decoration: none;
    }

}

@media screen and (max-width: 767px) {
    .service-features {
        padding: 5rem 0;
    }

    .contents-wrap {
        display: block;
    }

    .contents-wrap .contents-side {
        margin-bottom: 3rem;
        width: auto;
    }

    .contents-wrap .contents-main {
        padding: 0;
        width: auto;
    }

    .contents-wrap.online {
        margin: 5rem 0 0;
    }

    .contents-wrap.online .contents-side {
        width: auto;
    }

    .contents-wrap.online .contents-main{
        width: auto;
    }


    .service-features .hd01 {
        display: block;
        margin-bottom: 2.4rem;
        text-align: center;
        font-size: 1.8rem;
    }

    .service-features .btn-detail{
        margin:2.4rem auto 0;
    }

    .contents-wrap .contents-side .logo img{
        max-width: 19rem;
    }

    .service-features .feature-wrap {
        margin-top: 6rem;
    }

    .feature-wrap {
        padding-bottom: 4.5rem;
    }

    .feature-wrap .swiper-slide{
        max-width:30.5rem;
    }

    .feature-wrap .item {
        padding: 4rem 2.2rem;
		
    }
.feature-wrap-iti .item{
	    height: 460px;
}
.feature-wrap-tribal .item{
	   height: 490px;
}
.feature-wrap-bf4p .item{
	    height: 410px;
}
    .feature-wrap .item .step{
        top:4rem;
    }

    .feature-wrap .item .step img{
        height:3.8rem;
    }

    .feature-wrap .item .head {
        font-size: 1.5rem;
    }

    .contents-wrap.online .image img{
        max-width:30.5rem;
    }

    .feature-online-swiper {
        padding-top: 4rem;
    }

    .feature-online-swiper.feature-swiper-scroll{
        padding-bottom: 8rem
    }

    .feature-online-swiper ul{
        justify-content:center;
    }

    .feature-online-swiper li {
        margin:0 1rem;
    }

    .feature-online-swiper .swiper-scrollbar {
        bottom: 6.5rem;
    }

    .feature-online-swiper .swiper-button-prev {
        right: calc(50% + 0.6rem);
    }

    .feature-online-swiper .swiper-button-next {
        right: calc(50% - 4.8rem);
    }

}

/* !事業内容
---------------------------------------------------------- */

.service-top__image img {
    width: 100%;
}
.message-box {
    margin-top: 10.5rem;
}
.message-box__title {
    font-size: 2.3rem;
    line-height: 1.95;
    font-weight: bold;
    text-align: center;
    color: #82349D;
}
.message-box__text {
    text-align: center;
	margin: 0 auto;
	max-width: 900px;
    margin-top: 4.7rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2.5;
    color: #212121;
}
.message-box__text p+p {
    margin-top: 2.4rem;
}
.service-flow {
    background: #F4F4F4;
    position: relative;
    margin-top: 7.6rem;
    padding: 13.5rem 0 20rem;
}
.service-flow__wrap {
    max-width: 94.6rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
}
.service-flow__side {
    position: sticky;
    top: 9rem;
    left: 0;
    z-index: 2;
    width: 15.8rem;
}
.flow-side__title {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: 0.5em;
    line-height: 1.4;
    color: #fff;
    height: 58.1rem;
    width: 7.9rem;
    border-radius: 4rem;
    position: relative;
}
.service-flow.purple .flow-side__title {
    background: #8B31AA;
}
.service-flow.mint .flow-side__title {
    background: #23C2BD;
}
.service-flow.purple .flow-side__title::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(100%,-50%);
    background: url('../img/service02/icon_right_purple.svg') center no-repeat;
    width: 3.1rem;
    height:100%;
    background-size: 100% auto;
}
.service-flow.mint .flow-side__title::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(100%,-50%);
    background: url('../img/service02/icon_right_mint.svg') center no-repeat;
    width: 3.1rem;
    height:100%;
    background-size: 100% auto;
}
.flow-side__pet {
    position: absolute;
    z-index: 3;
    transform: translate(-50%,100%);
}
.flow-side__pet.cat {
    bottom: 3.5rem;
    left: 1.7rem;
}
.flow-side__pet.cat .side-pet__img {
    width: 16.2rem;
}
.flow-side__pet .side-pet__text {
    position: absolute;
    /* top:-6.1rem;
    left: -8.6rem; */
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 13.26rem;
}
.flow-side__pet.cat .side-pet__text {
    margin-top: -7.3rem;
    margin-left: -10rem;
}
.service-flow__main {
    width: calc(100% - 15.8rem);
}
.service-flow__main .flow-item {
    background: #fff;
    padding: 2.9rem 5rem 2.9rem 5.9rem;
    position: relative;
    box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, .05);
    position: relative;
}
.service-flow__main .flow-item+.flow-item {
    margin-top: 5.2rem;
}
.service-flow__main .flow-item::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2rem;
    transform: translateY(100%);
}
.service-flow__wrap.wrap01 .flow-item:nth-last-child(2)::before {
    content: unset;
}
.service-flow__main .flow-item:last-child:before {
    content: unset;
}
.service-flow__main.purple .flow-item::before {
    background: url('../img/service02/icon_arrow_purple_pc.svg') center bottom no-repeat;
    width: 2.3rem;
    height: 1.6rem;
    background-size: 100% auto;
}
.service-flow__main.mint .flow-item::before {
    background: url('../img/service02/icon_arrow_mint_pc.svg') center bottom no-repeat;
    width: 2.3rem;
    height: 1.6rem;
    background-size: 100% auto;
}
.service-flow__note {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0.03em;
    padding: 3.2rem 4rem;
    margin-top: 4.8rem;
}
.service-flow__main.purple .service-flow__note  {
    background: #EBDFF0;
}
.service-flow__main.mint .service-flow__note  {
    background: #C8F2F0;
}
.flow-item__title {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.32;
    position: absolute;
    left: 2.6rem;
    top: -2em;
    transform-origin: left bottom;
    transform: rotate(90deg);
}
.service-flow.purple .flow-item__title {
    color: #82349D;
}
.service-flow.mint .flow-item__title {
    color: #23C2BD;
}
.flow-item__box {
    display: flex;
    align-items: center;
}
.flow-box__image {
    border-radius: 8.5rem;
    overflow: hidden;
    width: 32.8rem;
    margin-right: 4.2rem;
}
.flow-box__info {
    width: calc(100% - 37rem);
}

.flow-info__title {
    display: flex;
    align-items: center;
    width: 26.7rem;
    height: 4.4rem;
    border-radius: 2.2rem;
}
.flow-info__title.purple  {
    background: #EBDFF0;
}
.flow-info__title.mint {
    background: #C8F2F0;
}
.flow-info__title .info-num {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.35;
    letter-spacing: 0.1em;
    position: relative;
}
.flow-info__title .info-num span {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 100%;
    position: relative;
    z-index: 2;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-left: .5em;
    box-shadow: 0rem 0.3rem 0.6rem rgba(0, 0, 0, .16);
}
.flow-info__title .info-num::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 100%;
}
.flow-info__title.purple .info-num::before {
    background: #82349D;
}
.flow-info__title.mint .info-num::before {
    background: #23C2BD;
}
.flow-info__title.purple .info-num  {
    color: #82349D;
}
.flow-info__title.mint .info-num  {
    color: #23C2BD;
}
.flow-info__title .info-title {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.1em;
    color: #313131;
    padding-left: 1.8rem;
    width: calc(100% - 4.4rem);
    height: 100%;
    display: flex;
    align-items: center;
}
.flow-info__text {
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #313131;
    line-height: 1.78;
    margin-top: 2.1rem;
}
.service-banner img {
    width: 100%;
}

.service-faq-area {
    width: 100%;
    overflow: hidden;
}

.service-faq {
    display: flex;
    align-items: flex-start;
    margin: 19.7rem auto 0;
    max-width: 112.7rem;
    width: 100%;
}
.service-faq__side {
    width: 11.4rem;
    position: sticky;
    top: 9rem;
    left: 0;
    z-index: 2;
}
.service-faq__side .faq-side__eng {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
    color: #C3C3C3;
}
.service-faq__side .faq-side__jap {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    color: #313131;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.service-faq__side .faq-side__jap .purple {
    color: #8B31AA;
}
.service-faq__side .faq-side__jap .mint {
    color: #23C2BD;
}
.service-faq__main {
    margin-left: -3.5rem;
    width: calc(100% - 11.4rem);
}
.service-faq__main .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
}
.service-faq__main .swiper-button {
    display: none;
}
.service-faq__item {
    width: 100%;
    cursor: pointer;
}
.service-faq__box {
    border: 0.1rem solid #4B4B4B;
    border-radius: 1rem;
    padding: 4.8rem 3rem 1.7rem;
    height: 36.5rem;
    position: relative;
}
.service-faq.purple .service-faq__box.is-active {
    border: 0.3rem solid #8B31AA;
    background: #FBF5FC;
}
.service-faq.mint .service-faq__box.is-active {
    border: 0.3rem solid #23C2BD;
    background:#F2FCFB;
}
.faq-question__title {
    padding-bottom: 2.5rem;
    border-bottom: #C1C1C1 solid 0.05rem;
}
.faq-question__title .faq-title__eng {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.41;
    color: #313131;
}
.service-faq__box.is-active .faq-question__title .faq-title__eng  {
    color: #C1C1C1;
}
.faq-question__title .faq-title__jap {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.03em;
    line-height: 1.4;
    color: #313131;
    margin-top: 0.9rem;
}
.service-faq__answer {
    display: none;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.85;
    color: #000000;
    margin-top: 2.5rem;
}

.service-faq__pet {
    position: absolute;
    bottom: 1.3rem;
    left: 3rem;
    z-index: 3;
    width: 50%;
    height: 100%;
}
.service-faq__pet.cat {
    background: url('../img/service02/img_faq_cat01.png')  left bottom no-repeat;
    background-size: 7.1rem auto;
    transition: all .2s;
}
.service-faq__box.is-active .service-faq__pet.cat {
    background: url('../img/service02/img_faq_cat02.png') left bottom no-repeat;
    background-size: 10.1rem auto;
    transition: all .2s;
}
.service-faq__pet.dog {
    background: url('../img/service02/img_faq_dog01.png')  left bottom no-repeat;
    background-size: 9.1rem auto;
    transition: all .2s;
}
.service-faq__box.is-active .service-faq__pet.dog {
    background: url('../img/service02/img_faq_dog02.png') left bottom no-repeat;
    background-size: 10.1rem auto;
    transition: all .2s;
}
.service-faq__btn {
    position: absolute;
    bottom: 1.7rem;
    right: 1.7rem;
    z-index: 3;
    width: 5.7rem;
    height: 5.7rem;
    border-radius: 100%;
}
.service-faq.purple .service-faq__btn {
    background: url('../img/service02/icon_check.svg') #EBDFF0 center no-repeat;
    background-size: 2.3rem auto;
    transition: all .2s;
}
.service-faq.purple .service-faq__box.is-active .service-faq__btn {
    background: url('../img/service02/icon_lightbulb.svg') #82349D center no-repeat;
    background-size: 1.9rem auto;
    transition: all .2s;
}

.service-faq.mint .service-faq__btn {
    background: url('../img/service02/icon_check.svg') #C8F2F0 center no-repeat;
    background-size: 2.3rem auto;
    transition: all .2s;
}
.service-faq.mint .service-faq__box.is-active .service-faq__btn {
    background: url('../img/service02/icon_lightbulb.svg') #23C2BD center no-repeat;
    background-size: 1.9rem auto;
    transition: all .2s;
}
.service-flow__wrap.wrap02 {
    margin-top: 11.8rem;
}

.flow-side__pet.dog01 {
    bottom:11rem;
    left: 0.7rem;
}
.flow-side__pet.dog01 .side-pet__img {
    width: 13.6rem;
}
.flow-side__pet.dog01 .side-pet__text {
    margin-top: -12.9rem;
    margin-left: -10rem;
}

.flow-side__pet.dog02 {
    bottom:15.6rem;
    left: -2.6rem;
}
.flow-side__pet.dog02 .side-pet__img {
    width: 13.6rem;
}
.flow-side__pet.dog02 .side-pet__text {
    margin-top: -10.3rem;
    margin-left: -5.6rem;
}

.service-flow__wrap.wrap02 .flow-info__title {
    background: #fff;
    border: 0.1rem solid #23C2BD;
}

.service-flow.mint .service-flow__wrap.wrap02 .flow-side__title {
    color:  #23C2BD;
    background: #fff;
    border: 0.2rem solid #23C2BD;
}
.service-flow.mint .service-flow__wrap.wrap02 .flow-info__title.mint .info-num {
    color: #fff;
    padding-left: 0.5rem;
}

.service-flow.mint .service-flow__wrap.wrap02 .flow-info__title .info-num span {
    background: #23C2BD;
}
.service-flow.mint .service-flow__wrap.wrap02 .flow-info__title.mint .info-num::before {
    background: transparent;
}
.service-flow.mint .service-flow__wrap.wrap02 .flow-side__title::before {
    background: #fff;
    width: 3.1rem;
    height: 4.4rem;
    clip-path: polygon(0 0,0 100%,3.1rem 50%);
    z-index: 3;
    right: 0.1rem;
}
.service-flow.mint .service-flow__wrap.wrap02 .flow-side__title::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(100%,-50%);
    background: #23C2BD;
    width: 3.2rem;
    height:4.6rem;
    clip-path: polygon(0 0,0 100%,3.4rem 50%);
    z-index: 2;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    .service-top__image {
        width: calc(100% + 4rem);
        margin-left: -2rem;
    }
    .service-top__image img {
        width: 100%;
    }
    .message-box {
        margin-top:4rem;
    }
    .message-box__title {
        font-size: 1.8rem;
        line-height: 1.77;
    }
    .message-box__text {
        margin-top: 3.2rem;
        font-size: 1.4rem;
        line-height: 2;
    }
    .message-box__text p+p {
        margin-top: 0;
    }
    .service-flow {
        margin-top: 10rem;
        padding: 4.8rem 0 6.8rem;
    }
    .service-flow__wrap {
        display: block;
    }
    .service-flow__side {
        position: relative;
        top: 0;
        left: 0;
        z-index: 2;
        width: 33.5rem;
        margin: 0 auto;
    }
    .flow-side__title {
        -webkit-writing-mode: unset;
        -ms-writing-mode:unset;
        writing-mode:unset;
        font-size:1.6rem;
        line-height: 1;
        color: #fff;
        height: 4.524rem;
        width: 100%;
        text-align: center;
    }
    .service-flow.purple .flow-side__title::before {
        content: '';
        position: absolute;
        right: 0;
        top: auto;
        bottom: 0;
        transform: translate(0,100%);
        background: url('../img/service02/icon_arrow_purple_sp.svg')  center no-repeat;
        width: 100%;
        height:1.8rem;
        background-size: auto 100%;
    }
    .service-flow.mint .flow-side__title::before {
        content: '';
        position: absolute;
        right: 0;
        top: auto;
        bottom: 0;
        transform: translate(0,100%);
        background: url('../img/service02/icon_arrow_mint_sp.svg') center no-repeat;
        width: 100%;
        height:1.8rem;
        background-size: auto 100%;
    }
    .flow-side__pet {
        position: absolute;
        z-index: 3;
        transform: translate(0,-100%);
    }
    .flow-side__pet.cat {
        bottom: auto;
        left: auto;
        top: 0.5rem;
        right: 0;
    }
    .flow-side__pet.cat .side-pet__img {
        width: 13.3rem;
    }
    .flow-side__pet .side-pet__text {
        width: 10.8rem;
    }
    .flow-side__pet.cat .side-pet__text {
        margin-top: -5.8rem;
        margin-left: -8rem;
    }
    .service-flow__main {
        width: 100%;
        margin-top: 4.3rem;
    }
    .service-flow__main .flow-item {
        padding: 2.6rem 3.8rem 3.6rem 2.6rem;
    }
    .service-flow__main .flow-item+.flow-item {
        margin-top: 5.7rem;
    }
    .service-flow__main .flow-item::before {
        bottom: -2.2rem;
        left: 0;
    }
    .service-flow__main.purple .flow-item::before {
        width: 100%;
        height: 1.8rem;
    }
    .service-flow__main.mint .flow-item::before {
        width: 100%;
        height: 1.8rem;
    }
    .service-flow__wrap.wrap01 .flow-item:nth-last-child(2)::before {
        content: unset;
    }
    .service-flow__main .flow-item:last-child:before {
        content: unset;
    }
    .service-flow__note {
        font-size: 1.4rem;
        line-height: 1.78;
        letter-spacing:0;
        padding: 2rem 3.2rem;
        margin-top: 4rem;
    }
    
    .flow-item__title {
        font-size: 2rem;
        left: 1.9rem;
        top: -4.3rem;
    }
    .flow-item__box {
        display: block;
        align-items: center;
    }
    .flow-box__image {
        width: 25.5rem;
        margin: 0 auto;
    }
    .flow-box__info {
        margin-top: 1.9rem;
        width:100%;
    }
    
    .flow-info__title {
        width: 100%;
        height: 3.7rem;
    }
    .flow-info__title .info-num {
        font-size: 1.3rem;
        line-height: 2;
    }
    .flow-info__title .info-num span {
        width: 2.8rem;
        height: 2.8rem;
    }
    .flow-info__title .info-num::before {
        width: 3.7rem;
        height: 3.7rem;
    }
    .flow-info__title .info-title {
        font-size: 1.6rem;
        line-height: 1.93;
        letter-spacing: 0.05em;
        padding-left: 1.7rem;
        width: calc(100% - 3.7rem);
    }
    .flow-info__text {
        font-size: 1.4rem;
        letter-spacing: 0;
        margin-top: 1.6rem;
    }
    .service-banner {
        width: 100%;
        height: 24rem;
        position: relative;
        padding-top: 64.26%;
    }
    .service-banner img {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .service-faq {
        display:block;
        width: calc(100% + 4rem);
        margin: 10rem -2rem 0;
        padding: 0;
    }
    .service-faq__side {
        width: 100%;
        position:relative;
        top: 0;
        left: 0;
        z-index: 2;
        text-align: center;
        margin-bottom: 4rem;
    }
    .service-faq__side .faq-side__eng {
        font-size: 1.6rem;
        line-height: 1.31;
        margin-bottom: 0.6rem;
    }
    .service-faq__side .faq-side__jap {
        font-size: 2.8rem;
        font-weight: bold;
        line-height: 1.42;
        -webkit-writing-mode: unset;
        -ms-writing-mode:unset;
        writing-mode: unset;
    }
    .service-faq__main {
        margin-left: 0;
        width: 100%;
    }

    .service-faq__main .swiper {
        overflow: visible;
		margin-left: 1em;
    }

    .service-faq__main .swiper-wrapper {
        display: flex;
        gap: 0;
    }
    .service-faq__main .swiper-button {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .service-faq__main .swiper-button-prev,
    .service-faq__main .swiper-button-next {
        width: 4.1rem;
    }
    .service-faq__main .swiper-pagination {
        margin: 0 1.3rem;
        font-size: 1.4rem;
        font-weight: 500;
        letter-spacing: 0.1em;
    }
    .service-faq__main .swiper-pagination.purple .swiper-pagination-current {
        color: #82349D;
    }
    .service-faq__main .swiper-pagination.mint .swiper-pagination-current {
        color: #23C2BD;
    }
    .service-faq__item {
        width: 34.5rem;
        margin-left:0;
        margin-bottom: 4.7rem;
        padding-left: 0rem;
        margin-right: 0rem;
    }
    .service-faq__box {
        padding: 4.4rem 2.8rem 1.7rem;
        height: 36.5rem;
        width: 100%;
    }
    
    .service-flow__wrap.wrap02 {
        margin-top: 19rem;
    }
    
    .flow-side__pet.dog01 {
        bottom:2rem;
        left: auto;
        right: 0;
        transform: translate(0);
    }
    .flow-side__pet.dog01 .side-pet__img {
        width: 9.7rem;
    }
    .flow-side__pet.dog01 .side-pet__text {
        margin-top: -5.2rem;
        margin-left: -10rem;
    }
    
    .flow-side__pet.dog02 {
        bottom:2.3rem;
        left: auto;
        right: 0;
        transform: translate(0);
    }
    .flow-side__pet.dog02 .side-pet__img {
        width: 9.7rem;
    }
    .flow-side__pet.dog02 .side-pet__text {
        margin-top: -6.5rem;
        margin-left: -11.2rem;
    }
    
    .service-flow.mint .service-flow__wrap.wrap02 .flow-side__title::before {
        width: 3.2rem;
        height: 1.8rem;
        clip-path: polygon(0 0,50% 100%,100% 0);
        left: 50%;
        transform: translate(-50%,100%);
        bottom: 0.1rem;
    }
    .service-flow.mint .service-flow__wrap.wrap02 .flow-side__title::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: 0;
        transform: translate(-50%,100%);
       width: 3.5rem;
       height: 2rem;
        clip-path: polygon(0 0,50% 100%,100% 0);
    }
    .service-flow.mint .service-flow__wrap.wrap02 .flow-info__title.mint .info-num {
        padding-left: 0.3rem;
    }
    
    
}


/* !私たちの想い
---------------------------------------------------------- */
#vision #contents {
    padding-top: 0;
}

.vision-area {
    display: flex;
    margin-top: 12.2rem;
}

.vision-main {
    width:55rem;
    padding-left: 3.7rem;
    margin-right: 9.1rem;
}
.vision-title {
    font-size: 4.6rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    line-height: 1.43;
}
.vision-title span {
    color: #8B31AA;
    display: inline-flex;
    align-items: center;
    flex-direction: column;
}
.vision-title span::after {
    content: '';
    width: 0.8rem;
    height: 0.8rem;
    background: #C49AD3;
    border-radius: 100%;
}
.vision-main__info {
    font-size: 1.4rem;
    color: #313131;
    line-height: 2.85;
    margin-top: 4rem;
}
.vision-main__info p+p {
    /*margin-top: 4.3rem;*/
}
.vision-manage {
    text-align: right;
    margin-top: 2rem;
    color: #313131;
}
.vision-manage .post {
    font-size: 1.4rem;
    letter-spacing: .08em;
    line-height: 1.35;
}
.vision-manage .name {
    font-size: 2.6rem;
    letter-spacing: 0.08em;
    line-height: 1.34;
    font-weight: 500;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    margin-top: 1rem;
}
.vision-side {
    position: relative;
    margin-top: 13rem;
    width: calc(100% - 64.1rem);
}
.vision-side img {
    width: 100%;
}
.vision-side__img01 {
    width: 35.3rem;
}
.vision-side__img02 {
    width: 51.8rem;
    margin: -4.9rem -9.1rem 0 9.1rem;
}
.vision-pet {
    /* position: absolute; */
    width: 20.9rem;
    position: relative;
    margin-top: -2.7rem;
    margin-left: 19.5rem;
    z-index: 2;
}

.vision-pet .pet-dog {
    width: 20.5rem;
}
.dog-footprint {
    position: absolute;
    top: 0;
    left: 50%;
    /* transform: translateX(-50%); */
    z-index: 3;
}

.vision-pet .footprint01 {
    position: absolute;
    width: 4.7rem;
    top: -51rem;
    left: 0;
    margin-left: -27.6rem;
    z-index: 3;
}
.vision-pet .footprint02 {
    position: absolute;
    width: 4.5rem;
    top: -45.2rem;
    left: 0;
    margin-left: -12.8rem;
    z-index: 3;
}
.vision-pet .footprint03 {
    position: absolute;
    width: 4.8rem;
    left: 0;
    top: -49.5rem;
    z-index: 3;
}
.vision-pet .footprint04 {
    position: absolute;
    width: 3.7rem;
    top: -38rem;
    margin-left: 2rem;
    left: 0;
    z-index: 3;
}
.vision-pet .footprint05 {
    position: absolute;
    width: 4.2rem;
    top: -38.8rem;
    margin-left: 15rem;
    z-index: 3;
}
.vision-pet .footprint06 {
    position: absolute;
    width: 3.4rem;
    left: 0;
    top: -28rem;
    margin-left: 16rem;
    z-index: 3;
}
.vision-pet .footprint07 {
    position: absolute;
    width: 3rem;
    top: -19rem;
    margin-left: 23.5rem;
    left: 0;
    z-index: 3;
}
.vision-pet .footprint08 {
    position: absolute;
    width: 3.2rem;
    top: -12.4rem;
    left: 0;
    margin-left: 12rem;
    z-index: 3;
}
.vision-pet .footprint09 {
    position: absolute;
    width: 3.3rem;
    top: -4.2rem;
    left: 0;
    margin-left: 17rem;
    z-index: 3;
}

.footprint01,
.footprint02,
.footprint03,
.footprint04,
.footprint05,
.footprint06,
.footprint07,
.footprint08,
.footprint09,
.pet-dog {
    visibility: hidden;
    opacity: 0;
    transition: .6s ease;
}

.footprint01 {
    transition-delay: .3s;
}

.footprint02 {
    transition-delay: .6s;
}

.footprint03 {
    transition-delay: .9s;
}

.footprint04 {
    transition-delay: 1.2s;
}

.footprint05 {
    transition-delay: 1.5s;
}

.footprint06 {
    transition-delay: 1.8s;
}

.footprint07 {
    transition-delay: 2.1s;
}

.footprint08 {
    transition-delay: 2.4s;
}

.footprint09 {
    transition-delay: 2.7s;
}

.pet-dog {
    transition-delay: 3s;
}

.animated .footprint01,
.animated .footprint02,
.animated .footprint03,
.animated .footprint04,
.animated .footprint05,
.animated .footprint06,
.animated .footprint07,
.animated .footprint08,
.animated .footprint09,
.animated .pet-dog {
    visibility: visible;
    opacity: 1;
}



.vision-wrap{
    padding-bottom: 13.9rem;
    width: 100%;
    margin-top:8.3rem;
    overflow: hidden;
}
.vision-list {
    display: flex;
}

.vision-list ul {
    display: flex;
    align-items: center;
}

.vision-list ul li {
    margin-right: 2.7rem;
    word-break: keep-all;
    white-space: nowrap;
}

.vision-list ul:nth-child(odd) {
    animation-name: image-loop-left1;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.vision-list ul:nth-child(even) {
    animation-name: image-loop-left2;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes image-loop-left1 {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }

}


@keyframes image-loop-left2 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-200%);
    }

}
.vision-wrap .slide{
    display:flex;
    align-items: center;
}

.vision-wrap .img {
    width: 17.1rem;
    border-radius: 4.7rem;
    overflow: hidden;
    margin: 0 2.15rem;
} 
.vision-wrap .info {
     font-family: 'Roboto', sans-serif;
     font-size: 10.4rem;
     letter-spacing: 0.08em;
     font-style: italic;
     line-height: 1.32;
     color: #F7F2F8;
     text-transform: uppercase; 
}

.vision-list.list02 {
    transform: rotate(180deg);
}

.vision-list.list02 .slide {
    transform: rotate(180deg);
}

.vision-services {
    padding-top: 8.2rem;
    border-top: 0.1rem solid #CECECE;
}
.vision-services .vision-services__title {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1.466;
    margin-bottom: 7rem;
}
.vision-services .vision-services__title font {
    color: #82349D;
}
.vision-services .vision-services__title .en-font {
    display: block;
    font-size: 1.5rem;
    line-height: 2;
    letter-spacing: .1em;
    font-weight: 500;
    color: #C3C3C3;
    margin-top: 0.5rem;
}
.vision-services__list {
    display: flex;
    margin-left: -3rem;
}
.vision-list__item {
    width: calc(33.33% - 3rem);
    margin-left: 3rem;
}
.vision-list__item a {
    display: block;
    width: 100%;
    padding-top: 79.15%;
    position: relative;
}
.vision-list__item img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vision-box {
    width: 31.2rem;
    height: 11.1rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0.4rem 0.7rem 1rem rgba(0,0,0,0.13);
    padding: 0 2.8rem;
    transform: translateY(-50%);
    position: relative;
    z-index: 4;
    background: #FFFFFF;
}
.vision-box::before {
    content: '';
    position: absolute;
    right: 2.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 100%;
    border: 0.1rem solid #B2B2B2;
    background: url('../img/vision/icon_link_gray.svg') center no-repeat #F7F2F8;
    background-size: 1.6rem auto;
    transition: all .5s;
}
.vision-list__item:hover .vision-box::before {
    content: '';
    position: absolute;
    right: 2.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 100%;
    background: url('../img/vision/icon_link_white.svg') center no-repeat #8B31AA;
    background-size: 1.6rem auto;
    border: 0.1rem solid #8B31AA;
    transition: all .5s;
}
.vision-box__name {
    color: #82349D;
    font-size: 2rem;
    letter-spacing: 0.05em;
    line-height: 1.2;
    font-weight: bold;
}
.vision-box__capacity {
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    line-height: 1.84;
    color: #848484;
    font-weight: 500;
    margin-top: 0.5rem;
}
/*** スマãƒ320px ~ 767px***/
@media screen and (max-width: 767px) {
    .vision-area {
        display: block;
        max-width: 35.5rem;
        width: 100%;
        margin: 6.2rem auto 0;
    }
    
    .vision-main {
        width:100%;
        padding-left:0;
        margin-right:0;
    }
    .vision-title {
        font-size: 2.5rem;
        letter-spacing: 0;
        line-height: 1.4;
    }
    .vision-title span::after {
        width: 0.4rem;
        height: 0.4rem;
        background: #C49AD3;
        border-radius: 100%;
    }
    .vision-main__info {
        line-height: 2;
        margin-top: 2.8rem;
    }
    .vision-main__info p+p {
        margin-top: 2rem;
    }
    .vision-manage {
        text-align: left;
    }
    .vision-manage .post {
        font-size: 1.3rem;
        font-weight: 400;
    }
    .vision-manage .name {
        font-size: 2.1rem;
    }
    .vision-side {
        position: relative;
        margin-top: 5.5rem;
        width: 100%;
    }
    .vision-side__img01 {
        width:21.7rem;
        margin-left: -2rem;
    }
    .vision-side__img02 {
        width: 32rem;
        margin: -1.6rem -2rem 0 3.5rem;
    }
    .vision-pet {
        width: 16.1rem;
        position: relative;
        margin-top: -6rem;
        margin-left: 11.1rem;
    }
    .vision-pet .pet-dog {
        width: 16.1rem;
    }
    .dog-footprint02 {
        position: relative;
    }
    .dog-footprint02 .footprint01 {
        position: absolute;
        width: 2.5rem;
        top:-4.2rem;
        left: auto;
        right: 0;
        margin-left: 0rem;
        margin-right: 11.2rem;
        z-index: 3;
    }
    .dog-footprint02 .footprint02 {
        position: absolute;
        width: 2.28rem;
        top: -2.9rem;
        left: auto;
        right: 0;
        margin-left:0;
        margin-right: 3rem;
        z-index: 3;
    }
    .dog-footprint02 .footprint03 {
        position: absolute;
        width: 2.3rem;
        left: auto;
        right: 0;
        top: 5.3rem;
        z-index: 3;
        margin-right: 4.6rem;
    }
    .dog-footprint02 .footprint04 {
        position: absolute;
        width: 2.6rem;
        left: auto;
        right: 0;
        top: 11.2rem;
        z-index: 3;
        margin-right: -2rem;
    }
    .dog-footprint {
        position: absolute;
        top: 0;
        left: 50%;
        /* transform: translateX(-50%); */
        z-index: 3;
    }

    .vision-pet .footprint01 {
        position: absolute;
        width: 3rem;
        top: -23.8rem;
        margin-left: 12.2rem;
        z-index: 3;
    }
    .vision-pet .footprint02 {
        width: 2.6rem;
        top:-17.9rem;
        margin-left: 5.9rem;
        z-index: 3;
    }
    .vision-pet .footprint03 {
        width: 2.6rem;
        top: -9.5rem;
        margin-left: 10.5rem;
    }
    .vision-pet .footprint04 {
        position: absolute;
        width: 2.8rem;
        top: -6.8rem;
        margin-left: 5.5rem;
    }
    .vision-pet .footprint05 {
        position: absolute;
        width: 2.28rem;
        top:4rem;
        margin-left: 8rem;
        left: 0;
        z-index: 3;
    }

    .vision-pet .pet-dog {
        transition-delay: 1.8s;
    }
    
    .vision-wrap{
        padding-bottom: 6.4rem;
        margin-top:5.7rem;
    }
    
    .vision-wrap .img {
        width: 8.3rem;
        border-radius: 4.7rem;
        margin: 0 1rem;
    } 
    .vision-wrap .info {
         font-size: 4.8rem;
    }
    
    
    .vision-services {
        padding-top: 5.7rem;
    }
    .vision-services .vision-services__title {
        font-size: 2.8rem;
        font-weight: bold;
        line-height: 1.42;
        margin-bottom: 3.6rem;
    }
    .vision-services .vision-services__title .en-font {
        font-size: 1.6rem;
        line-height: 1.31;
    }
    .vision-services__list {
        display: block;
        margin-left: 0;
    }
    .vision-list__item {
        width: 100%;
        margin-left: 0;
    }
    .vision-list__item+.vision-list__item  {
        margin-top: 3.2rem;
    }
    .vision-box {
        width: 100%;
        height:9.77rem;
        box-shadow: 0.4rem 0.7rem 1rem rgba(0,0,0,0.13);
        padding: 0 2.5rem;
        transform: translateY(0);
        position: relative;
    }
    .vision-box::before {
        right: 2.5rem;
        width: 3.2rem;
        height: 3.2rem;
        background-size: 1.4rem auto;
    }
    .vision-list__item:hover .vision-box::before {
        content: unset;
    }
    .vision-box__name {
        font-size: 1.8rem;
    }
}


/* !ホームページ
---------------------------------------------------------- */

.top-head {
    display: flex;
    align-items: flex-end;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .1em;
    margin-bottom: 5rem;
}

.top-head h2 {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.5;
    margin-right: 4.5rem;
}

.top-head h2 .en-font {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: #B2B2B2;
    display: block;
    margin-bottom: 1.3rem;
}

.top-news {
    padding: 12.4rem 0 13.7rem;
    position: relative;
    z-index: 2;
    display: flex;
}

.top-news__head {
    width: 36rem;
    padding-left: 15rem;
}

.top-news__body {
    width: calc(100% - 36rem);
}

.top-news-links {
    display: flex;
    align-items: center;
}

.top-news-links .news-link a {
    display: flex;
    justify-content: center;
    align-items: center;
    border: .1rem solid #707070;
    border-bottom: 0;
    border-radius: 1rem 1rem 0 0;
    width: 18.3rem;
    height: 4.8rem;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .05em;
    color: #313131;
}

.top-news-links .news-link a:after {
    background: url(../img/common/icon_arrow_link_black.svg) center center no-repeat;
    background-size: cover;
    width: 1.656rem;
    height: .697rem;
    display: block;
    margin-left: 2rem;
    content: '';
    transition: .5s ease;
}

.top-news-links .news-link a:hover {
    background: #313131;
    border-color: #313131;
    text-decoration: none;
    color: #fff;
}

.top-news-links .news-link a:hover:after {
    background-image: url(../img/common/icon_arrow_link_white.svg);
    transition: .5s ease;
}

.top-news-links .news-categorys {
    margin-bottom: 0;
    justify-content: flex-start;
}
.top-news-links .news-categorys li a {
    font-size: 1.4rem;
    padding: 0 3.5rem;
}

.top-news-pet {
    position: absolute;
    width: 20.25rem;
    height: 19.95rem;
    bottom: 0rem;
    left: -7.3rem;
    z-index: 2;
}

.top-news-pet .top-news-pet__said {
    position: absolute;
    width: 17.9rem;
    height: 11.5rem;
    top: -4.2rem;
    left: 100%;
    margin-left: -2rem;
    z-index: 3;
}

.top-news-pet img {
    width: 100%;
}

.top-news-circle {
    width: 105.65rem;
    height: 105.65rem;
    position: absolute;
    right: 81.4rem;
    bottom: -53rem;
}


.top-service {
    width: 100%;
    background: #F4F4F4;
    position: relative;
    z-index: 3;
    overflow: hidden;
}

.top-service__inner {
    padding: 11rem 0 6rem;
    max-width: 100rem;
    margin: 0 auto;
}

.top-service-list {
    width: calc(100% + (50vw - 50rem));
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
}

.top-service-list .top-service-list__item a {
    width: 100%;
    position: relative;
    display: block;
    color: #fff;
}

.top-service-list .top-service-list__item a:hover {
    text-decoration: none;
}

.top-service-list .top-service-list__item a figure {
    width: 100%;
    padding-top: 133.157%;
    position: relative;
    display: block;
    z-index: 1;
    overflow: hidden;
}

.top-service-list .top-service-list__item a figure img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: .5s ease;
}

.top-service-list .top-service-list__item a:hover figure img {
    transform: scale(1.08);
    transition: .5s ease;
}

.top-service-list .top-service-list__item a figure:after {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    content: '';
    background: url(../img/top/bg_top_service.png) center center no-repeat;
    background-size: 100% 100%;
	mix-blend-mode: multiply;
}

.top-service-list .top-service-box {
    position: absolute;
    width: 100%;
    padding: 3.3rem;
    left: 0;
    bottom: 0;
    z-index: 2;
    font-size: 1.3rem;
    line-height: 1.5;
}

.top-service-list .top-service-box__title {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.42875;
    margin-bottom: 1.3rem;
}

.top-service-list .top-service-box__link {
    text-align: right;
    margin-top: 1rem;
}

.top-service-list .top-service-box__link span {
    display: inline-flex;
    border-bottom: .1rem solid #fff;
    padding: 0 3rem 1rem 0;
    font-size: 1.4rem;
    letter-spacing: .05em;
    line-height: 1.5;
    background: url(../img/common/icon_arrow_right_small_white.svg) right center no-repeat;
    background-size: 2rem auto;
    transition: .5s ease;
}

.top-service-list .top-service-list__item a:hover .top-service-box__link span {
    background-image: url(../img/common/icon_arrow_right_small_purple.svg);
    transition: .5s ease;
}

.top-text-loop {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.top-text-loop .text-loop {
    display: flex;
    width: 100%;
    justify-content: center;
}

.top-text-loop .text-loop ul {
    display: flex;
    align-items: center;
}

.top-text-loop .text-loop li {
    word-break: keep-all;
    white-space: nowrap;
    font-size: 12rem;
    padding-top: 5rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-style: italic;
    color: #fff;
    letter-spacing: .08em;
    line-height: 1.318;
    text-transform: uppercase;
}

.top-image-loop {
    width: 100%;
    height: 44.4rem;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: -4rem;
}

.top-image-loop .image-loop {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    display: flex;
}

.top-image-loop .image-loop ul {
    display: flex;
    align-items: center;
}

.top-image-loop .image-loop li {
    min-width: 59.8rem;
}

.top-image-loop .image-loop ul:nth-child(odd) {
    animation-name: image-loop-left1;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.top-image-loop .image-loop ul:nth-child(even) {
    animation-name: image-loop-left2;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.top-lineup {
    padding-top: 14.3rem;
    overflow: hidden;
    width: 100%;
}

.top-lineup .top-lineup__inner {
    width: calc(100% + (50vw - 60rem));
}

.top-lineup .lineup-wrap {
    margin-top: 0;
    padding-bottom: 0;
}

.top-lineup .lineup-wrap .heading-hdl {
    text-align: left;
}

.top-lineup .lineup-wrap .heading-hdl .con {
    padding: 0 7rem 5rem 0;
    width: auto;
}

.top-lineup-list {
    margin-bottom: 6.7rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5rem;
}

.top-lineup-list .top-lineup-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 18rem;
    padding: 2.2rem 1rem 1.5rem;
    position: relative;
}

.top-lineup-list .top-lineup-item:after {
    width: 0;
    height: 0;
    border-width: 1.7rem;
    border-style: solid;
    border-color: #fff #fff transparent transparent;
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

.top-lineup-list .top-lineup-item.bg-lineup01 {
    background: #CFEEF4;
}

.top-lineup-list .top-lineup-item.bg-lineup02 {
    background: #CFF2DB;
}

.top-lineup-list .top-lineup-item.bg-lineup03 {
    background: #ECEBE5;
}

.top-lineup-list .top-lineup-item figure {
    display: block;
    position: relative;
    z-index: 2;
    width: 14.5rem;
    height: 14.5rem;
    margin-right: 2rem;
}

.top-lineup-list .top-lineup-item figure img {
    width: 100%;
}

.top-lineup-list .top-lineup-item figure:after {
    width: 10.9rem;
    height: 10.9rem;
    background: #fff;
    position: absolute;
    top: -.2rem;
    right: -.3rem;
    content: '';
    border-radius: 100%;
    z-index: -1;
}

.top-lineup-list .top-lineup-item .top-lineup-box {
    width: calc(100% - 16.5rem);
}

.top-lineup-list .top-lineup-name {
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: .07em;
    line-height: 1.23;
    font-family: 'Figtree', sans-serif;
    display: flex;
    align-items: center;
}

.top-lineup-list .top-lineup-name span {
    font-size: 1.4rem;
    line-height: 1;
    display: block;
    margin-left: .6rem;
}

.top-lineup-list .top-lineup-link {
    margin-top: 1.4rem;
}

.top-lineup-list .top-lineup-link a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 13rem;
    height: 3.2rem;
    border-radius: 1.6rem;
    border: .1rem solid #B2B2B2;
    background: #fff;
    font-size: 1.1rem;
    letter-spacing: .08em;
    color: #313131;
    line-height: 1.5;

}

.top-lineup-list .top-lineup-item:hover .top-lineup-link a {
    text-decoration: none;
    background: #313131;
    border-color: #313131;
    color: #fff;
}

.top-lineup-list .top-lineup-link a:after {
    width: 1.656rem;
    height: .697rem;
    background: url(../img/common/icon_arrow_submit_gary.svg) center center no-repeat;
    background-size: cover;
    display: block;
    margin-left: 1rem;
    content: '';
    transition: .5s ease;
}

.top-lineup-list .top-lineup-item:hover .top-lineup-link a:after {
    background-image: url(../img/common/icon_arrow_submit_white.svg);
    transition: .5s ease;
}


.top-lineup .petfood-list .petfood-list__item {
    padding: 5.1rem;
}

.top-lineup .petfood-list .petfood-box {
    width: 43.6rem;
    height: auto;
    padding: 4.5rem 4rem 6rem;
    font-size: 1.4rem;
    line-height: 2;
    text-align: left;
}

.top-lineup .petfood-list .petfood-box .brand-logo {
    margin-top: 0;
}

.top-lineup .petfood-list .petfood-box .brand-name {
    margin: 3rem 0;
    font-size: 1.4rem;
    font-family: 'Figtree', sans-serif;
    line-height: 1.214;
    font-weight: bold;
    letter-spacing: .07em;
}

.top-lineup .petfood-list .petfood-box .brand-link a {
    width: 19.5rem;
    height: 5.2rem;
    background-position: right 2.4rem center;
    background-size: 1.175rem auto;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    .top-head {
        display: block;
        font-weight: 500;
    }

    .top-head h2 {
        font-size: 2.8rem;
        font-weight: bold;
        margin: 0;
    }

    .top-head h2 .en-font {
        font-size: 1.6rem;
        line-height: 1.1875;
        margin-bottom: .6rem;
    }

    .top-head h2 + p {
        margin-top: 1.7rem;
    }

    .top-news {
        padding: 7.5rem 0 8rem;
        display: block;
        width: calc(100% + 4rem);
        margin: 0 -2rem;
        overflow: hidden;
    }

    .top-news__head {
        width: 100%;
        padding: 0 2rem;
    }

    .top-news__body {
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
    }


    .top-news-links {
        display: block;
        margin-top: 5rem;
        text-align: center;
    }

    .top-news-links .news-link a {
        display: inline-flex;
        border-bottom: .1rem solid #707070;
        border-radius: 2.6rem;
        width: 19rem;
        height: 5rem;
        font-size: 1.4rem;
    }

    .top-news-links .news-link a:after {
        margin-left: 1.6rem;
    }

    .top-news-links .news-link a:hover {
        background: #fff;
        border-color: #707070;
        color: #313131;
    }

    .top-news-links .news-link a:hover:after {
        background-image: url(../img/common/icon_arrow_link_black.svg);
    }

    .top-news-links .news-categorys {
        display: none;
    }

    .top-news-pet {
        position: absolute;
        width: 9.4rem;
        height: 9rem;
        top: 9.4rem;
        right: 1.6rem;
        bottom: unset;
        left: unset;
        transform: scaleX(-1);
    }

    .top-news-pet .top-news-pet__said {
        width: 8rem;
        height: 5.7rem;
        top: -2rem;
        right: -6.8rem;
        left: unset;
        margin-left: 0;
    }

    .top-news-pet .top-news-pet__said img {
        width: 100%;
        transform: scaleX(-1);
    }

    .top-news-pet img {
        width: 100%;
    }

    .top-news-circle {
        width: 39.6rem;
        height: 39.6rem;
        right: -19.3rem;
        bottom: unset;
        top: 0;
    }

    .top-service__inner {
        padding: 7rem 0 3rem;
    }

    .top-service-list {
        width: 100%;
        display: block;
    }

    .top-service-list .top-service-list__item + .top-service-list__item {
        margin-top: 2.3rem;
    }

    .top-service-list .top-service-list__item a figure {
        padding-top: 80.507%;
    }

    .top-service-list .top-service-list__item a:hover figure img {
        transform: scale(1);
    }

    .top-service-list .top-service-list__item a figure:after {
        background-image: url(../img/top/bg_top_service_sp.png);
    }

    .top-service-list .top-service-box {
        padding: 2.2rem 2.2rem 2.7rem;
    }

    .top-service-list .top-service-box__title {
        font-size: 1.8rem;
        line-height: 1.44;
        margin-bottom: .9rem;
    }

    .top-service-list .top-service-box__link {
        text-align: right;
        margin-top: 0;
    }

    .top-service-list .top-service-box__link span {
        padding: 0 2.5rem .4rem 0;
    }

    .top-service-list .top-service-list__item a:hover .top-service-box__link span {
        background-image: url(../img/common/icon_arrow_right_small_white.svg);
    }


    .top-text-loop .text-loop li {
        font-size: 4.9rem;
        line-height: 1;
        text-align: center;
    }

    .top-image-loop {
        height: 18rem;
        margin-top: -.5rem;
    }

    .top-image-loop .image-loop li {
        min-width: 24.1rem;
    }


    .top-lineup {
        padding-top: 7.4rem;
    }

    .top-lineup .top-lineup__inner {
        width: 100%;
    }

    .top-lineup .lineup-wrap {
        width: calc(100% + 4rem);
        margin: 0 -2rem;
        padding-bottom: 1.4rem;
    }

    .top-lineup .lineup-wrap .heading-hdl {
        text-align: center;
    }

    .top-lineup .lineup-wrap .heading-hdl .con {
        padding: 0 0 .5rem;
    }

    .top-lineup-list {
        margin-bottom: 6rem;
        display: block;
    }

    .top-lineup-list .top-lineup-item {
        padding: 2.2rem 0 1.4rem;
        margin-bottom: 3rem;
    }

    .top-lineup-list .top-lineup-item:after {
        border-width: 1.5rem;
    }

    .top-lineup-list .top-lineup-item figure {
        margin-right: 3.4rem;
    }

    .top-lineup-list .top-lineup-item figure:after {
        right: -1.2rem;
    }

    .top-lineup-list .top-lineup-item .top-lineup-box {
        width: calc(100% - 17.9rem);
    }

    .top-lineup-list .top-lineup-name {
        flex-wrap: wrap;
    }

    .top-lineup-list .top-lineup-name span {
        margin-left: 0;
    }

    .top-lineup-list .top-lineup-item:hover .top-lineup-link a {
        background: #fff;
        border-color: #B2B2B2;
        color: #313131;
        opacity: 1;
    }

    .top-lineup-list .top-lineup-item:hover .top-lineup-link a:after {
        background-image: url(../img/common/icon_arrow_submit_gary.svg);
    }


    .top-lineup .petfood-list {
        width: calc(100% + 4rem);
        margin: 0 -2rem;
    }

    .top-lineup .petfood-list .petfood-list__item {
        padding: 73.6vw 2rem 5.4rem;
    }

    .top-lineup .petfood-list .petfood-list__item + .petfood-list__item {
        margin-top: 5.8rem;
    }

    .top-lineup .petfood-list .petfood-box {
        width: 100%;
        padding: 4rem 2rem;
    }

    .top-lineup .petfood-list .petfood-box .brand-name {
        margin: 1.5rem 0 2rem;
        font-size: 1.6rem;
        line-height: 1.857;
        text-align: center;
    }
}


/* !アニメーション
---------------------------------------------------------- */
.wow {
    opacity: 0;
}

.animated {
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-fill-mode: cubic-bezier(0.215, 0.61, 0.355, 1 );
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1 );
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
            transform: translate3d(-20%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
            transform: translate3d(-20%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
            transform: translate3d(20%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
            transform: translate3d(20%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
            transform: translate3d(0, 20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
            transform: translate3d(0, 20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
            transform: translate3d(0, -20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
            transform: translate3d(0, -20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
}


.mw_wp_form_confirm .contact-area {
    flex-direction: column;
    align-items: center;
}

.mw_wp_form_confirm .contact-area .contact-checklist {
    width: 59.5rem;
}

.mw_wp_form_confirm .checklist-area {
    background: none;
    border-radius: 0;
    width: 100%;
    padding: 0;
}

.mw_wp_form_confirm .contact-agree {
    display: none;
}


.mw_wp_form .horizontal-item + .horizontal-item {
    margin: 0 !important;
}

.thanks-tel a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.9rem;
    letter-spacing: .07em;
    color: #82349D;
    font-weight: 500;
    line-height: 1;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.thanks-tel a:before {
    display: block;
    width: 3.1rem;
    height: 3.1rem;
    background: url(../img/common/icon_feather_phone_call.svg) center center no-repeat;
    background-size: cover;
    content: '';
    margin-right: 1.4rem;
}

/*** スマホ 320px ~ 767px***/
@media screen and (max-width: 767px) {
    .mw_wp_form_confirm .contact-area .contact-checklist {
        width: 100%;
        margin-bottom: 0;
    }

    .mw_wp_form_confirm .checklist-area {
        padding: 0;
    }

    .mw_wp_form_confirm .contact-agree {
        display: none;
    }

    .thanks-tel {
        margin-top: 2.4rem !important;
    }

    .thanks-tel a {
        font-size: 3.5rem;
    }

    .thanks-tel a:before {
        width: 2.9rem;
        height: 2.9rem;
        margin-right: 0.9rem;
    }
}







/* WARM custom header fix */
.header-logo {
    width: auto !important;
    min-width: 0;
    flex: 0 0 auto;
}
.header-brand {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    text-decoration: none;
}
.header-brand img {
    display: block;
    width: auto;
    height: 6.8rem;
    max-height: none;
    object-fit: contain;
}
.header-brand__text {
    display: inline-block;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    color: #222;
    white-space: nowrap;
}
#header {
    justify-content: space-between !important;
    gap: 2rem;
}
#g-navi {
    margin-left: auto;
}
#g-navi > ul {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
#g-navi > ul > li {
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto;
}
#g-navi > ul > li > a {
    padding: 0 0.9rem;
    white-space: nowrap;
}
#g-navi > ul > li > a.icon-mail {
    padding-left: 3rem;
}
@media screen and (max-width: 767px) {
    #header {
        height: 8rem !important;
        padding: 0 1.2rem !important;
    }
    .header-brand {
        gap: 0.8rem;
    }
    .header-brand img {
        height: 5.6rem;
    }
    .header-brand__text {
        font-size: 1.6rem;
    }
    #g-navi {
        top: 8rem !important;
        height: calc(100vh - 8rem) !important;
    }
    #g-navi > ul {
        display: block;
    }
    #g-navi > ul > li > a {
        padding: 1.8rem 1.5rem;
    }
}


/* hide legacy scroll sns */
.scroll-sns{display:none !important;}


/* footer unified vertical links */
#footer .footer-box .footer-box__navi {
    width: 28rem;
    display: block;
}
#footer .footer-box .footer-box__navi > ul {
    width: 100%;
}
#footer .footer-box .footer-box__navi > ul > li {
    display: block;
}
#footer .footer-box .footer-box__navi > ul > li + li {
    margin-top: 1.6rem;
}
#footer .footer-box .footer-box__navi .sub-menu {
    display: none;
}
@media screen and (max-width: 767px) {
    #footer .footer-box .footer-box__navi {
        width: 100%;
        padding: 0 1.7rem 4rem;
    }
    #footer .footer-box .footer-box__navi > ul > li + li {
        margin-top: 1.2rem;
    }
}