@charset "utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
#oh-nomat div,
#oh-nomat span,
#oh-nomat applet,
#oh-nomat object,
#oh-nomat iframe,
#oh-nomat h1,
#oh-nomat h2,
#oh-nomat h3,
#oh-nomat h4,
#oh-nomat h5,
#oh-nomat h6,
#oh-nomat p,
#oh-nomat blockquote,
#oh-nomat pre,
#oh-nomat a,
#oh-nomat abbr,
#oh-nomat acronym,
#oh-nomat address,
#oh-nomat big,
#oh-nomat cite,
#oh-nomat code,
#oh-nomat del,
#oh-nomat dfn,
#oh-nomat em,
#oh-nomat img,
#oh-nomat ins,
#oh-nomat kbd,
#oh-nomat q,
#oh-nomat s,
#oh-nomat samp,
#oh-nomat small,
#oh-nomat strike,
#oh-nomat strong,
#oh-nomat sub,
#oh-nomat sup,
#oh-nomat tt,
#oh-nomat var,
#oh-nomat b,
#oh-nomat u,
#oh-nomat i,
#oh-nomat center,
#oh-nomat dl,
#oh-nomat dt,
#oh-nomat dd,
#oh-nomat ol,
#oh-nomat ul,
#oh-nomat li,
#oh-nomat fieldset,
#oh-nomat form,
#oh-nomat label,
#oh-nomat legend,
#oh-nomat table,
#oh-nomat caption,
#oh-nomat tbody,
#oh-nomat tfoot,
#oh-nomat thead,
#oh-nomat tr,
#oh-nomat th,
#oh-nomat td,
#oh-nomat article,
#oh-nomat aside,
#oh-nomat canvas,
#oh-nomat details,
#oh-nomat embed,
#oh-nomat figure,
#oh-nomat figcaption,
#oh-nomat footer,
#oh-nomat header,
#oh-nomat hgroup,
#oh-nomat menu,
#oh-nomat nav,
#oh-nomat output,
#oh-nomat ruby,
#oh-nomat section,
#oh-nomat summary,
#oh-nomat time,
#oh-nomat mark,
#oh-nomat audio,
#oh-nomat video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
#oh-nomat article,
#oh-nomat aside,
#oh-nomat details,
#oh-nomat figcaption,
#oh-nomat figure,
#oh-nomat footer,
#oh-nomat header,
#oh-nomat hgroup,
#oh-nomat menu,
#oh-nomat nav,
#oh-nomat section {
    display: block;
}
#oh-nomat ol,
#oh-nomat ul {
    list-style: none;
}
#oh-nomat blockquote,
#oh-nomat q {
    quotes: none;
}
#oh-nomat blockquote:before,
#oh-nomat blockquote:after,
#oh-nomat q:before,
#oh-nomat q:after {
    content: "";
    content: none;
}
#oh-nomat table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* end
http://meyerweb.com/eric/tools/css/reset/
*/
#oh-nomat {
    font-feature-settings: "palt";
    -webkit-font-smoothig: antialiased;
    font-family: var(--font-ja);
    font-size: 14px;
    font-weight: 400;
    color: var(--color06);
    --font-ja: "Noto Sans JP", sans-serif;
    --color01: #61422b;
    --color02: #987360;
    --color03: #61412c;
    --color04: #231815;
    --color05: #fff;
    --color06: #282828;
}
#oh-nomat a {
    color: inherit;
}
#oh-nomat img {
    display: block;
    width: 100%;
    height: auto;
}
#oh-nomat .ac summary {
    display: block;
    list-style: none;
}
#oh-nomat .ac summary::-webkit-details-marker {
    display: none;
}
#oh-nomat .ac .summary-inner {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    background: #bca790;
    color: var(--color05);
    font-size: 2.14em;
    text-align: justify;
    padding: 4.7% 5.7% 5.3%;
    pointer-events: auto;
}
#oh-nomat .product-ac .summary-inner {
    background: unset;
    padding: 0;
    font-size: 1em;
    text-align: center;
    display: block;
    padding: 4% 0;
}
#oh-nomat .ac .summary-inner:before {
    content: "";
    align-self: flex-start;
    margin: 1.2% 5% 0 0%;
    width: 0.8em;
    height: 0.8em;
    background: url(/oh-nomat/assets/images/txt-q.png)no-repeat;
    background-size: contain;
}
#oh-nomat .product-ac .summary-inner:before {
    content: none;
}
#oh-nomat details.ac[open] .ac-arrow {
    transform: rotate(0deg);
}
#oh-nomat .ac ul {
    height: auto;
    text-align: center;
}
#oh-nomat .ac li {
    list-style: none;
}
#oh-nomat .ac .list-height-none {
    overflow: hidden;
}
#oh-nomat .ac .list-height-none {
    transition: height 0.5s ease-in-out;
}
#oh-nomat .main {
    font-size: clamp(7px, calc(2.925vw - 3.2375px), 18.7px);
    position: relative;
    margin: -12.7% 0 0;
    background: var(--color05);
}
#oh-nomat .pc-item {
    display: none;
}
#oh-nomat .pc-item-wrap-item {
    transition: scale 0.5s ease-in-out;
}
#oh-nomat .gnav-pc {
    display: none;
}
#oh-nomat .ac ul.gnav-list {
    height: auto;
    text-align: left;
}
#oh-nomat .sp-wrap .gnav-item {
    margin: 0 0 10.4%;
}
#oh-nomat .sp-wrap .gnav-item:last-of-type {
    margin: 0;
}
#oh-nomat .gnav-link {
    position: relative;
    padding-bottom: 0.3em;
}
#oh-nomat .sp-wrap .gnav-link {
    display: inline-block;
}
#oh-nomat .gnav-link-en {
    width: 62.5%;
    display: block;
}
#oh-nomat .gnav-link-txt {
    display: block;
    width: fit-content;
}
#oh-nomat .gnav-link:after {
    content: "";
    display: block;
    width: 106%;
    height: 4px;
    background-color: var(--color02);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1em;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.5s ease-in-out;
}
#oh-nomat .sp-wrap .gnav-link:after {
    content: unset;
}
#oh-nomat .active.gnav-item-link:after {
    clip-path: inset(0);
}
#oh-nomat .sp-wrap {
    grid-column: 2 / 3;
    grid-row: 1;
    position: relative;
    background: var(--color05);
    z-index: 9999;
}
#oh-nomat .pc-bg {
    display: none;
}
#oh-nomat .header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
}
#oh-nomat .gnav-button {
    position: sticky;
    top: 0;
    left: 0;
    width: 9%;
    padding: 1.6% 0;
    box-sizing: content-box;
    margin: 2.3% 3.8%;
    cursor: pointer;
    transition: scale 0.5s ease-in-out;
    opacity: 0;
    z-index: 9;
    mix-blend-mode: difference;
}
#oh-nomat .gnav-item-btn-wrap {
    width: 84.385%;
}
#oh-nomat .gnav-button-img-close {
    position: absolute;
    top: 0;
    left: 0;
    width: 7%;
    padding: 1.6% 0;
    box-sizing: content-box;
    margin: 6.7% 7.6%;
    cursor: pointer;
}
#oh-nomat .gnav-item-btn-wrap a.btn-blank {
    width: 100%;
    display: block;
    margin: 0 0 6.3%;
    transform-origin: center;
}
#oh-nomat .gnav-item-btn-wrap .btn {
    width: 100%;
    font-size: 0.858em;
    line-height: 1.5;
    letter-spacing: 0;
    padding: 6% 0;
    opacity: 0;
    display: block;
}
#oh-nomat .gnav {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgb(255 255 255 / 90%);
    will-change: transform;
    opacity: 0;
    transition: transform 0s ease-in-out, opacity 0s ease-in-out;
    transform: translateX(-100%);
    height: 100dvh;
}
#oh-nomat .active .gnav {
    opacity: 1;
    overflow-y: auto;
    overscroll-behavior: none;
    transform: translateX(0);
    touch-action: none;
}
#oh-nomat .gnav-wrap {
    width: 87.9%;
    background: var(--color05);
    padding: 0 0 0 16.7%;
    border-radius: 0 clamp(16px, 30.67vw, 230px) clamp(16px, 30.67vw, 230px) 0;
    box-shadow: 0px 0px 15px 0px rgb(97 65 44 / 10%);
    transform: translateX(-100%);
    transition: transform 0.5s ease-in-out;
}
#oh-nomat .active .gnav-wrap {
    transform: translateX(0);
}
#oh-nomat .gnav .gnav-list {
    margin: 0;
    font-size: clamp(16px, calc(6.13vw), 40px);
    line-height: 1.348;
    font-weight: 700;
    color: var(--color03);
    letter-spacing: 0.05em;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#oh-nomat .sp-wrap .gnav-list {
    padding: 25% 0 10%;
}
#oh-nomat .hero {
    position: relative;
    padding: 0 0 23%;
    overflow: hidden;
}
#oh-nomat .hero-ctn {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    border-radius: 0 0 7.5em 7.5em;
    overflow: hidden;
}
#oh-nomat .hero-ctn .hero-img {
    position: absolute;
    bottom: 0;
    margin: 0 0 -21.9% 11.1%;
    z-index: 1;
    opacity: 0;
    transform-origin: bottom center;
    width: 119.5%;
}
#oh-nomat .hero-tl {
    position: absolute;
    top: 0;
    right: 0;
    width: 53.067%;
    margin: 4.3% 5.6% 0 0;
    opacity: 0;
    z-index: 2;
}
#oh-nomat .hero-stl {
    display: block;
    width: 71.734%;
    position: relative;
    margin: 0 0 0% 18%;
}
#oh-nomat .hero-stl>span {
    width: 100%;
    height: 1em;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: bottom;
}
#oh-nomat .hero-stl>span:before,
#oh-nomat .hero-stl>span:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 1%;
    border-radius: 4px;
    height: 220%;
    background: var(--color01);
}
#oh-nomat .hero-stl>span:before {
    left: 0;
    transform: skew(22deg);
    margin: 0 0 -6% -1em;
}
#oh-nomat .hero-stl>span:after {
    right: 0;
    transform: skew(-22deg);
    margin: 0 -0.8em -6% 0;
}
#oh-nomat .text-dec {
    position: relative;
    width: fit-content;
    padding: 0 10%;
}
#oh-nomat .text-dec .dec {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
#oh-nomat .text-dec .dec:before,
#oh-nomat .text-dec .dec:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 0.05em;
    border-radius: 1em;
    height: 1.3em;
    background: var(--color01);
}
#oh-nomat .text-dec .dec:before {
    left: 0;
    transform: rotate(-45deg);
    margin: 0 0 0.5% 0.65em;
}
#oh-nomat .text-dec .dec:after {
    right: 0;
    transform: rotate(45deg);
    margin: 0 0.65em 0.5% 0;
}
#oh-nomat .hero-tl-wrap {
    position: relative;
    display: block;
}
#oh-nomat .hero-tl-sml-warp {
    position: absolute;
    top: 0;
    left: 0;
    width: 38.8%;
    margin: 1.5% 0 0 4.2%;
    transform-origin: 75% 75%;
    z-index: 1;
}

