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

    Common - 共通

    ★レスポンシブ★
    ・PCファースト
    ・タブレット：max-width: 1024px
    ・スマホ：max-width: 768px

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

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

    Reset - リセット

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

* {
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



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

    Common - 共通
    基本カラー：#2C497F, #FFFFFF
    ロゴ：
    アクセント：#D3B680

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

html {
    font-size: 62.5%;
}

body {
    -webkit-font-smoothing: antialiased;
    /* font-family: "M PLUS Rounded 1c", sans-serif; */
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 600;
    font-style: normal;
    background-color: #FFFFFF;
    color: #2C497F;
	font-size: 2.0rem;
    letter-spacing: 0.02em;
    line-height: 1.8;
    background-image: url("../img/bg.png"); /* 画像パスを指定 */
    background-repeat: no-repeat; /* 繰り返さない */
    background-size: cover; /* 画面いっぱいに拡大縮小 */
    background-position: center; /* 中央配置 */
}

@media (max-width: 1024px) {

    body {
        font-size: 1.8rem;
    }

}

@media (max-width: 768px) {

    body {
        font-size: 1.6rem;
    }

}


img {
    display: block;
    width: 100%;
    height: auto;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    cursor: pointer;
    transition: .4s;
}

a:hover {
    transition: .4s;
}

.font-noto-sans {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}



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

    Flex - フレックス

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

.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

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

.flex-space-around {
    display: flex;
    justify-content: space-around;
}

.flex-center {
    display: flex;
    justify-content: center;
}



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

    Header - ヘッダー

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

/* ==================================
    トップページ用   
================================== */

.hero {
    position: relative;
    width: 100%;
    height: 100vh; /* 画面全体に表示 */
    overflow: hidden;
    background: url('../img/top/poster.jpg') center/cover no-repeat; /* ←動画が読み込まれるまで表示される静止画 */
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease; /* フェードイン */
    z-index: 0;
}

@media (max-width: 1024px) {

    .hero {
        height: auto;           /* ← fullscreenを解除 */
    }

    .hero-video {
        position: relative;     /* ← absoluteを解除して自然配置へ */
        width: 100%;
        height: auto;           /* ← 比率そのまま */
        object-fit: contain;    /* cover → contain に変更して上下切れ防止 */
    }

}

.hero-overlay {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}

/* 音量ボタン */
.sound-btn {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.sound-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* ヘッダーを背景の上に重ねる */
.hero header {
    width: 90%;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    margin: 0 5%; /* 中央寄せ */
    z-index: 10;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    background-color: #FFFFFF;
    margin-top: 16px;
    padding: 12px 24px;
    border-radius: 50px;
}

.hero .vip-logo-box {
    position: absolute;
    top: 100px;
    left:0;
    width: 200px;
    margin: 32px 5% 0; /* 中央寄せ */
    z-index: 10;
}

@media (max-width: 768px) {

    .header-inner {
        height: 70px;
        margin-top: 8px;
        padding: 6px 12px;
        border-radius: 30px;
    }

    .hero .vip-logo-box {
        top: 70px;
        width: 100px;
    }
}


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

/* ==================================
    サブページ用   
================================== */

header {
    width: 100%;
    margin: 0 auto;
}

.header-sub-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F5F9FF;
    padding: 24px 49px;
}

@media (max-width: 768px) {

    .header-sub-inner {
        padding: 12px 24px;
    }

}

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


.logo {
    width: 500px;
}

.icon-group {
    display: flex;
    gap: 32px; /* アイコン同士の横間隔 */
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none; /* リンクの下線を消す */
    cursor: pointer;
    font-size: 4.0rem;
    color: #333333;
}

@media (max-width: 1024px) {

    .logo {
        width: 300px;
    }

    .icon-item:not(#menu-toggle) {
        display: none;
    }

}

@media (max-width: 768px) {

    .logo {
        width: 200px;
    }

    .icon-item:not(#menu-toggle) {
        display: none;
    }

    .icon-item {
        font-size: 2.4rem;
    }

}

.icon-item i {
    padding-top: 8px;
    transition: transform 0.2s ease;
}

.icon-item i:hover {
    transform: scale(1.2);
}

.icon-label {
    font-size: 18px;
    margin-top: 4px;
    color: #333333;
    font-weight: bold;
}

@media (max-width: 768px) {

    .icon-label {
        font-size: 1.4rem;
    }

}


/* オーバーレイ */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 998;
}

/* スライドメニュー */
.side-menu {
    position: fixed;
    top: 0;
    right: -250px; /* 初期状態は画面外 */
    width: 250px;
    height: 100%;
    background: #2C497F;
    color: #FFFFFF;
    transition: right 0.3s ease;
    padding-top: 60px;
    z-index: 999;
}

.side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-menu li {
    margin: 20px;
}

