/* Base & Reset */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
}

.body {
    transition: background-color 0.5s, color 0.5s;
}

:root {
    --width: 1440;
    --padding: 120;
    --black: #353535;
    --white: #ffffff;
    --blue: #1253C7;
    --light-blue: #017BDF;
    --dark-blue: #526382;
    --fw-L: 300;
    --fw-R: 400;
    --fw-B: 500;
    --fw-SB: 700;
}

/*
@media (max-width: 1023px) {
    :root {
        --width: 1023;
    }
}
*/

@media (max-width: 430px) {
    :root {
        --width: 430;
        --padding: 20;
    }
}

body {
    font-family: 'Noto Sans JP', Arial, Helvetica, sans-serif;
    color: var(--black);
}

a {
    text-decoration: none;
    color: inherit;
}

li {
    list-style: none;
}

address {
    font-style: normal;
}

.sp-only {
    display: none;
}

.sp-image {
    display: none;
}


/* bottun */
.cta-btn {
    width: min(332px, calc(332 / var(--width) * 100vw));
    height: min(60px, calc(60 / var(--width) * 100vw));
    background-color: var(--blue);
    border-radius: calc(30 / var(--width) * 100vw);
    color: var(--white);
    display: flex;
    align-items: center;
    transition-duration: 0.3s;
}

.cta-btn .icon-arrow {
    display: inline-block;
    width: min(24px, calc(24 / var(--width) * 100vw));
    height: auto;
}

.cta-btn__text-wrapper {
    display: flex;
    color: var(--white);
    font-size: min(20px, calc(20 / var(--width) * 100vw));
    width: min(332px, calc(332 / var(--width) * 100vw));
    padding: 0 min(24px, calc(24 / var(--width) * 100vw));
    justify-content: space-between;
}   

.cta-btn__text {
    margin: 0 auto;
    font-weight: var(--fw-B);
}

.cta-btn:hover .cta-btn__text{
    transform: scale(1.05, 1.05);
    transition: transform 0.3s ease;
}

.cta-btn:hover .icon-arrow {
    transform: scale(1.05, 1.05);
    transform: translateX(calc(4 / var(--width) * 100vw));
    transition: transform 0.3s ease;
}

/* 読み込み時画像拡大 */
.image-scale-up.loaded {
    transform: scale(1.1);
}


/* ========== header ========== */
.header {
    width: 100%;
    height: calc(80 / var(--width) * 100vw);
    max-height: 80px;
    position: fixed;
    background-color: var(--white);
    opacity: 0.8;
    z-index: 100;
}

