@charset "utf-8";

/*==========================
main_visual
==========================*/

.main {
    padding-top: 66px;
}

.main-visual {
    width: 93%;
    height: 314px;
    background: url(../images/top_img.webp) no-repeat 48% 60%;
    background-size: 480%;
    position: relative;
    margin-left: auto;
    overflow: visible;
}

.mv__container {
    position: absolute;
    top: 50%;
    left: -9%;
    transform: translateY(-50%);
    z-index: 10;
}

/*==========================
  Background Boxes (紺色の箱)
==========================*/
.mv__box {
    position: absolute;
    left: 0;
    transform: translateX(-120%);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    
    /* 形状・余白設定 */
    clip-path: polygon(0 0, 100% 0, calc(100% - 70px) 100%, 0 100%);
    padding: 0 30px 0 10px;
    
    /* 描画安定化（ピクつき防止） */
    backface-visibility: hidden;
    will-change: transform, clip-path;
    transform-style: preserve-3d;
}

/* 上層：グラデーションあり・少し透ける */
.mv__box--primary {
    width: 379px;
    height: 199px;
    top: -106px;
    z-index: 2;
    background: linear-gradient(180deg, rgba(78, 67, 123, 0.8) 0%, rgba(43, 33, 85, 0.8) 100%);
    transition-delay: 0.1s;
}

/* 下層：単色・不透明 */
.mv__box--secondary {
    width: 338px;
    height: 199px;
    top: -106px;
    z-index: 1;
    background-color: rgb(43, 33, 85);
    transition-delay: 0.4s;
}

/*==========================
  Text & Line (文字と下線)
==========================*/
.mv__layer-text {
    position: relative;
    z-index: 10;
    top: -67px; 
    left: 0; /* ← 5pxになってたのを0にする。これでパディングが基準通り動くで */
}

.mainTxt, .catch {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s ease-out;
    color: #fff;
    margin: 0;
    letter-spacing: 0.1em;
}

.mainTxt {
    font-size: 4.4rem;
    transition-delay: 0.8s;
    padding: 0 4.1vw;
    font-weight: 500;
    text-shadow: 2px 5px 7px rgba(0, 0, 0, 0.4);
}

.catch {
    font-size: 1.6rem;
    transition-delay: 0.8s;
    padding: 0 4.1vw;
    letter-spacing: 0.1em;
    font-weight: 400;
    text-shadow: 2px 5px 7px rgba(0, 0, 0, 0.4);
}





/* 下線の調整：*/
.mv__line {
    display: block;
    width: 0;
    height: 1px;
    background-color: #fff;
    margin: 10px 0; 
    transition: width 0.8s ease 1.2s;
}

/*==========================
  Animation Trigger 
==========================*/
.main-visual.is-active .mv__box {
    transform: translateX(0);
}

.main-visual.is-active .mainTxt,
.main-visual.is-active .catch {
    opacity: 1;
    transform: translateX(0);
}

.main-visual.is-active .mv__line {
    width: 353px;
}

@media screen and (max-width: 375px) {

    .main-visual.is-active .mv__line {
        width: 293px;
    }

    .mv__box--primary {
        width: 322px;
    }

    .mv__box--secondary {
        width: 310px;
    }
}


@media screen and (min-width: 505px) and (max-width: 600px) {

    .main-visual.is-active .mv__line {
        width: 398px;
    }

    .mv__box--primary {
        width: 420px;
        height: 212px;
    }

    .mv__box--secondary {
        width: 400px;
        height: 212px;
    }
}

@media screen and (min-width: 601px) and (max-width: 768px) {

    .main-visual.is-active .mv__line {
        width: 443px;
    }

    .mv__box--primary {
        width: 480px;
        height: 239px;
    }

    .mv__box--secondary {
        width: 449px;
        height: 239px;
    }
}


/*==========================
PC版レイアウト (769px以上)
==========================*/

