@charset "utf-8";

/*===========================================
レスポンシブ対応CSS（PC用ページをスマホ・タブレットでも表示）
---------------------------------------------
01. 共通（全幅）
02. タブレット（〜1023px）
03. スマートフォン（〜900px）
    03-1. ヘッダー
    03-2. ドロワーメニュー
    03-3. 基本レイアウト・ページタイトル
    03-4. トップページ
    03-5. 会社概要
    03-6. 事業内容・業務実績
    03-7. リクルート
    03-8. 沿革（タイムライン）
    03-9. サイトマップ
    03-10. 個人情報保護方針・カスハラ方針
    03-11. お問い合わせ・フォーム
    03-12. フッター
    03-13. スクロール表示アニメーション
04. 小型スマートフォン（〜380px）
===========================================*/


/*-------------------------------------------
01. 共通（全幅）
-------------------------------------------*/

#btn_menu,
#nav_overlay {
    display: none;
}


/*-------------------------------------------
02. タブレット（〜1023px）
-------------------------------------------*/

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

    img {
        max-width: 100%;
        height: auto;
    }

    .content {
        width: auto;
        max-width: 998px;
    }

    #global_navigation li:nth-of-type(2) {
        margin-left: 24px;
    }

    #global_navigation li:nth-of-type(3) {
        margin-left: 20px;
    }

    #global_navigation li:nth-of-type(4) {
        margin-left: 18px;
    }

}


/*-------------------------------------------
03. スマートフォン（〜900px）
-------------------------------------------*/

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

/*-------- 03-1. ヘッダー --------*/

    body {
        -webkit-text-size-adjust: 100%;
    }

    body.nav-open {
        overflow: hidden;
    }

    #header {
        border-bottom: 3px solid #00a0df;
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        backdrop-filter: saturate(180%) blur(12px);
        box-shadow: 0 2px 14px rgba(0, 60, 88, .07);
    }

    #header .content {
        padding: 0 14px;
        width: auto;
        position: relative;
        text-align: center;
    }

    /* ロゴは中央に配置（旧スマホページと同じ並び） */
    #header h1 {
        margin: 0;
        padding: 11px 0;
        display: block;
        text-align: center;
    }

    #header h1 a {
        display: inline-block;
    }

    #header h1 img {
        width: auto;
        height: 38px;
    }

    /* ハンバーガーボタン */
    #btn_menu {
        padding: 13px 7px;
        width: 44px;
        height: 44px;
        display: block;
        position: absolute;
        top: 50%;
        right: 8px;
        margin-top: -22px;
        box-sizing: border-box;
        z-index: 130;
    }

    #btn_menu span {
        margin-bottom: 5px;
        display: block;
        width: 30px;
        height: 2px;
        border-radius: 2px;
        background: #00a0df;
        transition: transform .25s ease, opacity .2s ease;
    }

    #btn_menu span:last-child {
        margin-bottom: 0;
    }

    body.nav-open #btn_menu span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    body.nav-open #btn_menu span:nth-child(2) {
        opacity: 0;
    }

    body.nav-open #btn_menu span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