.side-menu a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 18px;
}

/* 開いた時のスタイル */
.side-menu.active {
    right: 0;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.side-menu .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 24px;
    cursor: pointer;
    color: #FFFFFF;
    z-index: 1000;
    transition: transform 0.2s ease;
}

.side-menu .close-btn:hover {
    transform: scale(1.2);
}

.fa-building {
    color: #dbae0e;
}

.fa-suitcase-rolling {
    color: #ff0049;
}

.fa-bus {
    color: #ef7d00;
}
.fa-book-open {
    color: #236d0b;3f1482
}
.fa-calculator {
    color: #3f1482;
}

.fa-envelope {
    color: #1111bc;
}



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

    Breadcrumb Nav - パンくずリスト

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

ul.breadcrumb-nav-box {
    max-width: 800px;
    width: calc(100% - 16px);
    margin: 0 auto 120px;
    display: flex;
    justify-content: flex-start;
    font-size: 1.2rem;
    padding-left: 2px;
}

@media screen and (min-width: 768px) {
    ul.breadcrumb-nav-box {
        width: calc(100% - 96px);
        font-size: 1.5rem;
    }
}

ul.breadcrumb-nav-box li:not(:last-child) {
    display: block;
    white-space: nowrap;
    padding-right: 8px;
}

ul.breadcrumb-nav-box li:not(:last-child):after {
    content: '>';
    padding-left: 8px;
}

ul.breadcrumb-nav-box li a {
    color: #2C497F;
}



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

    Contact - お問い合わせエリア
    お問い合わせと無料お見積もりの横並び

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

.c-box-text {
    text-align: center;
    font-weight: 500;
    padding-bottom: 48px;
}

.c-box-wrapper {
    width: 980px;
    background-color: #00ABE7;
    padding: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto 128px;
}

.c-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    transition: all 0.3s ease;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: .4s;
}

.c-box:hover {
    background-color: #D3B680;
    transition: .4s;
    color: #FFFFFF;
}

.c-box i {
    transition: .4s;
    font-size: 2.4rem;
}

.c-box:hover i {
    transition: .4s;
    color: #FFFFFF;
}

.c-box span {
    transition: .4s;
    color: #5E5E5E;
    font-weight: bold;
}

.c-box:hover span {
    transition: .4s;
    color: #FFFFFF;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .c-box-wrapper {
        flex-direction: column;
    }
}


/* --- リンク ホームボタン --- */
.btn-home-wrapper {
    text-align: center;
    margin: 80px auto;
}

.btn-home {
    display: inline-flex;
    align-items: center;
    justify-content: space-between; /* テキストと矢印を左右に配置 */
    padding: 12px 20px;
    background-color: #00abe7;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: background 0.4s, transform 0.4s;
}

.btn-home .arrow {
    margin-left: 10px;
    font-weight: bold;
    transition: transform 0.4s;
}

.btn-home:hover {
    background-color: #D3B680;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.btn-home:hover .arrow {
    transform: translateX(4px);
}



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

    Footer - フッター

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

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

    Scroll - スクロール

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

.page-top {
    margin: 48px auto 0;
    text-align: center;
}

.page-top i {
    font-size: 3.0rem;
}

.arrow-up {
    width: 50px;
    height: 50px;
    background: #333;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

/* 矢印の軸 */
.arrow-up::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 16px;
    background: #fff;
    border-radius: 2px;
}

/* 矢印の先（三角） */
.arrow-up::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
}


/* ==================================
    上段
================================== */

.footer-top-img-box {
    
}

.footer-area-box {
    
}

.footer-top-box {
    font-weight: 700;
    background-color: #2C497F;
    color: #FFFFFF;
    padding: 32px 0;
}

.footer-top-box .footer-inner-box {
    border-left: solid 1px #FFFFFF;
    padding-left: 32px;
}

.footer-inner-box {
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 1024px) {

    .footer-top-box .footer-inner-box {
        padding-left: 32px;
        padding-right: 32px;
    }

    .footer-inner-box {
        max-width: 100%;
    }

}

@media (max-width: 768px) {

    .footer-top-box .footer-inner-box {
        padding-left: 32px;
        padding-right: 32px;
    }

    .footer-inner-box {
        max-width: 100%;
    }

}


.footer-title-box {
    width: 20%;
    margin-right: 48px;
}

.footer-title-box p:nth-of-type(1) {
    font-size: 6.0rem;
    line-height: 1.0;
    opacity: 0.3;
}

.footer-title-box p:nth-of-type(2) {
    padding-left: 8px;
    font-size: 2.0rem;
}

.footer-item-box {
    width: calc(100% - 20% - 48px);
    text-align: center;
}

.footer-item-box ul li {
    width: calc(100% / 3);
    margin: 0 8px;
    background-color: #FFFFFF;
    margin-top: 8px;
}