@media screen and (min-width: 769px) {

    .main {
        padding-top: 51px;
    }
    .main-visual { 
        height: 54.653vw; 
        width: 89%; 
        background: url(../images/top_img.webp) no-repeat 27% 60%;
        background-size: 200%;
    }

    .mv__box--primary { 
        width: 59.028vw; 
        height: 19.653vw; 
        top: -9.722vw; 
    }

    .mv__box--secondary { 
        width: 53.472vw; 
        height: 19.653vw; 
        top: -9.722vw; 
    }

    .mainTxt {
        font-size: 5.55vw; 
    }

    .catch { 
        font-size: 1.94vw; 
    }

    .mv__container {
        left: -13%;
    }

    .mv__layer-text {
        top: -7.569vw;
        left: 7.778vw;
    }

    .main-visual.is-active .mv__line {
        width: 54.375vw;
        position: relative;
        right: 8.333vw;
    }
}


/*==========================
subCatch
==========================*/

.subcatch {
    padding: 33px 4.1% 40px 4.1%;
    margin-top: 15px;
    background: linear-gradient(180deg, rgba(78, 67, 123, 0.7) 0%, rgba(43, 33, 85, 0.7) 100%),url('../images/subcatch_img.jpeg') no-repeat center center;
    background-size: cover;
}

.subTxt {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--white);
    margin-top: 6px;
}

.subTxt_txt {
    display: flex;
    align-items: center;
    gap: 15px; /* 線と文字の間隔 */
    font-size: 1.2rem;
    color: var(--white);
}

.subTxt_txt::before {
    content: "";
    display: block;
    width: 30px; /* 線の長さ */
    height: 1px;  /* 線の太さ */
    background-color: var(--white);
}



/*==========================
    PC版レイアウト (769px以上)
==========================*/


@media screen and (min-width: 769px) {
    .subcatch {
        text-align: center;
        height: 23.819vw;
        padding: 7.847vw 0 7.708vw 0;
        margin-top: 2.778vw;
    }

    .sponly {
        display: none;
    }

    .subTxt {
        font-size: 4rem;
    }

    .subTxt_txt {
        justify-content: center;
        gap: 2.083vw; /* 文字と線の間隔をPC用に調整 */
        font-size: 2.4rem;
        margin-top: 1.806vw;
    }

    .subTxt_txt::before {
        width: 5.556vw; 
    }

    .subTxt_txt::after {
        content: "";
        display: block;
        width: 5.556vw; /* 右側の線の長さ */
        height: 0.069vw;
        background-color: var(--white);
    }
    

}




/*==========================
news
==========================*/


.news {
    padding: 30px 4.1% 60px;
}

.sectionTitle {
    font-size: 3rem;
    font-weight: 500;
    color: var(--Title_blue);
    
}

.jptitle {
    font-size: 1.4rem;
    font-family: 'Zen Kaku Gothic Antique';
    color: var(--Title_blue);
    font-weight: 500;
}

.news-item {
    padding: 7px 16px;
    background-color: var(--white);
    display: flex;
    gap: 0 8px;
    margin-top: 10px;
    align-items: center;
}


time {
    width: 60px;
    font-family: 'Plus Jakarta Sans';
    font-size: 1rem;
    font-weight: 500;
    color: var(--Title_blue);
    display: block;
}

.newsTxt {
    font-size: 1.2rem;
}

/*==========================
    PC版レイアウト (769px以上)
==========================*/
@media screen and (min-width: 769px) {

    .sectionTitle {
        font-size: 6.4rem;
    }

    .jptitle {
        font-size: 2.4rem;
    }

    .news {
        display: flex;
        justify-content: space-between;
        padding: 30px 8% 80px;
    }

    .newsTxt {
        font-size: 1.8rem;
    }

    time {
        font-size: 1.8rem;
        width: 8.75vw;
    }

    .news-item {
        margin-top: 5.417vw;
    }

    .section-title-wrap { width: 30%; }
    .news-list { width: 69%; margin-top: 0; }
}