#oh-nomat .hero-tl-sml-item--01 {
    position: relative;
    z-index: 1;
}

#oh-nomat .hero-tl-sml-item--02 {
    position: absolute;
    inset: 0;
}
#oh-nomat .hero-item01 {
    width: 50.134%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 11.3% 0 0 12.9%;
    z-index: 1;
}
#oh-nomat .hero-item01--01 {
    position: relative;
    z-index: 1;
    opacity: 0;
}
#oh-nomat .hero-item01--02 {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0;
}
#oh-nomat .oh-nomat-hero-img-item-02 {
    width: 21.067%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 31.3% 0 0 58.4%;
    opacity: 0;
    transform-origin: top;
    z-index: 1;
}
#oh-nomat .hero-usp-ctn {
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    gap: 8.8%;
    z-index: 1;
    background: rgb(97 66 43 / 95%);
    border-radius: 4.1em;
    width: 92%;
    margin: 128.4% 0 6.8%;
    height: clamp(80px, 26.67vw, 200px);
    max-height: 190px;
    overflow: hidden;
    opacity: 0;
}
#oh-nomat .hero-usp-item {
    width: 23.914%;
    transform-origin: bottom center;
    opacity: 0;
    transform-style: preserve-3d;
}
#oh-nomat .hero-usp-item--02 {
    position: relative;
}
#oh-nomat .hero-usp-ctn:before,
#oh-nomat .hero-usp-ctn:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 70%;
    background: rgb(255 255 255 / 70%);
}
#oh-nomat .hero-usp-ctn:before {
    left: 0;
    margin: 0 0 0 32.4%;
}
#oh-nomat .hero-usp-ctn:after {
    right: 0;
    margin: 0 32.4% 0 0;
}
#oh-nomat .hero-bg {
    margin: 0 0 0;
    width: 100%;
    height: 100%;
}
#oh-nomat .intro {
    color: var(--color03);
}
#oh-nomat .inner {
    width: 90.667%;
    margin: 0 auto;
}
#oh-nomat .faq .inner {
    width: 84%;
}
#oh-nomat .intro-anm-wrap {
    position: relative;
    margin: 8.6% 0 0;
    will-change: transform;
}
#oh-nomat .intro-anm-photo {
    width: 109%;
    position: relative;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
}
#oh-nomat .intro-anm-mosquito--01 {
    width: 15.295%;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    margin: 6.9% 1.8% 0 0;
}
#oh-nomat .intro-anm-mosquito--01-01 {
    opacity: 0;
}
#oh-nomat .anm-start .intro-anm-mosquito--01-01 {
    animation: mosquit-opa 3s linear infinite;
}
#oh-nomat .intro-anm-mosquito--01-02 {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 40% 0 0;
}
#oh-nomat .anm-start .intro-anm-mosquito--01-02 {
    animation: mosquit-y 3s linear infinite;
}
#oh-nomat .intro-anm-mosquito--02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 14.853%;
    z-index: 1;
    margin: 0 0 16.5% 3.3%;
    transform: scaleX(-1);
}
#oh-nomat .intro-anm-mosquito--02-01 {
    opacity: 0;
}
#oh-nomat .anm-start .intro-anm-mosquito--02-01 {
    animation: mosquit-opa 3s linear infinite;
    animation-delay: 0.8s;
}
#oh-nomat .intro-anm-mosquito--02-02 {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 40% 0 0;
}
#oh-nomat .anm-start .intro-anm-mosquito--02-02 {
    animation: mosquit-y 3s linear infinite;
    animation-delay: 0.8s;
    opacity: 0;
}
#oh-nomat .intro-logo {
    width: 73.089%;
    margin: 5.7% auto 5.1%;
    position: relative;
}