/*-------- 03-2. ドロワーメニュー --------*/

    #nav_overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        z-index: 80;
        background: rgba(0, 42, 64, .5);
        transition: opacity .25s ease, visibility .25s ease;
    }

    body.nav-open #nav_overlay {
        opacity: 1;
        visibility: visible;
    }

    #drawer {
        width: 78%;
        max-width: 320px;
        position: absolute;
        top: 100%;
        right: 12px;
        margin-top: 12px;
        z-index: 120;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 20px 44px rgba(0, 42, 64, .26);
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px) scale(.95);
        transform-origin: right top;
        transition: opacity .24s ease, transform .24s cubic-bezier(.2, .9, .3, 1), visibility .24s;
    }

    body.nav-open #drawer {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    #global_navigation,
    #header_link {
        margin: 0;
        padding: 0;
        width: 100%;
        display: block;
        position: static;
    }

    #header_link {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    /* お問い合わせは一番下に */
    #header_link_contact {
        -webkit-order: 3;
        order: 3;
    }

    #global_navigation li,
    #global_navigation li:nth-of-type(2),
    #global_navigation li:nth-of-type(3),
    #global_navigation li:nth-of-type(4),
    #header_link li,
    #header_link li:first-of-type {
        margin: 0;
        width: 100%;
        display: block;
        float: none;
        white-space: normal;
    }

    #global_navigation a,
    #header_link a,
    #header_link_contact a,
    #header_link_sitemap a,
    #header_link_privacy a {
        margin: 0;
        padding: 14px 36px 14px 18px;
        width: auto;
        display: block;
        position: relative;
        border: 0;
        border-bottom: 1px solid #eef4f8;
        border-radius: 0;
        color: #24404d;
        background: none;
        text-align: left;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
    }

    #global_navigation a:after,
    #header_link a:after {
        content: "";
        margin-top: -4px;
        width: 7px;
        height: 7px;
        position: absolute;
        top: 50%;
        right: 18px;
        border-top: 2px solid #00a0df;
        border-right: 2px solid #00a0df;
        transform: rotate(45deg);
    }

    #global_navigation a:hover {
        padding-bottom: 14px;
        border-bottom: 1px solid #eef4f8;
        color: #24404d;
    }

    /* 英語表記をサブテキストとして表示 */
    #global_navigation .ruby {
        margin-top: 3px;
        display: block;
        color: #9fb7c4;
        font-size: 10px;
        font-weight: 400;
        letter-spacing: .1em;
    }

    #global_navigation .ruby br {
        display: none;
    }

    /* お問い合わせボタン */
    #header_link_contact a {
        border-bottom: 0;
        color: #ffffff;
        background: -webkit-linear-gradient(left, #00a0df, #00c4e4);
        background: linear-gradient(90deg, #00a0df, #00c4e4);
        font-weight: 700;
        letter-spacing: .04em;
    }

    #header_link_contact a:after {
        border-color: #ffffff;
    }

/*-------- 03-3. 基本レイアウト・ページタイトル --------*/

    .content {
        padding: 0 16px;
        width: auto;
    }

    /* ページが短くてもフッターを最下部に */
    #wrapper {
        min-height: 100vh;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    #container,
    #container.content {
        padding: 88px 16px 56px;
        -webkit-flex: 1 0 auto;
        flex: 1 0 auto;
    }

    #footer {
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    #container h1 {
        margin: 0 0 28px;
        padding: 0 0 14px;
        border-bottom: 1px solid #e4eef4;
        background: none;
        position: relative;
    }

    #container h1:after {
        content: "";
        width: 46px;
        height: 3px;
        position: absolute;
        left: 0;
        bottom: -2px;
        border-radius: 2px;
        background: -webkit-linear-gradient(left, #00a0df, #00d0e8);
        background: linear-gradient(90deg, #00a0df, #00d0e8);
    }

    #container h1 img {
        max-width: 84%;
        height: auto;
    }

