@charset "UTF-8";

/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =============================================

    COMMON

============================================= */
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

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

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

@keyframes slide2 {
    0% {
        transform: translateX(0);
    }

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

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }

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

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    99.9% {
        opacity: 0;
    }

    100% {
        z-index: -999;
        opacity: 0;
    }
}

@keyframes clipPath {
    0% {
        clip-path: circle(0 at 50% 50%);
        opacity: 1;
    }

    100% {
        clip-path: circle(100% at 50% 50%);
        opacity: 1;
    }
}

@font-face {
    font-family: ItcAvantGarde;
    src: url("../font/ITCAvantGardeStdDemi.otf") format("opentype");
}

@font-face {
    font-family: "GothicMb101";
    src: url("../font/AP-OTF-GothicMB101Pr6N-Bold.otf") format("opentype");
}

/* =============================================

    PC
    
============================================= */
@media (min-width: 1000px) {
    body {
        overflow-x: hidden;
    }

    body::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        width: 100%;
        height: 100%;
        content: "";
        background-color:#fedb00;
    }

    body::after {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        width: 100%;
        height: 100%;
        content: "";
        background: linear-gradient(45deg, #fef000, #fedb00, #fe9c00);
        background-size: 200% 200%;
        animation: gradient 20s infinite ease;
    }

    #header {
        background: transparent;
    }

    #header .l-header__inner {
        max-width: 1000px;
        padding: 24px 0;
    }

    #header .l-header__logo {
        padding: 0;
        margin: 0;
    }

    #header .c-headLogo {
        margin: 0;
    }

    #header #gnav .c-gnav > li > a {
        padding: 0 1.5em;
    }

    #header #gnav .c-gnav > li:hover > a {
        background: transparent;
    }

    #header #gnav .c-gnav > li:last-child > a {
        margin-right: -1.5em;
    }

    #header #gnav .c-gnav > .-current > a {
        background: transparent;
    }

    #header #gnav .c-gnav .ttl {
        font-size: 16px;
        line-height: 1;
        color: #000;
        letter-spacing: 0.025em;
        transition: 0.1s;
    }

    #header #gnav .c-gnav > li > a:hover .ttl {
        color: #00b3ff;
    }

    #main_visual .p-mainVisual__inner {
        display: none;
    }

    #post_slider {
        display: none;
    }

    #top_title_area {
        display: none;
    }

    #breadcrumb {
        display: none;
    }

    #content {
        max-width: 1000px;
        padding: 0 !important;
        margin: 0 auto;
    }

    #main_content {
        max-width: 1000px;
    }

    #main_content .post_content {
        padding: 0;
    }

    #main_content .post_content:has(#top) {
        padding: 0 0 200px;
    }

    #main_content .post_content:has(#about) {
        padding: 85px 0 200px;
        opacity: 0;
        transition: 1.2s;
    }

    [data-loaded="true"] #main_content .post_content:has(#about) {
        opacity: 1;
    }

    #main_content .post_content:has(#contact) {
        padding: 85px 0 160px;
        opacity: 0;
        transition: 1.2s;
    }

    [data-loaded="true"] #main_content .post_content:has(#contact) {
        opacity: 1;
    }

    #main_content .post_content:has(#privacy) {
        padding: 85px 0 200px;
        opacity: 0;
        transition: 1.2s;
    }

    [data-loaded="true"] #main_content .post_content:has(#privacy) {
        opacity: 1;
    }

    #footer .l-footer__inner {
        padding: 80px 0;
    }

    #footer .l-footer__widgetArea {
        padding: 0;
    }

    #footer .l-container {
        max-width: 1000px;
        padding: 0;
        margin: 0 auto;
    }

    #footer .w-footer__box {
        padding: 0;
    }

    #footer .footer-logo-image {
        display: block;
        width: 137px;
        margin: 0 auto;
    }

    #footer .l-footer__foot {
        padding: 0;
    }

    #footer .l-footer__nav {
        padding: 30px 0;
    }

    #footer .l-footer__nav > li > a {
        padding: 0 1.5em;
        font-size: 16px;
        line-height: 1;
        letter-spacing: 0.025em;
        border: none;
        transition: 0.1s;
    }

    #footer .l-footer__nav > li > a:hover {
        color: #00b3ff;
        text-decoration: none;
    }

    #footer .copyright {
        line-height: 1;
        color: #666;
        letter-spacing: 0.025em;
    }

    /*
        custom-html
    */
    .custom-html-content h2 {
        margin: 0;
        font-family: ItcAvantGarde;
        font-size: 30px;
        font-weight: normal;
        line-height: 1;
        color: #00bdff;
        letter-spacing: 0.025em;
    }

    .custom-html-content p {
        font-size: 16px;
        line-height: 1.75;
        letter-spacing: 0.025em;
    }

    .custom-html-content a {
        font-size: 16px;
        line-height: 1.75;
        letter-spacing: 0.025em;
    }

    /*
        splash
    */
    #splash {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        display: block;
        width: 100%;
        height: 100%;
        animation: fadeOut 0.6s forwards ease-out;
        animation-delay: 2.1s;
    }

    #splash .splash-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background:#fff;
    }

    #splash .splash-logo-image {
        display: block;
        width: 640px;
        opacity: 0;
        animation: fadeUp 0.6s forwards ease-out;
    }

    #splash .overlay {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        display: block;
        width: 100%;
        height: 100%;
        background:#fedb00;
        opacity: 0;
        animation: clipPath 0.6s forwards ease-out;
        animation-delay: 1.8s;
    }

    /*
        top
    */
    #top {
        margin-bottom: -160px;
        transform: translateY(-115px);
    }

    #top .top-content {
        position: relative;
        height: 865px;
    }

    #top .top-content > h1 {
        position: absolute;
        top: 0;
        left: 50%;
        display: block;
        width: 834px;
        margin-left: -171px;
        transform: translateX(-50%);
    }

    #top .top-content > h1 > img {
        width: 834px;
        vertical-align: bottom;
        opacity: 0.5;
    }

    #top .top-content > p {
        position: absolute;
        right: 0;
        bottom: 108px;
        width: 584px;
        text-align: right;
    }

    #top .top-content > p > span {
        display: block;
    }

    #top .top-content > p > span:first-of-type {
        margin-bottom: -47px;
    }

    #top .top-content > p > span:first-of-type > img {
        width: 584px;
        vertical-align: bottom;
    }

    #top .top-content > p > span:last-of-type > img {
        width: 547px;
        vertical-align: bottom;
    }

    #top .pc_only {
        position: relative;
        display: block;
        padding-top: 295px;
    }

    #top .pc_only > p {
        padding: 0.5em 0;
        font-family: ItcAvantGarde;
        font-size: 24px;
        line-height: 1.25;
        color: #fff;
        text-align: right;
        letter-spacing: 0.025em;
    }

    #top .pc_only > p::before,
    #top .pc_only > p::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #top .pc_only > p::before {
        margin-top: calc((1 - 1.25) * 0.5em);
    }

    #top .pc_only > p::after {
        margin-bottom: calc((1 - 1.25) * 0.5em);
    }

    #top .pc_only > p:last-child {
        margin-bottom: 0;
    }

    /*
        purpose
    */
    #purpose {
        margin-bottom: 125px;
    }

    #purpose .purpose-content > hgroup {
        margin-bottom: 40px;
    }

    #purpose .purpose-content > hgroup > h2 {
        margin-bottom: 40px;
    }

    #purpose .purpose-content > hgroup > p {
        font-family: "GothicMb101";
        font-size: 68px;
        font-weight: normal;
        line-height: 1;
        text-indent: -0.025em;
        letter-spacing: 0.05em;
        -webkit-font-smoothing: antialiased;
    }

    #purpose .purpose-content > hgroup > p > span {
        font-size: 0.8em;
        vertical-align: text-top;
    }

    #purpose .purpose-content > p {
        margin-bottom: 45px;
        font-size: 20px;
    }

    #purpose .purpose-content > p::before,
    #purpose .purpose-content > p::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #purpose .purpose-content > p::before {
        margin-top: calc((1 - 1.75) * 0.5em);
    }

    #purpose .purpose-content > p::after {
        margin-bottom: calc((1 - 1.75) * 0.5em);
    }

    #purpose .purpose-content > a {
        position: relative;
        display: block;
        width: 300px;
        padding: 1.2em;
        font-size: 20px;
        font-weight: bold;
        line-height: 1;
        text-align: center;
        border: 1px solid #000;
        border-radius: 100vh;
        transition: 0.3s;
    }

    #purpose .purpose-content > a::before {
        position: absolute;
        bottom: 33px;
        left: 250px;   
        width: 100px;
        height: 2px;
        content: "";
        background: #00bdff;
        transition: 0.3s;
    }

    #purpose .purpose-content > a::after {
        position: absolute;
        right: -54px;
        bottom: 38px;    
        width: 15px;
        height: 2px;
        content: "";
        background: #00bdff;
        transition: 0.3s;
        transform: rotate(45deg);
    }

    #purpose .purpose-content > a:hover {
        color: #00b3ff;
        border-color: #00a9ff;
    }

    #purpose .purpose-content > a:hover::before {
        left: 270px;
    }

    #purpose .purpose-content > a:hover::after {
        right: -74px;
    }

    /*
        works
    */
    #works {
        margin-bottom: 175px;
    }

    #works .works-content > h2 {
        margin-bottom: -2px;
    }

    #works .works-content > h2 > img {
        width: 285px;
        margin-left: -2px;
        vertical-align: bottom;
    }

    #works .works-content > ol {
        position: relative;
        padding: 90px;
        list-style: none;
        background-color: #fff;
    }

    #works .works-content > ol::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        width: 100vw;
        height: 100%;
        content: "";
        background-color: #fff;
    }

    #works .works-content > ol::after {
        position: absolute;
        top: 90px;
        left: 242px;
        display: block;
        width: 2px;
        height: calc(100% - 180px);
        content: "";
        background-color: #fedb00;
    }

    #works .works-content > ol:has(.target)::after {
        height: 0;
        transition: 1.5s;
    }

    #works .works-content > ol:has(.target.show)::after {
        height: calc(100% - 180px);
    }

    #works .works-content > ol > li {
        display: flex;
        flex-wrap: wrap;
        align-items: start;
        width: 100%;
        margin: 0;
    }

    #works .works-content > ol > li.target {
        opacity: 0;
    }

    #works .works-content > ol > li.target.show {
        animation: fadeUp 0.6s forwards ease-out;
    }

    #works .works-content > ol > li > h3 {
        width: 152px;
        margin: 0;
    }

    #works .works-content > ol > li > h3 > img {
        margin: 5px 0 0 -1px;
        vertical-align: bottom;
    }

    #works .works-content > ol > li:nth-child(1) > h3 > img {
        width: 114px;
    }

    #works .works-content > ol > li:nth-child(2) > h3 > img {
        width: 128px;
    }

    #works .works-content > ol > li:nth-child(3) > h3 > img {
        width: 129px;
    }

    #works .works-content > ol > li > div {
        width: calc(100% - 152px);
        padding: 5px 0 75px 28px;
    }

    #works .works-content > ol > li > div > h4 {
        margin-bottom: 25px;
        font-size: 28px;
        font-weight: bold;
        line-height: 1.5;
        letter-spacing: 0.025em;
    }

    #works .works-content > ol > li > div > h4::before,
    #works .works-content > ol > li > div > h4::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #works .works-content > ol > li > div > h4::before {
        margin-top: calc((1 - 1.5) * 0.5em);
    }

    #works .works-content > ol > li > div > h4::after {
        margin-bottom: calc((1 - 1.5) * 0.5em);
    }

    #works .works-content > ol > li > div > p {
        color: #666;
    }

    #works .works-content > ol > li > div > p::before,
    #works .works-content > ol > li > div > p::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #works .works-content > ol > li > div > p::before {
        margin-top: calc((1 - 1.75) * 0.5em);
    }

    #works .works-content > ol > li > div > p::after {
        margin-bottom: calc((1 - 1.75) * 0.5em);
    }

    /*
        client
    */
    #client .client-content > h2 {
        margin-bottom: 25px;
    }

    #client .client-content .box {
        display: flex;
        align-items: center;
        margin: 0 calc(-50vw + 50%) 0 calc(-50vw + 50%);
    }

    #client .client-content .box > ul {
        display: flex;
        padding: 0;
        list-style: none;
        animation: slide1 100s -50s infinite linear;
    }

    #client .client-content .box > ul:last-of-type {
        animation: slide2 100s infinite linear;
    }

    #client .client-content .box > ul > li {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 200px;
        margin: 0 20px 0 0;
        filter: drop-shadow(6px 6px 4px rgb(0 0 0 / 5%));
    }

    #client .client-content .box > ul > li > span {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #fff;
        border-radius: 50%;
    }

    #client .client-content .box > ul > li > span > img {
        width: 200px;
        vertical-align: bottom;
    }

    /*
        about
    */
    #about {
        margin-bottom: 75px;
    }

    #about .about-content > h2 {
        margin-bottom: 50px;
    }

    #about .about-content > h2 > img {
        width: 437px;
        margin-left: -2px;
        vertical-align: bottom;
    }

    #about .about-content > p {
        width: 750px;
        font-size: 20px;
    }

    #about .about-content > p::before,
    #about .about-content > p::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #about .about-content > p::before {
        margin-top: calc((1 - 1.75) * 0.5em);
    }

    #about .about-content > p::after {
        margin-bottom: calc((1 - 1.75) * 0.5em);
    }

    /*
        message
    */
    #message {
        position: relative;
        margin-bottom: 145px;
    }

    #message .message-content > h2 {
        margin-bottom: 30px;
    }

    #message .message-content > p {
        width: 550px;
    }

    #message .message-content > p::before,
    #message .message-content > p::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #message .message-content > p::before {
        margin-top: calc((1 - 1.75) * 0.5em);
    }

    #message .message-content > p::after {
        margin-bottom: calc((1 - 1.75) * 0.5em);
    }

    #message .message-content > p > span {
        display: block;
        margin-top: 1em;
    }

    #message .message-content > img {
        position: absolute;
        top: -35px;
        right: -50px;
        width: 480px;
    }

    #message .message-content > img.target {
        opacity: 0;
    }

    #message .message-content > img.target.show {
        animation: fadeUp 0.6s forwards ease-out;
    }

    /*
        company
    */
    #company .company-content > h2 {
        margin-bottom: -19px;
    }

    #company .company-content > h2 > img {
        width: 481px;
        margin-left: -2px;
        vertical-align: bottom;
    }

    #company .company-content > dl {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 90px;
        font-size: 16px;
        line-height: 1.75;
        letter-spacing: 0.025em;
        background-color: #fff;
    }

    #company .company-content > dl::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        width: 100vw;
        height: 100%;
        content: "";
        background-color: #fff;
    }

    #company .company-content > dl > dt {
        width: 180px;
        padding: 1.25em 0;
        font-weight: normal;
        border-top: 1px solid #ccc;
    }

    #company .company-content > dl > dt:last-of-type {
        border-bottom: 1px solid #ccc;
    }

    #company .company-content > dl > dt.target {
        opacity: 0;
    }

    #company .company-content > dl > dt.target.show {
        animation: fadeUp 0.6s forwards ease-out;
    }

    #company .company-content > dl > dd {
        width: calc(100% - 180px);
        padding: 1.25em 0;
        border-top: 1px solid #ccc;
    }

    #company .company-content > dl > dd:last-of-type {
        border-bottom: 1px solid #ccc;
    }

    #company .company-content > dl > dd.target {
        opacity: 0;
    }

    #company .company-content > dl > dd.target.show {
        animation: fadeUp 0.6s forwards ease-out;
    }

    #company .company-content > dl > dd > span::after {
        display: inline-block;
        margin: 0 0.125em;
        color: #999;
        content: "／";
        transform: scaleX(0.8);
    }

    #company .company-content > dl > dd > span:last-of-type::after {
        content: "";
    }

    #company .company-content > dl > dd > small {
        display: block;
        font-size: 12px;
        color: #999;
    }

    #company .company-content .map {
        box-sizing: content-box;
        width: 480px;
        height: 270px;
        padding: 0.375em 0;
    }

    /*
        contact
    */
    #contact {
        margin-bottom: 85px;
    }

    #contact .contact-content > h2 {
        margin-bottom: 50px;
    }

    #contact .contact-content > h2 > img {
        width: 392px;
        margin-left: -2px;
        vertical-align: bottom;
    }

    #contact .contact-content > p {
        width: 750px;
        font-size: 20px;
    }

    #contact .contact-content > p::before,
    #contact .contact-content > p::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #contact .contact-content > p::before {
        margin-top: calc((1 - 1.75) * 0.5em);
    }

    #contact .contact-content > p::after {
        margin-bottom: calc((1 - 1.75) * 0.5em);
    }

    /*
        wpcf7-form
    */
    .wpcf7-form > p {
        margin-bottom: 40px;
    }

    .wpcf7-form > p:has(#wpfc7-submit) {
        position: relative;
        display: inline-block;
    }

    .wpcf7-form > p:has(#wpfc7-submit)::before {
        position: absolute;
        bottom: 33px;
        left: 252px;   
        width: 100px;
        height: 2px;
        content: "";
        background: #00bdff;
        transition: 0.3s;
    }

    .wpcf7-form > p:has(#wpfc7-submit)::after {
        position: absolute;
        right: -54px;
        bottom: 38px;    
        width: 15px;
        height: 2px;
        content: "";
        background: #00bdff;
        transition: 0.3s;
        transform: rotate(45deg);
    }

    .wpcf7-form > p:has(#wpfc7-submit:not([disabled])):hover::before {
        left: 272px;
    }

    .wpcf7-form > p:has(#wpfc7-submit:not([disabled])):hover::after {
        right: -74px;
    }

    .wpcf7-form > p > label {
        display: block;
        margin-bottom: 0.75em;
        font-size: 16px;
        font-weight: bold;
        line-height: 1;
        letter-spacing: 0.025em;
    }

    .wpcf7-form > p > label + br {
        display: none;
    }

    .wpcf7-form > p > span {
        display: block;
    }

    .wpcf7-form > p > span:has(> input),
    .wpcf7-form > p > span:has(> textarea) {
        filter: drop-shadow(6px 6px 4px rgb(0 0 0 / 5%));
    }

    .wpcf7-form > p > span > input {
        display: block;
        width: 800px;
        padding: 1.25em 1.5em;
        font-size: 16px;
        line-height: 1;
        color: #000;
        letter-spacing: 0.025em;
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 8px;
        outline: none;
    }

    .wpcf7-form > p > span > input::placeholder {
        color: #cbaf00;
    }

    .wpcf7-form > p > span > input:placeholder-shown {
        background-color: #ffed80;
    }

    .wpcf7-form > p > span > input.wpcf7-not-valid {
        border: 1px solid #f00;
    }

    .wpcf7-form > p > span > input + .wpcf7-not-valid-tip {
        margin-top: 0.75em;
        font-size: 16px;
        line-height: 1;
        color: #f00;
    }

    .wpcf7-form > p > span > textarea {
        display: block;
        width: 800px;
        height: 13.5em;
        padding: 1.25em 1.5em;
        font-size: 16px;
        line-height: 1.75;
        color: #000;
        letter-spacing: 0.025em;
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 8px;
        outline: none;
    }

    .wpcf7-form > p > span > textarea::placeholder {
        color: #cbaf00;
    }

    .wpcf7-form > p > span > textarea:placeholder-shown {
        background-color: #ffed80;
    }

    .wpcf7-form > p > span > textarea.wpcf7-not-valid {
        border: 1px solid #f00;
    }

    .wpcf7-form > p > span > textarea + .wpcf7-not-valid-tip {
        margin-top: 0.75em;
        font-size: 16px;
        line-height: 1;
        color: #f00;
        letter-spacing: 0.025em;
    }

    .wpcf7-form .wpcf7-acceptance {
        display: block;
        padding: 10px 0;
        font-size: 0;
    }

    .wpcf7-form .wpcf7-acceptance > span {
        margin: 0;
    }

    .wpcf7-form .wpcf7-acceptance > span > label > input[type="checkbox"] {
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

    .wpcf7-form .wpcf7-acceptance > span > label > span {
        display: inline-block;
        padding: 0.25em;
        font-size: 12px;
        line-height: 1;
        color: #666;
        letter-spacing: 0.025em;
        vertical-align: middle;
    }

    .wpcf7-form .wpcf7-acceptance > span > label > span > a {
        padding: 0.25em;
        color: #000;
        text-decoration: underline;
        transition: 0.1s;
    }

    .wpcf7-form .wpcf7-acceptance > span > label > span > a:hover {
        color: #00b3ff;
    }

    .wpcf7-form .wpcf7-submit {
        display: block;
        width: 300px;
        padding: 1.2em;
        font-size: 20px;
        font-weight: bold;
        line-height: 1;
        color: #000;
        text-align: center;
        letter-spacing: 0.025em;
        background-color: transparent;
        border: 1px solid #000;
        border-radius: 100vh;
        transition: 0.3s;
    }

    .wpcf7-form > p:hover .wpcf7-submit:not([disabled]) {
        color: #00b3ff;
        border-color: #00a9ff;
    }

    .wpcf7-form .wpcf7-submit + .wpcf7-spinner {
        display: none;
    }

    .wpcf7-form .wpcf7-response-output {
        padding: 0 !important;
        margin: 0 0 40px !important;
        font-size: 20px;
        line-height: 1.75;
        color: #f00;
        letter-spacing: 0.025em;
        border: none !important;
    }

    .wpcf7-form .wpcf7-response-output::before,
    .wpcf7-form .wpcf7-response-output::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    .wpcf7-form .wpcf7-response-output::before {
        margin-top: calc((1 - 1.75) * 0.5em);
    }

    .wpcf7-form .wpcf7-response-output::after {
        margin-bottom: calc((1 - 1.75) * 0.5em);
    }

    .wpcf7-form.sent .wpcf7-response-output {
        color: #00b3ff;
    }

    /*
        privacy
    */
    #privacy .privacy-content > h2 {
        margin-bottom: 35px;
    }

    #privacy .privacy-content > section {
        width: 800px;
        margin-bottom: 40px;
    }

    #privacy .privacy-content > section > h3 {
        margin: 0 0 15px;
        font-size: 20px;
        font-weight: bold;
        line-height: 1.5;
        letter-spacing: 0.025em;
    }

    #privacy .privacy-content > section > h3::before,
    #privacy .privacy-content > section > h3::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #privacy .privacy-content > section > h3::before {
        margin-top: calc((1 - 1.5) * 0.5em);
    }

    #privacy .privacy-content > section > h3::after {
        margin-bottom: calc((1 - 1.5) * 0.5em);
    }

    #privacy .privacy-content > section > p {
        color: #666;
    }

    #privacy .privacy-content > section > p::before,
    #privacy .privacy-content > section > p::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #privacy .privacy-content > section > p::before {
        margin-top: calc((1 - 1.75) * 0.5em);
    }

    #privacy .privacy-content > section > p::after {
        margin-bottom: calc((1 - 1.75) * 0.5em);
    }
}

