body {
    margin: 0;
    padding: 0;
    border: none
}

img,div,p,blockquote,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,form,fieldset,textarea,address,main,article,aside,dialog,figure,footer,header,hgroup,nav,section {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    text-decoration: none;
    list-style-type: none
}

main,article,aside,dialog,figure,footer,header,hgroup,nav,section {
    display: block
}

h1,h2,h3,h4,h5,h6 {
    font-weight: inherit
}

table {
    border: none;
    border-collapse: collapse;
    border-spacing: 0
}

th,td {
    text-align: left;
    vertical-align: top
}

caption {
    text-align: left
}

a,a:focus,a:hover,a:active {
    outline: 0
}

input,input:focus,input:hover,input:active,textarea,textarea:focus,textarea:hover,textarea:active {
    outline: 0
}

img {
    vertical-align: top
}

html {
    font-size: 10px;
    scroll-behavior: auto;
}

@media only screen and (min-width: 1600px) {
    html {
        font-size:12.5px
    }
}

body {
    background: #e8e8e8;
    color: #231815;
    font-family: "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: .04em;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media only screen and (max-width: 1023px) {
    html {
        font-size:2.5642vw
    }

    body {
        line-height: 1.7143
    }
}

::-moz-selection {
    background: #9ab49f;
    color: #fff
}

::selection {
    background: #9ab49f;
    color: #fff
}

a {
    color: inherit
}

img {
    width: 100%;
    height: auto
}

input[type=text],input[type=tel],input[type=email],input[type=password],textarea {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #231815;
    font-family: "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

input[type=text]::placeholder,input[type=text]:placeholder-shown,input[type=text]::-webkit-input-placeholder,input[type=text]:-moz-placeholder,input[type=text]::-moz-placeholder,input[type=text]:-ms-input-placeholder,input[type=tel]::placeholder,input[type=tel]:placeholder-shown,input[type=tel]::-webkit-input-placeholder,input[type=tel]:-moz-placeholder,input[type=tel]::-moz-placeholder,input[type=tel]:-ms-input-placeholder,input[type=email]::placeholder,input[type=email]:placeholder-shown,input[type=email]::-webkit-input-placeholder,input[type=email]:-moz-placeholder,input[type=email]::-moz-placeholder,input[type=email]:-ms-input-placeholder,input[type=password]::placeholder,input[type=password]:placeholder-shown,input[type=password]::-webkit-input-placeholder,input[type=password]:-moz-placeholder,input[type=password]::-moz-placeholder,input[type=password]:-ms-input-placeholder,textarea::placeholder,textarea:placeholder-shown,textarea::-webkit-input-placeholder,textarea:-moz-placeholder,textarea::-moz-placeholder,textarea:-ms-input-placeholder {
    color: #ccc
}

input::-ms-clear {
    visibility: hidden
}

input::-ms-reveal {
    visibility: hidden
}

select {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #231815;
    font-family: "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    outline: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

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

button {
    box-sizing: border-box;
    outline: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.symbols {
    display: none;
    position: absolute;
    top: 0;
    left: 0
}

#wrapper {
    position: relative;
    z-index: 1;
    background: #ffffff
}

#wrapper::before {
    content: "";
    display: block;
    position: fixed;
    inset: 0 0 auto;
    z-index: 0;
    height: 100lvh;
    opacity: .2
}

.ps__rail-x,.ps__rail-y {
    display: none !important
}

@font-face {
    font-family: "swiper-icons";
    src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box;
}

.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper {
    transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
    touch-action: pan-y;
}

.swiper-vertical {
    touch-action: pan-x;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden;
}

.swiper-autoheight,.swiper-autoheight .swiper-slide {
    height: auto;
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform,height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper::before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop:always}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    -webkit-margin-start: var(--swiper-centered-offset-before);
    margin-inline-start:var(--swiper-centered-offset-before)}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper: :before {
    height:100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    -webkit-margin-before: var(--swiper-centered-offset-before);
    margin-block-start:var(--swiper-centered-offset-before)}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper: :before {
    width:100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0,0,0,.15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: rgba(0,0,0,0)
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
    -webkit-animation: swiper-preloader-spin 1s infinite linear;
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@-webkit-keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.ps {
    overflow: hidden !important;
    overflow-anchor: none;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto
}

.ps__rail-x {
    display: none;
    opacity: 0;
    transition: background-color .2s linear,opacity .2s linear;
    -webkit-transition: background-color .2s linear,opacity .2s linear;
    height: 15px;
    bottom: 0px;
    position: absolute
}

.ps__rail-y {
    display: none;
    opacity: 0;
    transition: background-color .2s linear,opacity .2s linear;
    -webkit-transition: background-color .2s linear,opacity .2s linear;
    width: 15px;
    right: 0;
    position: absolute
}

.ps--active-x>.ps__rail-x,.ps--active-y>.ps__rail-y {
    display: block;
    background-color: transparent
}

.ps:hover>.ps__rail-x,.ps:hover>.ps__rail-y,.ps--focus>.ps__rail-x,.ps--focus>.ps__rail-y,.ps--scrolling-x>.ps__rail-x,.ps--scrolling-y>.ps__rail-y {
    opacity: .6
}

.ps .ps__rail-x:hover,.ps .ps__rail-y:hover,.ps .ps__rail-x:focus,.ps .ps__rail-y:focus,.ps .ps__rail-x.ps--clicking,.ps .ps__rail-y.ps--clicking {
    background-color: #eee;
    opacity: .9
}

.ps__thumb-x {
    background-color: #aaa;
    border-radius: 6px;
    transition: background-color .2s linear,height .2s ease-in-out;
    -webkit-transition: background-color .2s linear,height .2s ease-in-out;
    height: 6px;
    bottom: 2px;
    position: absolute
}

.ps__thumb-y {
    background-color: #aaa;
    border-radius: 6px;
    transition: background-color .2s linear,width .2s ease-in-out;
    -webkit-transition: background-color .2s linear,width .2s ease-in-out;
    width: 6px;
    right: 2px;
    position: absolute
}

.ps__rail-x:hover>.ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x.ps--clicking .ps__thumb-x {
    background-color: #999;
    height: 11px
}

.ps__rail-y:hover>.ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y.ps--clicking .ps__thumb-y {
    background-color: #999;
    width: 11px
}

@supports(-ms-overflow-style: none) {
    .ps {
        overflow:auto !important
    }
}

@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none) {
    .ps {
        overflow: auto !important
    }
}

@-webkit-keyframes nav-mask {
    0% {
        -webkit-mask-position: left top;
        mask-position: left top
    }

    100% {
        -webkit-mask-position: left center;
        mask-position: left center
    }
}

@keyframes nav-mask {
    0% {
        -webkit-mask-position: left top;
        mask-position: left top
    }

    100% {
        -webkit-mask-position: left center;
        mask-position: left center
    }
}

.l-header__logo {
    transition: all .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transition-property: visibility,opacity;
    display: block;
    position: fixed;
    top: 3rem;
    left: 4rem;
    z-index: 10;
    width: 15rem;height: 15rem;
    background-image: url(../image/Logo_Tate.png);
    background-size: cover;
}

.l-header__menu {
    transition: color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    display: flex;
    align-items: center;
    position: fixed;
    top: 3rem;
    right: 1rem;
    z-index: 12;
    margin: 0;
    border: none;
    border-radius: 300px;
    background: none;
    color: #231815;
}

.l-header__menu::before,.l-header__menu::after {
}

.l-header__menu::before {
}

.l-header__menu::after {
}

@media(hover: hover) {
    .l-header__menu:hover::before,.l-header__menu:hover::after {
    }
}

.l-header__nav {
    transition: -webkit-mask-position .9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transition: mask-position .9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transition: mask-position .9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, -webkit-mask-position .9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 21%, #000000 39%, #000000 61%, transparent 79%);
    mask-image: linear-gradient(to top, transparent 0%, transparent 21%, #000000 39%, #000000 61%, transparent 79%);
    -webkit-mask-position: left bottom;
    mask-position: left bottom;
    -webkit-mask-size: 100% 500%;
    mask-size: 100% 500%;
    pointer-events: none
}

.l-header__nav .c-maskobj {
    transition: -webkit-mask-position 0s cubic-bezier(0.25, 0.46, 0.45, 0.94) .9s;
    transition: mask-position 0s cubic-bezier(0.25, 0.46, 0.45, 0.94) .9s;
    transition: mask-position 0s cubic-bezier(0.25, 0.46, 0.45, 0.94) .9s, -webkit-mask-position 0s cubic-bezier(0.25, 0.46, 0.45, 0.94) .9s
}

.l-header.nav-open .l-header__menu {
}

.l-header.nav-open .l-header__menu::before {
}

.l-header.nav-open .l-header__menu::after {
}

.l-header.nav-open .l-header__nav {
}

.l-header.nav-open .l-header__nav .c-maskobj {
}

.l-header.menu-white .l-header__menu {
    color: #fff
}

.l-header.menu-white .l-header__menu.is-black {
    color: #231815
}

@media only screen and (max-width: 1023px) {
    .l-header__logo {
        top:1rem;
        left: 1rem;
        width: 7rem;
        height: 7rem;
    }

    .l-header__menu {
        right: 1rem;
    }

    .l-header__menu::before,.l-header__menu::after {
    }

    .l-header.nav-open .l-header__menu {
    }
}

.l-hNav {
    position: fixed;
    inset: 0 0 auto;
    height: 100lvh;
    z-index: 11;
    background: #9ab49f
}

.l-hNav::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../imgs/common/bg_green.webp) repeat-y center top;
    background-size: max(1920px,100%) auto
}

.l-hNav__wrapper {
    position: relative;
    z-index: 1;
    height: 100%
}

.l-hNav__logo {
    display: block;
    position: absolute;
    z-index: 2;
    inset: calc(50svh - 13.7rem) auto auto calc(50% - 11.5rem);
    width: 23rem
}

.l-hNav__slider {
    overflow: hidden;
    position: absolute;
    inset: 0 50% auto 0;
    z-index: 1;
    height: 100lvh
}

.l-hNav__slider .img {
    position: absolute;
    inset: 0;
    z-index: 0;
    -webkit-mask-position: center center;
    mask-position: center center
}

.l-hNav__slider .img.active {
    z-index: 2
}

.l-hNav__slider .img.active.hidden {
    transition: -webkit-mask-position var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transition: mask-position var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transition: mask-position var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, -webkit-mask-position var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    -webkit-mask-position: center bottom;
    mask-position: center bottom
}

.l-hNav__slider .img.next {
    z-index: 1
}

.l-hNav__slider img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center bottom;
    object-position: center bottom
}

.l-hNav__slider img.fit-center {
    -o-object-position: center center;
    object-position: center center
}

.l-hNav__container {
    overflow: auto;
    overscroll-behavior: none;
    height: 100dvh;
    position: relative;
    z-index: 1;
    padding-left: 50%
}

.l-hNav__body {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    padding: 8rem 5rem 8rem 16.5rem
}

.l-hNav__list {
    display: flex;
    flex-direction: column;
    row-gap: 3.5rem
}

.l-hNav__list .parent {
    font-family: "Charter","portada","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 300;
    letter-spacing: .04em;
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: .4rem 0 .3rem;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none
}

.l-hNav__list .children {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    margin-top: 1.7rem;
    padding-left: 1.4rem;
    color: #4c4948;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4286;
    letter-spacing: .04em
}

.l-hNav__list .children li {
    position: relative;
    padding-left: 1rem
}

.l-hNav__list .children li::before {
    translate: 0 -50%;
    content: "";
    display: block;
    position: absolute;
    inset: .7143em auto auto 0;
    aspect-ratio: 5/6;
    width: .5rem;
    border-radius: 60%;
    background: currentColor
}

.l-hNav__sns {
    margin: 8.5rem 0 0 -1.3rem
}

.l-hNav__links {
    margin-top: 1.6rem
}

@media only screen and (max-width: 1023px) {
    .l-hNav__logo {
        inset:1rem auto auto 1rem;
        width: 7rem
    }

    .l-hNav__wrapper {
        overflow: auto;
        overscroll-behavior: none;
        height: 100dvh
    }

    .l-hNav__slider {
        position: relative;
        inset: auto;
        aspect-ratio: 390/197;
        height: auto
    }

    .l-hNav__slider .img {
        transition: none;
        -webkit-mask-position: center center !important;
        mask-position: center center !important
    }

    .l-hNav__slider .img:not(:first-child) {
        display: none
    }

    .l-hNav__container {
        overflow: visible;
        height: auto;
        padding-left: 0
    }

    .l-hNav__body {
        min-height: 0;
        padding: 3.5rem 2.5rem 2.5rem
    }

    .l-hNav__list {
        row-gap: 2rem
    }

    .l-hNav__list .parent {
        padding: .3rem 0;
        font-size: 2.4rem
    }

    .l-hNav__list .children {
        row-gap: 1.3rem;
        margin-top: 1.5rem;
        padding-left: 1rem;
        font-size: 1.2rem;
        letter-spacing: .02em
    }

    .l-hNav__sns {
        margin: 4.5rem 0 0 -1.5rem
    }

    .l-hNav__links {
        margin-top: 1.1rem
    }
}

.l-main {
    overflow: clip;
    position: relative;
    z-index: 1
}

.l-main__eyecatch {
    display: block;
    overflow: hidden;
    position: relative;
    height: 35rem;
    margin-bottom: 8rem;
    border-bottom-left-radius: 20rem
}

.l-main__eyecatch img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.l-main__eyecatch figcaption {
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: absolute;
    inset: auto 0 0;
    height: 4rem;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0
}

.l-main__ttl {
    margin-bottom: 12rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    letter-spacing: .02em
}

.l-main__ttl .en {
    font-family: "Charter","portada","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 300;
    letter-spacing: .04em;
    margin-bottom: 1rem;
    font-size: 4.8rem;
    font-weight: 400;
    line-height: 1.2292;
    letter-spacing: .03em
}

@media only screen and (max-width: 1023px) {
    .l-main__eyecatch {
        height:auto;
        margin-bottom: 4.4rem;
        border-bottom-left-radius: 10rem
    }

    .l-main__eyecatch img {
        height: auto
    }

    .l-main__eyecatch figcaption {
        height: 3.8rem
    }

    .l-main__ttl {
        margin-bottom: 6rem;
        font-size: 1.5rem
    }

    .l-main__ttl .en {
        margin-bottom: .4rem;
        font-size: 2.8rem;
        line-height: 1.2143
    }
}

.l-breadcrumbs {
    position: relative;
    margin-top: 19.7rem;
    margin-bottom: 3.7rem;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em
}

.l-breadcrumbs .breadcrumbs {
    box-sizing: border-box;
    max-width: 120rem;
    margin-right: auto;
    margin-left: auto;
    padding-right: 5rem;
    padding-left: 5rem;
    display: flex
}

@media only screen and (max-width: 1023px) {
    .l-breadcrumbs .breadcrumbs {
        padding-right:2.5rem;
        padding-left: 2.5rem
    }
}

.l-breadcrumbs .breadcrumbs li {
    display: flex;
    flex-shrink: 0;
    align-items: center
}

.l-breadcrumbs .breadcrumbs li:not(:last-child)::after {
    content: "";
    display: block;
    margin: 0 1rem;
    aspect-ratio: 8/7;
    width: .7rem;
    background: currentColor;
    opacity: .4;
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%, 25% 50%);
    clip-path: polygon(0 0, 100% 50%, 0 100%, 25% 50%)
}

.l-breadcrumbs .breadcrumbs a {
    font-weight: 400
}