#oh-nomat .intro-logo--02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 39.236%;
    margin: 1.1% 0 0 3.9%;
}
#oh-nomat .intro-icon-wrap>p {
    font-size: 2.246em;
    font-weight: 700;
    letter-spacing: 0.17em;
    margin: 0 auto 0;
    text-align: center;
    overflow: hidden;
}
#oh-nomat .intro-icon-ctn {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgb(154 136 130 / 20%);
    border-radius: 3em;
    margin: 2.3% auto 0;
    width: 92.648%;
    padding: 6% 0 5.7%;
    gap: 6.1%;
    overflow: hidden;
}
#oh-nomat .intro-icon-item {
    width: 14.286%;
    opacity: 0;
}
#oh-nomat .intro-icon-item-text {
    text-align: center;
    font-size: 1.177em;
    margin: 15.5% 0 0;
}
#oh-nomat .intro-text {
    font-size: 2.14em;
    line-height: 1.55;
    font-weight: 700;
    text-align: center;
    margin: 7.3% 0 0;
    letter-spacing: 0.14em;
}
#oh-nomat .intro-text-dec {
    font-size: 0.55em;
    vertical-align: top;
}
#oh-nomat .intro small.intro-anm-text {
    font-size: 1.391em;
    line-height: 2.116;
    font-weight: 400;
    letter-spacing: 0em;
    display: block;
    width: fit-content;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 3.5% -0.5% 0;
    z-index: 1;
}
#oh-nomat .intro small {
    font-size: 1.391em;
    letter-spacing: 0.1em;
    display: block;
    text-align: center;
    margin: 3.7% 0 0 0;
}
#oh-nomat .feature {
    color: var(--color03);
    background: url(/oh-nomat/assets/images/bg-01.jpg);
    border-radius: 4em;
    margin: 13.3% 0 0;
    padding: 12.3% 0 0;
}
#oh-nomat .sec-tl {
    font-size: 3.102em;
    line-height: 1.146;
    letter-spacing: 0.08em;
    text-align: center;
    color: var(--color03);
    font-weight: 700;
}
#oh-nomat .faq .sec-tl {
    margin: 0 0 11%;
}
#oh-nomat .sec-tl:after {
    content: "";
    display: block;
    width: 15%;
    height: 0.5em;
    background: url(/oh-nomat/assets/images/img-dec.png)no-repeat;
    background-size: contain;
    margin: 6% auto 0;
}
#oh-nomat .sec-tl-share:after {
    content: unset;
}
#oh-nomat .sec-tl>span {
    font-size: 0.794em;
}
#oh-nomat .sec-en-tl {
    display: block;
    width: 6.5137em;
    margin: 0 auto 1.2%;
}
#oh-nomat .feature-item {
    margin: 17% 0 0;
}
#oh-nomat .feature-item p {
    font-size: 1.498em;
    line-height: 1.643;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-align: center;
    margin: 4.7% 0 10%;
    position: relative;
    z-index: 1;
}
#oh-nomat .feature-item--04 p {
    margin: 4.6% 0 0;
    padding-bottom: 17.3%;
}
#oh-nomat .feature-item--03 p {
    margin: 4.8% 0 10%;
}
#oh-nomat .feature-item small {
    font-size: 1.284em;
    line-height: 1.334;
    letter-spacing: 0.11em;
    display: block;
    font-weight: 400;
    width: 84%;
    margin: 0 auto;
    padding: 0 1em 0 0;
}
#oh-nomat .feature-item--03 small {
    color: var(--color06);
    font-size: 1.284em;
    line-height: 2.292;
    width: fit-content;
    margin: 1.1% 4.8% 0 auto;
    font-weight: 500;
    letter-spacing: 0;
}
#oh-nomat .feature-item h4 {
    font-size: 2.353em;
    line-height: 1.41;
    letter-spacing: 0.14em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 84%;
    margin: 0 auto;
    gap: 4.8%;
    padding: 4% 0 2%;
}
#oh-nomat .feature-item--04 h4 {
    width: 93%;
    margin: 0 0 0 6%;
    gap: 4.2%;
}
#oh-nomat .feature-item--03 h4 {
    width: 90%;
    margin: 0 auto 0;
}
#oh-nomat .feature-item .feature-item-text--02 {
    letter-spacing: 0;
}
#oh-nomat .feature-item .feature-item-text--sml {
    font-size: 0.819em;
    letter-spacing: 0;
}
#oh-nomat .feature-item-point-txt-wrap {
    width: 22.223%;
    position: relative;
    display: block;
    z-index: 1;
}
#oh-nomat .feature-item-point-txt {
    width: 80.282%;
    position: absolute;
    top: 0;
    left: 0;
    margin: -20% 0 0 12%;
    opacity: 0;
    transform-origin: bottom center;
}
#oh-nomat .feature-item--04 .feature-item-point-txt-wrap {
    width: 20.344%;
    margin: 2% 0 -2%;
}
#oh-nomat .feature-item--03 .feature-item-point-txt-wrap {
    width: 21.038%;
}
#oh-nomat .feature-item--01 {
    margin: 9% 0 0;
}
#oh-nomat .feature-anm-wrap {
    margin: 11.5% 0 -19.5%;
    position: relative;
    width: 100%;
    overflow: hidden;
}
#oh-nomat p.feature-anm-sml-text {
    margin: 0 auto 0;
    font-weight: 700;
    letter-spacing: 0.25em;
}
#oh-nomat p.feature-anm-text {
    width: 58.134%;
    margin: 2.5% auto 0;
}
#oh-nomat .feature-item--03 {
    margin: 15.3% 0 0;
}
#oh-nomat .feature-anm02-wrap {
    display: flex;
    overflow: hidden;
    margin: 12% 0 0;
}
#oh-nomat .feature-anm02-ctn {
    animation: scroll-left 21s infinite linear both;
    display: flex;
}
#oh-nomat .feature-anm02-item {
    position: relative;
    width: calc(174.3vw / 3);
    max-width: 425px;
    margin: 0 1.534% 0 0;
    padding: 1.3% 0 0;
}
#oh-nomat p.feature-anm02-text {
    background: #b39e8c;
    color: var(--color05);
    border-radius: 5em;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.177em;
    letter-spacing: 0.2em;
    padding: 2.6% 7.2%;
    margin: 0 0 0 7.4%;
    z-index: 1;
}
#oh-nomat .feature-anm02-img-item {
    border: 5px solid #bca790;
    overflow: hidden;
    border-radius: 7em;
    width: 100%;
    height: 0;
    padding-bottom: 59%;
}
#oh-nomat .feature-anm02-img-item>img {
    width: 131.646%;
    animation: scroll-right 21s infinite linear both;
    transform: translateX(-24%);
}
#oh-nomat .feature-anm02-img-item--01 img,
#oh-nomat .feature-anm02-img-item--04 img {
    animation-delay: -14s;
}
#oh-nomat .feature-anm02-img-item--02 img,
#oh-nomat .feature-anm02-img-item--05 img {
    animation-delay: -7s;
}
#oh-nomat .feature-anm02-img-item--03 img,
#oh-nomat .feature-anm02-img-item--06 img {
    animation-delay: 0s;
}
#oh-nomat .feature-anm-item {
    margin: -19% 0 0;
    width: 100%;
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}
#oh-nomat .feature-anm-item--01,
#oh-nomat .feature-anm-item--02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#oh-nomat .active .feature-anm-item--02-ctn {
    display: flex;
    flex-direction: column;
    animation: feature02 1.5s 1.5s steps(29) forwards;
    will-change: transform;
    z-index: 1;
    position: relative;
}
#oh-nomat .feature-anm-item--01.active {
    overflow: hidden;
    height: 0;
    margin: 25% 0 0;
    opacity: 1;
    padding-bottom: 60%;
}
#oh-nomat .active .feature-anm-item--01-ctn {
    display: flex;
    flex-direction: column;
    animation: feature01 2.9s steps(59) infinite;
}
#oh-nomat .feature-anm-item--02.active {
    opacity: 1;
    overflow: hidden;
    height: 0;
    margin: 25% 0 0;
    padding-bottom: 60%;
}
#oh-nomat .feature-anm-item--01 .feature-anm-item-txt,
#oh-nomat .feature-anm-item--02 .feature-anm-item-txt {
    position: absolute;
    font-size: 1.391em;
    line-height: 1.25;
    font-weight: 500;
    color: var(--color05);
    border-radius: 1em;
    text-align: center;
    padding: 1.3% 3.8%;
    letter-spacing: 0.05em;
    z-index: 2;
}
#oh-nomat .feature-anm-item--01 .feature-anm-item-txt {
    background: rgb(37 177 189 / 90%);
    bottom: 0;
    margin: 0 0 20.3% 5%;
    padding: 1.5% 4%;
}
#oh-nomat .feature-anm-item--02 .feature-anm-item-txt {
    background: rgb(37 177 189 / 90%);
    right: 0;
    bottom: 0;
    margin: 0 5% 20.3% 0;
}
#oh-nomat .feature-anm-item--01.active .feature-anm-item-txt,
#oh-nomat .feature-anm-item--02.active .feature-anm-item-txt {
    animation: opa 0.5s linear forwards;
    opacity: 0;
}
#oh-nomat .feature-anm-item--01.active .feature-anm-item-txt {
    animation-delay: 1s;
}
#oh-nomat .feature-anm-item--02.active .feature-anm-item-txt {
    animation-delay: 1.5s;
}
#oh-nomat .feature-item--04 {
    margin: 14.4% auto 0;
}
#oh-nomat .product {
    color: var(--color03);
    padding: 16.8% 0 0;
}
#oh-nomat .product-ctn {
    display: flex;
    flex-direction: row-reverse;
    gap: 10.5%;
    text-align: left;
    margin: 15.4% 0 0 3.2%;
    align-items: flex-start;
    justify-content: flex-end;
}
#oh-nomat .product-ctn--01 {
    margin: 18.5% 0 0 3.2%;
}
#oh-nomat .product-ctn-wrap .product-ctn--01 {
    margin: 13.1% 0 0 3.2%;
}
#oh-nomat .product-item-ctn {
    width: 51%;
    margin: 0.8% 0 0;
}
#oh-nomat .product-item-name {
    font-size: 1.819em;
    line-height: 1.295;
    font-weight: 700;
}
#oh-nomat .product-item-detail {
    color: var(--color06);
    font-size: 1.177em;
    letter-spacing: 0.1em;
    margin: 6.8% 0 0 2.1%;
}
#oh-nomat .product-item-detail>span {
    display: flex;
    margin: 0 0 1.7% -1%;
    gap: 0.6em;
}
#oh-nomat .product-item-detail-tag {
    border: 1px solid #000;
    font-size: 0.848em;
    display: inline-block;
    width: fit-content;
    min-width: 5.7em;
    padding: 1.5% 0.85em;
    text-align: center;
}
#oh-nomat .product-ctn-wrap .product-item-detail-tag {
    background: var(--color05);
}
#oh-nomat .product-item-btn-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    width: 93.4%;
    margin: 8.8% 0 0 1.3%;
}
#oh-nomat .product-ac {
    background: #97735f;
    border: 0.167em solid #97735f;
    border-radius: clamp(16px, 5.33vw, 1.5em);
    text-align: center;
    font-size: 1.284em;
    overflow: hidden;
    pointer-events: none;
    transition: background 0.5s ease-in-out;
}
#oh-nomat a.btn-blank {
    background: var(--color05);
    color: #97735f;
    text-align: center;
}
#oh-nomat .btn {
    background: #97735f;
    color: var(--color05);
    border: 0.167em solid #97735f;
    border-radius: 2.033em;
    font-size: 1.284em;
    line-height: 2.292;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 2.2% 0;
    transition: background 0.5s ease-in-out;
}
#oh-nomat .product-ctn-img {
    width: 37.083%;
    padding: 2% 0 2%;
}
#oh-nomat .product-ctn-wrap {
    background: url(/oh-nomat/assets/images/bg-02.jpg);
    border-radius: 3.049em;
    margin: 16% 0 0;
    padding: 0 0 14.6%;
}
#oh-nomat .product .d-print-wrap {
    width: 100%;
}
#oh-nomat .product-ctn-wrap h4 {
    font-size: 3.102em;
    line-height: 0.949;
    text-align: center;
    padding: 11.3% 0 0;
    font-weight: 700;
}
#oh-nomat .howto {
    background: url(/oh-nomat/assets/images/bg-01.jpg);
    border-radius: 5em;
    color: var(--color03);
    margin: -6.2% 0 0;
    z-index: 1;
    position: relative;
    padding: 15.9% 0 0;
}
#oh-nomat .howto-wrap {
    color: var(--color03);
}
#oh-nomat .howto-item {
    background: rgb(97 65 44 / 15%);
    position: relative;
    border-radius: 1.2em;
    width: 82.353%;
    margin: 16% auto 6%;
    will-change: transform;
    transform: translateZ(1px);
}
#oh-nomat .howto-item p {
    font-size: 1.712em;
    line-height: 1.313;
    letter-spacing: 0.04em;
    font-weight: 500;
    width: 82%;
    margin: 0 auto 0;
    text-align: left;
    padding: 0 0 10%;
}
#oh-nomat .howto-item p>span {
    font-size: 0.875em;
    line-height: 1.5;
    display: block;
    letter-spacing: 0.04em;
}
#oh-nomat .howto-item--01 {
    margin: 15.6% auto 0;
}
#oh-nomat .howto-step {
    width: 25.358%;
    position: absolute;
    top: 0;
    left: 0;
    margin: -8.6% 0 0 -8.7%;
}
#oh-nomat .howto-step-txt {
    position: absolute;
    top: 0;
    left: 0;
    width: 57.395%;
    margin: -19% 0 0 21%;
}
#oh-nomat .howto-item--01 .howto-item-img {
    margin: 0 0 7%;
}
#oh-nomat .howto-item--02 .howto-item-img {
    margin: 0 0 0;
}
#oh-nomat .howto-item--03 .howto-item-img {
    margin: 0 0 3.2%;
}
#oh-nomat .howto-item--04 .howto-item-img {
    margin: 0 0 8%;
}
#oh-nomat .howto-item--05 .howto-item-img {
    margin: -17.4% 0 8.1%;
}
#oh-nomat .howto-item--06 .howto-item-img {
    margin: -18% auto 8.1%;
}
#oh-nomat .howto-item--07 .howto-item-img {
    margin: -17.8% auto 8%;
}
#oh-nomat .howto-wrap--02 {
    background: rgb(97 65 44 / 15%);
    border-radius: 1.2em;
    width: 82.353%;
    margin: 14.6% auto 9.3%;
    padding: 1px 0 0;
}
#oh-nomat .howto-item--05,
#oh-nomat .howto-item--06,
#oh-nomat .howto-item--07 {
    background: unset;
    width: 100%;
    margin: 0 0 0;
}
#oh-nomat .howto-item--07 {
    padding: 0 0 4%;
}
#oh-nomat .howto-wrap--02 .howto-item--05 {
    margin: 5.1% auto 0;
}
#oh-nomat p.howto-item-stl {
    color: var(--color05);
    text-align: center;
    background: rgb(97 65 44 / 50%);
    border-radius: 5em;
    width: 92.858%;
    padding: 2.3% 0;
    margin: 0 auto 0;
    letter-spacing: 0.05em;
}
#oh-nomat .howto .howto-tltext {
    text-align: center;
    font-size: 2.14em;
    line-height: 1.5;
    letter-spacing: 0.16em;
    font-weight: 700;
    width: 82.353%;
    margin: 15.2% auto 0;
}
#oh-nomat .howto .howto-smltext {
    width: 82.353%;
    display: block;
    margin: 0 auto;
    font-size: 1.498em;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 0.07em;
    font-size: 1.284em;
    line-height: 1.334;
    text-indent: -1em;
    padding-left: 1em;
}
#oh-nomat .howto .howto-smltext--02 {
    font-weight: 500;
    line-height: 1.847;
    letter-spacing: 0.06em;
    width: fit-content;
    font-size: 1.284em;
}
#oh-nomat .howto-text {
    text-align: center;
    font-size: 1.819em;
    line-height: 1.412;
    font-weight: 500;
    width: 82.353%;
    margin: 3.9% auto 0.9%;
}
#oh-nomat .howto-text--02 {
    font-size: 1.498em;
    line-height: 1.358;
    margin: 2.7% auto 0.4%;
    letter-spacing: 0.1em;
    padding: 0 0 19.8%;
}
#oh-nomat .howto .howto-img {
    width: 45.883%;
    margin: 5.8% auto 0;
    position: relative;
}
#oh-nomat .howto .howto-img-dec {
    width: 2.781em;
    position: absolute;
    top: 0;
    left: 0;
    height: 2.781em;
    margin: 10.7% 0 0 16.6%;
    z-index: 1;
    opacity: 0;
}
#oh-nomat .howto .howto-img-dec--02 {
    margin: -3.3% 28% 0 0;
    left: auto;
    right: 0;
}
#oh-nomat .howto .howto-img-dec--03 {
    margin: 20.7% 13% 0 0;
    left: auto;
    right: 0;
}
#oh-nomat .faq {
    color: var(--color03);
    padding: 14.9% 0 0;
}
#oh-nomat .faq .ac {
    border: 0.27em solid #bca790;
    border-radius: 2.5em;
    overflow: hidden;
    margin: 6.5% 0 0;
}
#oh-nomat .ac--01 {
    margin: 10.7% 0 0;
}
#oh-nomat .ac-text {
    width: 78.276%;
    font-size: 0.65em;
    line-height: 1.616;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-align: justify;
}
#oh-nomat .product-ac .ac-text {
    font-size: 1em;
}
#oh-nomat .oh-nomat-ac-arrow {
    width: 4.733%;
    transform: rotate(0deg);
    margin: -1.4% 0 0 auto;
}
#oh-nomat details.ac[open] .oh-nomat-ac-arrow {
    transform: rotate(180deg);
}
#oh-nomat .list-height {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3.2% 5.7% 5.5%;
}
#oh-nomat .product-ac .link-ctn {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}
#oh-nomat .product-ac .link-item {
    width: 100%;
    border-radius: 1.5em;
    background: var(--color05);
    margin: 0 auto 5.3%;
}
#oh-nomat .product-ac .link-item:last-of-type {
    margin: 0 auto 0;
}
#oh-nomat .product-ac .link-item-btn {
    padding: 3.1% 0;
    display: block;
    pointer-events: auto;
}
#oh-nomat .product-ac .link-item img {
    width: 46.2%;
    margin: 0 auto;
    transition: scale 0.8s ease-in-out;
}
#oh-nomat .list-height:before {
    content: "";
    align-self: flex-start;
    background: url(/oh-nomat/assets/images/txt-a.png)no-repeat;
    margin: 1.8% 5% 0 0%;
    width: 1.712em;
    height: 1.712em;
    background-size: contain;
}
#oh-nomat .product-ac .list-height:before {
    content: none;
}
#oh-nomat .ac-answer {
    width: 78.276%;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: justify;
    font-size: 1.391em;
    line-height: 1.616;
}
#oh-nomat .ac-answer>span {
    display: inline-block;
}
#oh-nomat .ac-answer>span+span {
    margin: 5% 0 0;
}
#oh-nomat .rp {
    padding: 14.7% 0 0;
}
#oh-nomat .rp-link {
    width: 64.853%;
    display: block;
    margin: 8.6% auto 0;
}
#oh-nomat .sec-tl-share {
    font-size: 1.926em;
    margin: 11.8% 0 0;
    font-weight: 500;
    letter-spacing: 0.15em;
}
#oh-nomat .share-ctn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6.1% 0 0;
    gap: 7.1%;
}
#oh-nomat .share-item {
    width: 17.648%;
}
#oh-nomat .d-print-wrap {
    position: relative;
}
#oh-nomat .d-print-none {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    -webkit-touch-callout: none;
}
#oh-nomat .overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 1;
}
#oh-nomat .bottom-img {
    width: 100%;
    margin: 19.1% auto 0;
}
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes scroll-right {
    0% {
        transform: translateX(-24%);
    }
    100% {
        transform: translateX(0%);
    }
}
@keyframes mosquit-opa {
    0% {
        opacity: 0;
        transform: translate(30%, -100%);
    }
    8.33% {
        opacity: 0.3;
        transform: translate(20%, -90%);
    }
    16.66% {
        opacity: 0.6;
        transform: translate(13%, -60%);
    }
    25% {
        opacity: 0.8;
        transform: translate(5%, -40%);
    }
    33.33% {
        opacity: 1;
        transform: translate(0%, -20%);
    }
    41.66% {
        opacity: 1;
        transform: translate(-1%, 1%);
    }
    46.66% {
        opacity: 1;
        transform: translate(0%, -1%);
    }
    49.98% {
        opacity: 1;
        transform: translate(0, 0);
    }
    50% {
        opacity: 0;
        transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }
}
@keyframes mosquit-y {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    50% {
        opacity: 0;
        transform: translateY(0);
    }
    50.01% {
        opacity: 1;
        transform: translateY(0);
    }
    58.33% {
        opacity: 1;
        transform: translateY(0);
    }
    91.66% {
        opacity: 1;
        transform: translateY(300%);
    }
    100% {
        opacity: 0;
        transform: translateY(300%);
    }
}
@keyframes feature01 {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(calc(-100% * (59 / 60)))
    }
}
@keyframes feature02 {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(calc(-100% * (29 / 30)));
    }
}
@keyframes opa {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@media screen and (min-width: 768px) {
    #oh-nomat.oh-nomat {
        display: grid;
        grid-template-columns: 1fr 700px 1fr;
        position: relative;
    }
    #oh-nomat .pc-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        display: block;
        opacity: 0;
    }
    #oh-nomat .pc-bg>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #oh-nomat .pc-item-wrap {
        display: none;
    }
    #oh-nomat .gnav-pc-ctn {
        display: none;
    }
    #oh-nomat .main {
        font-size: 14px;
    }
    #oh-nomat .oh-nomat-tl-logo {
        width: 52%;
        margin: 0 27% 15% auto;
    }
    #oh-nomat .gnav-pc-ctn {
        display: flex;
        align-items: center;
        width: 100%;
    }
    #oh-nomat .pc-item-02 {
        width: 100%;
        color: var(--color01);
        font-weight: 600;
        letter-spacing: 0.12em;
        margin: 0 0 25%;
        max-width: 300px;
    }
    #oh-nomat .gnav-list {
        color: var(--color01);
        font-weight: 600;
        letter-spacing: 0.12em;
        margin: 0 0 20% 0;
        padding: 0 6%;
    }
    #oh-nomat .gnav-pc-share {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6%;
        position: absolute;
        bottom: 10%;
        right: 0;
        padding-right: clamp(37px, 5%, 5em);
        width: 77%;
        box-sizing: content-box;
        max-width: 302px;
        opacity: 0;
    }
    #oh-nomat .gnav-pc-share-ctn {
        gap: 0;
        width: 64.769%;
        justify-content: space-between;
        margin: 0;
    }
    #oh-nomat .gnav-pc-share-ctn .share-item {
        width: 26.374%;
    }
    #oh-nomat .gnav-item {
        margin: 9% 0;
        opacity: 0;
    }
    #oh-nomat .gnav-button {
        display: block;
    }
    #oh-nomat .gnav-ctn.ac {
        border: unset;
    }
    #oh-nomat .hero-tl {
        width: 47.7%;
        margin: 3.6% 9.7% 0 0;
    }
    #oh-nomat .hero-stl {
        width: 73%;
        margin: 0 auto 0 17.8%;
    }
    #oh-nomat .hero-stl>span:before,
    #oh-nomat .hero-stl>span:after {
        height: 250%;
    }
    #oh-nomat .hero-stl>span:before {
        margin: 0 0 -6.5% -1em;
    }
    #oh-nomat .hero-stl>span:after {
        margin: 0 -0.7em -6.5% 0;
    }
    #oh-nomat .hero-item01 {
        width: 45.3%;
        margin: 10.3% 0 0 16.5%;
    }
    #oh-nomat .oh-nomat-hero-img-item-02 {
        margin: 28.1% 0 0 57.7%;
        width: 19%;
    }
    #oh-nomat .hero-usp-ctn {
        width: 83%;
        margin: 116.7% 0 9.5%;
        max-height: 154px;
        height: clamp(154px, 26.67vw, 200px);
    }
    #oh-nomat .hero-ctn .hero-img {
        margin: 0 0 -19.7% 10%;
        width: 108%;
    }
    #oh-nomat .intro-icon-wrap>p {
        margin: 0 auto 0;
    }
    #oh-nomat p.feature-anm-sml-text {
        margin: 0 auto 0;
    }
    #oh-nomat .feature-anm-item {
        width: 107.143%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    #oh-nomat .feature-anm-item--02 .feature-anm-item-txt {
        margin: 0 10% 20.3% 0;
    }
    #oh-nomat .feature-anm-item--01 .feature-anm-item-txt {
        margin: 0 0 20.3% 10%;
    }
    #oh-nomat .main:before,
    #oh-nomat .main:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 30px;
        pointer-events: none;
        z-index: 1;
        display: block;
    }
    #oh-nomat .main:before {
        left: 0;
        transform: translateZ(0) translateX(-100%);
        background: linear-gradient(to left,
                rgba(0, 0, 0, 0.1),
                rgba(0, 0, 0, 0));
    }
    #oh-nomat .main:after {
        right: 0;
        transform: translateZ(0) translateX(100%);
        background: linear-gradient(to right,
                rgba(0, 0, 0, 0.1),
                rgba(0, 0, 0, 0));
    }
}
@media screen and (min-width: 1251px) {
    #oh-nomat .sp-wrap header {
        display: none;
    }
    #oh-nomat .sp-wrap {
        grid-column: 2 / 3;
        grid-row: 1;
        overflow-y: clip;
    }
    #oh-nomat .pc-item-wrap {
        max-width: 350px;
        display: block;
        opacity: 0;
    }
    #oh-nomat .pc-item {
        position: sticky;
        top: 0;
        display: flex;
        height: 100vh;
        min-height: 0;
        align-items: center;
        justify-content: flex-end;
        grid-column: 1 / 2;
    }
    #oh-nomat .gnav-pc {
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        min-height: 0;
        grid-column: 3 / 4;
        grid-row: 1;
        justify-content: flex-start;
        height: 100vh;
        margin: 0 0 0;
        overflow: hidden;
        font-size: 1.5em;
        font-size: clamp(12px, calc(8px + 0.8vw), 21px);
        line-height: 1.143;
        padding-left: clamp(37px, 10%, 5em);
    }
    #oh-nomat .gnav-button {
        display: none;
    }
    #oh-nomat .main {
        margin: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 780px) {
    #oh-nomat .main:before,
    #oh-nomat .main:after {
        content: none;
    }
}
@media (max-width: 375px) {
    #oh-nomat .br {
        display: none;
    }
}
@media (hover: hover) {
    #oh-nomat .gnav-link:hover {
        text-decoration: none;
    }
    #oh-nomat .gnav-link:hover:after {
        clip-path: inset(0);
    }
    #oh-nomat .btn:hover,
    #oh-nomat .product-ac:hover {
        text-decoration: none;
        background: var(--color01);
        color: var(--color05);
    }
    #oh-nomat a:hover .pc-item-wrap-item01 {
        opacity: 1;
        scale: 1.1;
    }
    #oh-nomat .gnav-button:hover {
        scale: 1.1;
    }
    #oh-nomat .product-ac .link-item-btn:hover>img {
        scale: 1.1;
        opacity: 1;
    }
}
#oh-nomat .js-anm--tp,
#oh-nomat .js-anm--opacity,
#oh-nomat .js-anm--ty,
#oh-nomat .js-anm--ty02,
#oh-nomat .js-anm--circlepass,
#oh-nomat .js-anm--dec,
#oh-nomat .js-anm--width,
#oh-nomat .js-anm--tl,
#oh-nomat .js-anm--tl02 {
    opacity: 0;
}
#oh-nomat .js-anm--tl02 {
    flex-grow: 1;
}
@media print {
    #oh-nomat .d-print-none {
        visibility: hidden;
    }
    #oh-nomat .d-print-none:after {
        content: "画像は印刷できません";
        visibility: visible;
        display: block;
        color: red;
    }
}