/*-------- 03-4. トップページ --------*/

    /* メインビジュアルは画面いっぱいに */
    #visual {
        margin: -16px -16px 30px;
        border-radius: 0 0 20px 20px;
        overflow: hidden;
    }

    #visual img {
        width: 100%;
        height: auto;
    }

    /* セクション見出し（帯デザイン） */
    .section_menu h2 {
        margin: 0 -16px 22px;
        padding: 12px 16px 12px 20px;
        border-left: 4px solid #00a0df;
        background: -webkit-linear-gradient(left, #e9f7fd, rgba(233, 247, 253, 0));
        background: linear-gradient(90deg, #e9f7fd, rgba(233, 247, 253, 0));
        text-align: left;
    }

    .section_menu h2 img {
        max-width: 55%;
        height: auto;
    }

    #menu_service {
        margin-top: 0;
        margin-bottom: 44px;
    }

    #menu_service h2 {
        margin-bottom: 22px;
    }

    #section_items {
        margin-left: 0;
        display: block;
    }

    /* サービスカード：写真を上、テキストを下に */
    .section_item {
        margin-bottom: 22px;
        width: 100%;
        display: block;
    }

    .section_item section,
    .section_item section:hover {
        margin-left: 0;
        padding: 71% 0 18px; /* 上部＝背景写真（310×220）の高さぶん */
        border: 1px solid #e2eef5;
        border-radius: 16px;
        background-position: center top;
        background-size: 100% auto;
        box-shadow: 0 8px 22px rgba(0, 60, 88, .09);
        overflow: hidden;
    }

    /* 背景写真をカード上部へ（ID指定を上書き） */
    #item_company,
    #item_business,
    #item_recruit {
        background-position: center top;
        background-size: 100% auto;
    }

    .section_item h3 {
        margin: 18px 0 10px;
        padding: 0 18px;
    }

    .section_item h3 img {
        width: auto;
        max-width: 78%;
        height: auto;
    }

    .section_item p {
        margin-bottom: 16px;
        padding: 0 18px;
        font-size: .95em;
        line-height: 1.75;
    }

    .section_item .link_more,
    #menu_news .link_more {
        padding: 0 18px;
        text-align: right;
    }

    /* VIEW MORE をボタン化 */
    .link_more a {
        padding: 9px 32px 9px 18px;
        min-height: 0;
        position: relative;
        border-radius: 999px;
        color: #ffffff;
        background: -webkit-linear-gradient(left, #00a0df, #00c4e4);
        background: linear-gradient(90deg, #00a0df, #00c4e4);
        box-shadow: 0 4px 12px rgba(0, 160, 223, .3);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
    }

    .link_more a:after {
        content: "";
        margin-top: -3px;
        width: 6px;
        height: 6px;
        position: absolute;
        top: 50%;
        right: 16px;
        border-top: 2px solid #ffffff;
        border-right: 2px solid #ffffff;
        transform: rotate(45deg);
    }

    #menu_news {
        margin-bottom: 10px;
    }

    #menu_news h2 {
        margin-bottom: 22px;
        padding-bottom: 12px;
        border-bottom: 0;
    }

/*-------- 03-5. 会社概要 --------*/

    #company_data > dt {
        margin: 0 0 12px;
        padding: 22px 0 0 13px;
        border-top: 1px dashed #dbe8ef;
        position: relative;
        color: #007fb1;
        font-size: 1.05em;
        letter-spacing: .04em;
    }

    #company_data > dt:before {
        content: "";
        width: 4px;
        height: 15px;
        position: absolute;
        left: 0;
        top: 23px;
        border-radius: 2px;
        background: #00a0df;
    }

    #company_data > dd {
        margin-bottom: 16px;
        padding-left: 13px;
        font-size: .95em;
        line-height: 1.8;
        word-wrap: break-word;
    }

    #company_data dl dt {
        color: #4b6472;
        font-weight: bold;
    }

    #company_map > dt {
        margin-bottom: 18px;
    }

    #company_map li {
        margin-bottom: 18px;
        padding: 16px 0;
        border-radius: 14px;
        background: #f4fafd;
    }

    #company_map figure {
        padding: 0 12px;
    }

    #company_map figcaption {
        margin-bottom: 8px;
        font-size: .95em;
        font-weight: bold;
    }

    #company_map iframe,
    #company_map object,
    #company_map embed {
        height: 240px;
        border-radius: 10px;
    }