@media only screen and (max-width: 1023px) {
    .l-breadcrumbs {
        overflow:auto;
        margin-top: 9.7rem;
        margin-bottom: 2.2rem
    }

    .l-breadcrumbs .breadcrumbs {
        padding: 0
    }

    .l-breadcrumbs .breadcrumbs::before,.l-breadcrumbs .breadcrumbs::after {
        content: "";
        display: block;
        flex-shrink: 0;
        width: 2.5rem
    }
}

.l-noise {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    height: 100lvh;
    pointer-events: none;
    mix-blend-mode: soft-light;
    opacity: .14
}

.l-noise video {
    width: 100%;
    min-width: 1920px;
    height: 100%;
    min-height: 1080px;
    -o-object-fit: cover;
    object-fit: cover
}

@-webkit-keyframes l-light {
    0% {
        scale: 1 1;
        opacity: 1
    }

    33% {
        scale: 1 1.2;
        opacity: 0
    }

    66% {
        scale: 1 .8;
        opacity: 1
    }

    100% {
        scale: 1 1;
        opacity: 0
    }
}

@keyframes l-light {
    0% {
        scale: 1 1;
        opacity: 1
    }

    33% {
        scale: 1 1.2;
        opacity: 0
    }

    66% {
        scale: 1 .8;
        opacity: 1
    }

    100% {
        scale: 1 1;
        opacity: 0
    }
}

.l-light {
    position: fixed;
    inset: 0 0 auto;
    z-index: 21;
    height: 100lvh;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .25
}

.l-light__grad {
    -webkit-animation: l-light var(--duration) linear 0s infinite alternate;
    animation: l-light var(--duration) linear 0s infinite alternate;
    rotate: 45deg;
    position: absolute;
    width: var(--w);
    height: var(--h);
    background: linear-gradient(to top, transparent 0, rgba(154, 180, 159, 0.5) 15%, #9AB49F 50%, rgba(154, 180, 159, 0.5) 85%, transparent 100%)
}

.l-light__grad.grad-1 {
    --w: 45.5rem;
    --h: 13.3rem;
    --duration: 8s;
    transform-origin: left top;
    top: calc(100lvh - 30.3rem);
    left: 0
}

.l-light__grad.grad-2 {
    --w: 88rem;
    --h: 15.4rem;
    --duration: 10s;
    animation-direction: alternate-reverse;
    transform-origin: left top;
    top: calc(100lvh - 58.7rem);
    left: 0
}

.l-light__grad.grad-3 {
    --w: 102.5rem;
    --h: 31.5rem;
    --duration: 9s;
    transform-origin: left bottom;
    top: -31.5rem;
    left: calc(100vw - 68.2rem)
}

@media only screen and (max-width: 1023px) {
    .l-light {
        opacity:.24
    }

    .l-light__grad {
        rotate: 50deg
    }

    .l-light__grad.grad-1 {
        --w: 48rem;
        --h: 16.5rem;
        top: calc(100lvh - 24rem)
    }

    .l-light__grad.grad-2 {
        --w: 113rem;
        --h: 20.4rem;
        --duration: 10s;
        top: calc(100lvh - 56.5rem);
        left: 0
    }

    .l-light__grad.grad-3 {
        display: none
    }
}

.l-section__container {
    box-sizing: border-box;
    max-width: 120rem;
    margin-right: auto;
    margin-left: auto;
    padding-right: 5rem;
    padding-left: 5rem
}

@media only screen and (max-width: 1023px) {
    .l-section__container {
        padding-right:2.5rem;
        padding-left: 2.5rem
    }
}

.l-footer {
    position: relative;
    z-index: 2;
    background-color: #F1BB1A;
    display: flex;
    padding-top: 4.8rem;
    padding-bottom: 4.8rem;
    box-sizing: border-box;
}
@media only screen and (max-width: 1023px) {
    .l-footer {
        flex-direction: column;
        align-items: center;
        padding-bottom: 1rem;
    }
}

.l-footer__sns {
    grid-column: 1/2;
    grid-row: 1/2;
    justify-self: center
}

.l-footer__links {
    grid-column: 1/2;
    grid-row: 1/2;
    justify-self: right
}

.l-footer__copyright {
    grid-column: 1/2;
    grid-row: 1/2;
    justify-self: left;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: .03em
}

@media only screen and (max-width: 1023px) {
    .l-footer__container {
        display:flex;
        flex-direction: column;
        align-items: center;
        padding-top: 3.8rem;
        padding-bottom: 1rem;
    }

    .l-footer__links {
        margin-top: 1rem
    }

    .l-footer__copyright {
        text-align: center;
    }
}

.c-drawline {
    --linesize: 1px;
    --line-offset: 0rem;
    text-decoration: none;
    transition: background-size .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    background: linear-gradient(to right, currentColor, currentColor) no-repeat right var(--line-offset) bottom;
    background-size: 0 var(--linesize)
}

@media(hover: hover) {
    a.c-drawline:hover,a:hover .c-drawline {
        background-position:left bottom;
        background-size: calc(100% - var(--line-offset)) var(--linesize)
    }
}

.c-sns {
    display: flex
}

.c-sns a {
    transition: opacity .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    display: flex;
    align-items: center;
    padding: 0 1.3rem;
    height: 4rem;
}

@media(hover: hover) {
    .c-sns a:hover {
        opacity:.5;
    }
}

.c-sns img {
    width: auto;
    height: 1.6rem
}

@media only screen and (max-width: 1023px) {
    .c-sns a {
        padding:0 1.5rem;
        height: 6rem;
    }
}

.c-utilityLinks {
    display: flex;
    -moz-column-gap: 3rem;
    column-gap: 3rem;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-size: 1.2rem;
    line-height: 1.5;
    letter-spacing: .03em
}

@-webkit-keyframes c-btn-arw {
    0% {
        translate: 0 0;
        opacity: 1
    }

    50% {
        translate: 50% 0;
        opacity: 0
    }

    50.1% {
        translate: -50% 0;
        opacity: 0
    }

    100% {
        translate: 0 0;
        opacity: 1
    }
}

@keyframes c-btn-arw {
    0% {
        translate: 0 0;
        opacity: 1
    }

    50% {
        translate: 50% 0;
        opacity: 0
    }

    50.1% {
        translate: -50% 0;
        opacity: 0
    }

    100% {
        translate: 0 0;
        opacity: 1
    }
}

.c-btn {
    --circle-border: currentColor;
    --circle-bg: transparent;
    --arw-color: currentColor;
    display: flex;
    align-items: center;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.1875;
    letter-spacing: .03em;
    text-decoration: none
}

.c-btn.en {
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif
}

.c-btn__arw {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    width: 4rem;
    border: var(--circle-border) solid 1px;
    border-radius: 50%;
    background: var(--circle-bg)
}

.c-btn__arw::before {
    content: "";
    display: block;
    aspect-ratio: 1/1;
    width: 2.1rem;
    background-image: url(../image/arw.svg);
}

.c-btn.large {
    font-size: 1.8rem
}

.c-btn.large .c-btn__arw {
    width: 7rem
}

@media(hover: hover) {
    a.c-btn:hover .c-btn__arw::before,a:hover .c-btn .c-btn__arw::before {
        -webkit-animation:c-btn-arw .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        animation: c-btn-arw .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s
    }
}

@media only screen and (max-width: 1023px) {
    .c-btn {
        -moz-column-gap:1.4rem;
        column-gap: 1.4rem;
        font-size: 1.4rem
    }

    .c-btn__arw {
        width: 3rem
    }

    .c-btn__arw::before {
        width: 1.4rem
    }

    .c-btn.large {
        font-size: 1.4rem
    }

    .c-btn.large .c-btn__arw {
        width: 4rem
    }
}

.c-caption {
    color: #4c4948;
    font-size: 0.6rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: .02em
}

.c-caption__box {
    display: inline-block;
    padding: 0 .2rem;
    border: rgba(76,73,72,.5) solid 1px;
    line-height: 1.4rem
}

.c-maskobj {
    --delay: 0;
    --duration: 1.2s;
    will-change: mask-image;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 15%, #000000 42%, #000000 58%, transparent 85%);
    mask-image: linear-gradient(to top, transparent 0%, transparent 15%, #000000 42%, #000000 58%, transparent 85%);
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
    -webkit-mask-size: 100% 700%;
    mask-size: 100% 700%;
    opacity: 0;
}

.c-maskobj.visibled {
    transition: -webkit-mask-position var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(var(--delay)*.1s);
    transition: mask-position var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(var(--delay)*.1s);
    transition: mask-position var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(var(--delay)*.1s), -webkit-mask-position var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(var(--delay)*.1s);
    -webkit-mask-position: center center;
    mask-position: center center;
    opacity: 1;
}

.p-home .l-header__logo {
    visibility: hidden;
    opacity: 0;
}

html.scrolled .p-home .l-header__logo {
    transition-delay: .3s;
    visibility: visible;
    opacity: 1;
}

.p-home .l-header__menu {
    color: #fff
}

html.scrolled .p-home .l-header__menu {
    color: #231815
}

.p-home-fv {
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 0;
    height: calc(200lvh + 50vw + 20rem);
    margin-bottom: calc(-50vw - 100lvh)
}

.p-home-fv__inner {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100svh
}

.p-home-fv__logo {
    transition: all .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) .3s;
    transition-property: visibility,opacity;
    position: absolute;
    inset: 5rem auto auto 5rem;
    z-index: 1;
    width: 20rem
}

html.scrolled .p-home-fv__logo {
    transition-delay: 0s;
    visibility: hidden;
    opacity: 0
}

.p-home-fv__bg {
    display: block;
    position: relative;
    z-index: 0;
    height: 100lvh
}

.p-home-fv__bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: right bottom;
    object-position: right bottom
}

.p-home-fv__note {
    display: grid;
    grid-template-columns: 29.9rem 20.9rem;
    -moz-column-gap: 1.4rem;
    column-gap: 1.4rem;
    position: absolute;
    inset: auto 1rem .8rem auto;
    z-index: 1;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0
}

.p-home-fv__note .note__ttl {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.4rem;
    margin-bottom: .8rem;
    background: #fff;
    color: #231815;
    font-size: 1.2rem;
    line-height: 1
}

.p-home-fv__note .note__effect {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    -moz-column-gap: .6rem;
    column-gap: .6rem;
    height: 2.9rem;
    margin-bottom: .6rem;
    border: currentColor solid 1px;
    font-size: 1.2rem;
    line-height: 1
}

.p-home-fv__note .note__effect .label {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 1.7rem;
    padding: .5rem;
    border: rgba(255,255,255,.4) solid 1px;
    font-size: 1.1rem
}

.p-home-fv__note .note__name {
    display: flex;
    justify-content: center
}

.p-home-fv__note .note__name dt {
    flex-shrink: 0
}

@media only screen and (max-width: 1023px) {
    .p-home-fv {
        height:calc(200lvh + 50vw + 12rem)
    }

    .p-home-fv__logo {
        inset: 6rem auto auto calc(50% - 8.5rem);
        width: 17rem
    }

    .p-home-fv__bg {
        height: 105lvh;
    }

    .p-home-fv__note {
        grid-template-columns: repeat(2, 1fr);
        -moz-column-gap: 1rem;
        column-gap: 1rem;
        left: 1rem
    }

    .p-home-fv__note .note__ttl {
        height: 2.1rem;
        margin-bottom: .6rem;
        font-size: 1.1rem
    }

    .p-home-fv__note .note__effect {
        -moz-column-gap: .4rem;
        column-gap: .4rem;
        height: 2.6rem;
        margin-bottom: .4rem;
        font-size: 1.1rem
    }

    .p-home-fv__note .note__effect .label {
        height: 1.6rem;
        font-size: 1rem
    }

    .p-home-fv__note .note__name {
        display: flex;
        justify-content: center
    }

    .p-home-fv__caption {
        display: flex;
        align-items: center;
        position: absolute;
        inset: auto 2rem 1.6rem auto;
        z-index: 1;
        color: #fff;
        font-size: 1rem;
        line-height: 1;
        letter-spacing: 0
    }

    .p-home-fv__caption dt {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 6.2rem;
        height: 1.8rem;
        margin-right: .2rem;
        background: rgba(255,255,255,.25)
    }

    .p-home-fv__caption dt:not(:first-child) {
        margin-left: 2.4rem
    }
}

.p-home-section__container {
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
}
.p-home-section{}

@media only screen and (max-width: 1023px) {
    .p-home-section__container {
        padding-right:2.5rem;
        padding-left: 2.5rem
    }
}

.p-home-section__ttl {
    font-family: "Charter","portada","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 300;
    letter-spacing: .04em;
    font-size: 4.8rem;
    line-height: 1.2292;
    text-align: center;
    letter-spacing: .06em;
    scroll-margin-top: 20rem
}

@media only screen and (max-width: 1023px) {
    .p-home-section__ttl {
        font-size:2.8rem;
        line-height: 1.2143;
        scroll-margin-top: 10rem
    }
}

.p-home-concept {
    --sy: var((--sy)-1000);
    --scale: min(calc(0.6 + var(--sy) * 0.0005), 1);
    --half-scale: calc((1 - var(--scale)) / 2);
    position: relative;
    z-index: 1;
    padding-top: 40rem;
}

.p-home-concept::before {
    content: "";
    box-sizing: border-box;
    display: block;
    position: absolute;
    inset: 0 calc(var(--half-scale)*100%);
    z-index: 2;
    border-bottom: none;
    border-radius: 50vw 50vw 0 0;
    pointer-events: none
}

.p-home-concept::after {
    content: "";
    box-sizing: border-box;
    display: block;
    position: absolute;
    inset: 2rem calc(var(--half-scale)*100% + 2rem) 0;
    z-index: 2;
    border-bottom: none;
    border-radius: calc((100vw - 2rem)/2) calc((100vw - 2rem)/2) 0 0;
    pointer-events: none
}

.p-home-concept .p-home-section__ttl {
}

.p-home-concept__bgWrap {
    position: absolute;
    inset: 0 calc(var(--half-scale)*100%);
    z-index: 0;
}

.p-home-concept__bg {
    position: absolute;
    inset: -500lvh 0;
    top: 0;
    z-index: 0;
    background: url(../image/BG_Float5.svg) no-repeat center top;
    background-size: max(1920px,100%) auto;
    background-size: contain;
}

.p-home-concept__bg::before {
    content: "";
    display: block;
    position: sticky;
    top: 0;
    height: 100lvh;
    /* background:url(../imgs/common/bg_green.webp) repeat-y center top; */
    ound-size: max(1920px,100%) auto
}

.p-home-concept__body {
    position: relative;
    z-index: 1
}

.p-home-concept__item {
    --sy: 0;
    --unit: 0;
    position: relative;
    z-index: 3;
}

.p-home-concept__item .img {
    translate: 0 calc(var(--sy)*var(--unit)*-1px);
    will-change: translate;
    display: block;
    position: absolute;
    opacity: 0;
}

.p-home-concept__item .img.visibled {
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    opacity: 1
}

.p-home-concept__item.bottle {
    --unit: -0.1;
    display: flex;
    justify-content: center;
}

.p-home-concept__item.bottle .img {
    top: -35rem;
    margin-left: auto;margin-right: auto;
    width: 20rem;
}

.p-home-concept__item.bottle .img img {
    transform-origin: right top;
}

.p-home-concept__item.photo {
    --unit: 0.3;
    display: flex;
    justify-content: center;
}

.p-home-concept__item.photo .img {
    top: 5rem;
    left: 5rem;
    width: 55rem;
    margin-left: auto;margin-right: auto;
}