@media (max-width: 1024px) {

    .footer-title-box {
        width: 100%;
        margin-bottom: 32px;
    }

    .footer-item-box {
        width: 100%;
        margin: 0 auto;
    }

}

@media (max-width: 768px) {

    .footer-item-box ul li {
        width: 100%;
        font-size: 1.6rem;
    }

    .footer-item-box .flex-center {
        display: block;
    }

}

.footer-item-box ul li a {
    color: #2C497F;
    display: block;
    width: 100%;
    padding: 16px;
}

.footer-item-box ul li a:hover {
    color: #FFFFFF;
    background-color: #D3B680;
}

.footer-item-tel-box a {
    font-size: 5.0rem;
}

.footer-item-tel-box i {
    font-size: 4.8rem;
    padding-right: 8px;
}

@media (max-width: 1024px) {

    .footer-item-tel-box {
        margin-top: 16px;
    }

    .footer-item-tel-box a {
        font-size: 4.0rem;
    }

    .footer-item-tel-box i {
        font-size: 3.8rem;
    }

}

@media (max-width: 768px) {

    .footer-item-tel-box {
        margin: 32px auto 0;
    }

    .footer-item-tel-box a {
        font-size: 3.2rem;
    }

    .footer-item-tel-box i {
        font-size: 3.0rem;
    }

}



/* ==================================
    中段
================================== */

.footer-middle-box {
    font-weight: 700;
    background-color: #f7f9fc;
    padding: 64px 0;
}

.footer-middle-box img {
    width: 300px;
    margin-bottom: 32px;
}

@media (max-width: 1024px) {

    .footer-middle-box {
        padding: 64px 32px;
    }

    .footer-middle-box .flex-start {
        display: block;
    }

    .footer-middle-box img {
        width: 200px;
    }

}

@media (max-width: 768px) {

    .footer-middle-box {
        padding: 64px 16px;
    }
    
    .footer-middle-box img {
        width: 200px;
    }

}


.footer-menu-box {
    margin-right: 48px;
}

.footer-menu-box ul li a {
    color: #2C497F;
}

.footer-menu-box ul li a:hover {
    color: #D3B680;
}

.footer-menu-box i {
    font-size: 3.0rem;
}

.footer-info-box {
    margin-right: 48px;
}

.footer-office-box {
    margin-bottom: 24px;
}

.footer-office-box p:nth-of-type(1):before {
    content: '●';
}

@media (max-width: 1024px) {

    .footer-menu-box ul li {
        font-size: 2.0rem;
    }

    .footer-office-box {
        font-size: 2.0rem;
    }

}

@media (max-width: 768px) {

    .footer-menu-box ul li {
        font-size: 1.6rem;
    }

    .footer-office-box {
        font-size: 1.6rem;
    }

    .footer-info-box {
       margin-right: 0;
    }

}



/* ==================================
    下段
================================== */

.footer-under-box {
    background: 
    linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65)),
    url('../img/bg-footer-under.jpg') no-repeat center top;
    background-size: auto;
    background-repeat: repeat-y;
}

.footer-under-inner-box {
    font-weight: 700;
    text-align: center;
    width: 250px;
    margin: 0 auto;
    padding: 32px 0 64px;
}

.footer-under-inner-box p {
    margin-bottom: 32px;
}

.cr {
    text-align: center;
    font-size: 1.6rem;
    line-height: 2.5;
}


@media (max-width: 1024px) {
}

@media (max-width: 768px) {

    .footer-under-inner-box {
        width: 40%;
        margin: 0 auto;
    }

}




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

    Sub Common - ページ上部の共通部分

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

h2 {
    /* font-family: "M PLUS Rounded 1c", sans-serif; */
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    font-size: 4.0rem;
    letter-spacing: 0.5em;
    padding-left: 0.5em; /* 左端は補正 */
}

@media (max-width: 768px) {

    h2 {
        font-size: 2.4rem;
    }
}

.sub-title-wrapper {
    text-align: center;
    padding: 16px 0;
}

.sub-title-text {
    display: inline-block;      /* テキスト幅に合わせる */
    background: #F6AE2D;
    letter-spacing: 0.2em;
    padding-left: 0.2em;        /* 左端は補正 */
    color: #FFFFFF;             /* 文字色は読みやすく */
    padding: 8px 40px;          /* 背景の余白（左右で幅を調整） */
    font-weight: 700;
    white-space: nowrap;        /* 改行させたくない場合 */
}

.full-width-wrapper {
    width: 100vw;                   /* 画面幅いっぱい */
    margin-left: calc(50% - 50vw);  /* コンテンツ幅を飛び出して中央揃え */
    margin-top: 80px;
    margin-bottom: 40px;
}

.full-width-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}