/*-------- 03-6. 事業内容・業務実績 --------*/

    /* 各サービスをカード表示に */
    .section_business,
    .section_business:last-of-type {
        margin-bottom: 20px;
        padding: 20px 18px;
        border: 1px solid #e2eef5;
        border-bottom: 1px solid #e2eef5;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 6px 18px rgba(0, 60, 88, .07);
        font-size: .95em;
        line-height: 1.85;
    }

    .section_business h2 {
        margin: 0 -18px 16px;
        padding: 0 18px 14px;
        border-bottom: 1px solid #eef4f8;
    }

    .section_business h2 img {
        width: auto;
        max-width: 72%;
        height: auto;
    }

    .section_business p,
    .section_business ul,
    .section_business dl {
        padding-left: 0;
    }

    .section_business p {
        margin-bottom: 14px;
    }

    .section_business li {
        margin: 0 0 12px 1.1em;
    }

    .section_business dt {
        margin-bottom: 6px;
        color: #007fb1;
        font-weight: bold;
    }

    .section_business dd {
        margin-bottom: 22px;
    }

    #section_business_history {
        margin-top: 0;
    }

    /* 「業務実績はこちらへ」をボタンに */
    .section_business.is_link {
        margin-top: 4px;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .section_business.is_link h2 {
        margin: 0;
        padding: 0;
        border-bottom: 0;
    }

    .section_business.is_link h2 a {
        padding: 14px 10px;
        display: block;
        border-radius: 999px;
        color: #ffffff;
        background: -webkit-linear-gradient(left, #00a0df, #00c4e4);
        background: linear-gradient(90deg, #00a0df, #00c4e4);
        box-shadow: 0 6px 16px rgba(0, 160, 223, .28);
        text-align: center;
        font-size: 15px;
        font-weight: 700;
    }

/*-------- 03-7. リクルート --------*/

    #recruit > dt {
        margin: 0 0 12px;
        padding: 22px 0 0 13px;
        border-top: 1px dashed #dbe8ef;
        position: relative;
        color: #007fb1;
        font-size: 1.05em;
        letter-spacing: .04em;
    }

    #recruit > dt:before {
        content: "";
        width: 4px;
        height: 15px;
        position: absolute;
        left: 0;
        top: 23px;
        border-radius: 2px;
        background: #00a0df;
    }

    #recruit > dt:first-of-type {
        padding-top: 0;
    }

    #recruit > dt:first-of-type:before {
        top: 1px;
    }

    #recruit dd {
        margin-bottom: 16px;
        padding-left: 13px;
        font-size: .95em;
        line-height: 1.8;
    }

    #recruit_entry {
        margin: 8px 0 24px;
        float: none;
        display: block;
        text-align: center;
    }

/*-------- 03-8. 沿革（タイムライン） --------*/

    #menu_news ul,
    #newslist {
        padding-left: 2px;
    }

    .news {
        margin: 0;
        padding: 0 0 20px 22px;
        position: relative;
        border-bottom: 0;
        font-size: .95em;
        line-height: 1.7;
    }

    .news:before {
        content: "";
        width: 9px;
        height: 9px;
        position: absolute;
        top: 5px;
        left: 0;
        border-radius: 50%;
        background: #00a0df;
        box-shadow: 0 0 0 4px rgba(0, 160, 223, .16);
    }

    .news:after {
        content: "";
        width: 1px;
        position: absolute;
        top: 18px;
        bottom: 0;
        left: 4px;
        background: #dce9f0;
    }

    .news:last-child:after {
        display: none;
    }

    .news_date {
        margin: 0 0 2px;
        width: auto;
        display: block;
        color: #00a0df;
        font-size: .82em;
        font-weight: bold;
        letter-spacing: .06em;
    }

/*-------- 03-9. サイトマップ --------*/

    #sitemap li {
        margin-bottom: 10px;
        font-size: 1em;
    }

    #sitemap li:before {
        content: none;
    }

    #sitemap li a {
        padding: 15px 36px 15px 16px;
        display: block;
        position: relative;
        border: 1px solid #e2eef5;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 60, 88, .06);
        color: #24404d;
        font-weight: 600;
    }

    #sitemap li a:after {
        content: "";
        margin-top: -4px;
        width: 7px;
        height: 7px;
        position: absolute;
        top: 50%;
        right: 16px;
        border-top: 2px solid #00a0df;
        border-right: 2px solid #00a0df;
        transform: rotate(45deg);
    }

/*-------- 03-10. 個人情報保護方針・カスハラ方針 --------*/

    #privacy_data > dt {
        margin: 0 0 14px;
        padding: 22px 0 0 13px;
        position: relative;
        color: #00a0df;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.5;
    }

    #privacy_data > dt:before {
        content: "";
        width: 4px;
        height: 17px;
        position: absolute;
        left: 0;
        top: 23px;
        border-radius: 2px;
        background: #00a0df;
    }

    #privacy_data > dt:first-of-type:before {
        top: 1px;
    }

    #privacy_data > dd {
        margin-bottom: 22px;
        padding: 16px 16px;
        border: 1px solid #e6f1f7;
        border-radius: 14px;
        background: #f8fcfe;
        font-size: .93em;
        line-height: 1.9;
        word-wrap: break-word;
    }