.p-home-concept__item.photo .img img {
    transform-origin: left top;
}

.p-home-concept__item.lotion {
    --unit: 0.07;
    display: flex;
    justify-content: center;
}

.p-home-concept__item.lotion .img {
    top: -3rem;
    margin-left: auto;margin-right: auto;
    width: 50rem;
}

.p-home-concept__item.lotion .img img {
    transform-origin: right top;
}

.p-home-concept__item.Bee_1 {
    --unit: -0.2;
}

.p-home-concept__item.Bee_1 .img {
    top: -5rem;
    left: 30rem;
    width: 15rem;
}

.p-home-concept__item.Bee_1 .img img {
    transform-origin: left top;
}

.p-home-concept__item.Bee_2 {
    --unit: -0.08;
}

.p-home-concept__item.Bee_2 .img {
    top: -5rem;
    right: -5rem;
    width: 35rem;
}

.p-home-concept__item.Bee_2 .img img {
    transform-origin: right top;
}

.p-home-concept__item.Bee_3 {
    --unit: -0.08;
}

.p-home-concept__item.Bee_3 .img {
    top: 3rem;
    left: 35rem;
    width: 20rem;
}

.p-home-concept__item.Bee_3 .img img {
    transform-origin: left top;
}

.p-home-concept__ttl {
    margin-bottom: 4rem;
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1.4286;
    text-align: center;
    letter-spacing: .02em
}

.p-home-concept__txt {
    font-size: 1.6rem;
    text-align: center;
    letter-spacing: .04em
}

.p-home-concept__txt sup {
    font-size: 1.2rem;
    vertical-align: top
}

.p-home-concept__txt .c-caption {
    margin-top: .8rem
}

.p-home-concept__head {
    margin-bottom: 8.8rem
}

.p-home-concept__label {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 3rem auto 0;
    padding: 0 4.6rem 1rem;
    border-right: currentColor solid 1px;
    border-left: currentColor solid 1px;
    color: #dedeca;
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    letter-spacing: .02em
}

.p-home-concept__label::before,.p-home-concept__label::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0 auto;
    width: 1px;
    background: currentColor
}

.p-home-concept__label::before {
    left: .5rem
}

.p-home-concept__label::after {
    right: .5rem
}

.p-home-concept__label .en {
    display: grid;
    grid-template-columns: 1fr 4.6rem 1fr;
    margin: 1.5rem 0 1.7rem;
    font-size: 1.3rem;
    line-height: 1.2308;
    letter-spacing: .09em
}

.p-home-concept__label .en .herbal {
    text-align: right
}

.p-home-concept__label .en .x {
    position: relative
}

.p-home-concept__label .en .x::before,.p-home-concept__label .en .x::after {
    content: "";
    display: block;
    position: absolute;
    inset: calc(50% - 1.5rem) auto auto 50%;
    width: 1px;
    height: 3rem;
    background: currentColor
}

.p-home-concept__label .en .x::before {
    rotate: 45deg
}

.p-home-concept__label .en .x::after {
    rotate: -45deg
}

.p-home-concept__label .en .scalp {
    text-align: left
}

.p-home-concept__logo {
    display: grid;
    row-gap: 1.4rem;
    width: 26rem;
    margin: 7.2rem auto 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    text-align: center
}

.p-home-concept__more {
    margin: 5rem auto 0
}

.p-home-concept__movie {
    padding-top: 5rem;
    padding-bottom: 3rem;
    background-image: url(../image/img_1.jpg) !important;
    background-size: cover;
    width: -webkit-fill-available;
    height: auto;
    min-height: 90lvh;
    background-position: center;
    background-size: cover;
}

.p-home-concept__movie .p-home-concept__head {
    display: flex;flex-direction: column;align-items: center;justify-content: flex-start;
}

.p-home-concept__care {
    overflow: clip;
    padding-bottom: 3rem;
}
@media only screen and (max-width: 1200px) {
    .p-home-concept__bg {
        background-image: url(../image/BG_Float5m2.svg);
        inset: 0 0;
    }
    .p-home-concept__item.photo .img {
        top: 65rem;
        left: 3rem;
        width: 40rem;
    }
}
@media only screen and (max-width: 1023px) {
    .p-home-concept {
        --scale: 1;
        display: grid;
        padding-top: 10rem
    }

    .p-home-concept::before {
        border-width: 1px
    }

    .p-home-concept::after {
        inset: 1rem calc(var(--half-scale)*100% + 1rem) 0;
        border-width: 1px;
        border-radius: calc((100vw - 1rem)/2) calc((100vw - 1rem)/2) 0 0
    }

    .p-home-concept__item .img {
        translate: 0 calc(var(--sy)*var(--unit)*-0.6px);
    }

    .p-home-concept__item.bottle {
        --unit: -0.07;
        display: flex;
        justify-content: center;
    }

    .p-home-concept__item.bottle .img {
        top: -16rem;
        width: 10rem;
    }

    .p-home-concept__item.bottle .img img {
    }

    .p-home-concept__item.photo {
        --unit: 0.2;
        display: flex;
        justify-content: center;
        --sy: 0 !important;
    }

    .p-home-concept__item.photo .img {
        top: 105rem;
        left: 3rem;
        width: 20rem;
    }

    .p-home-concept__item.photo .img img {
    }

    .p-home-concept__item.lotion {
        --unit: 0.03;
    }

    .p-home-concept__item.lotion .img {
        top: -3rem;
        width: 30rem;
    }

    .p-home-concept__item.lotion .img img {
        transform-origin: left top;
    }
    .p-home-concept__item.Bee_1 {
        --unit: -0.1;
        --sy: 0 !important;
    }
    
    .p-home-concept__item.Bee_1 .img {
        top: 90rem;
        left: 6rem;
        width: 5rem;
    }
    
    .p-home-concept__item.Bee_1 .img img {
        transform-origin: left top;
    }

    .p-home-concept__item.Bee_2 {
        --unit: -0.1;
        --sy: 0 !important;
    }
    
    .p-home-concept__item.Bee_2 .img {
        top: 125rem;
        right: -2rem;
        width: 10rem;
    }
    
    .p-home-concept__item.Bee_2 .img img {
        transform-origin: right top;
    }

    .p-home-concept__item.Bee_3 {
        --unit: -0.08;
        --sy: 0 !important;
    }
    
    .p-home-concept__item.Bee_3 .img {
        top: 264rem;
        left: 25rem;
        width: 10rem;
        transition-duration: .6s;
    }
    
    .p-home-concept__item.Bee_3 .img img {
        transform-origin: left top;
    }

    .p-home-concept__ttl {
        margin-bottom: 1.6rem;
        font-size: 2.2rem;
        line-height: 1.6364;
        text-align: left
    }

    .p-home-concept__txt {
        font-size: 1.4rem;
        text-align: left;
        letter-spacing: .02em
    }

    .p-home-concept__txt .c-caption {
        margin-top: .3rem
    }

    .p-home-concept__head {
        order: 2;
        margin-bottom: 4rem
    }

    .p-home-concept__label {
        margin: 2rem auto 0;
        padding: 0 2.8rem .5rem;
        font-size: 2rem
    }

    .p-home-concept__label::before {
        left: .3rem
    }

    .p-home-concept__label::after {
        right: .2rem
    }

    .p-home-concept__label .en {
        grid-template-columns: 1fr 2.8rem 1fr;
        margin: .7rem 0 1rem;
        font-size: 1rem;
        line-height: 1.2;
        letter-spacing: .04em
    }

    .p-home-concept__label .en .x::before,.p-home-concept__label .en .x::after {
        inset: calc(50% - 1rem) auto auto 50%;
        height: 2rem
    }

    .p-home-concept__brand {
        order: 4;
    }

    .p-home-concept__logo {
        width: 17rem;
        margin: auto auto;
        font-size: 1.1rem;
        text-align: left
    }

    .p-home-concept__more {
        margin: 2.5rem 0 0 auto
    }

    .p-home-concept__movie {
        order: 5;
        width: auto;
        padding-top: 3rem;
        padding-bottom: 0rem;
        min-height: 20rem;
    }

    .p-home-concept__care {
        order: 7;
        overflow: clip;
        padding-bottom: 3rem;
    }
    .p-home-concept__bg {
        background-image: url(../image/BG_Float5m.svg);
        inset: 0 0;
    }
    .Top_Vid {
        width: -webkit-fill-available;
        height: -webkit-fill-available;
    }
}

@-webkit-keyframes home-efficacy-active {
    0% {
        -webkit-mask-position: center top;
        mask-position: center top
    }

    100% {
        -webkit-mask-position: center center;
        mask-position: center center
    }
}

@keyframes home-efficacy-active {
    0% {
        -webkit-mask-position: center top;
        mask-position: center top
    }

    100% {
        -webkit-mask-position: center center;
        mask-position: center center
    }
}

@-webkit-keyframes home-efficacy-hidden {
    0% {
        -webkit-mask-position: center center;
        mask-position: center center
    }

    100% {
        -webkit-mask-position: center bottom;
        mask-position: center bottom
    }
}

@keyframes home-efficacy-hidden {
    0% {
        -webkit-mask-position: center center;
        mask-position: center center
    }

    100% {
        -webkit-mask-position: center bottom;
        mask-position: center bottom
    }
}

.p-home-efficacy {
    --active: 1;
    /**--unit-h: 100lvh;**/
    margin-top: 13.6rem
}

.p-home-efficacy__container {
    display: grid;
    align-items: start
}

.p-home-efficacy__items {
    display: grid;
    grid-column: 1/2;
    grid-row: 1/2;
    position: sticky;
    top: calc(50lvh - 27rem);
    z-index: 1;
    margin-bottom: 10rem
}

.p-home-efficacy__items .item {
    grid-column: 1/2;
    grid-row: 1/2
}

.p-home-efficacy__items .item:first-child .item__body {
    background-image: url(../image/Frame_29.png);
    background-size: contain;
    background-repeat: no-repeat;
}


/** .p-home-efficacy__items .item:first-child .item__body::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../image/BG_Top.jpg) repeat-y center top;
    background-size: max(1920px,100%) auto;
    opacity: .2
}**/

.p-home-efficacy__items .item:first-child .item__body::after {
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute;
    inset: 1rem;
    z-index: 0;
}

.p-home-efficacy__items .item__body {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
    aspect-ratio: 432/660;
    width: 43.2rem;
    margin: 0 auto;
    text-align: center
}

.p-home-efficacy__items .item__ttl {
    --delay: 0;
    font-family: "Charter","portada","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 300;
    letter-spacing: .04em;
    margin-bottom: 2.6rem;
    font-size: 5.6rem;
    line-height: 1.2143;
    letter-spacing: .03em
}

.p-home-efficacy__items .item__txt {
    --delay: 1;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    line-height: 1.4167
}

.p-home-efficacy__items .item__txt sup {
    font-size: 1.4rem;
    vertical-align: top
}

.p-home-efficacy__items .item__txt strong {
    display: block;
    margin-top: .6rem;
    color: #076286;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: .02em
}

.p-home-efficacy__items .item__txt strong sup {
    font-size: 1.6rem
}

.p-home-efficacy__items .item__txt .c-caption {
    margin-top: 1rem
}

.p-home-efficacy__items .item__img {
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    will-change: opacity;
    overflow: hidden;
    position: absolute;
    z-index: 0;
    width: var(--w);
    border-radius: 2rem;
    opacity: 0;
    box-shadow: 4rem 6rem 8rem rgba(0,0,0,.2);
}

.p-home-efficacy__items .item__img figcaption {
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: absolute;
    inset: auto 0 0;
    height: 4rem;
    padding: 0 1rem .6rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
    color: #fff;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0
}

.p-home-efficacy__items .item__img.img-1 {
    --delay: 0
}

.p-home-efficacy__items .item__img.img-2 {
    --delay: 1
}

.p-home-efficacy__items .item__img.img-3 {
    --delay: 3
}

.p-home-efficacy__items .item.scalp .item__img.img-1 {
    --w: 48rem;
    top: calc(50% - 33.4rem);
    right: calc(50% + 10rem)
}

.p-home-efficacy__items .item.scalp .item__img.img-2 {
    --w: 30rem;
    bottom: calc(50% + 1.5rem);
    left: calc(50% + 28rem)
}

.p-home-efficacy__items .item.scalp .item__img.img-3 {
    --w: 44rem;
    top: calc(50% + 3.5rem);
    left: calc(50% + 11rem)
}

.p-home-efficacy__items .item.hair .item__img.img-1 {
    --w: 48rem;
    top: calc(50% - 33.4rem);
    left: calc(50% + 10rem)
}

.p-home-efficacy__items .item.hair .item__img.img-2 {
    --w: 30rem;
    bottom: calc(50% + 1.5rem);
    right: calc(50% + 28rem)
}

.p-home-efficacy__items .item.hair .item__img.img-3 {
    --w: 44rem;
    top: calc(50% + 3.5rem);
    right: calc(50% + 11rem)
}

.p-home-efficacy__items .item.fragrance .item__img.img-1 {
    --w: 48rem;
    top: calc(50% - 33.4rem);
    right: calc(50% + 10rem)
}

.p-home-efficacy__items .item.fragrance .item__img.img-2 {
    --top-offset: -31.5rem;
    --left-offset: 16rem;
    --w: 44rem;
    bottom: calc(50% + 3.5rem);
    left: calc(50% + 14rem)
}

.p-home-efficacy__items .item.fragrance .item__img.img-3 {
    --top-offset: 1.5rem;
    --left-offset: 23rem;
    --w: 30rem;
    top: calc(50% + 1.5rem);
    left: calc(50% + 23rem)
}

.p-home-efficacy__items .item .c-maskobj {
    -webkit-animation: home-efficacy-hidden var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    animation: home-efficacy-hidden var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.p-home-efficacy__clone {
    grid-column: 1/2;
    grid-row: 1/2;
    padding-bottom: calc(var(--unit-h)/2)
}

.p-home-efficacy__clone .item-clone {
    height: var(--unit-h)
}

.p-home-efficacy__dots {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: .8rem;
    justify-self: right;
    grid-column: 1/2;
    grid-row: 1/2;
    position: sticky;
    top: calc(50lvh - 27rem);
    right: 4.1rem;
    z-index: 2;
    height: 54rem
}

.p-home-efficacy__dots .dot {
    transition: background .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    box-sizing: border-box;
    width: .9rem;
    height: 1.1rem;
    border: #23181500 solid 1px;
    border-radius: .5rem
}

.p-home-efficacy__caption {
    position: sticky;
    bottom: 1rem;
    margin-right: 3rem;
    line-height: 1;
    text-align: right
}

.p-home-efficacy__foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10rem
}

.p-home-efficacy[data-active="1"] .p-home-efficacy__items .item:nth-child(1) .item__img {
    transition-delay: calc(.3s + var(--delay)*.1s);
    opacity: 1
}

