/*
Theme Name: grow
Theme URI:
Author:
Description: 合同会社GROW WordPressテーマ
Version: 1.0.0
*/

/* スムーズにスクロールさせる設定（ページ全体に適用） */
html {
    scroll-behavior: smooth;
}

.body-in {
    position: relative;
}

/*---------------------------------
ヘッダー
---------------------------------*/

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    opacity: 1;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    will-change: transform, opacity;
    background: #fff;
    height: calc(120px / 2);
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.45);
}


.header_inner {
    height: calc(120px / 2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 22.5px;
}


.header_logo-box {
    width: calc(279px / 2);
}

.header_logo {
    display: block;
    max-width: calc(279px / 2);
    height: calc(63px / 2);
}

.header_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobile_menu_btn {
    width: calc(50px / 2);
    height: calc(34px / 2);
}

/* メニュー */

.pop-up_menu.menu-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .45s ease, visibility 0s;
    overflow-x: hidden;
}

.pop-up_menu {
    position: fixed;
    background: url(./images/common/pop-up_menu_bg.jpg) center / cover no-repeat;
    width: 100%;
    height: 100dvh;
    top: 0;
    right: 0;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s ease, visibility 0s linear .45s;
    overflow-y: auto;
    padding: 30px 22.5px;
}

.pop-up_menu__wrapper {
    width: 100%;
    position: relative;
    z-index: 0;
}

/* 装飾 */
.pop-up_menu__wrapper::before {
    content: "";
    position: absolute;
    background: url("/images/common/pop-up_decoration_logo.png") center / cover no-repeat;
    width: calc(424px / 2);
    height: calc(396px / 2);
    top: 0;
    left: -20px;
    z-index: -1;
    pointer-events: none;
}

.pop-up_menu__wrapper::after {
    content: "";
    position: absolute;
    background: url("/images/common/pop-up_decoration_name.png") center / cover no-repeat;
    width: calc(221px / 2);
    height: calc(943px / 2);
    bottom: 0;
    right: -20px;
    z-index: -1;
    pointer-events: none;
}

.sp-nav__box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: calc(100px / 2);
}

.sp-nav__list {
    flex: 1 1 50%;
    display: block;
}


/* 行の共通デザイン */

.sp-nav__item:not(:last-child) {
    margin-bottom: calc(30px / 2);
}

.sp-nav__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    background-image: linear-gradient(to right, #0089D4, #0089D4 4px, transparent 4px, transparent 4px);
    background-size: 8px 1px;
    background-position: left bottom;
    background-repeat: repeat-x;
    text-decoration: none;
    font-size: calc(32px / 2);
    font-weight: bold;
    line-height: calc(23 / 16);
    color: var(--main-color);
    padding-bottom: calc(30px / 2);
    padding-left: calc(65px / 2);
}

.sp-nav_sns__list {
    display: flex;
    flex-direction: column;
    gap: calc(40px / 2);
    margin-right: 20px;
}

.sp-nav_sns__item {
    width: calc(64px / 2);
    height: calc(64px / 2);
}

.sp-nav_sns__item a {
    display: block;
    width: 100%;
}

.close-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    width: calc(143px / 2);
    height: calc(120px / 2);
    border-radius: 0 0 0 10px;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.45);
    position: fixed;
    top: 0;
    right: 0;
}

.close-button img {
    width: 100%;
    max-width: calc(44px / 2);
}

.header_nav-layout {
    display: none;
}
.no-post-text{
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
}
@media (min-width:768px) {

    .mobile_menu_btn {
        display: none;
    }

    header {
        height: fit-content;
        box-shadow: none;
    }

    .header_inner {
        height: 88px;
        padding: 15px clamp(15px, calc(40px + 50vw - 570px), 40px);
        justify-content: unset;
        gap: clamp(15px, calc(40px + 50vw - 570px), 40px);
        position: relative;
    }

    /* ボックスシャドウを疑似要素で実現 */
    .header_inner::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.45);
        z-index: 10;
        pointer-events: none;
    }


    .header_logo-box {
        flex: 1 1 50%;
        max-width: clamp(190px, calc(235px + 50vw - 570px), 235px);
    }

    .header_logo {
        display: block;
        max-width: clamp(190px, calc(235px + 50vw - 570px), 235px);
        height: 53px;
    }

    .header_nav-layout {
        display: flex;
        align-items: center;
        gap: clamp(30px, calc(60px + 50vw - 570px), 60px);
        margin-left: auto;
    }

    .header_nav-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: clamp(20px, calc(50px + 50vw - 770px), 50px);
    }

    .header_nav-item.drop_item {
        position: relative;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .header_nav-item.drop_item::after {
        content: "";
        background: url("/images/common/drop_item_icon.png") center / cover no-repeat;
        width: 14px;
        height: 12px;
    }

    .nav-item_link {
        font-size: 16px;
        font-weight: bold;
        line-height: calc(18 / 16);
        color: var(--text-color);
        display: inline-block;
        position: relative;
        z-index: 10;
    }

    /* ホバー */

    .header_nav-item .nav-item_link:hover {
        color: var(--main-color);
    }

    .header_nav-item.drop_item:hover .nav-item_link {
        color: var(--main-color);
        cursor: default;
        /* 矢印（標準カーソル）にする */
    }

    .header_nav-item.drop_item:hover::after {
        background: url("/images/common/drop_item_icon_on.png") center / cover no-repeat;
    }

    .header_nav_contact {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 5px;
        flex-shrink: 0;
    }

    .header_nav_contact_tel {
        font-size: clamp(14px, calc(20px + 50vw - 770px), 20px);
        font-weight: bold;
        line-height: calc(18 / 20);
    }

    .header_nav_contact_tel span {
        font-size: clamp(14px, calc(16px + 50vw - 770px), 16px);
        font-weight: 500;
        line-height: calc(18 / 16);
        margin-right: 5px;
    }

    .header_nav_eigyo_time {
        background: var(--main-color);
        max-width: 220px;
        width: 100%;
        height: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 500;
        color: var(--sub-text-color);
        line-height: calc(18 / 14);
        text-align: center;
    }

    /* ドロップダウンメニュー */

    .drop_item {
        position: relative;
    }

    .header_nav-item.drop_item:hover .drop-menu-list {
        visibility: visible;
        opacity: 1;
        /* 元の位置（translateY(0)）に戻ることで浮き上がる動きになる */
        transform: translateX(-50%) translateY(0);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
    }

    .drop-menu-list {
        background-color: #fff;
        position: absolute;
        top: calc(100% + 35px);
        left: 50%;
        transform: translateX(-50%);
        visibility: hidden;
        /* 非表示 */
        width: max-content;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        z-index: 5;
        transform: translateX(-50%) translateY(-20px);
        transition: opacity 0.3s ease, transform 0s linear 0.3s, visibility 0s linear 0.2s;
        opacity: 0;
    }

    .drop-menu-list::before {
        content: "";
        position: absolute;
        top: -35px;
        /* -20px から -35px に変更 */
        left: 0;
        width: 100%;
        height: 55px;
        /* 40px から 55px に変更 */
        display: block;
    }

    .drop-menu-item a {
        display: block;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        text-align: center;
    }

    .drop-menu-item a:hover {
        color: var(--main-color);
    }
}

