/* ==========================================================================
   Variables & Custom Properties
   ========================================================================== */
   :root {
    /* Font Families */
    --font-noto-sans-jp: "Noto Sans JP", sans-serif;
    --font-noto-serif-jp: "Noto Serif JP", serif;
    --font-roboto: "Roboto", sans-serif;
    --font-purple-purse: "Purple Purse", serif;

    /* Colors */
    --color-primary: #39691c;
    --color-secondary: #ece7c8;
    --color-tertiary: #fef9e9;
    --color-black: #302727;

    /* Layout */
    --layout-width: 1000px;
	
	/* Animation */
    --top-animation-delay: 3s;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
body {
    font-family: var(--font-noto-sans-jp);
    font-size: calc(100vw * (16 / 1920));
    font-weight: normal;
    line-height: 1.5;
    color: var(--color-black);
    margin: 0;
    background: url(../img/yellow-color-bg.jpg);
}

@media (max-width: 1024px) {
    body {
        font-size: calc(100vw * (16 / 375));
    }
}

a {
    text-decoration: none;
	color: var(--color-black);
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

button:not([type="disabled"]) {
    cursor: pointer;
}

button {
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
}

p {
    margin: 0;
}

.pc {
    display: block;
}
@media (max-width: 1024px) {
    .pc {
        display: none;
    } 
}

.sp {
    display: none;
}
@media (max-width: 1024px) {
    .sp {
        display: block;
    } 
}

/* Needed to cloak hidden elements before JS loads when using Alpine.js */
[x-cloak] {
    display: none !important;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
/* Hover Effects */
.on-link-hover {
    transition: opacity 0.7s ease;
}

.on-link-hover:hover {
    opacity: 0.7;
}

.dashed-bottom-border {
    position: relative;
}

.dashed-bottom-border::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: calc(100vw * (2 / 1920)) dashed var(--color-secondary);
    opacity: 0;
    transition: opacity 0.7s ease;
}

.dashed-bottom-border:hover::after {
    opacity: 1;
}

@media (min-width: 1025px) {
    .hidden-pc {
        display: none !important;
    }
}
@media (max-width: 1024px) {
    .hidden-sp {
        display: none !important;
    }
}

/* Background Patterns */
.green-bg {
    background-image: url("../img/green-color-bg.jpg");
}

.base-bg {
    background-image: url("../img/base-color-bg.jpg");
}

.red-bg {
    background-image: url("../img/red-color-bg.jpg");
}

.yellow-bg {
    background-image: url("../img/yellow-color-bg.jpg");
}
/* ==========================================================================
   Layouts
   ========================================================================== */

.center-layout {
    width: 100%;
    max-width: calc(100vw * (1000 / 1920));
    margin: 0 auto;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .center-layout {
        max-width: 100%;
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.fade-in {
    animation: fadeIn 400ms ease forwards;
}

.fade-out {
    animation: fadeOut 500ms ease forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInContent {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes countUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes slideUpAnimation {
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes zoomOutAnimate {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomBackground {
    0% {
        background-size: 120%;
    }

    100% {
        background-size: 100%;
    }
}

@keyframes fadeInFromLeft {
    0% {
        opacity: 0;
        clip-path: inset(0px 100% 0px 0px);
    }

    100% {
        opacity: 1;
        clip-path: inset(0px);
    }
}

@keyframes fadeInFromRight {
    0% {
        opacity: 0;
        clip-path: inset(0px 0px 0px 100%);
    }

    100% {
        opacity: 1;
        clip-path: inset(0px);
    }
}

@keyframes fadeInFromBottom {
    0% {
        opacity: 0;
        clip-path: inset(100% 0px 0px);
    }

    100% {
        opacity: 1;
        clip-path: inset(0px);
    }
}

@keyframes fadeInFromTop {
    0% {
        opacity: 0;
        clip-path: inset(0px 0px 100%);
    }

    100% {
        opacity: 1;
        clip-path: inset(0px);
    }
}

@keyframes drawBorder {
    0% {
        clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
    }

    20% {
        clip-path: polygon(0px 0px, 100% 0px, 100% 0px, 0px 0px);
    }

    40% {
        clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 100% 100%);
    }

    60% {
        clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%);
    }

    100% {
        clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%);
    }
}

@keyframes falling-leaves {
    0% {
        transform: translateY(-30%) scale(1.25) rotate(-18deg) translateZ(0px);
        filter: blur(10px);
        opacity: 0;
    }

    42% {
        opacity: 1;
        filter: blur(0px);
    }

    100% {
        transform: translateY(0%) scale(1) rotate(0deg) translateZ(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes falling-leaves-reversed {
    0% {
        transform: translateY(-30%) scale(1.25) rotate(18deg) translateZ(0px);
        filter: blur(10px);
        opacity: 0;
    }

    42% {
        opacity: 1;
        filter: blur(0px);
    }

    100% {
        transform: translateY(0%) scale(1) rotate(0deg) translateZ(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes flying-leaves {
    0% {
        transform: translateY(50%) rotate(0deg) translateZ(0px);
        filter: blur(10px);
        opacity: 0;
    }

    42% {
        opacity: 1;
        filter: blur(0px);
    }

    100% {
        transform: translateY(-1vw) rotate(-8deg);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes bgMove {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: 2076px;
    }
}

@keyframes bgMoveY {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: 2076px;
    }
}

@keyframes flying-up-tilt {
  0% {
    transform: translateY(50%) matrix(0.99, -0.14, -0.17, 0.98, 0, 0) rotate(10deg);
    opacity: 0;
    filter: blur(10px);
  }
  50% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(-1vw) matrix(0.99, -0.14, -0.17, 0.98, 0, 0) rotate(0deg) ;
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes blurFadeIn {
  0% {
    filter: blur(5px);
    opacity: 0.5;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes leftToRightMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes rightToLeftMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes zoomFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fallingCard {
    0% {
        opacity: 0;
        translate: -20% -50%;
        rotate: -90deg;
    }
    100% {
        opacity: 1;
        translate: 0 0;
        rotate: 0deg;
    }
}
@keyframes textClipLeftToRight {
    0% {
        clip-path: inset(0px 100% 0px 0px);
    }
    100% {
        clip-path: inset(0 0% 0 0);
    }
}
@keyframes slowBlurFadeIn {
    0% {
        filter: blur(10px);
        opacity: 0;
    }
    100% {
        filter: blur(0);
        opacity: 1;
    }
}
@keyframes zoomInBottomBanner {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}
.fallingCard {
    animation: fallingCard 1.5s ease forwards;
}

@keyframes flying-up-tilt-about {
    0% {
        transform: translateY(50%)
            rotate(10deg);
        opacity: 0;
        filter: blur(10px);
    }
    50% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: translateY(0) matrix(0.99, -0.14, -0.17, 0.98, 0, 0)
            rotate(0deg);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes flying-up-tilt-about-sp {
    0% {
        transform: translateY(50%)
            rotate(10deg);
        opacity: 0;
        filter: blur(10px);
    }
    50% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: translateY(0) matrix(0.98, -0.2, -0.12, 0.99, 0, 0)
            rotate(0deg);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes slideUpOut {
    100% {
        transform: translateY(-100%);
    }
}

/* ==========================================================================
   Components
   ========================================================================== */
/* Service Sub Links (Mobile) */
.service-sub-link-sp__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(100vw * (8 / 375));
}

.service-sub-link-sp__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 999px;
    padding: calc(100vw * (14 / 375)) calc(100vw * (15 / 375)) calc(100vw * (14 / 375)) calc(100vw * (30 / 375));
    background-color: var(--color-secondary);
    color: var(--color-primary);
    font-family: var(--font-roboto);
    font-size: calc(100vw * (22 / 375));
    font-weight: 700;
    line-height: 1.5;
}

.service-sub-link-sp__item img {
    width: calc(100vw * (80 / 375));
    height: auto;
}

/* Accordion Menu (Mobile) */
.accordion-menu-sp {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 calc(100vw * (2 / 375));
}

.accordion-menu-sp__menu {
    display: flex;
    flex-direction: column;
    border-bottom: calc(100vw * (1 / 375)) solid var(--color-secondary);
    padding-left: calc(100vw * (9 / 375));
    padding-right: calc(100vw * (30 / 375));
}

.accordion-menu-sp__menu:first-child {
    border-top: calc(100vw * (1 / 375)) solid var(--color-secondary);
}

.accordion-menu-sp__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(100vw * (16 / 375)) 0;
}

.accordion-menu-sp__link {
    font-family: var(--font-roboto);
    font-size: calc(100vw * (18 / 375));
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-secondary);
}

.accordion-menu-sp__trigger {
    border: none;
    background-color: transparent;
    padding: 0;
    width: calc(100vw * (18 / 375));
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion-menu-sp__submenu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(100vw * (10 / 375));
    padding-bottom: calc(100vw * (35 / 375));
    padding-left: calc(100vw * (19 / 375));
}

.accordion-menu-sp__sublink {
    font-family: var(--font-roboto);
    font-size: calc(100vw * (16 / 375));
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-secondary);
}

/* Link Button */
.link-button {
    width: 100%;
    max-width: calc(100vw * (425 / 1920));
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: end;
    padding: calc(100vw * (13 / 1920)) calc(100vw * (17 / 1920));
    border-radius: 999px;
    background-color: var(--color-primary);
    color: var(--color-secondary);
    border: calc(100vw * (3 / 1920)) solid var(--color-primary);
    transition: color 0.7s ease, background-color 0.7s ease;
}

.link-button__text {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-roboto);
    font-size: calc(100vw * (22 / 1920));
    font-weight: 700;
    line-height: 1.5;
    word-break: keep-all;
    text-align: center;
    white-space: nowrap;
}

.link-button__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: var(--color-secondary);
    width: calc(100vw * (68 / 1920));
    height: calc(100vw * (68 / 1920));
    color: var(--color-primary);
    transition: color 0.7s ease, background-color 0.7s ease;
}

.link-button__icon svg {
    width: calc(100vw * (24 / 1920));
    height: auto;
}

.link-button:hover {
    background-color: transparent;
    color: var(--color-primary);
}

.link-button:hover .link-button__icon {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}

.link-button__arrow-pc {
    display: block;
}

.link-button__arrow-sp {
    display: none;
}

/* Link Button (SP) */
@media (max-width: 1024px) {
    .link-button {
        max-width: calc(100vw * (315 / 375));
        padding: calc(100vw * (15 / 375)) calc(100vw * (18 / 375));
        justify-content: space-between;
        column-gap: calc(100vw * (15 / 375));
        border-width: calc(100vw * (2 / 375));
    }
    .link-button__text {
        width: 100%;
        position: static;
        top: unset;
        left: unset;
        transform: unset;
        font-size: calc(100vw * (22 / 375));
    }
    .link-button__icon {
        min-width: calc(100vw * (40 / 375));
        width: calc(100vw * (40 / 375));
        height: calc(100vw * (40 / 375));
    }
    .link-button__icon svg {
        width: calc(100vw * (14 / 375));
    }
    .link-button__arrow-pc {
        display: none;
    }
    .link-button__arrow-sp {
        display: block;
    }
}

/* Link Button Variant */

.link-button--inverted {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    border-color: var(--color-secondary);
}

.link-button--inverted .link-button__icon {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}

.link-button--inverted:hover {
    background-color: transparent;
    color: var(--color-secondary);
}

.link-button--inverted:hover .link-button__icon {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

.link-button--outlined {
    background-color: transparent;
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.link-button--outlined .link-button__icon {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

/* Custom new button */
.link-button--outlined.link-button__green {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.link-button--outlined.link-button__green .link-button__icon {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}

.link-button--outlined.link-button__green:hover {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    border-color: var(--color-primary);
}

.link-button--outlined.link-button__green:hover .link-button__icon {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

/* End custom new button */

.link-button--outlined:hover {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

.link-button--outlined:hover .link-button__icon {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}

.underline-link {
    width: fit-content;
    display: flex;
    align-items: center;
    column-gap: calc(100vw * (16 / 1920));
    padding-bottom: calc(100vw * (10 / 1920));
    border-bottom: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    transition: opacity 0.7s ease;
}

.underline-link__text {
    font-family: var(--font-roboto);
    font-size: calc(100vw * (22 / 1920));
    font-weight: 700;
    line-height: 1.5;
}

.underline-link__icon-wrapper {
    box-sizing: border-box;
    width: calc(100vw * (42 / 1920));
    aspect-ratio: 1;
    border-radius: 100%;
    border: calc(100vw * (2 / 1920)) solid var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.underline-link__icon {
    width: calc(100vw * (16 / 1920));
    height: auto;
}

.underline-link:hover {
    opacity: 0.67;
}

.back-button {
    display: flex;
    align-items: center;
    width: fit-content;
    column-gap: calc(100vw * (16 / 1920));
    transition: opacity 0.7s ease;
}
.back-button:hover {
    opacity: 0.7;
}
.back-button span {
    font-family: var(--font-roboto);
    font-size: calc(100vw * (22 / 1920));
    font-weight: bold;
    color: var(--color-primary);
}
.back-button__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: calc(100vw * (42 / 1920));
    aspect-ratio: 1;
    color: var(--color-primary);
    border-radius: 100%;
    border: solid calc(100vw * (2 / 1920)) var(--color-primary);
}
.back-button svg {
    width: calc(100vw * (16 / 1920));
    aspect-ratio: 1;
}
@media (max-width: 1024px) {
    .underline-link {
        width: 100%;
        justify-content: space-between;
        column-gap: calc(100vw * (50 / 375));
        margin-bottom: calc(100vw * (20 / 375));
        padding-bottom: calc(100vw * (10 / 375));
    }
    .underline-link__text {
        width: fit-content;
        font-size: calc(100vw * (16 / 375));
    }
    .underline-link__icon-wrapper {
        min-width: calc(100vw * (40 / 375));
        width: calc(100vw * (40 / 375));
        height: calc(100vw * (40 / 375));
    }
    .underline-link__icon {
        width: calc(100vw * (14 / 375));
        height: auto;
    }
    .back-button {
        column-gap: calc(100vw * (16 / 375));
    }
    .back-button:hover {
        opacity: 0.7;
    }
    .back-button span {
        font-size: calc(100vw * (22 / 375));
    }
    .back-button__icon {
        width: calc(100vw * (42 / 375));
        border: solid calc(100vw * (2 / 375)) var(--color-primary);
    }
    .back-button svg {
        width: calc(100vw * (16 / 375));
    }
}

/* Page KV */
.page-kv {
    height: calc(100vw * (651 / 1920));
    box-sizing: border-box;
    margin-left: calc(100vw * (100 / 1920));
    margin-right: calc(100vw * (100 / 1920));
    padding: 0 calc(100vw * (150 / 1920));
    display: flex;
    justify-content: start;
    align-items: center;
    border-radius: calc(100vw * (24 / 1920));
    background-color: var(--color-tertiary);
    background-size: cover;
}

.page-kv__title {
    border-radius: calc(100vw * (24 / 1920));
    padding: calc(100vw * (50 / 1920)) calc(100vw * (25 / 1920));
    background-image: url(../img/green-color-bg.jpg);
    font-family: var(--font-noto-serif-jp);
    font-size: calc(100vw * (40 / 1920));
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-secondary);
    text-align: center;
    /* Animation */
    opacity: 0;
    filter: blur(10px);
}

.page-kv__title.animate {
    animation: blurFadeIn 1s ease forwards;
}

.page-kv__title span {
    display: block;
    min-width: calc(100vw * (380 / 1920));
}

@media (max-width: 1024px) {
    .page-kv {
        height: calc(100vw * (607 / 375));
        margin-left: 0;
        margin-right: 0;
        padding: calc(100vw * (120 / 375)) calc(100vw * (20 / 375));
        border-radius: 0;
        align-items: start;
        justify-content: stretch;
    }
    .page-kv__title {
        width: 100%;
        border-radius: calc(100vw * (24 / 375));
        padding: calc(100vw * (26 / 375)) calc(100vw * (20 / 375));
    }
    .page-kv__title span {
        font-size: calc(100vw * (30 / 375));
    }
}

.gradient-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    transform-origin: top center;
}

.gradient-cover::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(0deg, rgba(57, 105, 28, 0.4) 0%, #39691C 100%);
}