/*-------- 03-11. お問い合わせ・フォーム --------*/

    #container > p {
        margin-bottom: 22px;
        line-height: 1.8;
    }

    p.adress {
        padding: 16px;
        border-radius: 12px;
        background: #f4fafd;
        font-size: 17px;
        font-weight: bold;
        text-align: center;
        word-wrap: break-word;
    }

    /* エントリーフォーム */
    #entry dt {
        margin-bottom: 6px;
        color: #24404d;
        font-weight: 600;
        line-height: 1.7;
    }

    #entry dt:last-of-type {
        margin: 18px 0 6px;
        color: #6d6d6d;
        font-size: .85em;
        font-weight: 400;
        line-height: 1.9;
    }

    #entry dd {
        margin-bottom: 6px;
    }

    #content_contact table,
    #content_contact tbody,
    #content_contact tr,
    #content_contact th,
    #content_contact td {
        width: auto;
        display: block;
    }

    #content_contact tr {
        margin-bottom: 14px;
        border: 1px solid #e6f1f7;
        border-radius: 12px;
        overflow: hidden;
    }

    #content_contact th {
        padding: 12px 14px;
        background: #f4fafd;
        color: #007fb1;
        font-weight: bold;
    }

    #content_contact td {
        padding: 14px;
    }

    #content_contact input[type="text"],
    #content_contact input[type="email"],
    #content_contact textarea {
        width: 100%;
        box-sizing: border-box;
    }

    input[type="text"],
    input[type="email"],
    textarea,
    #captchaText {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    input[type="date"] {
        width: 100%;
        max-width: 240px;
        box-sizing: border-box;
    }

    #submit-button {
        width: 100%;
        height: 54px;
        border-radius: 999px;
        background: -webkit-linear-gradient(left, #00a0df, #00c4e4);
        background: linear-gradient(90deg, #00a0df, #00c4e4);
        box-shadow: 0 8px 20px rgba(0, 160, 223, .28);
        font-size: 17px;
        font-weight: bold;
    }

    #contact_captcha_img {
        margin-right: 0;
        display: block;
        text-align: center;
    }

    #contact_button input,
    .submit input[type="submit"],
    .submit input[type="reset"] {
        padding: 14px 20px;
        min-width: 42%;
        border-radius: 999px;
    }

    input[type="submit"],
    input[type="button"] {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 999px;
        box-sizing: border-box;
    }

    dd {
        word-wrap: break-word;
    }

/*-------- 03-12. フッター --------*/

    #footer .content {
        padding-top: 0;
    }

    /* TOPへ戻るボタンを追従表示に */
    #btn_pagetop {
        position: fixed;
        top: auto;
        right: 14px;
        bottom: 16px;
        z-index: 70;
        opacity: .9;
    }

    #btn_pagetop img {
        width: 46px;
        height: auto;
        border-radius: 50%;
        box-shadow: 0 6px 16px rgba(0, 60, 88, .25);
    }

    #copyright {
        padding: 16px;
        background: -webkit-linear-gradient(left, #0089c2, #00b4dd);
        background: linear-gradient(90deg, #0089c2, #00b4dd);
        font-size: 11px;
        letter-spacing: .04em;
        line-height: 1.6;
    }

/*-------- 03-13. スクロール表示アニメーション --------*/

    .fx {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .6s ease, transform .6s cubic-bezier(.2, .9, .3, 1);
    }

    .fx.is-shown {
        opacity: 1;
        transform: translateY(0);
    }

}


/*-------------------------------------------
04. 小型スマートフォン（〜380px）
-------------------------------------------*/

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

    #header h1 img {
        height: 32px;
    }

    #container,
    #container.content {
        padding: 80px 13px 44px;
    }

    .content {
        padding: 0 13px;
    }

    #visual {
        margin: -13px -13px 24px;
    }

    .section_menu h2 {
        margin-left: -13px;
        margin-right: -13px;
    }

}