/* レスポンシブレイアウト用 */
@media (min-width: 768px) and (max-width: 1112px) {

    .header_nav_contact_tel,
    .header_nav_contact_tel span,
    .nav-item_link {
        font-size: 14px;
    }

    .header_nav-list,
    .header_nav-layout {
        gap: 10px 15px;
    }

    .drop-menu-list {
        top: calc(100% + 35px);
    }

}




/*---------------------------------
フッター
---------------------------------*/

.footer_nav {
    display: none;
}

footer {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    background: linear-gradient(to bottom, #0089D4 0%, #0089D4 50%, #5FC6FF 100%);
    position: relative;
}

.footer_inner {
    padding: 40px 0;
}

.footer_pc_layout_box {
    margin-bottom: calc(60px / 2);
}

.footer_company_info {
    margin-bottom: calc(30px / 2);
}

.footer_logo {
    display: block;
    max-width: calc(279px / 2);
    height: calc(63px / 2);
    margin-bottom: calc(20px / 2);
}

.footer_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer_address_text {
    font-size: calc(28px / 2);
    font-weight: 500;
    line-height: calc(21 / 14);
}

.footer_tel_text {
    font-size: calc(28px / 2);
    font-weight: 500;
    line-height: calc(21 / 14);
}

.footer_tel_text a {
    color: var(--sub-text-color);
}

.footer_sns_list {
    display: flex;
    align-items: center;
    gap: calc(30px / 2);
}

.footer_sns_item a {
    display: block;
    width: calc(57px / 2);
    height: calc(57px / 2);
}

.copyright_text {
    font-size: calc(20px / 2);
    line-height: calc(14 / 14);
    font-family: var(--sub-font);
    text-align: center;
}

@media (min-width:768px) {

    .footer_nav {
        display: flex;
        gap: 50px;
    }

    .footer_inner {
        padding: 60px 30px;
    }

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

    .footer_inner_flex_box {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 190px;
        margin-bottom: 15px;
    }

    .footer_pc_layout_box {
        flex: 1 1 50%;
        max-width: 258px;
        margin-bottom: 0;
    }

    .footer_company_info {
        margin-bottom: 50px;
    }

    .footer_logo {
        display: block;
        max-width: 235px;
        height: 53px;
        margin-bottom: 20px;
    }

    .footer_company_address {
        margin-left: 75px;
    }

    .footer_address_text,
    .footer_tel_text {
        font-size: 16px;
        font-weight: 500;
        line-height: calc(28 / 16);
    }

    .footer_tel_text a {
        pointer-events: none;
    }

    .footer_sns_list {
        margin-left: 75px;
        gap: 10px;
    }

    .footer_sns_item a {
        display: block;
        width: 34px;
        height: 34px;
    }

    .footer_sns_item a:hover {
        opacity: .7;
    }

    .footer_nav-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .footer_nav-item a {
        font-size: 16px;
        font-weight: 500;
        color: var(--sub-text-color);
        line-height: calc(18 / 16);
    }

    .footer_nav-item a:hover {
        opacity: .7;
    }

    .copyright_text {
        font-size: 14px;
        text-align: right;
    }

}

/* レスポンシブレイアウト用 */
@media (min-width: 768px) and (max-width: 1112px) {

    .footer_inner_flex_box {
        gap: 80px;
    }

    .footer_sns_list,
    .footer_company_address {
        margin-left: 0;
    }
}

/* フロートバナー */

.float-button__wrap {
    display: none;
    /*最初は隠す*/
    width: calc(80px / 2);
    height: calc(80px / 2);
    position: fixed;
    bottom: 10px;
    right: 20px;
    z-index: 10;
}

.float-button__wrap a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #797979;
    position: relative;
}

.float-button__wrap a::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(-45deg);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 15px auto;
}

@media (min-width:768px) {

    .float-button__wrap {
        width: 60px;
        height: 60px;
        right: 50px;
    }


    .float-button__wrap a::after {
        width: 20px;
        height: 20px;
        margin: 25px auto;
    }


}