/*--------------------------------------------------------------------------*
 *  
 *  top.css
 *  
 *  Topページ用
 *
 *--------------------------------------------------------------------------*/
.home .header {
    top: -65px;
}
.home .header.active {
    top: 0;
}
/* =========================================================
 * loading
========================================================= */
.loading {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 10;
    background: #fff;
}
.loading_inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
}
.loading_image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: url("../img/top_img.png") no-repeat center/cover, #fff;
    transform-origin: center;
    transform: scale(1.1);
    filter: blur(100px);
    transition: all .375s ease-out;
}
.progress {
    width: 100%;
    height: 0.1rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    overflow: visible;
    font-size: 1.5rem;
}

/* =========================================================
 * main
========================================================= */
.main {
    height: 100vh;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    transition: all .375s ease-out;
    background: #fff;
}
.main.active {
    height: calc(var(--vw, 1vw) * 50);
}
.main_image {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    transform-origin: center;
    transform: scale(1.1);
    z-index: 5;
    filter: blur(100px);
    transition: all 0.875s ease-out;
    overflow: hidden;
}
.main_image.active {
    filter: blur(0);
    transform: scale(1);
    height: calc(var(--vw, 1vw) * 50);
    margin-top: 65px;
}
.photo_inner {
    background: url("../img/top_img.png") no-repeat center/cover, #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.875s ease-out;
}
.main_logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5%;
    transition: all 2s ease-in-out;
    opacity: 0;
    z-index: 6;
    filter: blur(100px);
    width: 500px;
}
.main_logo.appear {
    opacity: 1;
    filter: blur(0);
}
.main_logo.active {
    transition: all 1.875s ease-in-out;
    top: 50%;
}
.logo_en {
    font-family: "Shippori Mincho B1", serif;
    font-size: 7.2rem;
    line-height: 1.1;
    color: #fff;
    letter-spacing: 0.03em;
    font-feature-settings: "palt";
}
.logo_jp {
    font-family: "Shippori Mincho B1", serif;
    font-size: 1.5rem;
    font-weight: normal;
    color: #fff;
    margin-top: 1rem;
    line-height: 1.2;
    position: absolute;
    top: 50%;
    right: 0%;
    font-feature-settings: "palt";
}
/* =========================================================
 * contents
========================================================= */
.contents {
    margin: 30px 0 0 0;
    position: relative;
    overflow: hidden;
    transition: all 0.875s ease-out, transform 1s ease-out;
    opacity: 0;
    transform: translateY(50px); /* 初期状態で下にずらす */
}

.contents.active {
    z-index: 10;
    opacity: 1;
    transform: translateY(0); /* 元の位置に戻す */
}
.card_title {
    font-size: 3.4rem;
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
}
.card_description {
    font-feature-settings: "palt";
    line-height: 1.6;
    font-size: 1.3rem;
}
.card_content {
    margin: 20px 0;
    line-height: 3.0;
    letter-spacing: 0.1em;
    font-size: 1.0rem;
    font-feature-settings: "palt";
}
.card1 {
    padding: 50px 70px 70px 70px;
}
.card2 {
    padding: 50px 60px 70px 60px;
}
.card3 {
    padding: 50px 50px 70px 50px;
}
.top_service_img {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}
.top_works_imgs {
    padding: 50px 0;
}
.square {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
}
.square img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}
.square .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: opacity 0.8s ease;
}
.square .overlay p {
    font-family: "Shippori Mincho B1", serif;
    color: #fff;
    font-size: 1.2rem;
    line-height: 2.6;
}
.square:hover img {
    transform: scale(1.1);
}
.square:hover .overlay {
    opacity: 1;
}
.top_footer_contents {
    padding: 20px 0 80px 0;
}
.top_footer_contents_inner {
    width: 77%;
}
.top_footer_contents a {
    position: relative;
    display: block;
    overflow: hidden;
    text-align: center;
}
.top_footer_contents img {
    width: 100%;
    height: auto;
}
.btn_company_text,
.btn_content_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
    transition: all .4s ease-out;
}
.btn_company_text {
    color: #2F65A2;
}
.btn_content_text {
    color: #ffffff;
}
.btn_company_text p,
.btn_content_text p {
    margin: 0;
}
.btn_company_text p:first-child,
.btn_content_text p:first-child {
    font-size: 3.2rem;
    font-weight: bold;
    font-family: "Noto Sans", serif;
}
.btn_company_text p:last-child,
.btn_content_text p:last-child {
    font-size: 1.2rem;
    font-family: "Noto Sans JP", serif;
}
/* オーバーレイを作成 */
.top_footer_contents a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0); /* 初期状態では透明 */
    z-index: 0;
    transition: background .4s ease; /* 背景の変化にアニメーション */
}
/* ホバー時のスタイル */
.top_footer_contents a:hover {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "alpha(opacity=100)";    
}
.top_footer_contents a:hover::after {
    background: rgba(255, 255, 255, 0.7); /* 白っぽいオーバーレイ */
}
.top_footer_contents a:hover .btn_company_text,
.top_footer_contents a:hover .btn_content_text {
    opacity: 1;
    color: #E9572D; /* オレンジ色に変更 */
}