.header-wrapper {
    width: 100%;
    max-width: 1440px;
    padding: 0 calc(var(--padding) / var(--width) * 100vw);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tabpc-nav,
.sp-menu,
.btn-trigger {
    display: none;
}

.header__logo {
    width: min(240px, calc(240 / var(--width) * 100vw));
    max-width: 240px;
    height: auto;
    padding-top: calc(4 / var(--width) * 100vw);
}

.header__logo:hover {
    opacity: 0.7;
}

.header__ul {
    display: flex;
    gap: calc(40 / var(--width) * 100vw);
}

.header__ul a span {
    font-size: min(18px, calc(18 / var(--width) * 100vw));
    font-weight: var(--fw-B);
}

.header__li a span:hover{
    color: var(--blue);
}


/* ========== Hero ========== */
.AC-top-mv_bg {
    position: relative;
    height: calc(680 / var(--width) * 100vw);
    overflow: hidden;
}

.image-scale-up {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 20% 30%;
    z-index: -1;
}

.AC-top-mv__wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.AC-top-mv__title,
.AC-top-mv__sub-title,
.AC-top-mv__contact-btn {
    color: var(--white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.AC-top-mv__title {
    font-size: calc(64 / var(--width) * 100vw);
    margin-bottom: calc(16 / var(--width) * 100vw);
    line-height: calc(80 / var(--width) * 100vw);
}

.AC-top-mv__sub-title {
    font-size: calc(24 / var(--width) * 100vw);
    font-weight: var(--fw-R);
    margin-bottom: calc(64 / var(--width) * 100vw);
}

/* 読み込み時アニメーション */
.image-scale-up {
    transform: scale(1);
    transition: transform 8s ease;
}

.AC-top-mv__title,
.AC-top-mv__sub-title,
.AC-top-mv__contact-btn {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.show-title {
    opacity: 1;
    transform: translateY(0);
}

.image-scale-up.zoom {
    transform: scale(1.1);
}


/* ========== section ========== */
/* タイトル */
.section__wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 calc(var(--padding) / var(--width) * 100vw) 0 calc(var(--padding) / var(--width) * 100vw);
}

.title {
    padding-top: calc(80 / var(--width) * 100vw);
}

.title-jp {
    display: flex;
    align-items: center;
}

.title-jp-icon {
    display: block;
    width: min(40px, calc(40 / var(--width) * 100vw));
    height: min(12px, calc(12 / var(--width) * 100vw));
    background-color: var(--light-blue);
}


.title-jp-text {
    padding-left: min(12px, calc(12 / var(--width) * 100vw));
    font-weight: var(--fw-R);
    font-size: min(20px, calc(20 / var(--width) * 100vw));
}

.title-en {
    font-size: min(64px, calc(64 / var(--width) * 100vw));
    font-weight: var(--fw-SB);
    line-height: min(64px, calc(64 / var(--width) * 100vw));
}

/* サブテキスト */
.sub-text {
    display: flex;
    text-align: center;
    justify-content: center;
    font-size: min(16px, calc(16 / var(--width) * 100vw));
    padding-top: min(60px, calc(60 / var(--width) * 100vw));
}

/* 区切り線 */
.section__border {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--dark-blue);
}

/* 読み込み時アニメーション */
.title-jp-icon,
.title-jp-text,
.title-en-text {
    opacity: 0;
    transition: all 0.8s ease;
}

.title-jp-icon {
    transform: translateX(-20px);
}

.title-jp-icon.show {
    opacity: 1;
    transform: translateX(0);
}

.title-jp-text {
    transform: translateY(20px);
}

.title-jp-text.show {
    opacity: 1;
    transform: translateY(0);
}

.title-en-text {
    transform: translateY(20px);
}

.title-en-text.show {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* ========== 事業内容 ========== */

.AC-top-service__ul {
    display: flex;
    justify-content: space-between;
    margin-top: calc(52 / var(--width) * 100vw);
    margin-bottom: calc(100 / var(--width) * 100vw);
}

.AC-top-service__list-link {
    position: relative;
    display: inline-block;
}

.AC-top-service__list-img-btn {
    position: absolute;
    color: var(--white);
    right: calc(12 / var(--width) * 100vw);
    bottom: calc(12 / var(--width) * 100vw);
}

.svg-circle {
    position: relative;
    width: min(60px, calc(60 / var(--width) * 100vw));
    height: auto;
    z-index: 3;
}

.svg-arrow {
    position: absolute;
    width: min(24px, calc(24 / var(--width) * 100vw));
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-52%, -65%);
    z-index: 3;
}

.AC-top-service__list-link-img {
    width: min(272px, calc(272 / var(--width) * 100vw));
    height: min(233px, calc(233 / var(--width) * 100vw));
    overflow: hidden;
}

.AC-top-service__list-link-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.AC-top-service__list-link-img:hover img {
    transform: scale(1.1);
}

.AC-top-service__list-link-img-shadow {
    position: absolute;
    display: block;
    inset: 0;
    background: linear-gradient(0deg,var(--dark-blue) 0%, rgba(255, 255, 255, 0) 42%);
    pointer-events: none;
    z-index: 2;
}

.AC-top-service__list-link-text-title {
    padding-top: calc(24 / var(--width) * 100vw);
    font-size: min(32px, calc(32 / var(--width) * 100vw));
    text-align: center;
    margin: 0 auto;
}

.AC-top-service__list-text {
    margin-top: calc(24 / var(--width) * 100vw);
    font-size: min(16px, calc(16 / var(--width) * 100vw));
    text-align: center;
}

/* ホバー効果 */
.AC-top-service__list-link:hover .svg-circle{
    transform: scale(1.1, 1.1);
    transition: transform 0.3s ease;
}


.AC-top-service__list-link .svg-arrow {
    transition: transform 0.3s ease;
}


.AC-top-service__list-link:hover .svg-arrow {
    animation: swing 0.6s infinite alternate;
}

@keyframes swing {
    0% {transform: translate(-52%, -65%);}
    100% {transform: translate(-62%, -65%)}
}

/* ========== 施工事例 ========== */
.AC-top-works__swiper-wrapper {
    display: block;
    margin-top: min(80px, calc(80 / var(--width) * 100vw));
    margin-bottom: min(20px, calc(20 / var(--width) * 100vw));
    width: 100%;
    height: calc(380 / var(--width) * 100vw);
}

.AC-top-works__swiper-group {
    display: flex;
    width: 100%;
    position: absolute;
}

.works-slide img {
    width: min(240px, calc(240 / var(--width) * 100vw));
    height: min(320px, calc(320 / var(--width) * 100vw));
    object-fit: cover;
    object-position: center;
}

.works-slide {
    margin-right: calc(36 / var(--width) * 100vw);
    flex-shrink: 0;
}

.works-slide:first-child {
    margin-left: 0;
}

.AC-top-works__swiper-group :nth-child(even) {
    transform: translateY(calc(60 / var(--width) * 100vw));
}

.AC-top-works__cta-btn {
    margin: 0 auto calc(100 / var(--width) * 100vw) auto;
}

/* 流れる事例 */
.AC-top-works__swiper-wrapper {
    width: 100%;
    overflow: hidden;
}

.AC-top-works__swiper-group {
    display: flex;
    position: absolute;
    animation: scroll-left 30s linear infinite;
    width: max-content;
}   

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ========== 会社概要 ========== */
.AC-top-about__content-wrapper {
    display: flex;
    gap: min(100px, calc(100 / var(--width) * 100vw));
    margin-top: calc(60 / var(--width) * 100vw);
    margin-bottom: calc(100 / var(--width) * 100vw);
}

.AC-top-about__left {
    width: 100%;
}

.AC-top-about__right {
    padding-top: calc(40 / var(--width) * 100vw);
}

.AC-top-about__right-text h3 {
    font-size: min(36px, calc(36 / var(--width) * 100vw));
    margin-bottom: min(20px, calc(20 / var(--width) * 100vw));
}

.AC-top-about__right-text p {
    font-size: min(18px, calc(18 / var(--width) * 100vw));
    line-height: min(30px, calc(30 / var(--width) * 100vw));
    margin-bottom: min(48px, calc(48 / var(--width) * 100vw));
}

/* ========== お問い合わせ ========== */
.AC-top-contact__wrapper {
    margin-top: min(200px, calc(200 / var(--width) * 100vw));
    width: 100%;
    margin-bottom: calc(200 / var(--width) * 100vw);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
    padding: 0 calc(120 / var(--width) * 100vw);
    */
}

.AC-top-contact__bg {
    width: var(--width);
    max-width: 1440px;
}

.AC-top-contact__text {
    display: flex;
    gap: min(40px, calc(40 / var(--width) * 100vw));
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.AC-top-contact__text-left-title {
    font-size: min(40px, calc(40 / var(--width) * 100vw));
}

.AC-top-contact__text-left-comment {
    font-size: min(16px, calc(16 / var(--width) * 100vw));
}

.AC-top-contact__text-right-title {
    font-size: min(16px, calc(16 / var(--width) * 100vw));
    margin-bottom: min(20px, calc(20 / var(--width) * 100vw));
}

.AC-top-contact__text-right-tel {
    font-size: min(40px, calc(40 / var(--width) * 100vw));
    color: var(--blue);
    margin-bottom: min(20px, calc(20 / var(--width) * 100vw));
    letter-spacing: -1px;
}

.AC-top-contact__text-right-comment {
    font-size: min(12px, calc(12 / var(--width) * 100vw));
}


/* ========== Footer ========== */
.footer {
    background-color: var(--blue);
    width: 100%;
}

.AC-top-footer__wrapper {
    max-width: 1440px;
    height: min(340px, calc(340 / var(--width) * 100vw));
    display: flex;
    justify-content: space-between;
    color: var(--white);
    padding: calc(56 / var(--width) * 100vw) calc(var(--padding) / var(--width) * 100vw);
    margin: 0 auto;
}

.AC-top-footer__left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.AC-top-footer__left-address {
    font-size: min(18px, calc(18 / var(--width) * 100vw));
}

.AC-top-footer__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

.AC-top-footer__right-sns {
    display: flex;
    gap: min(12px, calc(12 / var(--width) * 100vw));
    align-items: center;
}

.AC-top-footer__right-sns li a {
    display: inline-block;
}


.sns-icon {
    width: min(42px, calc(42 / var(--width) * 100vw));
    height: min(42px, calc(42 / var(--width) * 100vw));
}

.x-icon {
    width: min(36px, calc(36 / var(--width) * 100vw));
    height: min(36px, calc(36 / var(--width) * 100vw));
}

.sns-icon:hover {
    transform: scale(1.1, 1.1);
    transition: transform 0.3s ease;
}





@media screen and (max-width: 430px) {
    /* ========== Base & Reset ========= */
    #sp-menu {
        display: block;
    }

    .header__nav {
        display: none;
    }

    .pc-image {
        display: none;
    }

    .sp-image {
        display: flex;
    }

    .sp-only {
        display: flex;
    }

    /* ========== Humburger Menu ========== */
    /* アイコン (3本線→×印→3本線) */
    .btn-trigger {
        position: relative;
        width: min(28px, calc(28 / var(--width) * 100vw));
        height: min(16px, calc(16 / var(--width) * 100vw));
        cursor: pointer;
        z-index: 1001;
    }

    .btn-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: var(--blue);
        transition: all 0.5s;
    }

    .btn-trigger, .btn-trigger span {
        display: inline-block;
        transition: all 0.5s;
    }

    .btn-trigger span:nth-of-type(1) {
        top: 0;
    }

    .btn-trigger span:nth-of-type(2) {
        top: 6px;
    }

    .btn-trigger span:nth-of-type(3) {
        top: 12px;
    }

    #sp-menu-btn.active span:nth-of-type(1) {
        transform: rotate(45deg) translate(6px, 7px);
    }

    #sp-menu-btn.active span:nth-of-type(2) {
        opacity: 0;
    }
    
    #sp-menu-btn.active span:nth-of-type(3) {
        transform: rotate(-45deg) translate(2px, -2px);
    }

    /* ハンバーガーメニュー ページ */
    .tabpc-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background-color: var(--white);
        transition: right 0.3s ease;
        z-index: 99;
        padding: 100px 20px 20px;
        overflow-y: auto;
    }
    .tabpc-nav.active { right: 0%; }

    .tabpc-nav__ul {
        padding-bottom: 60px;
    }

    .tabpc-nav__list {
        border-bottom: 1px solid var(--dark-blue);
    }

    .tabpc-nav__list:first-child {
        border-top: 1px solid var(--dark-blue);
    }

    .tabpc-nav__list > a {
        display: inline-block;
        width: 100%;
        padding: 20px;
    }

    .tabpc-nav__btn {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 16px 20px;
        align-items: center;
    }

    .toggle-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .toggle-content.open {
        max-height: 500px;
    }

    .toggle-content-menu {
        padding: 0 0 12px 52px;
        color: var(--dark-blue);
    }

    .toggle-content-menu__item {
        padding-bottom: 12px;
    } 

    .toggle-content-menu__item a {
        display: block;
    } 

    .icon-toggle-circle::before {
        content: "+";
        display: inline-block;
        margin-left: 10px;
        color: var(--blue);
        font-size: 26px;
        transition: transform 0.3s;
        border: 2px solid var(--blue);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .icon-toggle-circle.open::before {
        content: "－";
    }

    .tabpc-nav__contact-btn {
        margin: 0 auto;
    }
    
    /* ========= Header ========= */
    .header {
        max-width: 100%;
        height: min(72px, calc(72 / var(--width) * 100vw));
    }

    .header-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px;
    }

    .header__logo {
        width: min(164px, calc(164 / var(--width) * 100vw));
    }

    /* ========= Hero ========= */
    .AC-top-mv_bg {
        height: 100vh;
    }

    .image-scale-up {
        object-position: 45% 30%;
    }
    
    .AC-top-mv__wrapper {
        transform: translate(-50%, -90%);
    }

    .AC-top-mv__title {
        font-size: min(42px, calc(42 / var(--width) * 100vw));
        line-height: calc(60 / var(--width) * 100vw);
    }

    .AC-top-mv__sub-title {
        font-size: min(18px, calc(18 / var(--width) * 100vw));
        margin-bottom: calc(36 / var(--width) * 100vw);
        line-height: calc(32 / var(--width) * 100vw);
    }

    /* ========= section ========= */
    /* タイトル */
    .title-jp-text {
        font-size: min(16px, calc(16 / var(--width) * 100vw));
    }

    .title-en {
        font-size: min(40px, calc(40 / var(--width) * 100vw));
        line-height: min(40px, calc(40 / var(--width) * 100vw));
    }

    /* ========= 事業内容 ========= */
    .AC-top-service__ul {
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }

    .AC-top-service__list {
        width: min(300px, calc(300 / var(--width) * 100vw));
    }

    .AC-top-service__list-link-img {
        width: min(300px, calc(300 / var(--width) * 100vw));
        height: min(240px, calc(240 / var(--width) * 100vw));
    }

    .AC-top-service__list {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .AC-top-service__list-link-text-title {
        padding-top: calc(4 / var(--width) * 100vw);
    }
    
    .AC-top-service__list-text {
        margin-top: calc(4 / var(--width) * 100vw);
    }

    
    /* ========== 施工事例 ========== */
    .works-slide img {
        width: min(180px, calc(180 / var(--width) * 100vw));
        height: min(240px, calc(240 / var(--width) * 100vw));
    }

    .AC-top-works__swiper-wrapper {
        margin-bottom: 0;
    }

    /* ========= 会社概要 ========= */
    .AC-top-works__swiper-wrapper {
        flex-direction: column;
    }

    /* ========= お問い合わせ ========== */
    .AC-top-contact__bg {
        width: 100%;
    }

    .AC-top-about__content-wrapper {
        flex-direction: column;
        gap: 0;
    }

    .AC-top-about__right {
        text-align: center;
    }

    .AC-top-about__cta-btn {
        margin: 0 auto;
    }
    
    /* ========== お問い合わせ ========== */
    .AC-top-contact__wrapper {
        margin-top: calc(124 / var(--width) * 100vw);
        margin-bottom: calc(100 / var(--width) * 100vw);
        padding: 0;
    }

    .AC-top-contact__text {
        flex-direction: column;
        text-align: center;
    }

    .AC-top-contact__text-right-tel {
        margin-bottom: 0;
    }

    .AC-top-contact__bg .sp-image {
        width: 100%;
    }

    /* ========== Footer ========== */    
    .AC-top-footer__wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: min(372px, calc(372 / var(--width) * 100vw));
        padding: calc(32 / var(--width) * 100vw) 0;
    }
    
    .AC-top-footer__left {
        gap: 20px
    }

    .AC-top-footer__left-address {
       font-size: min(16px, calc(16 / var(--width) * 100vw));
    }

    .AC-top-footer__right {
        align-items: center;
        gap: 36px;
    }

    .sns-icon {
        transform: scale(0.9);
    }

}