.p-home-efficacy[data-active="1"] .p-home-efficacy__items .item:nth-child(1) .c-maskobj {
    -webkit-animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.p-home-efficacy[data-active="1"] .p-home-efficacy__dots .dot:nth-child(1) {
    background: #23181500
}

.p-home-efficacy[data-active="2"] .p-home-efficacy__items .item:nth-child(2) .item__img {
    transition-delay: calc(.3s + var(--delay)*.1s);
    opacity: 1
}

.p-home-efficacy[data-active="2"] .p-home-efficacy__items .item:nth-child(2) .c-maskobj {
    -webkit-animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.p-home-efficacy[data-active="2"] .p-home-efficacy__dots .dot:nth-child(2) {
    background: #23181500
}

.p-home-efficacy[data-active="3"] .p-home-efficacy__items .item:nth-child(3) .item__img {
    transition-delay: calc(.3s + var(--delay)*.1s);
    opacity: 1
}

.p-home-efficacy[data-active="3"] .p-home-efficacy__items .item:nth-child(3) .c-maskobj {
    -webkit-animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.p-home-efficacy[data-active="3"] .p-home-efficacy__dots .dot:nth-child(3) {
    background: #23181500
}

@media only screen and (max-width: 1023px) {
    .p-home-efficacy {
        margin-top:23.3rem
    }

    .p-home-efficacy__items {
        top: calc(50lvh - 15.5rem);
        margin-bottom: 16.7rem
    }

    .p-home-efficacy__items .item:first-child .item__body {
    }

    .p-home-efficacy__items .item:first-child .item__body::after {
        inset: .5rem;
        border-radius: 12rem
    }

    .p-home-efficacy__items .item__body {
        aspect-ratio: 432/660;
        width: 25rem;
    }

    .p-home-efficacy__items .item__ttl {
        margin-bottom: 1.4rem;
        font-size: 2.4rem;
        line-height: 1.25
    }

    .p-home-efficacy__items .item__txt {
        font-size: 1.3rem;
        line-height: 1.3334
    }

    .p-home-efficacy__items .item__txt sup {
        font-size: 1rem
    }

    .p-home-efficacy__items .item__txt strong {
        margin-top: .3rem;
        font-size: 1.8rem
    }

    .p-home-efficacy__items .item__txt strong sup {
        font-size: 1.4rem
    }

    .p-home-efficacy__items .item__txt .c-caption {
        margin-top: .6rem;
        line-height: 1.6
    }

    .p-home-efficacy__items .item__img {
        top: calc(50% + var(--top-offset));
        left: calc(50% + var(--left-offset));
        z-index: 0;
        width: var(--w);
        border-radius: 2rem;
        opacity: 0;
        box-shadow: 4rem 6rem 8rem rgba(0,0,0,.2)
    }

    .p-home-efficacy__items .item__img.img-1 {
        --delay: 0
    }

    .p-home-efficacy__items .item__img.img-2 {
        --delay: 1
    }

    .p-home-efficacy__items .item__img.img-3 {
        --delay: 3
    }

    .p-home-efficacy__items .item.scalp .item__img.img-1 {
        --w: calc(100vw - 5rem);
        top: auto;
        right: 0;
        bottom: calc(50% + 9.9rem);
        left: auto;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .p-home-efficacy__items .item.scalp .item__img.img-2 {
        --w: calc(100vw - 25rem);
        top: calc(50% + 7.8rem);
        right: auto;
        bottom: auto;
        left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .p-home-efficacy__items .item.scalp .item__img.img-3 {
        --w: calc(100vw - 16rem);
        top: calc(50% + 14.6rem);
        right: 0;
        bottom: auto;
        left: auto;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .p-home-efficacy__items .item.hair .item__img.img-1 {
        --w: calc(100vw - 5rem);
        top: auto;
        right: 0;
        bottom: calc(50% + 9.9rem);
        left: auto;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .p-home-efficacy__items .item.hair .item__img.img-2 {
        --w: calc(100vw - 25rem);
        top: calc(50% + 7.8rem);
        right: auto;
        bottom: auto;
        left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .p-home-efficacy__items .item.hair .item__img.img-3 {
        --w: calc(100vw - 16rem);
        top: calc(50% + 14.6rem);
        right: 0;
        bottom: auto;
        left: auto;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .p-home-efficacy__items .item.fragrance .item__img.img-1 {
        --w: calc(100vw - 5rem);
        top: auto;
        right: 0;
        bottom: calc(50% + 9.9rem);
        left: auto;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .p-home-efficacy__items .item.fragrance .item__img.img-2 {
        --w: calc(100vw - 16rem);
        top: calc(50% + 14.6rem);
        right: 0;
        bottom: auto;
        left: auto;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .p-home-efficacy__items .item.fragrance .item__img.img-3 {
        --w: calc(100vw - 25rem);
        top: calc(50% + 7.8rem);
        right: auto;
        bottom: auto;
        left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .p-home-efficacy__dots {
        top: calc(50lvh - 15rem);
        right: 2rem;
        height: 30rem
    }

    .p-home-efficacy__dots .dot {
        width: .7rem;
        height: .9rem;
        border-radius: .4rem
    }

    .p-home-efficacy__caption {
        margin-right: 2rem
    }

    .p-home-efficacy__foot {
        margin-top: 3.5rem
    }
}

.p-home-product {
    position: relative;
    padding: 3rem 3rem;
    background: url(../image/BG_noise.jpg) repeat-y center center;
    background-size: 100%;
}

.p-home-product::before,.p-home-product::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: contain
}

.p-home-product::before {
    inset: 0 auto auto 0;
    width: 54rem;
    height: 51rem;
    background-image: url(../imgs/home/product_bg-lt.webp);
    background-position: left top
}

.p-home-product::after {
    inset: auto 0 0 auto;
    width: 42rem;
    height: 69rem;
    background-image: url(../imgs/home/product_bg-rb.webp);
    background-position: right bottom
}

.p-home-product__container {
    position: relative;
    z-index: 1
}

.p-home-product__itemsWrap {
    position: relative;
    margin-top: 4rem;
}

.p-home-product__thumb {
    display: none;
}

.p-home-product__items {
    -moz-column-gap: 5rem;
    column-gap: 5rem;
}

.p-home-product__items .item {
    width: auto;
}

.p-home-product__items .item__body {
    box-sizing: border-box;
    position: relative;
    height: 72.3rem;
    background-image: url(../image/item_bg.svg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 432/660;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 10rem;
    width: 100%;
}

/** .p-home-product__items .item__body::before {
    content: "";
    box-sizing: border-box;
    display: block;
    position: absolute;
    inset: 1rem;
    border: currentColor solid 1px;
    border-radius: min(26.3rem,(100vw - 15rem - 2rem)/2);
    pointer-events: none
}**/

.p-home-product__items .item__bodyInner {
}

.p-home-product__items .item__img {
    display: flex;
    justify-content: center;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    margin: -7rem 0 .3rem
}

.p-home-product__items .item__img .img {
    display: block
}

.p-home-product__items .item__img img {
    width: 70%;
    height: auto;
}

.p-home-product__items .item__ttl {
    min-height: 3.2728em;
    margin-bottom: 1.3rem;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.6364;
    letter-spacing: .02em
}

.p-home-product__items .item__txt {
    color: #076286;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5556;
    letter-spacing: .02em
}

.p-home-product__items .item__txt sup {
    font-size: 1.4rem;
    vertical-align: top
}

.p-home-product__items .item__caption {
    margin-top: .9rem
}

.p-home-product__items .item__price {
    margin-top: 3.6rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2308;
    letter-spacing: .04em
}

.p-home-product__items .item__price .price {
    display: inline-block;
    margin: 0 .2rem;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 500;
    font-size: 2.6rem;
    letter-spacing: .04em
}

.p-home-product__items .item__price .volume {
    display: inline-block;
    margin-left: 1rem;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 500
}

.p-home-product__items .item__price+.item__caption {
    margin-top: 1.8rem
}

.p-home-product__items .item__name {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    -moz-column-gap: .4rem;
    column-gap: .4rem;
    margin-top: 1.8rem
}

.p-home-product__items .item__name dt {
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    height: 2rem;
    padding: 0 .5rem;
    border: rgba(76,73,72,.5) solid 1px
}

.p-home-product__items .item__name dd {
    padding-top: .1rem
}

.p-home-product__items .item__more {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem
}

.p-home-product__items .item__more .c-btn {
    --circle-border: #9AB49F;
    --circle-bg: #9AB49F;
    --arw-color: #FFFFFF
}

.p-home-product__items .item__tooltip {
    margin: 2rem 2rem 0;
    padding: 1.9rem 2rem 1.7rem;
    background: rgba(255,255,255,.5);
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 0;
    -webkit-clip-path: polygon(0 1rem, calc(50% - 0.9rem) 1rem, 50% 0, calc(50% + 0.9rem) 1rem, 100% 1rem, 100% 100%, 0% 100%);
    clip-path: polygon(0 1rem, calc(50% - 0.9rem) 1rem, 50% 0, calc(50% + 0.9rem) 1rem, 100% 1rem, 100% 100%, 0% 100%)
}

.p-home-product__items .item__tooltip dt {
    margin-bottom: 1rem;
    padding-bottom: .7rem;
    border-bottom: #cbcbc0 dotted 1px;
    font-weight: 700;
    text-align: center
}

.p-home-product__items .item__tooltip dd {
    display: grid;
    grid-template-columns: 41.573% 1fr;
    -moz-column-gap: 1.4rem;
    column-gap: 1.4rem
}

@media only screen and (max-width: 1023px) {
    .p-home-product {
        padding: 0rem 0;
        background-image: url(../image/BG_noise.jpg);
        background-repeat: repeat-y;
        background-size: 100%;
    }

    .p-home-product::before,.p-home-product::after {
        display: none
    }

    .p-home-product__itemsWrap {
        margin: 0rem -2.5rem 0;
    }

    .p-home-product__thumb {
        display: grid;
        position: absolute;
        right: 2rem;
        z-index: 2;
        row-gap: 1rem
    }

    .p-home-product__thumb .thumb {
        transition: all .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        transition-property: border-color,background;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
        width: 5rem;
        cursor: pointer
    }

    .p-home-product__thumb .thumb img {
        transition: opacity .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        width: 2.9rem;
        filter: drop-shadow(0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.1));
        opacity: .5
    }

    .p-home-product__thumb .thumb.active {
        border-color: #231815;
        background: rgba(255,255,255,.2)
    }

    .p-home-product__thumb .thumb.active img {
        opacity: 1
    }

    .p-home-product__itemsContainer {
        overflow: hidden;
        position: relative;
        z-index: 1;
        padding: 0 2.5rem
    }

    .p-home-product__items {
        -moz-column-gap: 0;
        column-gap: 0;
    }

    .p-home-product__items .item {
        width: calc(100vw - 5rem);
        margin-right: 2.5rem;
    }

    .p-home-product__items .item__body {
        box-sizing: border-box;
        height: 55.5rem;
        padding: 0 4rem;
        padding-bottom: 9rem;
    }

    .p-home-product__items .item__body::before {
        inset: .7rem;
    }

    .p-home-product__items .item__bodyInner {
    }

    .p-home-product__items .item__img {
        -moz-column-gap: .3rem;
        column-gap: .3rem;
        margin: -4rem 0 .1rem
    }

    .p-home-product__items .item__img img {
        width: 50%;
        height: auto;
    }

    .p-home-product__items .item__ttl {
        min-height: 0;
        margin-bottom: 1.2rem;
        font-size: 1.6rem;
        line-height: 1.5
    }

    .p-home-product__items .item__txt {
        font-size: 1.4rem;
        line-height: 1.7143
    }

    .p-home-product__items .item__txt sup {
        font-size: 1.2rem
    }

    .p-home-product__items .item__caption {
        margin-top: .4rem
    }

    .p-home-product__items .item__price {
        margin-top: 2.6rem;
        font-size: 1.2rem;
        line-height: 1.2273;
        letter-spacing: .02em
    }

    .p-home-product__items .item__price .price {
        font-size: 2.2rem;
        letter-spacing: .02em
    }

    .p-home-product__items .item__name {
        margin-top: 1.4rem
    }

    .p-home-product__items .item__tooltip {
        margin: 1rem 0 0;
        padding: 1.7rem 1.6rem 1.3rem
    }

    .p-home-product__items .item__tooltip dt {
        margin-bottom: .9rem;
        padding-bottom: .5rem
    }

    .p-home-product__items .item__tooltip dd {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: .8rem
    }
    .Icon_block{width: 1rem;height: 1rem;}
    .Icon_block img{width: 1rem}
    
}

.p-home-gallery {
    --sy: 0;
    --wrap-w: 1300;
    --wrap-h: 768;
    --container-w: 1300;
    --container-h: 768;
    --col-w: calc(max(calc(var(--wrap-w) / var(--wrap-h)), calc(var(--container-w) / var(--container-h))) * var(--container-h));
    --body-scale: 0.3547;
    --img-aspect-w: 461;
    --img-aspect-h: 272;
    --img-h: calc(var(--col-w) / var(--img-aspect-w) * var(--img-aspect-h));
    --img-max-h: var(--container-h);
    --scroll-rate: 1.5;
    --y: clamp(0, 0, calc(var(--container-h) * var(--scroll-rate)));
    position: relative;
    height: 300lvh;
    background: #231815;
    -webkit-clip-path: inset(0);
    clip-path: inset(0)
}

.p-home-gallery__wrapper {
    position: absolute;
    inset: -100lvh 0;
    z-index: 1
}

.p-home-gallery__container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 1;
    height: 100lvh
}

.p-home-gallery__body {
    will-change: scale;
    scale: calc(var(--body-scale) + (max(var(--container-w)/var(--col-w),var(--container-h)/var(--img-h)) - var(--body-scale))*var(--y)/var(--container-h)/var(--scroll-rate));
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    -moz-column-gap: calc(2rem/var(--body-scale));
    column-gap: calc(2rem/var(--body-scale));
    overflow: hidden;
    position: relative;
    z-index: 1;
    width: calc(100vw/var(--body-scale));
    height: calc(100lvh/var(--body-scale))
}

.p-home-gallery__col {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    width: calc(var(--col-w)*1px);
    flex-direction: column;
    row-gap: calc(2rem/var(--body-scale));
    padding: calc(2rem/var(--body-scale)) 0
}

.p-home-gallery__col--l {
    will-change: translate;
    translate: 0 max(0px,(var(--container-h) + var(--sy))*.5px);
    justify-content: flex-end
}

.p-home-gallery__col--c {
    justify-content: center
}

.p-home-gallery__col--r {
    will-change: translate;
    translate: 0 min(0px,(var(--container-h) + var(--sy))*-0.5px);
    justify-content: flex-start
}

.p-home-gallery__col .img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    height: calc(var(--img-h)*1px);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover
}

.p-home-gallery__col .img img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.p-home-gallery__caption {
    position: absolute;
    inset: auto 1rem calc(100% - 100dvh + 1rem) auto;
    z-index: 2;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0;
    opacity: calc(var(--sy) - var(--container-h)*var(--scroll-rate))
}

@media only screen and (max-width: 1023px) {
    .p-home-gallery {
        --sy: 0;
        --wrap-w: 390;
        --wrap-h: 663;
        --container-w: 390;
        --container-h: 663;
        --body-scale: 0.358975;
        --img-aspect-w: 140;
        --img-aspect-h: 224;
        --scroll-rate: 1.5
    }

    .p-home-gallery__body {
        -moz-column-gap: calc(1rem/var(--body-scale));
        column-gap: calc(1rem/var(--body-scale))
    }

    .p-home-gallery__col {
        row-gap: calc(1rem/var(--body-scale));
        padding: calc(1rem/var(--body-scale)) 0
    }
}

.p-home-news {
    margin-top: 20rem
}

.p-home-news__container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    -moz-column-gap: 5rem;
    column-gap: 5rem
}

.p-home-news__img {
    --sy: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    aspect-ratio: 430/520;
    width: 43rem;
    border-radius: 21.5rem
}

.p-home-news__img::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 1rem 4rem rgba(0,0,0,.2) inset
}

.p-home-news__img img {
    will-change: translate;
    translate: 0 clamp(-7rem,var(--sy)*.08px,7rem);
    flex-shrink: 0
}

.p-home-news__body {
    flex-grow: 1;
    max-width: 57rem;
    padding-top: 3.1rem
}

.p-home-news .p-home-section__ttl {
    text-align: left
}

.p-home-news__items {
    margin-top: 1.5rem
}

.p-home-news__items .item {
    display: block;
    position: relative;
    padding: 2.5rem 0;
    border-bottom: #cbcbc0 solid 1px;
    text-decoration: none
}

.p-home-news__items .item__head {
    display: grid;
    grid-template-columns: 12.5rem 1fr;
    align-items: start
}

.p-home-news__items .item__date {
    display: flex;
    align-items: center;
    -moz-column-gap: .6rem;
    column-gap: .6rem;
    color: #9ab49f;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-size: 1.2rem;
    line-height: 1.25;
    letter-spacing: .03em
}

.p-home-news__items .item__date .ym {
    display: block
}

.p-home-news__items .item__date .m {
    display: block
}

.p-home-news__items .item__date .d {
    display: block;
    font-size: 3.6rem;
    line-height: 1.2223;
    letter-spacing: 0
}

.p-home-news__items .item__ttl {
    margin: .2rem 0 -0.7rem;
    font-size: 1.5rem;
    letter-spacing: .04em
}

.p-home-news__items .item__categories {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    margin-top: 1.4rem;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    color: #9f9f9f;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .03em
}

.p-home-news__items .item__categories li:not(:first-child)::before {
    content: ","
}

@media only screen and (max-width: 1023px) {
    .p-home-news {
        margin-top:10rem
    }

    .p-home-news__container {
        display: block
    }

    .p-home-news__img {
        display: none
    }

    .p-home-news__body {
        max-width: none;
        padding-top: 0
    }

    .p-home-news__items {
        margin-top: 2rem;
        border-top: #cbcbc0 solid 1px
    }

    .p-home-news__items .item {
        display: grid;
        grid-template-columns: 3.5rem 1fr;
        grid-template-rows: auto 1fr;
        -moz-column-gap: 3rem;
        column-gap: 3rem;
        align-items: start;
        padding: 2rem 0
    }

    .p-home-news__items .item__head {
        display: contents
    }

    .p-home-news__items .item__date {
        grid-row: 1/3;
        display: flex;
        flex-direction: column;
        font-size: 1.1rem;
        line-height: 1.2728
    }

    .p-home-news__items .item__date .m {
        margin-top: -0.1rem
    }

    .p-home-news__items .item__date .d {
        font-size: 2.9rem;
        line-height: 1.2069
    }

    .p-home-news__items .item__ttl {
        margin: -0.5rem 0 0;
        font-size: 1.4rem;
        line-height: 1.6429;
        letter-spacing: .06em
    }

    .p-home-news__items .item__categories {
        margin-top: 1rem;
        font-size: 1.1rem;
        line-height: 1.2728
    }
}

.p-home-support {
    margin: 20rem 0
}

.p-home-support__ttl {
    font-size: 3.2rem;
    font-weight: 700
}

.p-home-support__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 5rem;
    column-gap: 5rem;
    margin-top: 4rem
}

.p-home-support__items .item {
    display: grid;
    overflow: hidden;
    aspect-ratio: 525/310;
    border-radius: 2rem;
    color: #fff;
    text-decoration: none
}

.p-home-support__items .item__img {
    transition: scale .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    display: block;
    grid-column: 1/2;
    grid-row: 1/2;
    position: relative;
    z-index: 0
}

.p-home-support__items .item__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.p-home-support__items .item__img::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45)
}

.p-home-support__items .item__txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 1.1rem;
    grid-column: 1/2;
    grid-row: 1/2;
    position: relative;
    z-index: 1
}

.p-home-support__items .item__en {
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2667;
    letter-spacing: .04em
}

.p-home-support__items .item__ttl {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em
}

.p-home-support__items .item__more {
    grid-column: 1/2;
    grid-row: 1/2;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    z-index: 2;
    padding: 1.5rem
}

@media(hover: hover) {
    .p-home-support__items .item:hover .item__img {
        scale:1.05
    }
}

@media only screen and (max-width: 1023px) {
    .p-home-support {
        margin:8rem 0 10rem
    }

    .p-home-support__ttl {
        font-size: 2rem
    }

    .p-home-support__items {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 1.4rem;
        margin-top: 2rem
    }

    .p-home-support__items .item {
        aspect-ratio: 340/177
    }

    .p-home-support__items .item__txt {
        row-gap: .7rem
    }

    .p-home-support__items .item__en {
        font-size: 1.2rem;
        line-height: 1.25;
        letter-spacing: .03em
    }

    .p-home-support__items .item__ttl {
        font-size: 1.8rem;
        letter-spacing: .02em
    }

    .p-home-support__items .item__more {
        padding: 1rem
    }
}

.p-concept-outline {
    overflow: clip;
    position: relative
}

.p-concept-outline__head {
    --sy: 0;
    position: relative;
    z-index: 1;
    padding-top: 12rem
}

.p-concept-outline__ttl {
    position: absolute;
    top: 20rem;
    left: max(5rem,50% - 55rem);
    z-index: 1;
    color: #fff;
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1.4286;
    letter-spacing: .02em
}

.p-concept-outline__ttl .en {
    font-family: "Charter","portada","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 300;
    letter-spacing: .04em;
    margin-bottom: 2.8rem;
    color: #dedeca;
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: .06em
}

.p-concept-outline__eyecatch {
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 0;
    aspect-ratio: 1300/860;
    border-radius: 50vw 50vw 0 0
}

.p-concept-outline__eyecatch img {
    will-change: translate;
    translate: 0 calc(var(--sy)*.1px)
}

.p-concept-outline__body {
    position: relative;
    z-index: 1;
    padding: 14rem 0 20rem
}

.p-concept-outline__txt {
    box-sizing: border-box;
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 5rem;
    font-size: 1.6rem;
    line-height: 2.25;
    letter-spacing: .04em;
    text-align: center
}

.p-concept-outline__txt p+p {
    margin-top: 3rem
}

.p-concept-outline__logo {
    margin: 1rem 0 4rem
}

.p-concept-outline__logo .label {
    display: flex;
    justify-content: center;
    -moz-column-gap: .4rem;
    column-gap: .4rem;
    margin-bottom: 1.4rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em
}

.p-concept-outline__logo .label::before,.p-concept-outline__logo .label::after {
    display: block;
    font-size: 1.2rem;
    letter-spacing: 0
}

.p-concept-outline__logo .label::before {
    content: "「";
    align-self: flex-start
}

.p-concept-outline__logo .label::after {
    content: "」";
    align-self: flex-end
}

.p-concept-outline__logo img {
    width: 22rem
}

.p-concept-outline__movie {
    box-sizing: border-box;
    max-width: 90rem;
    margin: 7rem auto 0;
    padding: 0 5rem
}

.p-concept-outline__movie video {
    display: block;
    overflow: hidden;
    aspect-ratio: 16/9;
    width: 100%;
    border-radius: 2rem
}

.p-concept-outline__item {
    --sy: 0;
    --unit: 0;
    position: relative;
    z-index: 3
}

.p-concept-outline__item .img {
    translate: 0 calc(var(--sy)*var(--unit)*1px);
    will-change: translate;
    display: block;
    position: absolute;
    opacity: 0;
    filter: drop-shadow(3rem 6rem 5rem rgba(0, 0, 0, 0.2))
}

.p-concept-outline__item .img.visibled {
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    opacity: 1
}

.p-concept-outline__item.lotion {
    --unit: 0.1
}

.p-concept-outline__item.lotion .img {
    top: -36.6rem;
    right: max(0px,50% - 55rem);
    width: 8.2rem
}

.p-concept-outline__item.lotion .img img {
    rotate: 12deg;
    transform-origin: right top
}

.p-concept-outline__item.photo {
    --unit: -0.2;
}

.p-concept-outline__item.photo .img {
    top: -17.9rem;
    left: max(0px,50% - 60.7rem);
    width: 15.3rem;
}

.p-concept-outline__item.photo .img img {
    rotate: -12deg;
    transform-origin: left top;
}

.p-concept-outline__item.bottle {
    --unit: 0.2
}

.p-concept-outline__item.bottle .img {
    top: -28.8rem;
    right: max(0px,50% - 65rem);
    width: 15rem
}

.p-concept-outline__item.bottle .img img {
    rotate: 12deg;
    transform-origin: right top
}

.p-concept-outline__bg {
    position: absolute;
    inset: -100lvh 0;
    z-index: 0;
    background: url(../imgs/common/bg_green.webp) repeat-y center top;
    background-size: max(1920px,100%) auto
}

.p-concept-outline__bg::before {
    content: "";
    display: block;
    position: sticky;
    top: 0;
    height: 100lvh;
    background: url(../imgs/common/bg_green.webp) repeat-y center top;
    background-size: max(1920px,100%) auto
}

@media only screen and (max-width: 1023px) {
    .p-concept-outline__head {
        padding-top:8rem
    }

    .p-concept-outline__ttl {
        top: 12rem;
        left: 2.5rem;
        font-size: 2.2rem;
        line-height: 1.6364
    }

    .p-concept-outline__ttl .en {
        margin-bottom: .7rem;
        font-size: 2rem;
        line-height: 1.25
    }

    .p-concept-outline__eyecatch {
        aspect-ratio: auto;
        border-radius: 50vw 50vw 0 0
    }

    .p-concept-outline__eyecatch img {
        translate: none
    }

    .p-concept-outline__body {
        padding: 5.3rem 0 8rem
    }

    .p-concept-outline__txt {
        max-width: none;
        padding: 0 2.5rem;
        font-size: 1.4rem;
        line-height: 2;
        letter-spacing: .02em
    }

    .p-concept-outline__txt p+p {
        margin-top: 1.6rem
    }

    .p-concept-outline__logo {
        margin: .7rem 0 2.3rem
    }

    .p-concept-outline__logo .label {
        font-size: 1.1rem
    }

    .p-concept-outline__logo .label::before,.p-concept-outline__logo .label::after {
        font-size: 1rem
    }

    .p-concept-outline__logo img {
        width: 17rem
    }

    .p-concept-outline__movie {
        max-width: none;
        margin: 3.3rem auto 0;
        padding: 0 2.5rem
    }

    .p-concept-outline__item {
        display: none
    }
}

.p-concept-feature {
    --active: 1;
    --unit-h: 100lvh;
    padding: 26.3rem 0 20rem
}

.p-concept-feature__container {
    display: grid;
    align-items: start
}

.p-concept-feature__items {
    display: grid;
    grid-column: 1/2;
    grid-row: 1/2;
    position: sticky;
    top: calc(50lvh - 27rem);
    z-index: 1;
    margin-bottom: 10rem
}

.p-concept-feature__items .item {
    grid-column: 1/2;
    grid-row: 1/2
}

.p-concept-feature__items .item:first-child .item__body {
    border: currentColor solid 1px;
    background: #fff;
    box-shadow: 4rem 6rem 7.9rem rgba(0,0,0,.2)
}

.p-concept-feature__items .item:first-child .item__body::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../imgs/common/bg.webp) repeat-y center top;
    background-size: max(1920px,100%) auto;
    opacity: .2
}

.p-concept-feature__items .item:first-child .item__body::after {
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute;
    inset: 1rem;
    z-index: 0;
    border: currentColor solid 1px;
    border-radius: 20.6rem
}

.p-concept-feature__items .item:first-child .item__label {
    visibility: visible
}

.p-concept-feature__items .item__body {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
    aspect-ratio: 432/540;
    width: 43.2rem;
    margin: 0 auto;
    padding: 5rem 6rem 0;
    border-radius: 21.6rem;
    text-align: center
}

.p-concept-feature__items .item__label {
    visibility: hidden;
    width: 14.8rem;
    margin: 0 auto 3.9rem
}

.p-concept-feature__items .item__ttl {
    --delay: 0;
    margin-bottom: 2.8rem;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3685;
    letter-spacing: .02em
}

.p-concept-feature__items .item__ttl>sup {
    color: #4c4948;
    font-size: 1.2rem;
    vertical-align: top
}

.p-concept-feature__items .item__ttl>sup:last-of-type {
    display: inline-block;
    margin-left: -0.5834em
}

.p-concept-feature__items .item__ttl strong {
    display: block;
    margin-top: .7rem;
    color: #076286;
    font-size: 2.4rem;
    line-height: 1.4167;
    letter-spacing: .02em
}

.p-concept-feature__items .item__ttl strong sup {
    font-size: 1.6rem;
    vertical-align: top
}

.p-concept-feature__items .item__txt {
    --delay: 1;
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: .02em
}

.p-concept-feature__items .item__txt sup {
    font-size: 1.1rem;
    vertical-align: top
}

.p-concept-feature__items .item__caption {
    margin-top: .7rem
}

.p-concept-feature__items .item__img {
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    will-change: opacity;
    overflow: hidden;
    position: absolute;
    z-index: 0;
    width: var(--w);
    border-radius: 2rem;
    opacity: 0;
    box-shadow: 4rem 6rem 8rem rgba(0,0,0,.2)
}

.p-concept-feature__items .item__img figcaption {
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: absolute;
    inset: auto 0 0;
    height: 4rem;
    padding: 0 1rem .6rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
    color: #fff;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0
}

.p-concept-feature__items .item__img.img-1 {
    --delay: 0
}

.p-concept-feature__items .item__img.img-2 {
    --delay: 1
}

.p-concept-feature__items .item__img.img-3 {
    --delay: 3
}

.p-concept-feature__items .item.scalp .item__img.img-1 {
    --w: 48rem;
    top: calc(50% - 33.4rem);
    right: calc(50% + 10rem)
}

.p-concept-feature__items .item.scalp .item__img.img-2 {
    --w: 30rem;
    bottom: calc(50% + 1.5rem);
    left: calc(50% + 28rem)
}

.p-concept-feature__items .item.scalp .item__img.img-3 {
    --w: 44rem;
    top: calc(50% + 3.5rem);
    left: calc(50% + 11rem)
}

.p-concept-feature__items .item.hair .item__img.img-1 {
    --w: 48rem;
    top: calc(50% - 33.4rem);
    left: calc(50% + 10rem)
}

.p-concept-feature__items .item.hair .item__img.img-2 {
    --w: 30rem;
    bottom: calc(50% + 1.5rem);
    right: calc(50% + 28rem)
}

.p-concept-feature__items .item.hair .item__img.img-3 {
    --w: 44rem;
    top: calc(50% + 3.5rem);
    right: calc(50% + 11rem)
}

.p-concept-feature__items .item.fragrance .item__img.img-1 {
    --w: 48rem;
    top: calc(50% - 33.4rem);
    right: calc(50% + 10rem)
}

.p-concept-feature__items .item.fragrance .item__img.img-2 {
    --top-offset: -31.5rem;
    --left-offset: 16rem;
    --w: 44rem;
    bottom: calc(50% + 3.5rem);
    left: calc(50% + 14rem)
}

.p-concept-feature__items .item.fragrance .item__img.img-3 {
    --top-offset: 1.5rem;
    --left-offset: 23rem;
    --w: 30rem;
    top: calc(50% + 1.5rem);
    left: calc(50% + 23rem)
}

.p-concept-feature__items .item .c-maskobj {
    -webkit-animation: home-efficacy-hidden var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    animation: home-efficacy-hidden var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.p-concept-feature__clone {
    grid-column: 1/2;
    grid-row: 1/2;
    padding-bottom: calc(var(--unit-h)/2)
}

.p-concept-feature__clone .item-clone {
    height: var(--unit-h)
}

.p-concept-feature__dots {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: .8rem;
    justify-self: right;
    grid-column: 1/2;
    grid-row: 1/2;
    position: sticky;
    top: calc(50lvh - 27rem);
    right: 5rem;
    z-index: 2;
    height: 54rem
}

.p-concept-feature__dots .dot {
    transition: background .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    box-sizing: border-box;
    width: .9rem;
    height: 1.1rem;
    border: #231815 solid 1px;
    border-radius: .5rem
}

.p-concept-feature__caption {
    position: sticky;
    bottom: 1rem;
    margin-right: 5rem;
    line-height: 1;
    text-align: right
}

.p-concept-feature__foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10rem
}

.p-concept-feature__foot .c-btn {
    --circle-border: #9AB49F;
    --circle-bg: #9AB49F;
    --arw-color: #FFFFFF
}

.p-concept-feature[data-active="1"] .p-concept-feature__items .item:nth-child(1) .item__img {
    transition-delay: calc(.3s + var(--delay)*.1s);
    opacity: 1
}

.p-concept-feature[data-active="1"] .p-concept-feature__items .item:nth-child(1) .c-maskobj {
    -webkit-animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.p-concept-feature[data-active="1"] .p-concept-feature__dots .dot:nth-child(1) {
    background: #231815
}

.p-concept-feature[data-active="2"] .p-concept-feature__items .item:nth-child(2) .item__img {
    transition-delay: calc(.3s + var(--delay)*.1s);
    opacity: 1
}

.p-concept-feature[data-active="2"] .p-concept-feature__items .item:nth-child(2) .c-maskobj {
    -webkit-animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.p-concept-feature[data-active="2"] .p-concept-feature__dots .dot:nth-child(2) {
    background: #231815
}

.p-concept-feature[data-active="3"] .p-concept-feature__items .item:nth-child(3) .item__img {
    transition-delay: calc(.3s + var(--delay)*.1s);
    opacity: 1
}

.p-concept-feature[data-active="3"] .p-concept-feature__items .item:nth-child(3) .c-maskobj {
    -webkit-animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.p-concept-feature[data-active="3"] .p-concept-feature__dots .dot:nth-child(3) {
    background: #231815
}

@media only screen and (max-width: 1023px) {
    .p-concept-feature {
        padding:21.7rem 0 8rem
    }

    .p-concept-feature__items {
        top: calc(50lvh - 20.5rem);
        margin-bottom: 11.6rem
    }

    .p-concept-feature__items .item:first-child .item__body {
        box-shadow: 2rem 2rem 4rem rgba(0,0,0,.2)
    }

    .p-concept-feature__items .item:first-child .item__body::after {
        inset: .5rem;
        border-radius: 14.8rem
    }

    .p-concept-feature__items .item__body {
        aspect-ratio: 306/410;
        width: 30.6rem;
        padding: 2.7rem 2.8rem 0;
        border-radius: 15.3rem
    }

    .p-concept-feature__items .item__label {
        width: 10rem;
        margin-bottom: 2rem
    }

    .p-concept-feature__items .item__ttl {
        margin-bottom: 1.7rem;
        font-size: 1.3rem;
        line-height: 1.4616
    }

    .p-concept-feature__items .item__ttl>sup {
        font-size: 1rem
    }

    .p-concept-feature__items .item__ttl strong {
        margin-top: .3rem;
        font-size: 1.7rem;
        line-height: 1.4118
    }

    .p-concept-feature__items .item__ttl strong sup {
        font-size: 1.2rem
    }

    .p-concept-feature__items .item__txt {
        font-size: 1.3rem;
        line-height: 1.6924;
        text-align: left
    }

    .p-concept-feature__items .item__txt sup {
        font-size: 1rem
    }

    .p-concept-feature__items .item__caption {
        margin-top: .5rem
    }

    .p-concept-feature__items .item.scalp .item__img.img-1 {
        --w: calc(100vw - 9rem);
        top: auto;
        right: 0;
        bottom: calc(50% + 14.4rem);
        left: auto;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .p-concept-feature__items .item.scalp .item__img.img-2 {
        --w: calc(100vw - 25rem);
        top: calc(50% + 10.2rem);
        right: auto;
        bottom: auto;
        left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .p-concept-feature__items .item.scalp .item__img.img-3 {
        --w: calc(100vw - 16rem);
        top: calc(50% + 16.3rem);
        right: 0;
        bottom: auto;
        left: auto;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .p-concept-feature__items .item.hair .item__img.img-1 {
        --w: calc(100vw - 9rem);
        top: auto;
        right: 0;
        bottom: calc(50% + 14.4rem);
        left: auto;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .p-concept-feature__items .item.hair .item__img.img-2 {
        --w: calc(100vw - 25rem);
        top: calc(50% + 10.2rem);
        right: auto;
        bottom: auto;
        left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .p-concept-feature__items .item.hair .item__img.img-3 {
        --w: calc(100vw - 16rem);
        top: calc(50% + 16.3rem);
        right: 0;
        bottom: auto;
        left: auto;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .p-concept-feature__items .item.fragrance .item__img.img-1 {
        --w: calc(100vw - 9rem);
        top: auto;
        right: 0;
        bottom: calc(50% + 14.4rem);
        left: auto;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .p-concept-feature__items .item.fragrance .item__img.img-2 {
        --w: calc(100vw - 16rem);
        top: calc(50% + 16.3rem);
        right: 0;
        bottom: auto;
        left: auto;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .p-concept-feature__items .item.fragrance .item__img.img-3 {
        --w: calc(100vw - 25rem);
        top: calc(50% + 10.2rem);
        right: auto;
        bottom: auto;
        left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .p-concept-feature__dots {
        top: calc(50lvh - 19.5rem);
        right: 2rem;
        z-index: 2;
        height: 39rem
    }

    .p-concept-feature__dots .dot {
        width: .7rem;
        height: .9rem;
        border-radius: .4rem
    }

    .p-concept-feature__caption {
        margin-right: 1rem
    }

    .p-concept-feature__foot {
        margin-top: 3.5rem
    }
}

.p-concept-herb {
    --sy: 0;
    --wrap-h: 768;
    --active: 0;
    --y: calc((var(--sy) - var(--wrap-h)) * 2);
    overflow: clip;
    position: relative;
    padding-top: 20rem
}

.p-concept-herb__body {
    position: relative;
    z-index: 1
}

.p-concept-herb__ttl {
    font-family: "Charter","portada","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 300;
    letter-spacing: .04em;
    position: relative;
    z-index: 1;
    margin-bottom: 4.5rem;
    color: #fff;
    font-size: 6rem;
    line-height: 1.2167;
    letter-spacing: .03em;
    text-align: center
}

.p-concept-herb__container {
    display: grid;
    align-items: start
}

.p-concept-herb__texts {
    transition: opacity .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    grid-column: 1/2;
    grid-row: 1/2;
    position: relative;
    z-index: 2;
    padding-top: 100lvh;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.3334;
    letter-spacing: .04em
}

.p-concept-herb__texts::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0 calc(50% + 17rem) 0 0;
    z-index: 1;
    background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.3))
}

.p-concept-herb__texts .text {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    height: 100lvh
}

.p-concept-herb__imagesWrap {
    will-change: top;
    grid-column: 1/2;
    grid-row: 1/2;
    position: sticky;
    top: clamp(0px,10lvh - var(--y)/var(--wrap-h)*10lvh,10lvh);
    z-index: 0;
    height: 100lvh
}

.p-concept-herb__images {
    will-change: width,height;
    position: relative;
    width: clamp(75%,75% + var(--y)/var(--wrap-h)*25%,100%);
    height: clamp(75%,75% + var(--y)/var(--wrap-h)*25%,100%);
    margin: 0 auto
}

.p-concept-herb__images .img {
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0
}

.p-concept-herb__images .img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.p-concept-herb__images .img img.pos-rb {
    -o-object-position: right bottom;
    object-position: right bottom
}

.p-concept-herb__images .caption {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    padding: 2rem 1rem 1rem;
    background: linear-gradient(to top, #000000, transparent);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0;
    text-align: right
}

.p-concept-herb[data-active="0"] .p-concept-herb__texts {
    opacity: 0
}

.p-concept-herb[data-active="0"] .p-concept-herb__images .img:first-child {
    opacity: 1
}

.p-concept-herb[data-active="1"] .p-concept-herb__images .img:nth-of-type(1) {
    opacity: 1
}

.p-concept-herb[data-active="2"] .p-concept-herb__images .img:nth-of-type(2) {
    opacity: 1
}

.p-concept-herb[data-active="3"] .p-concept-herb__images .img:nth-of-type(3) {
    opacity: 1
}

.p-concept-herb__bg {
    position: absolute;
    inset: -100lvh 0;
    z-index: 0;
    background: url(../imgs/common/bg_green.webp) repeat-y center top;
    background-size: max(1920px,100%) auto
}

.p-concept-herb__bg::before {
    content: "";
    display: block;
    position: sticky;
    top: 0;
    height: 100lvh;
    background: url(../imgs/common/bg_green.webp) repeat-y center top;
    background-size: max(1920px,100%) auto
}

@media only screen and (max-width: 1023px) {
    .p-concept-herb {
        --wrap-h: 663;
        padding-top: 8rem
    }

    .p-concept-herb__ttl {
        margin-bottom: 2rem;
        font-size: 3.4rem;
        line-height: 1.2059
    }

    .p-concept-herb__texts {
        font-size: 1.5rem;
        line-height: 2
    }

    .p-concept-herb__texts::before {
        inset: 0;
        background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1))
    }
}

.p-concept-tips {
    margin-top: 20rem
}

.p-concept-tips__body {
    display: grid;
    grid-template-columns: 44.898% 1fr;
    align-items: start;
    -moz-column-gap: 4rem;
    column-gap: 4rem;
    padding: 6rem 6rem 5rem;
    background: rgba(255,255,255,.5)
}

.p-concept-tips__img {
    display: block;
    overflow: hidden;
    border-radius: 2rem
}

.p-concept-tips__txt {
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: .02em
}

.p-concept-tips__label {
    font-family: "Charter","portada","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 300;
    letter-spacing: .04em;
    margin-bottom: .9rem;
    color: #076286;
    font-size: 2rem;
    line-height: 1.25;
    letter-spacing: .03em
}

.p-concept-tips__ttl {
    margin-bottom: 1.7rem;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em
}

.p-concept-tips__profile {
    grid-column: 1/3;
    margin-top: 4.3rem;
    padding-bottom: 2rem;
    border-bottom: #cbcbc0 dotted 1px
}

.p-concept-tips__profile dt {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    margin-bottom: 1.6rem;
    color: #4c4948;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.2728;
    letter-spacing: .03em
}

.p-concept-tips__profile dt::after {
    content: "";
    display: block;
    border-top: #cbcbc0 dotted 1px
}

.p-concept-tips__profile dd {
    display: grid;
    grid-template-columns: auto 1fr;
    -moz-column-gap: 3.5rem;
    column-gap: 3.5rem;
    align-items: center;
    font-size: 1.2rem;
    line-height: 1.6667;
    letter-spacing: .02em
}

.p-concept-tips__profile dd .name {
    display: grid;
    row-gap: .4rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em
}

.p-concept-tips__profile dd .name__en {
    color: #4c4948;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .05em
}

.p-concept-tips__more {
    display: flex;
    justify-content: flex-end;
    grid-column: 1/3;
    margin-top: 5rem
}

.p-concept-tips__more .c-btn {
    --circle-border: #9AB49F;
    --circle-bg: #9AB49F;
    --arw-color: #FFFFFF
}

@media only screen and (max-width: 1023px) {
    .p-concept-tips {
        margin-top:8rem
    }

    .p-concept-tips__body {
        display: block;
        margin: 0 -2.5rem;
        padding: 2.5rem
    }

    .p-concept-tips__img {
        margin-bottom: 2rem
    }

    .p-concept-tips__label {
        margin-bottom: .5rem;
        font-size: 1.7rem;
        line-height: 1.2353
    }

    .p-concept-tips__ttl {
        margin-bottom: .8rem;
        font-size: 1.7rem;
        line-height: 1.6471
    }

    .p-concept-tips__profile {
        margin-top: 2.3rem;
        padding-bottom: 1.6rem
    }

    .p-concept-tips__profile dt {
        margin-bottom: 1.5rem;
        font-size: 1rem;
        line-height: 1.3
    }

    .p-concept-tips__profile dd {
        display: block
    }

    .p-concept-tips__profile dd .name {
        font-size: 1.4rem;
        line-height: 1
    }

    .p-concept-tips__more {
        margin-top: 2.5rem
    }
}

.p-product-index {
    position: relative
}

.p-product-index::before,.p-product-index::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: contain
}

.p-product-index::before {
    inset: -19rem auto auto 0;
    width: 22rem;
    height: 40rem;
    background-image: url(../imgs/product/index/bg-lt.webp);
    background-position: left top
}

.p-product-index::after {
    inset: auto 0 7.5rem auto;
    width: 24rem;
    height: 33rem;
    background-image: url(../imgs/product/index/bg-rb.webp);
    background-position: right bottom
}

.p-product-index__container {
    position: relative;
    z-index: 1
}

.p-product-index__itemsWrap {
    position: relative
}

.p-product-index__thumb {
    display: none
}

.p-product-index__items {
    -moz-column-gap: 5rem;
    column-gap: 5rem;
    padding-top: 7rem
}

.p-product-index__items .item {
    width: calc(50% - 2.5rem)
}

.p-product-index__items .item__body {
    box-sizing: border-box;
    position: relative;
    height: 75.5rem;
    padding: 0 5rem;
    border: currentColor solid 1px;
    border-radius: min(26.3rem,(100vw - 15rem)/2);
    background: rgba(255,255,255,.7);
    text-align: center
}

.p-product-index__items .item__body::before {
    content: "";
    box-sizing: border-box;
    display: block;
    position: absolute;
    inset: 1rem;
    border: currentColor solid 1px;
    border-radius: min(26.3rem,(100vw - 15rem - 2rem)/2);
    pointer-events: none
}

.p-product-index__items .item__bodyInner {
    min-height: 35.5rem
}

.p-product-index__items .item__img {
    display: flex;
    justify-content: center;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    margin: -7rem 0 .5rem
}

.p-product-index__items .item__img .img {
    display: block
}

.p-product-index__items .item__img img {
    width: auto;
    height: 33rem
}

.p-product-index__items .item__label {
    margin-bottom: .7rem;
    color: #7d7d7d;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.2858;
    letter-spacing: .02em
}

.p-product-index__items .item__ttl {
    min-height: 3.2728em;
    margin-bottom: 1.3rem;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.6364;
    letter-spacing: .02em
}

.p-product-index__items .item__txt {
    color: #076286;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5556;
    letter-spacing: .02em
}

.p-product-index__items .item__txt sup {
    font-size: 1.4rem;
    vertical-align: top
}

.p-product-index__items .item__caption {
    margin-top: .9rem
}

.p-product-index__items .item__price {
    margin-top: 3.6rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2308;
    letter-spacing: .04em
}

.p-product-index__items .item__price .price {
    display: inline-block;
    margin: 0 .2rem;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 500;
    font-size: 2.6rem;
    letter-spacing: .04em
}

.p-product-index__items .item__price .volume {
    display: inline-block;
    margin-left: 1rem;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 500
}

.p-product-index__items .item__price+.item__caption {
    margin-top: 1.8rem
}

.p-product-index__items .item__name {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    -moz-column-gap: .4rem;
    column-gap: .4rem;
    margin-top: 1.8rem
}

.p-product-index__items .item__name dt {
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    height: 2rem;
    padding: 0 .5rem;
    border: rgba(76,73,72,.5) solid 1px
}

.p-product-index__items .item__name dd {
    padding-top: .1rem
}

.p-product-index__items .item__more {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem
}

.p-product-index__items .item__more .c-btn {
    --circle-border: #9AB49F;
    --circle-bg: #9AB49F;
    --arw-color: #FFFFFF
}

.p-product-index__items .item__tooltip {
    margin: 2rem 2rem 0;
    padding: 1.9rem 2rem 1.7rem;
    background: rgba(255,255,255,.5);
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 0;
    -webkit-clip-path: polygon(0 1rem, calc(50% - 0.9rem) 1rem, 50% 0, calc(50% + 0.9rem) 1rem, 100% 1rem, 100% 100%, 0% 100%);
    clip-path: polygon(0 1rem, calc(50% - 0.9rem) 1rem, 50% 0, calc(50% + 0.9rem) 1rem, 100% 1rem, 100% 100%, 0% 100%)
}

.p-product-index__items .item__tooltip dt {
    margin-bottom: 1rem;
    padding-bottom: .7rem;
    border-bottom: #cbcbc0 dotted 1px;
    font-weight: 700;
    text-align: center
}

.p-product-index__items .item__tooltip dd {
    display: grid;
    grid-template-columns: 41.573% 1fr;
    -moz-column-gap: 1.4rem;
    column-gap: 1.4rem
}

@media only screen and (max-width: 1023px) {
    .p-product-index::before {
        top:-15.7rem;
        width: 13rem;
        height: 26rem;
        background-image: url(../imgs/product/index/bg-lt_sp.webp)
    }

    .p-product-index::after {
        bottom: 0;
        width: 12.5rem;
        height: 23rem;
        background-image: url(../imgs/product/index/bg-rb_sp.webp)
    }

    .p-product-index__itemsWrap {
        margin: 0 -2.5rem
    }

    .p-product-index__thumb {
        display: grid;
        position: absolute;
        top: -7rem;
        right: 2rem;
        z-index: 2;
        row-gap: 1rem
    }

    .p-product-index__thumb .thumb {
        transition: all .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        transition-property: border-color,background;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
        width: 5rem;
        border: rgba(35,24,21,.1) solid 1px;
        border-radius: .6rem;
        cursor: pointer
    }

    .p-product-index__thumb .thumb img {
        transition: opacity .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        width: 2.9rem;
        filter: drop-shadow(0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.1));
        opacity: .5
    }

    .p-product-index__thumb .thumb.active {
        border-color: #231815;
        background: rgba(255,255,255,.2)
    }

    .p-product-index__thumb .thumb.active img {
        opacity: 1
    }

    .p-product-index__itemsContainer {
        overflow: hidden;
        position: relative;
        z-index: 1;
        padding: 0 2.5rem
    }

    .p-product-index__items {
        -moz-column-gap: 0;
        column-gap: 0;
        padding-top: 4rem
    }

    .p-product-index__items .item {
        width: calc(100vw - 5rem);
        margin-right: 2.5rem
    }

    .p-product-index__items .item__body {
        box-sizing: border-box;
        height: 59.4rem;
        padding: 0 4rem;
        border-radius: calc((100vw - 5rem)/2)
    }

    .p-product-index__items .item__body::before {
        inset: .7rem;
        border-radius: calc((100vw - 5rem - 1.4rem)/2)
    }

    .p-product-index__items .item__bodyInner {
        min-height: 29rem
    }

    .p-product-index__items .item__img {
        -moz-column-gap: .3rem;
        column-gap: .3rem;
        margin: -4rem 0 .5rem
    }

    .p-product-index__items .item__img img {
        height: 22rem
    }

    .p-product-index__items .item__label {
        margin-bottom: .4rem;
        color: #7d7d7d;
        font-size: 1.2rem;
        line-height: 1.25
    }

    .p-product-index__items .item__ttl {
        min-height: 0;
        margin-bottom: 1.2rem;
        font-size: 1.6rem;
        line-height: 1.5
    }

    .p-product-index__items .item__txt {
        font-size: 1.4rem;
        line-height: 1.7143
    }

    .p-product-index__items .item__txt sup {
        font-size: 1.2rem
    }

    .p-product-index__items .item__caption {
        margin-top: .4rem
    }

    .p-product-index__items .item__price {
        margin-top: 2.6rem;
        font-size: 1.2rem;
        line-height: 1.2273;
        letter-spacing: .02em
    }

    .p-product-index__items .item__price .price {
        font-size: 2.2rem;
        letter-spacing: .02em
    }

    .p-product-index__items .item__name {
        margin-top: 1.4rem
    }

    .p-product-index__items .item__tooltip {
        margin: 1rem 0 0;
        padding: 1.7rem 1.6rem 1.3rem
    }

    .p-product-index__items .item__tooltip dt {
        margin-bottom: .9rem;
        padding-bottom: .5rem
    }

    .p-product-index__items .item__tooltip dd {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: .8rem
    }
}

.p-product-detail {
    position: relative
}

.p-product-detail::before,.p-product-detail::after {
    content: "";
    display: block;
    position: fixed;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: contain
}

.p-product-detail::before {
    inset: 0;
    width: 34.5rem;
    height: 23.7rem;
    background-image: url(../imgs/product/detail/bg-lt.webp);
    background-position: left top
}

.p-product-detail::after {
    inset: auto 0 0 auto;
    width: 17.2rem;
    height: 25.4rem;
    background-image: url(../imgs/product/detail/bg-rb.webp);
    background-position: right bottom
}

.p-product-detail__container {
    position: relative;
    z-index: 1
}

.p-product-detail__itemsWrap {
    position: relative
}

.p-product-detail__items {
    -moz-column-gap: 9.5rem;
    column-gap: 9.5rem;
    padding-top: 14rem
}

.p-product-detail__items .item__body {
    width: calc(100% - 49.5rem)
}

.p-product-detail__items .item__img {
    width: 40rem;
    display: flex;
    justify-content: center;
    margin: 0
}

.p-product-detail__items .item__img .img {
    display: block
}

.p-product-detail__items .item__img img {
    width: auto;
    height: 52rem
}

.p-product-detail__items .item__label {
    margin-bottom: .8rem;
    color: #7d7d7d;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.2858;
    letter-spacing: .02em
}

.p-product-detail__items .item__ttl {
    margin-bottom: 2rem;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em
}

.p-product-detail__items .item__txt {
    color: #076286;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5556;
    letter-spacing: .02em
}

.p-product-detail__items .item__txt sup {
    font-size: 1.4rem;
    vertical-align: top
}

.p-product-detail__items .item__txt+.c-caption {
    margin-top: 1rem
}

.p-product-detail__items .item__price {
    margin-top: 3.6rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2308;
    letter-spacing: .04em
}

.p-product-detail__items .item__price .price {
    display: inline-block;
    margin: 0 .2rem;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 500;
    font-size: 2.6rem;
    letter-spacing: .04em
}

.p-product-detail__items .item__price .volume {
    display: inline-block;
    margin-left: 1rem;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 500
}

.p-product-detail__items .item__price+.item__caption {
    margin-top: 1.8rem
}

.p-product-detail__items .item__caption {
    margin-top: 1.9rem;
    display: flex;
    flex-wrap: wrap
}

.p-product-detail__items .item__caption .c-caption {
    margin-right: .8rem
}

.p-product-detail__items .item__name {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    -moz-column-gap: .4rem;
    column-gap: .4rem
}

.p-product-detail__items .item__name dt {
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    height: 2rem;
    padding: 0 .5rem;
    border: rgba(76,73,72,.5) solid 1px
}

.p-product-detail__items .item__name dd {
    padding-top: .1rem
}

.p-product-detail__items .item__scent {
    margin-top: 6rem;
    padding-top: 3rem;
    border-top: #cbcbc0 solid 1px;
    display: flex;
    align-items: center;
    -moz-column-gap: 5rem;
    column-gap: 5rem
}

.p-product-detail__items .item__scent .body {
    flex-grow: 1
}

.p-product-detail__items .item__scent .body .ttl {
    border-radius: .4rem;
    background: #9ab49f;
    display: inline-block;
    color: #fff;
    padding: .5rem 1.2rem .3rem;
    line-height: 1.4;
    font-weight: 700;
    margin-bottom: 1.5rem
}

.p-product-detail__items .item__scent .img {
    flex-shrink: 0;
    width: 25rem;
    display: block;
    overflow: hidden;
    border-radius: 8rem;
    box-shadow: 1rem 1rem 2rem rgba(0,0,0,.1)
}

.p-product-detail__onlineshop {
    margin-top: 15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6rem;
    background: rgba(255,255,255,.8)
}

.p-product-detail__onlineshop .ttl {
    font-family: "Charter","portada","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 300;
    letter-spacing: .04em;
    font-size: 3.4rem;
    width: 27rem
}

.p-product-detail__onlineshop .list {
    width: calc(100% - 27rem);
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    row-gap: 1rem
}

.p-product-detail__onlineshop .list li {
    max-width: 29.7rem;
    width: 100%
}

.p-product-detail__onlineshop .list li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    background: #076286;
    height: 5.5rem;
    padding: 0 2.5rem;
    border-radius: 5.5rem;
    position: relative;
    transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-property: background,color,border;
    border: rgba(0,0,0,0) 1px solid;
    box-sizing: border-box
}

@media(hover: hover) {
    .p-product-detail__onlineshop .list li a:hover {
        border-color:#076286;
        background: #fff;
        color: #076286
    }

    .p-product-detail__onlineshop .list li a:hover:before {
        background: #076286
    }
}

.p-product-detail__onlineshop .list li a:before {
    position: absolute;
    right: 2rem;
    content: "";
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    background: rgba(255,255,255,.6);
    -webkit-mask-image: url(../imgs/common/icon_blank.svg);
    mask-image: url(../imgs/common/icon_blank.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-property: background
}

.p-product-detail__efficacy {
    position: relative;
    z-index: 1;
    padding-top: 20rem;
    padding-bottom: 0rem
}

.p-product-detail__howto {
    max-width: 96rem;
    margin: 20rem auto 0
}

.p-product-detail__howto>.ttl {
    text-align: center;
    font-size: 4rem;
    font-family: "Charter","portada","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 300;
    letter-spacing: .04em;
    margin-bottom: 5.5rem;
    line-height: 1
}

.p-product-detail__howto .howto {
    display: flex;
    justify-content: space-between;
    position: relative
}

.p-product-detail__howto .howto:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -2rem;
    margin-left: -1.7rem;
    background: #076286;
    -webkit-mask-image: url(../imgs/product/detail/lotion/howto_arw-l.svg);
    mask-image: url(../imgs/product/detail/lotion/howto_arw-l.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 3.4rem;
    height: 4rem
}

.p-product-detail__howto .howto .item {
    width: calc(50% - 6rem);
    height: 52rem;
    display: flex;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 21rem;
    border: 1px solid #231815;
    box-sizing: border-box;
    overflow: hidden;
    padding: 5rem;
    position: relative
}

.p-product-detail__howto .howto .item:before {
    position: absolute;
    content: "";
    display: block;
    border: 1px solid #231815;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    border-radius: 20rem;
    box-sizing: border-box
}

.p-product-detail__howto .howto .item__body {
    width: 100%
}

.p-product-detail__howto .howto .item__step {
    background: #076286;
    color: #fff;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-size: 1.2rem;
    display: inline-block;
    line-height: 1;
    border-radius: .4rem;
    overflow: hidden;
    width: 7rem;
    height: 3rem;
    margin-bottom: .5rem
}

.p-product-detail__howto .howto .item__step span {
    font-size: 2.4rem;
    font-weight: 500;
    position: relative;
    top: .3rem;
    padding-left: .3rem
}

.p-product-detail__howto .howto .item__ttl {
    font-size: 1.8rem;
    line-height: 1.4;
    font-weight: 700;
    color: #076286;
    margin-bottom: 2rem
}

.p-product-detail__howto .howto .item__img {
    display: block;
    margin-bottom: 3rem
}

.p-product-detail__howto .howto .item__img img {
    width: auto;
    height: 12rem
}

.p-product-detail__howto .howto .item__point .ttl {
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: .5rem;
    position: relative
}

.p-product-detail__howto .howto .item__point .ttl:before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    content: "";
    display: block;
    border-bottom: 1px dotted #cbcbc0
}

.p-product-detail__howto .howto .item__point .ttl span {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 0 .6rem;
    color: #4c4948
}

.p-product-detail__howto .howto .item__point .txt {
    line-height: 1.5
}

@media only screen and (max-width: 1023px) {
    .p-product-detail.lotion .p-product-detail__items .item__img {
        width:5.5rem
    }

    .p-product-detail::before {
        width: 19.3rem;
        height: 17.2rem;
        background-image: url(../imgs/product/detail/bg-lt_sp.webp);
        position: absolute
    }

    .p-product-detail::after {
        width: 8rem;
        height: 10.7rem;
        background-image: url(../imgs/product/detail/bg-rb_sp.webp);
        top: 55rem;
        right: 0;
        position: absolute
    }

    .p-product-detail__container {
        position: relative;
        z-index: 1
    }

    .p-product-detail__itemsWrap {
        position: relative
    }

    .p-product-detail__items {
        -moz-column-gap: 0;
        column-gap: 0;
        padding-top: 8rem;
        display: block
    }

    .p-product-detail__items .item__body {
        width: auto
    }

    .p-product-detail__items .item__img {
        width: 16.5rem;
        display: block;
        margin: 0 auto
    }

    .p-product-detail__items .item__img img {
        width: 100%;
        height: auto
    }

    .p-product-detail__items .item__label {
        margin-bottom: .5rem;
        font-size: 1.2rem
    }

    .p-product-detail__items .item__ttl {
        min-height: auto;
        margin-bottom: 1rem;
        font-size: 1.8rem;
        line-height: 1.6
    }

    .p-product-detail__items .item__txt {
        font-size: 1.6rem
    }

    .p-product-detail__items .item__txt sup {
        font-size: 1.2rem
    }

    .p-product-detail__items .item__price {
        margin-top: 2.8rem;
        font-size: 1.2rem
    }

    .p-product-detail__items .item__price .price {
        font-size: 2.2rem
    }

    .p-product-detail__items .item__price .volume {
        display: inline-block;
        margin-left: 1rem;
        font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
        font-weight: 500
    }

    .p-product-detail__items .item__price+.item__caption {
        margin-top: 1.6rem
    }

    .p-product-detail__items .item__caption {
        margin-top: .9rem;
        display: block
    }

    .p-product-detail__items .item__caption .c-caption {
        margin-right: 0
    }

    .p-product-detail__items .item__name {
        margin-top: .5rem;
        display: block
    }

    .p-product-detail__items .item__name dt {
        box-sizing: border-box;
        display: inline-block
    }

    .p-product-detail__items .item__name dd {
        padding-top: .1rem
    }

    .p-product-detail__items .item__scent {
        margin-top: 2.5rem;
        padding-top: 2rem;
        -moz-column-gap: 2rem;
        column-gap: 2rem
    }

    .p-product-detail__items .item__scent .body .ttl {
        padding: .5rem .5rem .3rem;
        margin-bottom: 1rem;
        font-size: 1.3rem
    }

    .p-product-detail__items .item__scent .body .txt {
        font-size: 1.3rem
    }

    .p-product-detail__items .item__scent .img {
        width: 12rem
    }

    .p-product-detail__onlineshop {
        margin-top: 6rem;
        display: block;
        padding: 3rem
    }

    .p-product-detail__onlineshop .ttl {
        text-align: center;
        font-size: 2.2rem;
        width: auto;
        margin-bottom: 2rem
    }

    .p-product-detail__onlineshop .list {
        width: auto;
        flex-flow: column;
        -moz-column-gap: 0;
        column-gap: 0;
        row-gap: 1rem
    }

    .p-product-detail__onlineshop .list li {
        max-width: inherit
    }

    .p-product-detail__onlineshop .list li a {
        height: 4.4rem;
        padding: 0 2rem
    }

    .p-product-detail__onlineshop .list li a:before {
        right: 1.5rem;
        width: 1rem;
        height: 1rem
    }

    .p-product-detail__efficacy {
        z-index: 1;
        padding-top: 8rem
    }

    .p-product-detail__howto {
        margin: 10rem auto 0
    }

    .p-product-detail__howto>.ttl {
        font-size: 2.4rem;
        margin-bottom: 2.5rem
    }

    .p-product-detail__howto .howto {
        display: block
    }

    .p-product-detail__howto .howto:before {
        display: none
    }

    .p-product-detail__howto .howto .item {
        width: 100%;
        height: auto;
        display: block;
        padding: 6rem 4rem;
        overflow: inherit
    }

    .p-product-detail__howto .howto .item:before {
        top: .7rem;
        left: .7rem;
        right: .7rem;
        bottom: .7rem;
        border-radius: 20rem
    }

    .p-product-detail__howto .howto .item+.item {
        margin-top: 5.8rem;
        position: relative
    }

    .p-product-detail__howto .howto .item+.item:after {
        content: "";
        position: absolute;
        left: 50%;
        top: -4.5rem;
        margin-top: 0;
        margin-left: -1.2rem;
        background: #076286;
        -webkit-mask-image: url(../imgs/product/detail/lotion/howto_arw-b.svg);
        mask-image: url(../imgs/product/detail/lotion/howto_arw-b.svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
        -webkit-mask-size: contain;
        mask-size: contain;
        width: 2.4rem;
        height: 2.82rem
    }

    .p-product-detail__howto .howto .item__ttl {
        font-size: 1.6rem;
        margin-bottom: 2rem
    }

    .p-product-detail__howto .howto .item__img {
        margin-bottom: 3rem
    }

    .p-product-detail__howto .howto .item__img img {
        height: 10rem
    }
}

.p-product-efficacy {
    --active: 1;
    --unit-h: 100lvh;
    max-width: 96rem;
    margin: 0 auto;
    position: relative
}

.p-product-efficacy__container {
    display: grid;
    align-items: start
}

.p-product-efficacy__items {
    display: grid;
    grid-column: 1/2;
    grid-row: 1/2;
    position: sticky;
    top: calc(50lvh - 30rem);
    z-index: 1
}

.p-product-efficacy__items .item {
    grid-column: 1/2;
    grid-row: 1/2
}

.p-product-efficacy__items .item.active {
    position: relative;
    z-index: 10
}

.p-product-efficacy__items .item__body {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
    aspect-ratio: 470/600;
    width: 47rem
}

.p-product-efficacy__items .item__ttl {
    --delay: 0;
    margin-bottom: 2.6rem;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .03em;
    color: #076286
}

.p-product-efficacy__items .item__ttl sup {
    vertical-align: top;
    font-size: 2rem
}

.p-product-efficacy__items .item__txt {
    --delay: 1;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2;
    letter-spacing: .02em
}

.p-product-efficacy__items .item__txt sup {
    font-size: 1.2rem;
    vertical-align: top;
    position: relative;
    top: .3rem
}

.p-product-efficacy__items .item__txt .c-caption {
    margin-top: 1rem
}

.p-product-efficacy__items .item__btn {
    margin-top: 5rem
}

.p-product-efficacy__items .item__btn .c-btn {
    --circle-border: #9AB49F;
    --circle-bg: #9AB49F;
    --arw-color: #FFFFFF
}

.p-product-efficacy__items .item__img {
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    will-change: opacity;
    position: absolute;
    top: calc(50% - 24.5rem);
    right: 0;
    z-index: 0;
    width: 40rem;
    --delay: 0;
    opacity: 0
}

.p-product-efficacy__items .item__img .img {
    overflow: hidden;
    display: block;
    box-shadow: 1rem 2rem 3rem rgba(0,0,0,.2);
    border-radius: 21rem
}

.p-product-efficacy__items .item .c-maskobj {
    -webkit-animation: home-efficacy-hidden var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    animation: home-efficacy-hidden var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.p-product-efficacy__clone {
    grid-column: 1/2;
    grid-row: 1/2;
    padding-bottom: calc(var(--unit-h)/2)
}

.p-product-efficacy__clone .item-clone {
    height: var(--unit-h)
}

.p-product-efficacy__dots {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: .8rem;
    justify-self: right;
    grid-column: 1/2;
    grid-row: 1/2;
    position: sticky;
    top: calc(50lvh - 30rem);
    transform: translateX(-42rem);
    z-index: 2;
    height: 60rem
}

.p-product-efficacy__dots .dot {
    transition: background .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    box-sizing: border-box;
    width: .9rem;
    height: 1.1rem;
    border: #231815 solid 1px;
    border-radius: .5rem
}

.p-product-efficacy__caption {
    line-height: 1;
    text-align: right
}

.p-product-efficacy[data-active="1"] .p-product-efficacy__items .item:nth-child(1) .item__img {
    transition-delay: calc(.3s + var(--delay)*.1s);
    opacity: 1
}

.p-product-efficacy[data-active="1"] .p-product-efficacy__items .item:nth-child(1) .c-maskobj {
    -webkit-animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.p-product-efficacy[data-active="1"] .p-product-efficacy__dots .dot:nth-child(1) {
    background: #231815
}

.p-product-efficacy[data-active="2"] .p-product-efficacy__items .item:nth-child(2) .item__img {
    transition-delay: calc(.3s + var(--delay)*.1s);
    opacity: 1
}

.p-product-efficacy[data-active="2"] .p-product-efficacy__items .item:nth-child(2) .c-maskobj {
    -webkit-animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.p-product-efficacy[data-active="2"] .p-product-efficacy__dots .dot:nth-child(2) {
    background: #231815
}

.p-product-efficacy[data-active="3"] .p-product-efficacy__items .item:nth-child(3) .item__img {
    transition-delay: calc(.3s + var(--delay)*.1s);
    opacity: 1
}

.p-product-efficacy[data-active="3"] .p-product-efficacy__items .item:nth-child(3) .c-maskobj {
    -webkit-animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.p-product-efficacy[data-active="3"] .p-product-efficacy__dots .dot:nth-child(3) {
    background: #231815
}

.p-product-efficacy[data-active="4"] .p-product-efficacy__items .item:nth-child(4) .item__img {
    transition-delay: calc(.3s + var(--delay)*.1s);
    opacity: 1
}

.p-product-efficacy[data-active="4"] .p-product-efficacy__items .item:nth-child(4) .c-maskobj {
    -webkit-animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    animation: home-efficacy-active var(--duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(.3s + var(--delay)*.1s);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.p-product-efficacy[data-active="4"] .p-product-efficacy__dots .dot:nth-child(4) {
    background: #231815
}

@media only screen and (max-width: 1023px) {
    .p-product-efficacy__container {
        display:block
    }

    .p-product-efficacy__items {
        display: block;
        position: static
    }

    .p-product-efficacy__items .item {
        display: flex;
        flex-flow: column-reverse wrap-reverse
    }

    .p-product-efficacy__items .item+.item {
        margin-top: 5.5rem
    }

    .p-product-efficacy__items .item__body {
        display: block;
        aspect-ratio: auto;
        width: auto
    }

    .p-product-efficacy__items .item__ttl {
        --delay: 0;
        margin-bottom: 1rem;
        font-size: 1.7rem;
        -webkit-mask-position: center center;
        mask-position: center center;
        -webkit-animation: none !important;
        animation: none !important
    }

    .p-product-efficacy__items .item__ttl sup {
        font-size: 1.2rem
    }

    .p-product-efficacy__items .item__txt {
        font-size: 1.4rem;
        -webkit-mask-position: center center;
        mask-position: center center;
        -webkit-animation: none !important;
        animation: none !important
    }

    .p-product-efficacy__items .item__txt sup {
        top: .2rem
    }

    .p-product-efficacy__items .item__btn {
        margin-top: 3.5rem
    }

    .p-product-efficacy__items .item__img {
        position: static;
        z-index: 0;
        width: auto;
        opacity: 1;
        margin-bottom: 2rem
    }

    .p-product-efficacy__items .item__img .img {
        overflow: hidden;
        display: block;
        box-shadow: 1rem 1rem 2rem rgba(0,0,0,.1);
        border-radius: 2rem
    }

    .p-product-efficacy__clone {
        display: none
    }

    .p-product-efficacy__dots {
        display: none
    }

    .p-product-efficacy__caption {
        font-size: 1rem;
        margin-top: 1rem;
        line-height: 1;
        text-align: right
    }
}

.p-shoplist-list .list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 3.8rem
}

.p-shoplist-list .list li {
    padding: 2.5rem 0;
    line-height: 1.4;
    border-bottom: 1px solid #cbcbc0
}

.p-shoplist-list .c-caption {
    margin-top: 5rem
}

@media only screen and (max-width: 1023px) {
    .p-shoplist-list .list {
        display:block
    }

    .p-shoplist-list .list li {
        padding: 1.6rem 0
    }

    .p-shoplist-list .list li:first-child {
        padding-top: 0
    }

    .p-shoplist-list .c-caption {
        margin-top: 3.5rem
    }
}

.p-faq-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative
}

.p-faq-content__ank {
    width: 35rem;
    position: sticky;
    z-index: 1;
    top: 15rem;
    height: 100%
}

.p-faq-content__ank ul li+li {
    margin-top: 2rem
}

.p-faq-content__ank ul li a {
    text-decoration: none;
    color: #7d7d7d;
    font-weight: 700;
    line-height: 1.4;
    transition-property: color,margin,background-size;
    position: relative
}

.p-faq-content__ank ul li a:before {
    content: "";
    position: absolute;
    display: block;
    left: -1.3rem;
    top: .4rem;
    width: .5rem;
    height: .6rem;
    border-radius: 1rem;
    background: #076286;
    opacity: 0;
    transition: all .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-property: opacity
}

.p-faq-content__ank ul li a.is-active {
    color: #076286;
    margin-left: 1.3rem
}

.p-faq-content__ank ul li a.is-active:before {
    opacity: 1
}

.p-faq-content__body {
    width: calc(100% - 35rem)
}

@media only screen and (max-width: 1023px) {
    .p-faq-content {
        display:block
    }

    .p-faq-content__ank {
        width: auto;
        position: static;
        height: auto;
        margin-bottom: 3rem
    }

    .p-faq-content__ank ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap
    }

    .p-faq-content__ank ul li {
        width: calc(50% - 1rem);
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #cbcbc0;
        position: relative
    }

    .p-faq-content__ank ul li+li {
        margin-top: 0
    }

    .p-faq-content__ank ul li a {
        padding-bottom: 1rem;
        width: 100%;
        text-decoration: none;
        font-weight: 700;
        font-size: 1.2rem;
        line-height: 1.25;
        display: block;
        color: #231815;
        position: static
    }

    .p-faq-content__ank ul li a:before {
        display: none
    }

    .p-faq-content__ank ul li a.is-active {
        color: #231815;
        margin-left: 0
    }

    .p-faq-content__ank ul li a .arw {
        position: absolute;
        right: 0;
        top: .1rem;
        display: block;
        width: 2.2rem;
        height: 2.2rem;
        border: 1px solid #231815;
        border-radius: 50%
    }

    .p-faq-content__ank ul li a .arw:before {
        content: "";
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        margin-left: -0.6rem;
        margin-top: -0.6rem;
        width: 1.2rem;
        height: 1.2rem;
        background: #231815;
        -webkit-mask-image: url(../imgs/common/arw.svg);
        mask-image: url(../imgs/common/arw.svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
        -webkit-mask-size: contain;
        mask-size: contain;
        transform: rotate(90deg)
    }

    .p-faq-content__body {
        width: auto
    }
}

.p-faq-item {
    padding-top: 12rem
}

.p-faq-item:first-child {
    margin-top: -12rem
}

.p-faq-item__ttl {
    background: #076286;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 1rem 2.5rem;
    line-height: 1.4;
    border-radius: 5rem;
    margin-bottom: 5rem;
    position: relative;
    border: 1px solid #231815;
    box-sizing: border-box
}

.p-faq-item__ttl:before {
    position: absolute;
    content: "";
    display: block;
    box-sizing: border-box;
    border-radius: 2.3rem;
    top: .3rem;
    left: .3rem;
    right: .3rem;
    bottom: .3rem;
    border: 1px solid #fff
}

.p-faq-item__list .item+.item {
    border-top: 1px solid #cbcbc0;
    padding-top: 4rem;
    margin-top: 4rem
}

.p-faq-item__list .item__question {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 1.8rem
}

.p-faq-item__list .item__question .icon {
    text-align: left;
    width: 3.5rem;
    color: #076286;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 500;
    font-size: 2.6rem;
    line-height: 1
}

.p-faq-item__list .item__question .txt {
    font-size: 1.6rem;
    line-height: 1.87;
    font-weight: 700;
    width: calc(100% - 3.5rem)
}

.p-faq-item__list .item__answer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.p-faq-item__list .item__answer .icon {
    text-align: left;
    width: 3.5rem;
    color: #9ab49f;
    font-family: "Montserrat","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",sans-serif;
    font-weight: 500;
    font-size: 2.6rem;
    line-height: 1
}

.p-faq-item__list .item__answer .txt {
    width: calc(100% - 3.5rem);
    color: #4c4948;
    font-weight: 500
}

@media only screen and (max-width: 1023px) {
    .p-faq-item {
        padding-top:10rem;
        margin-top: -4rem
    }

    .p-faq-item:first-child {
        margin-top: -10rem
    }

    .p-faq-item__ttl {
        font-size: 1.5rem;
        padding: .8rem 1.5rem;
        border-radius: 5rem;
        margin-bottom: 2.5rem
    }

    .p-faq-item__ttl:before {
        top: .2rem;
        left: .2rem;
        right: .2rem;
        bottom: .2rem
    }

    .p-faq-item__list .item+.item {
        padding-top: 2rem;
        margin-top: 2rem
    }

    .p-faq-item__list .item__question {
        margin-bottom: 1.3rem
    }

    .p-faq-item__list .item__question .icon {
        width: 2.5rem;
        font-size: 2rem
    }

    .p-faq-item__list .item__question .txt {
        font-size: 1.4rem;
        width: calc(100% - 2.5rem)
    }

    .p-faq-item__list .item__answer .icon {
        width: 2.5rem;
        font-size: 2rem
    }

    .p-faq-item__list .item__answer .txt {
        width: calc(100% - 2.5rem)
    }
}

.clearfix {
    zoom:1}

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

.pc-hidden {
    display: none
}

.pctb-hidden {
    display: none
}

@media only screen and (max-width: 1023px) {
    .tb-hidden,.tbsp-hidden {
        display:none
    }

    .pc-hidden {
        display: block
    }

    br.pc-hidden {
        display: inline-block
    }
}

@media only screen and (max-width: 1023px) {
    .sp-hidden {
        display:none
    }

    .tb-hidden,.pctb-hidden {
        display: block
    }

    br.tb-hidden,br.pctb-hidden {
        display: inline-block
    }
}

.inlineblock {
    display: inline-block
}