/* 幅が 575px以下 */
@media (max-width: 575.98px) {
    .logo_en {
        font-size: 4.0rem;
    }
    .logo_jp {
        font-size: 1.4rem;
        margin-top: 8rem;
    }
    .top_footer_contents_inner {
        width: 100%;
    }
    .top_footer_contents img {
        width: 100%;
        height: 200px;
    }
    .btn_company_text p:first-child,
    .btn_content_text p:first-child {
        font-size: 2.4rem;
    }
    .btn_company_text p:last-child,
    .btn_content_text p:last-child {
        font-size: 1.0rem;
    }
}

/* 768px以下 */
@media (max-width: 767.98px) {
    .progress {
        top: 40%;
    }    
    .main_image {
        position: sticky;
    }
    .contents {
        margin: 0;
        margin-top: -30px;
    }
    .card1 {
        padding: 20px 20px 40px 20px;
    }
    .card2 {
        padding: 30px 20px 40px 20px;
    }
    .card3 {
        padding: 30px 20px 40px 20px;
    }
    .main_logo {
        max-width: 100%;
        top: 40%;
        transform: translateY(-40%);
        left: 0;
        width: 100%;
        padding: 0 5%;
    }
    .main_logo.active {
        top: 40%;
    }
    .logo_jp {
        top: 90%;
        right: 7%;
    }
    .square .overlay p {
        font-size: 0.5rem;
        line-height: 1.6;
    }
}

/* 幅が 576px以上 768px以下 */
@media (min-width: 576px) and (max-width:767.98px) {
    .logo_en {
        font-size: 5.8rem;
    }
    .logo_jp {
        font-size: 1.8rem;
        margin-top: 6rem;
    }
    .top_footer_contents_inner {
        width: 95%;
    }
    .top_footer_contents img {
        width: 100%;
        height: 300px;
    }
    .btn_company_text p:first-child,
    .btn_content_text p:first-child {
        font-size: 2.8rem;
    }
    .btn_company_text p:last-child,
    .btn_content_text p:last-child {
        font-size: 1.1rem;
    }
}

/* 幅が 768px以上 992px以下 */
@media (min-width: 768px) and (max-width:991.98px) {
    .top_footer_contents_inner {
        width: 95%;
    }
    .btn_company_text p:first-child,
    .btn_content_text p:first-child {
        font-size: 2.4rem;
    }
    .btn_company_text p:last-child,
    .btn_content_text p:last-child {
        font-size: 1.1rem;
    }
    .square .overlay p {
        font-size: 1.0rem;
        line-height: 2.2;
    }
    .card3 {
        padding: 50px 30px 70px 30px;
    }
}

/* 幅が 992px以上 1400px以下であれば */
@media (min-width: 992px) and (max-width:1399.98px) {
    .top_footer_contents_inner {
        width: 90%;
    }
}

/* 幅が 992px以下 */
@media (max-width: 991.98px) {
    .card_title {
        font-size: 2.4rem;
    }
    .card_description {
        font-size: 1.0rem;
        line-height: 1.8;
    }
    .card_content {
        line-height: 1.9;
        font-size: 0.9rem;
        margin: 10px 0;
    }
}

/* 幅が 1400px以下 */
@media (max-width: 1399.98px) {
    .main.active {
        height: calc(var(--vh, 1vh) * 100);
    }
    .main_logo {
        max-width: 100%;
    }
    .main_image.active {
        height: calc(var(--vh, 1vh) * 100);
    }
}