/*==========================
service
==========================*/

/*==========================
  共通設定
==========================*/

.service {
    padding: 30px 4.1% 70px;
    background-color: var(--white);
}

.service-container {
    display: flex;
    flex-direction: column; /* スマホは縦並び */
    gap: 41px;
    margin-top: 24px;
}

.service-item {
    width: 100%;
    aspect-ratio: 27 / 9; /* スマホ時の比率 */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
}

/* 個別背景画像 */
.service-item01 { 
    background-image: url('../images/Services_img01.jpeg'); 
    background-position: 50% 53%;
    background-size: 118%;
}

.service-item02 {
    background-image: url('../images/Services_img02.jpeg'); 
    background-position: 50% 14%;
    background-size: 100%;
}


.service-item03 { 
    background-image: url('../images/Services_img03.jpeg'); 
    background-position: 50% 37%;
    background-size: 105%;
}

/* テキストボックス（色の重なり部分） */
.service-box {
    width: 100%;
    height: 100%; /* スマホは全面 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    transition: all 0.3s ease;
}

/* 個別カラー（透明度あり） */
.service-item01 .service-box { background-color: rgba(100, 86, 33, 0.7); }
.service-item02 .service-box { background-color: rgba(112, 45, 45, 0.7); }
.service-item03 .service-box { background-color: rgba(67, 49, 93, 0.7); }

.servicesTitlLe {
    font-size: 1.8rem;
    font-weight: 600;
}

    /*==========================
    PC版レイアウト (769px以上)
    ==========================*/

@media screen and (min-width: 769px) {
    .service {
        padding: 2.08vw 8% 4.86vw; 
    }

    .service-container {
        flex-direction: row; 
        justify-content: space-between; 
        margin-top: 3.056vw;
    }

    .service-item { 
        width: 31%;
        aspect-ratio: 1.4 / 1.2;
        align-items: flex-end;
    }

    .service-box { 
        height: 35%; 
        padding: 1.042vw; 
    }

    .service-item01 {
        background-position: 43% 100%;
        background-size: 158%;
    }

    .service-item02 {
        background-position: 42% 0%;
        background-size: 182%;
    }

    .service-item03 {
        background-position: 53% 0%;
        background-size: 128%;
    }

    .servicesTitlLe {
        font-size: 2.6rem;
    }
}

 /*==========================
company
==========================*/

.company {
    padding: 30px 4.1% 70px;
}

.company-list {
    padding: 38px 5.89% 70px 5.89%;
}


.company-item {
    display: flex; 
    padding: 11px 0;
    border-bottom: 1px solid #968BC2; 
}

.company-item dt {
    width: 22%; /* 項目のラベル幅 */
    font-size: 1.2rem;
    font-weight: 500;
}

.company-item dd {
    width: 74%;
    font-size: 1.2rem;
    line-height: 1.8;
    margin: 0;
    font-weight: 500;
}



/*==========================
    PC版レイアウト (769px以上)
==========================*/
@media screen and (min-width: 769px) {

    .company { 
        padding: 2.08vw 12.4vw 14.58vw 8%;
    }

    .company .container {
        display: flex;
        justify-content: space-between;
    }

    .section-title-wrap { 
        width: 51%;
    }

    .company-list { 
        width: 56%; 
        padding: 0; 
        margin-top: 3.889vw;
    }

    .company-item dt {
        width: 25%;
        font-size: 2rem;
    }

    .company-item dd {
        width: 75%; 
        font-size: 2rem;
    }


}


/*==========================
  Contact 
==========================*/

.contact {
    position: relative;
    z-index: 20;
    /*マージン崩壊を防ぐ */
    padding-top: 1px; 
}

.contact-container {
    width: 75%;
    max-width: 600px;
    margin: 0 auto;
    /* フッター外引っ張り */
    margin-top: -100px; 
}

.contact-box {
    background: var(--white);
    padding: 30px 5.64%;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
    text-align: center;
}

.contact-text {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #4E4E4E;
    text-align: left;
}

/* 問い合わせボタン */
.btn-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--Title_blue);
    color: var(--white);
    text-decoration: none;
    padding: 7px 25px;
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 8px;
    transition: opacity 0.3s;
    font-family: 'Zen Kaku Gothic Antique';
}