/* =============================================

    MOBILE
    
============================================= */
@media (max-width: 999px) {
    body {
        overflow-x: hidden;
    }

    body::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        width: 100%;
        height: 100%;
        content: "";
        background-color:#fedb00;
    }

    body::after {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        width: 100%;
        height: 100%;
        content: "";
        background: linear-gradient(45deg, #fef000, #fedb00, #fe9c00);
        background-size: 200% 200%;
        animation: gradient 20s infinite ease;
    }

    #header {
        background: transparent;
    }

    #header .l-header__inner {
        max-width: 640px;
        padding: clamp(15px, 4.6875vw, 30px) clamp(15px, 4.6875vw, 30px) clamp(15px, 4.6875vw, 30px) clamp(20px, 6.25vw, 40px);
    }

    #header .l-header__logo {
        padding: 0;
        margin-right: auto;
    }

    #header .c-headLogo {
        height: auto;
        margin: 0;
    }

    #header .c-headLogo__link {
        padding: 0;
    }

    #header .c-headLogo__img {
        height: clamp(34.5px, 10.78125vw, 69px);
    }

    #header #gnav {
        display: none;
    }

    #header .l-header__customBtn {
        display: none;
    }

    #header .l-header__menuBtn {
        display: block;
        width: clamp(45px, 14.0625vw, 90px);
        height: clamp(45px, 14.0625vw, 90px);
    }

    #header .l-header__menuBtn .c-iconBtn__icon {
        width: 100%;
        height: 100%;
        background-color: #000;
        border-radius: 50%;
    }

    #header .l-header__menuBtn .c-iconBtn__icon::before {
        display: none;
    }

    #header .l-header__menuBtn .c-iconBtn__icon::after {
        display: block;
        width: 100%;
        height: 100%;
        content: "";
        background: url("../img/icon-menu-yellow.svg") no-repeat center / 45%;
    }

    #sp_menu {
        display: block;
    }

    #main_visual .p-mainVisual__inner {
        display: none;
    }

    #post_slider {
        display: none;
    }

    #top_title_area {
        display: none;
    }

    #breadcrumb {
        display: none;
    }

    #content {
        max-width: 640px;
        padding: 0 !important;
        margin: 0 auto;
    }

    #main_content {
        max-width: 640px;
    }

    #main_content .post_content {
        padding: 0;
    }

    #main_content .post_content:has(#top) {
        padding: 0 0 clamp(120px, 37.5vw, 240px);
    }

    #main_content .post_content:has(#about) {
        padding: clamp(62.5px, 19.53125vw, 125px) 0 clamp(120px, 37.5vw, 240px);
        opacity: 0;
        transition: 1.2s;
    }

    [data-loaded="true"] #main_content .post_content:has(#about) {
        opacity: 1;
    }

    #main_content .post_content:has(#contact) {
        padding: clamp(62.5px, 19.53125vw, 125px) 0 clamp(92.5px, 28.90625vw, 185px);
        opacity: 0;
        transition: 1.2s;
    }

    [data-loaded="true"] #main_content .post_content:has(#contact) {
        opacity: 1;
    }

    #main_content .post_content:has(#privacy) {
        padding: clamp(65px, 20.3125vw, 130px) 0 clamp(120px, 37.5vw, 240px);
        opacity: 0;
        transition: 1.2s;
    }

    [data-loaded="true"] #main_content .post_content:has(#privacy) {
        opacity: 1;
    }

    #footer .l-footer__inner {
        padding: clamp(60px, 18.75vw, 120px) 0;
    }

    #footer .l-footer__widgetArea {
        padding: 0;
    }

    #footer .l-container {
        max-width: 640px;
        padding: 0;
        margin: 0 auto;
    }

    #footer .w-footer__box {
        padding: 0;
    }

    #footer .footer-logo-image {
        display: block;
        width: clamp(100px, 31.25vw, 200px);
        margin: 0 auto;
    }

    #footer .l-footer__foot {
        padding: 0;
    }

    #footer .l-footer__nav {
        padding: clamp(25px, 7.8125vw, 50px) 0;
    }

    #footer .l-footer__nav > li > a {
        padding: 0 0.75em;
        font-size: clamp(12px, 3.75vw, 24px);
        line-height: 1;
        letter-spacing: 0.025em;
        border: none;
    }

    #footer .copyright {
        font-size: clamp(8px, 2.5vw, 16px);
        line-height: 1;
        color: #666;
        letter-spacing: 0.025em;
    }

    /*
        p-spMenu
    */
    .p-spMenu {
        transition: 0.3s;
    }

    [data-spmenu="closed"] .p-spMenu {
        transition-delay: 0s;
    }

    .p-spMenu__inner {
        position: relative;
        width: 100%;
        max-width: 640px;
        padding-top: 0;
        margin: 0 auto;
        box-shadow: none;
        transition: none;
    }

    .p-spMenu__inner::before {
        position: absolute;
        top: clamp(15px, 4.6875vw, 30px);
        right: clamp(15px, 4.6875vw, 30px);
        left: auto;
        display: block;
        width: clamp(45px, 14.0625vw, 90px);
        height: clamp(45px, 14.0625vw, 90px);
        background-color: #000;
        border-radius: 50%;
        transition: 1.5s;
    }

    .-right .p-spMenu__inner {
        transform: none;
    }

    [data-spmenu="opened"] .p-spMenu__inner::before {
        transform: scale(100);
    }

    .p-spMenu__closeBtn {
        box-sizing: content-box;
        display: block;
        width: clamp(45px, 14.0625vw, 90px);
        height: clamp(45px, 14.0625vw, 90px);
        padding: clamp(15px, 4.6875vw, 30px);
    }

    .p-spMenu__closeBtn .c-iconBtn__icon {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .p-spMenu__closeBtn .c-iconBtn__icon::before {
        display: block;
        width: 100%;
        height: 100%;
        font-size: clamp(25px, 7.8125vw, 50px);
        line-height: clamp(45px, 14.0625vw, 90px);
        color: #fedb00;
    }

    .p-spMenu__body {
        display: flex;
        flex-flow: column;
        justify-content: safe center;
        width: 100%;
        padding: 0;
        scrollbar-width: none;
    }

    .p-spMenu__body::-webkit-scrollbar{
        display: none;
    }

    .p-spMenu__body .c-widget__title {
        display: none;
    }

    .p-spMenu__nav {
        width: 100%;
        padding: 0;
        margin: 0 0 clamp(75px, 23.4375vw, 150px);
    }

    .p-spMenu__nav .menu-item > a {
        padding: 1.2em;
        font-size: clamp(20px, 6.25vw, 40px);
        font-weight: bold;
        line-height: 1;
        color: #fff;
        text-align: center;
        letter-spacing: 0.025em;
        border: none !important;
        transition: none;
    }

    .p-spMenu__nav .c-spnav {
        padding: 0 clamp(20px, 6.25vw, 40px);
    }

    .p-spMenu__nav .menu-item > a::before {
        display: none;
    }

    #sp_menu_bottom {
        width: 100%;
        margin: 0;
    }

    #sp_menu_bottom .menu-logo-image {
        display: block;
        width: clamp(100px, 31.25vw, 200px);
        margin: 0 auto;
    }

    .p-spMenu__overlay {
        display: none; 
    }

    /*
        custom-html
    */
    .custom-html-container {
        padding: 0 clamp(20px, 6.25vw, 40px);
    }

    .custom-html-content h2 {
        margin: 0;
        font-family: ItcAvantGarde;
        font-size: clamp(18px, 5.625vw, 36px);
        font-weight: normal;
        line-height: 1;
        color: #00bdff;
        letter-spacing: 0.025em;
    }

    .custom-html-content p {
        font-size: clamp(14px, 4.375vw, 28px);
        line-height: 1.75;
        letter-spacing: 0.025em;
    }

    .custom-html-content a {
        font-size: clamp(14px, 4.375vw, 28px);
        line-height: 1.75;
        letter-spacing: 0.025em;
    }

    /*
        splash
    */
    #splash {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        display: block;
        width: 100%;
        height: 100%;
        animation: fadeOut 0.6s forwards ease-out;
        animation-delay: 2.1s;
    }

    #splash .splash-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background:#fff;
    }

    #splash .splash-logo-image {
        display: block;
        width: clamp(240px, 75vw, 480px);
        opacity: 0;
        animation: fadeUp 0.6s forwards ease-out;
    }

    #splash .overlay {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        display: block;
        width: 100%;
        height: 100%;
        background:#fedb00;
        opacity: 0;
        animation: clipPath 0.6s forwards ease-out;
        animation-delay: 1.8s;
    }

    /*
        top
    */
    #top {
        margin-bottom: calc(clamp(42.5px, 13.28125vw, 85px) * -1);
        transform: translateY(calc(clamp(17.5px, 5.46875vw, 35px) * -1));
    }

    #top .top-content {
        position: relative;
        height: clamp(432.5px, 135.15625vw, 865px);
    }

    #top .top-content > h1 {
        position: absolute;
        top: 0;
        left: 50%;
        display: block;
        width: clamp(417px, 130.3125vw, 834px);
        margin-left: clamp(24.5px, 76.5625vw, 49px);
        transform: translateX(-50%);
    }

    #top .top-content > h1 > img {
        width: clamp(417px, 130.3125vw, 834px);
        vertical-align: bottom;
        opacity: 0.5;
    }

    #top .top-content > p {
        position: absolute;
        right: calc(clamp(111px, 34.6875vw, 222px) * -1);
        bottom: clamp(119px, 37.1875vw, 238px);
        width: clamp(292px, 91.25vw, 584px);
        text-align: right;
        transform: rotateZ(-90deg);
    }

    #top .top-content > p > span {
        display: block;
    }

    #top .top-content > p > span:first-of-type {
        margin-bottom: calc(clamp(23.5px, 7.34375vw, 47px) * -1);
    }

    #top .top-content > p > span:first-of-type > img {
        width: clamp(292px, 91.25vw, 584px);
        vertical-align: bottom;
    }

    #top .top-content > p > span:last-of-type > img {
        width: clamp(273.5px, 85.46875vw, 547px);
        vertical-align: bottom;
    }

    #top .pc_only {
        display: none;
    }

    /*
        purpose
    */
    #purpose {
        margin-bottom: clamp(82.5px, 25.78125vw, 165px);
    }

    #purpose .purpose-content > hgroup {
        margin-bottom: clamp(25px, 7.8125vw, 50px);
    }

    #purpose .purpose-content > hgroup > h2 {
        margin-bottom: clamp(25px, 7.8125vw, 50px);
    }

    #purpose .purpose-content > hgroup > p {
        font-family: "GothicMb101";
        font-size: clamp(34px, 10.625vw, 68px);
        font-weight: normal;
        line-height: 1;
        text-indent: -0.025em;
        letter-spacing: 0.05em;
        white-space: nowrap;
        -webkit-font-smoothing: antialiased;
    }

    #purpose .purpose-content > hgroup > p > span {
        font-size: 0.8em;
        vertical-align: text-top;
    }

    #purpose .purpose-content > p {
        margin-bottom: clamp(25px, 7.8125vw, 50px);
        font-size: clamp(16px, 5vw, 32px);
    }

    #purpose .purpose-content > p::before,
    #purpose .purpose-content > p::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #purpose .purpose-content > p::before {
        margin-top: calc((1 - 1.75) * 0.5em);
    }

    #purpose .purpose-content > p::after {
        margin-bottom: calc((1 - 1.75) * 0.5em);
    }

    #purpose .purpose-content > a {
        position: relative;
        display: block;
        width: clamp(200px, 62.5vw, 400px);
        padding: 1.2em;
        font-size: clamp(16px, 5vw, 32px);
        font-weight: bold;
        line-height: 1;
        text-align: center;
        border: 1px solid #000;
        border-radius: 100vh;
    }

    #purpose .purpose-content > a::before {
        position: absolute;
        bottom: clamp(26.5px, 8.28125vw, 53px); 
        left: clamp(175px, 54.6875vw, 350px);   
        width: clamp(75px, 23.4375vw, 150px);
        height: 2px;
        content: "";
        background: #00bdff;
        transition: 0.3s;
    }

    #purpose .purpose-content > a::after {
        position: absolute;
        right: calc(clamp(52.5px, 16.40625vw, 105px) * -1);
        bottom: clamp(31px, 9.6875vw, 62px);    
        width: clamp(12.5px, 3.90625vw, 25px);
        height: 2px;
        content: "";
        background: #00bdff;
        transition: 0.3s;
        transform: rotate(45deg);
    }

    /*
        works
    */
    #works {
        margin-bottom: clamp(105px, 32.8125vw, 210px);
    }

    #works .works-content > h2 {
        margin-bottom: calc(clamp(1px, 0.3125vw, 2px) * -1);
    }

    #works .works-content > h2 > img {
        width: clamp(142.5px, 44.53125vw, 285px);
        margin-left: calc(clamp(1px, 0.3125vw, 2px) * -1);
        vertical-align: bottom;
    }

    #works .works-content > ol {
        position: relative;
        padding: clamp(40px, 12.5vw, 80px) 0 clamp(40px, 12.5vw, 80px) clamp(20px, 6.25vw, 40px);
        list-style: none;
        background-color: #fff;
    }

    #works .works-content > ol::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        width: 100vw;
        height: 100%;
        content: "";
        background-color: #fff;
    }

    #works .works-content > ol::after {
        position: absolute;
        top: clamp(40px, 12.5vw, 80px);
        left: clamp(96px, 30vw, 192px);
        display: block;
        width: 2px;
        height: calc(100% - clamp(80px, 25vw, 160px));
        content: "";
        background-color: #fedb00;
    }

    #works .works-content > ol:has(.target)::after {
        height: 0;
        transition: 1.5s;
    }

    #works .works-content > ol:has(.target.show)::after {
        height: calc(100% - clamp(80px, 25vw, 160px));
    }

    #works .works-content > ol > li {
        display: flex;
        flex-wrap: wrap;
        align-items: start;
        width: 100%;
        margin: 0;
    }

    #works .works-content > ol > li.target {
        opacity: 0;
    }

    #works .works-content > ol > li.target.show {
        animation: fadeUp 0.6s forwards ease-out;
    }

    #works .works-content > ol > li > h3 {
        width: clamp(76px, 23.75vw, 152px);
        margin: 0;
    }

    #works .works-content > ol > li > h3 > img {
        margin: clamp(5px, 1.5625vw, 10px) 0 0 calc(clamp(0.5px, 0.15625vw, 1px) * -1);
        vertical-align: bottom;
    }

    #works .works-content > ol > li:nth-child(1) > h3 > img {
        width: clamp(57px, 17.8125vw, 114px);
    }

    #works .works-content > ol > li:nth-child(2) > h3 > img {
        width: clamp(64px, 20vw, 128px);
    }

    #works .works-content > ol > li:nth-child(3) > h3 > img {
        width: clamp(64.5px, 20.15625vw, 129px);
    }

    #works .works-content > ol > li > div {
        width: calc(100% - clamp(76px, 23.75vw, 152px));
        padding: clamp(5px, 1.5625vw, 10px) 0 clamp(42.5px, 13.28125vw, 85px) clamp(14px, 4.375vw, 28px);
    }

    #works .works-content > ol > li > div > h4 {
        margin-bottom: clamp(17.5px, 5.46875vw, 35px);
        font-size: clamp(20px, 6.25vw, 40px);
        font-weight: bold;
        line-height: 1.5;
        letter-spacing: 0.025em;
    }

    #works .works-content > ol > li > div > h4::before,
    #works .works-content > ol > li > div > h4::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #works .works-content > ol > li > div > h4::before {
        margin-top: calc((1 - 1.5) * 0.5em);
    }

    #works .works-content > ol > li > div > h4::after {
        margin-bottom: calc((1 - 1.5) * 0.5em);
    }

    #works .works-content > ol > li > div > p {
        font-size: clamp(12px, 3.75vw, 24px);
        line-height: 1.75;
        color: #666;
    }

    #works .works-content > ol > li > div > p::before,
    #works .works-content > ol > li > div > p::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #works .works-content > ol > li > div > p::before {
        margin-top: calc((1 - 1.75) * 0.5em);
    }

    #works .works-content > ol > li > div > p::after {
        margin-bottom: calc((1 - 1.75) * 0.5em);
    }

    /*
        client
    */
    #client .client-content > h2 {
        margin-bottom: clamp(17.5px, 5.46875vw, 35px);
    }

    #client .client-content .box {
        display: flex;
        align-items: center;
        margin: 0 calc(-50vw + 50%) 0 calc(-50vw + 50%);
    }

    #client .client-content .box > ul {
        display: flex;
        padding: 0;
        list-style: none;
        animation: slide1 50s -25s infinite linear;
    }

    #client .client-content .box > ul:last-of-type {
        animation: slide2 50s infinite linear;
    }

    #client .client-content .box > ul > li {
        display: flex;
        align-items: center;
        justify-content: center;
        width: clamp(100px, 31.25vw, 200px);
        height: clamp(100px, 31.25vw, 200px);
        margin: 0 clamp(5px, 1.5625vw, 10px) 0 calc(clamp(50px, 15.6125vw, 100px) * -1);
        filter: drop-shadow(clamp(3px, 0.9375vw, 6px) clamp(3px, 0.9375vw, 6px) clamp(2px, 0.625vw, 4px) rgb(0 0 0 / 5%));
    }

    #client .client-content .box > ul > li:nth-child(2n) {
        margin-top: clamp(100px, 31.25vw, 200px);
    }

    #client .client-content .box > ul > li > span {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #fff;
        border-radius: 50%;
    }

    #client .client-content .box > ul > li > img {
        width: clamp(100px, 31.25vw, 200px);
        vertical-align: bottom;
    }

    /*
        about
    */
    #about {
        margin-bottom: clamp(42.5px, 13.28125vw, 85px);
    }

    #about .about-content > h2 {
        margin-bottom: clamp(30px, 9.375vw, 60px);
    }

    #about .about-content > h2 > img {
        width: clamp(218.5px, 68.28125vw, 437px);
        margin-left: calc(clamp(1px, 0.3125vw, 2px) * -1);
        vertical-align: bottom;
    }

    #about .about-content > p {
        font-size: clamp(16px, 5vw, 32px);
    }

    #about .about-content > p::before,
    #about .about-content > p::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #about .about-content > p::before {
        margin-top: calc((1 - 1.75) * 0.5em);
    }

    #about .about-content > p::after {
        margin-bottom: calc((1 - 1.75) * 0.5em);
    }

    /*
        message
    */
    #message {
        position: relative;
        margin-bottom: clamp(80px, 25vw, 160px);
    }

    #message .message-content > h2 {
        margin-bottom: clamp(20px, 6.25vw, 40px);
    }

    #message .message-content > p {
        margin-bottom: clamp(2.5px, 0.78125vw, 5px);
    }

    #message .message-content > p::before,
    #message .message-content > p::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #message .message-content > p::before {
        margin-top: calc((1 - 1.75) * 0.5em);
    }

    #message .message-content > p::after {
        margin-bottom: calc((1 - 1.75) * 0.5em);
    }

    #message .message-content > p > span {
        display: block;
        margin-top: 1em;
    }

    #message .message-content > img {
        display: block;
        width: clamp(240px, 75vw, 480px);
        margin: 0 auto;
    }

    #message .message-content > img.target {
        opacity: 0;
    }

    #message .message-content > img.target.show {
        animation: fadeUp 0.6s forwards ease-out;
    }

    /*
        company
    */
    #company .company-content > h2 {
        margin-bottom: calc(clamp(9.5px, 2.96875vw, 19px) * -1);;
    }

    #company .company-content > h2 > img {
        width: clamp(240.5px, 75.15625vw, 481px);
        margin-left: calc(clamp(1px, 0.3125vw, 2px) * -1);
        vertical-align: bottom;
    }

    #company .company-content > dl {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: clamp(40px, 12.5vw, 80px) 0 clamp(40px, 12.5vw, 80px) clamp(20px, 6.25vw, 40px);
        font-size: clamp(14px, 4.375vw, 28px);
        line-height: 1.75;
        letter-spacing: 0.025em;
        background-color: #fff;
    }

    #company .company-content > dl::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        width: 100vw;
        height: 100%;
        content: "";
        background-color: #fff;
    }

    #company .company-content > dl > dt {
        width: 100%;
        padding: 1.25em 0 0.25em;
        font-weight: normal;
        border-top: 1px solid #ccc;
    }

    #company .company-content > dl > dt.target {
        opacity: 0;
    }

    #company .company-content > dl > dt.target.show {
        animation: fadeUp 0.6s forwards ease-out;
    }

    #company .company-content > dl > dd {
        width: 100%;
        padding: 0.25em 0 1.25em;
    }

    #company .company-content > dl > dd:last-of-type {
        border-bottom: 1px solid #ccc;
    }

    #company .company-content > dl > dd.target {
        opacity: 0;
    }

    #company .company-content > dl > dd.target.show {
        animation: fadeUp 0.6s forwards ease-out;
    }

    #company .company-content > dl > dd > span::after {
        display: inline-block;
        margin: 0 0.125em;
        color: #999;
        content: "／";
        transform: scaleX(0.8);
    }

    #company .company-content > dl > dd > span:last-of-type::after {
        content: "";
    }

    #company .company-content > dl > dd > small {
        display: block;
        font-size: clamp(9px, 2.8125vw, 18px);
        color: #999;
    }

    #company .company-content .map {
        box-sizing: content-box;
        width: clamp(260px, 81.25vw, 520px);
        height: clamp(146.25px, 45.703125vw, 292.5px);
        padding: 0.375em 0;
    }

    #company .company-content .map > iframe {
        width: 100%;
        height: 100%;
    }

    /*
        contact
    */
    #contact {
        margin-bottom: clamp(42.5px, 13.28125vw, 85px);
    }

    #contact .contact-content > h2 {
        margin-bottom: clamp(30px, 9.375vw, 60px);
    }

    #contact .contact-content > h2 > img {
        width: clamp(196px, 61.25vw, 392px);
        margin-left: calc(clamp(1px, 0.3125vw, 2px) * -1);
        vertical-align: bottom;
    }

    #contact .contact-content > p {
        font-size: clamp(16px, 5vw, 32px);
    }

    #contact .contact-content > p::before,
    #contact .contact-content > p::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #contact .contact-content > p::before {
        margin-top: calc((1 - 1.75) * 0.5em);
    }

    #contact .contact-content > p::after {
        margin-bottom: calc((1 - 1.75) * 0.5em);
    }

    /*
        wpcf7-form
    */
    .wp-block-contact-form-7-contact-form-selector {
        padding: 0 clamp(20px, 6.25vw, 40px);
    }

    .wpcf7-form > p {
        margin-bottom: clamp(27.5px, 8.59375vw, 55px);
    }

    .wpcf7-form > p:has(#wpfc7-submit) {
        position: relative;
        display: inline-block;
    }

    .wpcf7-form > p:has(#wpfc7-submit)::before {
        position: absolute;
        bottom: clamp(26.5px, 8.28125vw, 53px); 
        left: clamp(176px, 55vw, 352px);   
        width: clamp(75px, 23.4375vw, 150px);
        height: 2px;
        content: "";
        background: #00bdff;
        transition: 0.3s;
    }

    .wpcf7-form > p:has(#wpfc7-submit)::after {
        position: absolute;
        right: calc(clamp(52.5px, 16.40625vw, 105px) * -1);
        bottom: clamp(31px, 9.6875vw, 62px);    
        width: clamp(12.5px, 3.90625vw, 25px);
        height: 2px;
        content: "";
        background: #00bdff;
        transition: 0.3s;
        transform: rotate(45deg);
    }

    .wpcf7-form > p > label {
        display: block;
        margin-bottom: 0.75em;
        font-size: clamp(14px, 4.375vw, 28px);
        font-weight: bold;
        line-height: 1;
        letter-spacing: 0.025em;
    }

    .wpcf7-form > p > label + br {
        display: none;
    }

    .wpcf7-form > p > span {
        display: block;
    }

    .wpcf7-form > p > span:has(> input),
    .wpcf7-form > p > span:has(> textarea) {
        filter: drop-shadow(6px 6px 4px rgb(0 0 0 / 5%));
    }

    .wpcf7-form > p > span > input {
        display: block;
        width: 100%;
        padding: 1.25em 1.5em;
        font-size: clamp(14px, 4.375vw, 28px);
        line-height: 1;
        color: #000;
        letter-spacing: 0.025em;
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 8px;
        outline: none;
    }

    .wpcf7-form > p > span > input::placeholder {
        color: #cbaf00;
    }

    .wpcf7-form > p > span > input:placeholder-shown {
        background-color: #ffed80;
    }

    .wpcf7-form > p > span > input.wpcf7-not-valid {
        border: 1px solid #f00;
    }

    .wpcf7-form > p > span > input + .wpcf7-not-valid-tip {
        margin-top: 0.75em;
        font-size: 16px;
        line-height: 1;
        color: #f00;
    }

    .wpcf7-form > p > span > textarea {
        display: block;
        width: 100%;
        height: 13.5em;
        padding: 1.25em 1.5em;
        font-size: clamp(14px, 4.375vw, 28px);
        line-height: 1.75;
        color: #000;
        letter-spacing: 0.025em;
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 8px;
        outline: none;
    }

    .wpcf7-form > p > span > textarea::placeholder {
        color: #cbaf00;
    }

    .wpcf7-form > p > span > textarea:placeholder-shown {
        background-color: #ffed80;
    }

    .wpcf7-form > p > span > textarea.wpcf7-not-valid {
        border: 1px solid #f00;
    }

    .wpcf7-form > p > span > textarea + .wpcf7-not-valid-tip {
        margin-top: 0.75em;
        font-size: clamp(14px, 4.375vw, 28px);
        line-height: 1;
        color: #f00;
        letter-spacing: 0.025em;
    }

    .wpcf7-form .wpcf7-acceptance {
        display: block;
        padding: clamp(7.5px, 2.34375vw, 15px) 0;
        font-size: 0;
    }

    .wpcf7-form .wpcf7-acceptance > span {
        margin: 0;
    }

    .wpcf7-form .wpcf7-acceptance > span > label > input[type="checkbox"] {
        display: inline-block;
        width: clamp(15px, 4.6875vw, 30px);
        height: clamp(15px, 4.6875vw, 30px);
        vertical-align: middle;
    }

    .wpcf7-form .wpcf7-acceptance > span > label > span {
        display: inline-block;
        padding: 0.25em;
        font-size: clamp(9px, 2.8125vw, 18px);
        line-height: 1;
        color: #666;
        letter-spacing: 0.025em;
        vertical-align: middle;
    }

    .wpcf7-form .wpcf7-acceptance > span > label > span > a {
        padding: 0.25em;
        color: #000;
        text-decoration: underline;
    }

    .wpcf7-form .wpcf7-submit {
        display: block;
        width: clamp(200px, 62.5vw, 400px);
        padding: 1.2em;
        font-size: clamp(16px, 5vw, 32px);
        font-weight: bold;
        line-height: 1;
        color: #000;
        text-align: center;
        letter-spacing: 0.025em;
        background-color: transparent;
        border: 1px solid #000;
        border-radius: 100vh;
    }

    .wpcf7-form .wpcf7-submit + .wpcf7-spinner {
        display: none;
    }

    .wpcf7-form .wpcf7-response-output {
        padding: 0 !important;
        margin: 0 0 clamp(27.5px, 8.59375vw, 55px) !important;
        font-size: clamp(16px, 5vw, 32px);
        line-height: 1.75;
        color: #f00;
        letter-spacing: 0.025em;
        border: none !important;
    }

    .wpcf7-form .wpcf7-response-output::before,
    .wpcf7-form .wpcf7-response-output::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    .wpcf7-form .wpcf7-response-output::before {
        margin-top: calc((1 - 1.75) * 0.5em);
    }

    .wpcf7-form .wpcf7-response-output::after {
        margin-bottom: calc((1 - 1.75) * 0.5em);
    }

    .wpcf7-form.sent .wpcf7-response-output {
        color: #00b3ff;
    }

    /*
        privacy
    */
    #privacy .privacy-content > h2 {
        margin-bottom: clamp(22.5px, 7.03125vw, 45px);
    }

    #privacy .privacy-content > section {
        margin-bottom: clamp(35px, 10.9375vw, 70px);
    }

    #privacy .privacy-content > section > h3 {
        margin: 0 0 clamp(15px, 4.6875vw, 30px) 0;
        font-size: clamp(16px, 5vw, 32px);
        font-weight: bold;
        line-height: 1.5;
        letter-spacing: 0.025em;
    }

    #privacy .privacy-content > section > h3::before,
    #privacy .privacy-content > section > h3::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #privacy .privacy-content > section > h3::before {
        margin-top: calc((1 - 1.5) * 0.5em);
    }

    #privacy .privacy-content > section > h3::after {
        margin-bottom: calc((1 - 1.5) * 0.5em);
    }

    #privacy .privacy-content > section > p {
        color: #666;
    }

    #privacy .privacy-content > section > p::before,
    #privacy .privacy-content > section > p::after {
        display: block;
        width: 0;
        height: 0;
        content: "";
    }

    #privacy .privacy-content > section > p::before {
        margin-top: calc((1 - 1.75) * 0.5em);
    }

    #privacy .privacy-content > section > p::after {
        margin-bottom: calc((1 - 1.75) * 0.5em);
    }
}