.contact-icon {
    width: 18px;
    height: auto;
    margin-right: 6px; 
}

.btn-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 40px;
}


.mailTxt {
    font-size: 0.9rem;
    color: #4E4E4E;
    text-align: left;
    margin-left: 40px;
}

.pconly {
    display: none;
}

/*==========================
    PC版レイアウト (769px以上)
==========================*/

@media screen and (min-width: 769px) {
    .contact-container { 
        max-width: 69.444vw; 
        margin-top: -22.222vw;
    }

    .contact-box { 
        padding: 2.292vw 5.556vw; 
    }
    
    .contact-text {
        font-size: 2rem;
        text-align: center;
    }
    
    .pconly {
        display: inline;
    }
    
    .mailTxt {
        font-size: 1.4rem;
        text-align: center;
        margin-top: 0.625vw;
        margin-left: 0
    }

    .btn-contact {
        font-size: 2.6rem;
        width: 27.222vw;
        padding: 1.389vw 2.431vw;
        margin: 0 auto;
    }

      .contact-icon {
        width: 2.569vw;
        margin-right: 1.667vw;
    }


}


/*==========================
  Footer 
==========================*/

.footer-bottom {
    text-align: center;
    padding-top: 40px; 
}

.footer {
    background: linear-gradient(180deg, #574B86 0%, #2C1F5E 100%);
    width: 100%;
    position: relative;
    padding-bottom: 60px;
    margin-top: 0;
}
.footer_logo img {
    width: 90px;
    margin-bottom: 20px;
}

/* ロゴの下の線 */
.footer_info {
    display: inline-block;
    padding-top: 25px; 
    margin-bottom: 60px;
    position: relative;
}

.footer_info::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); 
    
    width: 94px;
    height: 1px;
    background-color: var(--white); 
}



.footer_name {
    font-size: 1.6rem;
    margin-bottom: 10px;
    color: var(--white);
    font-weight: 500;
}

.footer_access {
    font-size: 1.2rem;
    color: var(--white);
    font-weight: 500;
}

/* フッターナビの横並びと区切り線 */
.footer-menu {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

.footer-menu li {
    font-size: 1.4rem;
    position: relative;
    padding: 0 30px;
    font-weight: 500;
}

/* 縦棒（｜）の設定 */
.footer-menu li + li::before {
    content: "|";
    position: absolute;
    left: -2px;
    color: var(--white);
}

.footer-menu a {
    color: var(--white);
    text-decoration: none;
}

.copy {
    text-align: center;
    font-size: 0.8rem;
    color: var(--Title_blue);
    padding: 9px 0;
}



/*==========================
    PC版レイアウト (769px以上)
==========================*/

@media screen and (min-width: 769px) {
    
    .footer { 
        padding: 12.5vw 0 9.375vw; 
    }

    .footer_logo img { 
        width: 12.222vw; 
    }
    
    .footer_name { 
        font-size: 3.2rem; 
    }

    .footer_access {
        font-size: 1.8rem;
    }

    .footer-menu li { 
        padding: 0 3.403vw; 
        font-size: 1.8rem;
    }

    .footer_info {
        margin-bottom: 6.597vw;
        padding-top: 2.5vw;
    }

    .footer_info::before {
        width: 20.833vw;
    }

    .copy {
        font-size: 1.2rem;
    }

    .page-top a {
        width: 4.167vw;
        height: 4.167vw;
    }
}