@charset "utf-8";

html {
    /* どの人でも見れる標準なフォントサイズをあらかじめ指定しておく */
    font-size: 62.5%;
}

body {
    /* font-family: "Noto Sans JP", sans-serif; */
    font-family: "Noto Sans JP", serif;
    font-size: 2.2rem;
    color: #151515;
    background-color: var(--brand-page-bg);
    letter-spacing: 0.1em;
    height: 100%;
    margin: 0;
}

/* Noto Sans JP のcssスタイル */
.noto_div {
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

/* Noto Sans JP のcssスタイル */
.shippori_div {
    font-family: "Noto Sans JP", serif;
    font-weight: 400;
    font-style: normal;
}

/* roboto condensed のcssスタイル */
.roboto_condensed_div {
    font-family: "Roboto Condensed", serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

/* ヘッダーここから */
.hero_container {
    position: relative;
    width: 100%;
    height: 100vh;
    color: #fff;
    overflow: hidden;
}

#background_img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: url("/img/samson-ZGjbiukp_-A-unsplash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #fff;
}

#background_img.vegas-container,
#background_img .vegas-slide,
#background_img .vegas-slide-inner {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}

#background_img .vegas-slide-inner {
    background-size: cover !important;
    background-position: center center !important;
}

.hero_container > .overlay,
.hero_container > .catch_copy_area,
.hero_container > .scrolldown1 {
    position: absolute;
    z-index: 5;
}

.hero_container > .overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero_container > .catch_copy_area {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.hero_container > .scrolldown1 {
    left: 50%;
    bottom: 10px;
    z-index: 10;
}

img {
    max-width: 100%;
    height: auto;
    /* width: 100%; */
    /* max-width: 1920px; */
    vertical-align: bottom;
}

/* 背景画像のオーバーレイ */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.header_area {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    /* background-color: rgba(255, 255, 255, 0.2); */
}

.header_inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    height: 160px;
    align-items: center;
    letter-spacing: 0.1em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* ハンバーガーメニュー */
.toggle_menu_button {
    display: none;
}

.header_logo {
    display: block;
    width: 200px;
    transition: all 0.2s ease;
}

.header_logo:hover {
    opacity: 0.6;
}

.header_site_menu {
    margin-left: 26%;
}

.header_site_menu ul {
    display: flex;
}

.header_site_menu ul li {
    padding: 0 14px;
}

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

.header_language a {
    font-size: 1.4rem;
}

.catch_copy_area {
    width: 100%;
    max-width: 1200px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.main_catch {
    font-size: 6.8rem;
    letter-spacing: 0.08em;
    font-style: italic
}

.sub_catch {
    font-size: 4.8rem;
    line-height: 2.3;
    letter-spacing: 0.1em;
}

.top_text {
    line-height: 2;
    letter-spacing: 0.1rem;
    margin-top: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}


/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1 {
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    left: 50%;
    bottom: 10px;
    /*全体の高さ*/
    height: 50px;
    z-index: 10;
}

/*Scrollテキストの描写*/
.scrolldown1 span {
    /*描画位置*/
    position: absolute;
    left: -15px;
    top: -15px;
    /*テキストの形状*/
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 0;
    /*線の形状*/
    width: 1px;
    height: 30px;
    background: #fff;
    /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: pathmove 1.4s ease-in-out infinite;
    opacity: 0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
    0% {
        height: 0;
        top: 0;
        opacity: 0;
    }

    30% {
        height: 30px;
        opacity: 1;
    }

    100% {
        height: 0;
        top: 50px;
        opacity: 0;
    }
}

/* ヘッダーここまで */



/* メインここから */
.bg_color {

    /* background-color: var(--brand-light-blue);
    background-image: linear-gradient(160deg, var(--brand-light-blue) 0%, #80D0C7 100%); */

    background-color: var(--brand-light-blue);
    background-image: linear-gradient(180deg, var(--brand-light-blue) 0%, var(--brand-mint) 100%);

}

#container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 60px 0;
}

/* .about,
.news,
.service {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
} */


.about_title {
    font-size: 4rem;
    color: #fff;
    text-align: center;
    padding-top: 80px;
}

.about_text {
    color: #fff;
    text-align: center;
    line-height: 2;
    letter-spacing: .2em;
    padding-top: 40px;
    padding-bottom: 60px;
}

/* ニュース */
.section_title {
    font-family: "Noto Sans JP", sans-serif;
    display: inline-block;
    font-size: 5rem;
    text-align: center;
    border-bottom: solid 6px var(--brand-emerald);
    padding-bottom: 6px;
    margin-bottom: 20px;
}

/* ゴリゴリコードのニュース記事でよく見るレイアウトをコーディング ここから*/
.news_item {
    display: flex;
    padding-bottom: 4px;
    padding: 30px 0 12px;
    position: relative;
    border-bottom: 1px solid #D3D3D3;
    /* 初期の薄い灰色の線 */
}

/* マウスホバーで下線が左から右に伸びる */
.news_item::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--brand-emerald);
    /* ホバー時に変化する青い線 */
    transition: width 0.4s ease;
    /* 幅の変化をスムーズにする */
}

.news_item:hover::after {
    width: 100%;
    /* ホバー時に左から右へ幅を100%に伸ばす */
}

.news_item:hover {
    color: var(--brand-emerald);
}

.news_head {
    display: flex;
    align-items: center;
    width: 200px;
}

.news_date {
    font-size: 1.8rem;
    /* color: #8e8e8e; */
    color: #000;
    letter-spacing: 0.1rem;
    width: 110px;
}

.news_label a {
    font-size: 1.4rem;
    color: #fff;
    display: block;
    width: 90px;
    height: 32px;
    line-height: 32px;
    font-weight: 500;
    text-align: center;
    background-color: var(--brand-emerald);
    border-radius: 25px;
}

.news_title {
    font-size: 2rem;
    width: calc(100% - 200px);
    padding-left: 30px;
    padding-top: 3px;
    line-height: 1.5;
}


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

    .news-item {
        display: block;
    }

    .news-title {
        width: 100%;
        padding-left: 0;
        padding-top: 0;
        margin-top: 10px;
    }
}

/* ゴリゴリコードのニュース記事でよく見るレイアウトをコーディング ここまで*/


/* ボタン右側バージョン ここから*/
.view_all_area {
    margin-top: 40px;
    text-align: right;
}

/*ボタンの形状*/
.view_all_btn {
    border: 1px solid var(--brand-emerald);
    padding: 10px 30px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: var(--brand-emerald);
    outline: none;
    /*アニメーションの指定*/
    transition: all .2s linear;
    font-weight: 800;
    border-radius: 24px;
}

.view_all_btn:hover {
    background: var(--brand-emerald);
    color: #fff;
}

.white_btn {
    border: 1px solid #fff;
    color: #fff;
}

/* ボタン右側バージョン ここまで*/


/* サービス エニートーク */
.bg_color_02 {
    background-color: rgba(126, 209, 215, 0.2);
    padding: 60px 0;
}

.service_title_inner {
    max-width: 1080px;
    margin: 0 auto;
    padding-bottom: 40px;
    /* justify-content: space-between; */
    gap: 60px;
    align-items: center;
}

.service_title_inner p {
    font-size: 2.4rem;
    letter-spacing: 0.2em;
    padding: 10px 0;
}

.service_anytalk {
    max-width: 1280px;
    margin: 0 auto;

    background-color: var(--brand-light-blue);
    background-image: linear-gradient(180deg, var(--brand-light-blue) 0%, var(--brand-mint) 100%);

    border-radius: 16px;
}

.anytalk_area {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.title_01_inner {
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
}

.title_01_inner h1 {
    font-size: 4.6rem;
    padding: 40px 0;
    letter-spacing: 0;
}

.subtitle_01 {
    font-size: 3.6rem;
    padding-left: 10px;
}

.anytalk_text_01,
.anytalk_text_02 {
    font-size: 2rem;
    line-height: 1.7;
    letter-spacing: 0.12em;
    padding-bottom: 24px;
}

.anytalk_img {
    width: 60%;
    object-fit: cover;
    border-radius: 16px;
}

.view_all_area_02 {
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 40px;
    text-align: end;
}



/* 表示されていないサービス */
.service {
    padding-top: 100px;
}

.service_item {
    display: flex;
    justify-content: space-between;
    padding: 50px 0 12px;
}

.service_item li {
    width: 300px;
    height: 280px;
    position: relative;
    overflow: hidden;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

}

.service_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease-in-out;
    z-index: 0;
    /* 背景画像のz-indexを0に設定 */
}

.service_item_01 .service_img {
    background-image: url(../img/google-deepmind-LIlsk-UFVxk-unsplash.jpg);
}

.service_item_02 .service_img {
    background-image: url(../img/sam-moghadam-khamseh-baII27W6z7k-unsplash.jpg);
}

.service_item_03 .service_img {
    background-image: url(../img/google-deepmind-mDPMZYyQuIQ-unsplash.jpg);
}


/* この場合overlayが画像の上に重なっているため、.service_imgをホバーしても効かないので
.service_itemのliにホバーさせて、その中にある.service_imgの画像を拡大する。 */
.service_item li:hover .service_img {
    transform: scale(1.1);
}

.service_img:hover {
    transform: scale(1.1);
}

.service_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.5s ease-in-out;
    z-index: 1;
    /* オーバーレイのz-indexを1に設定 */
}

.service_item li:hover .service_overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

.service_txt_01,
.service_txt_02,
.service_txt_03 {
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    z-index: 2;
    /* テキストのz-indexを2に設定 */
}

.service_txt_01 {
    position: absolute;
    top: 46%;
    left: 22%;
}

.service_txt_02 {
    position: absolute;
    top: 46%;
    left: 18%;
}

.service_txt_03 {
    position: absolute;
    top: 46%;
    left: 11%;
}

/* メインここまで */



/* フッターここから */

/* コンタクト */
.footer_contact {
    text-align: center;
}

.footer_contact_lead {
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.2em;
    margin: 40px 0;
}

/* ボタン真ん中バージョン */
.view_all_btn_center {
    border: none;
    font-size: 2.4rem;
    padding: 24px 90px;
    border-radius: 40px;
    background-color: var(--brand-emerald);
    color: #fff;
}

.view_all_btn_center:hover {
    background-color: var(--brand-gold);
}

/* フッターの詳細 */
.footer_container {
    background-color: var(--brand-light-blue);
    background-image: linear-gradient(180deg, var(--brand-light-blue) 0%, var(--brand-aqua) 100%);

    border-top-left-radius: 6rem;
    border-top-right-radius: 6rem;
    color: #fff;
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    position: relative;
}

.footer_detail {
    padding-top: 40px;
    display: flex;
    justify-content: center;
}

.footer_detail_company {
    font-size: 2rem;
    line-height: 2;
    padding-right: 20px;
}

.company_name {
    font-size: 2.4rem;
    font-weight: 500;
}

.company_address {
    font-size: 1.8rem;
    font-weight: 300;
}

.company_tel {
    padding-top: 30px;
}


/* フッターのナビゲーション */
.footer_nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 20px;
}

.footer_logo {
    display: block;
    width: 200px;
}

.footer_site_menu {
    padding-top: 40px;
}

.footer_site_menu ul {
    display: flex;
}

.footer_site_menu ul li {
    padding: 0 12px;
}

.footer_site_menu a {
    font-size: 1.8rem;
    padding-bottom: 4px;
    transition: all 0.2s;
}

.footer_site_menu a:hover {
    color: var(--brand-gold);
}


/* プライバシーポリシー */
.policy {
    font-size: 1.6rem;
    padding-top: 20px;
    transition: all 0.2s;
}

.policy:hover {
    color: var(--brand-gold);
}

hr {
    width: 860px;
    margin: 0 auto;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #D3D3D3;
}

.footer_bottom_p {
    padding-top: 20px;
    padding-bottom: 100px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 300;
}

/* ページトップに戻るアイコン ここから */
.page_top {
    box-sizing: border-box;
    position: fixed;
    right: 45px;
    bottom: 75px;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 60px;
    height: 60px;
    border: 2px solid var(--brand-page-bg);
    border-radius: 50%;
    background-color: var(--brand-emerald);
    transition: .3s ease-in-out;
}

.page_top::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 20px;
    height: 20px;
    border-top: 2px solid var(--brand-page-bg);
    border-right: 2px solid var(--brand-page-bg);
    transform: rotate(-45deg);
    left: 17px;
    bottom: 10px;
}

/* ページトップに戻るアイコン ここまで */


/* ページトップに戻るアイコン マウスホバーで色が変わる */
.page_top:hover {
    background-color: var(--brand-gold);
}

/* フッターここまで */

/* ===== 2026 homepage polish ===== */
.about {
    max-width: 980px;
    margin: 0 auto;
}

.about_title {
    line-height: 1.45;
    letter-spacing: 0;
}

.about_text {
    max-width: 920px;
    margin: 0 auto;
    padding-top: 34px;
    padding-bottom: 40px;
    font-size: 1.65rem;
    line-height: 2.05;
    letter-spacing: 0;
}

.about_text span,
.anytalk_text_02 span {
    display: block;
}

.about_ai_panel {
    max-width: 920px;
    margin: 0 auto;
    color: #fff;
}

.about_ai_intro {
    text-align: center;
    margin-bottom: 22px;
}

.about_ai_intro span {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.72);
    padding-bottom: 6px;
}

.about_ai_intro p {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.5rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0;
}

.about_ai_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.about_ai_card {
    min-height: 188px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(4px);
}

.about_ai_card h3 {
    margin-bottom: 12px;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0;
}

.about_ai_card p {
    font-size: 1.45rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0;
}

.view_all_area,
.view_all_area_02,
.view_all_area_centered {
    text-align: center;
}

.view_all_btn {
    min-width: 160px;
    border-color: var(--brand-cyan);
    color: var(--brand-cyan);
    letter-spacing: 0;
}

.view_all_btn:hover {
    background: var(--brand-cyan);
    border-color: var(--brand-cyan);
}

.white_btn {
    border-color: #fff;
    color: #fff;
}

.home_news_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 28px;
}

.home_news_card {
    min-height: 100%;
    border: 1px solid #e3edf2;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 101, 127, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.home_news_card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 168, 212, 0.38);
    box-shadow: 0 18px 36px rgba(0, 101, 127, 0.12);
}

.home_news_card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.home_news_card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #eaf7fa;
}

.home_news_body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px;
}

.home_news_body .news_head {
    width: 100%;
    gap: 10px;
    margin-bottom: 12px;
}

.home_news_body .news_date {
    width: auto;
    font-size: 1.25rem;
    color: #5e6a80;
    letter-spacing: 0;
    white-space: nowrap;
}

.home_news_body .news_label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--brand-cyan);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0;
}

.home_news_body h3 {
    margin-bottom: 10px;
    color: var(--brand-navy);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.55;
    letter-spacing: 0;
}

.home_news_body p {
    margin: 0;
    color: #4f5b70;
    font-size: 1.35rem;
    line-height: 1.75;
    letter-spacing: 0;
}

.no_news,
.loading {
    text-align: center;
    color: #4f5b70;
    font-size: 1.5rem;
    letter-spacing: 0;
}

.bg_color_02 {
    background: linear-gradient(180deg, rgba(226, 248, 252, 0.88) 0%, rgba(241, 253, 255, 0.98) 100%);
}

.service_title_inner {
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
}

.service_title_inner p {
    font-size: 1.65rem;
    line-height: 1.8;
    letter-spacing: 0;
}

.service_anytalk {
    max-width: 1120px;
    border-radius: 8px;
    box-shadow: 0 18px 36px rgba(0, 101, 127, 0.1);
}

.anytalk_area {
    padding: 46px 40px;
    align-items: center;
}

.title_01_inner {
    flex: 1 1 48%;
}

.title_01_inner h1 {
    padding: 0 0 22px;
    font-size: 4rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.subtitle_01 {
    display: block;
    padding-left: 0;
    padding-top: 6px;
    font-size: 2.4rem;
    font-weight: 600;
}

.anytalk_text_01,
.anytalk_text_02 {
    max-width: 560px;
    padding-bottom: 18px;
    font-size: 1.6rem;
    line-height: 1.9;
    letter-spacing: 0;
}

.anytalk_text_01 {
    font-weight: 800;
}

.anytalk_img {
    width: 46%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 8px;
}

.home_service_scroll {
    max-width: 1120px;
    margin: 30px auto 0;
    padding: 8px 20px 18px;
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--brand-cyan) rgba(0, 168, 212, 0.14);
}

.home_service_card {
    flex: 0 0 300px;
    min-height: 420px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border: 1px solid #d8e9ef;
    border-radius: 8px;
    background: #fff;
    color: var(--brand-navy);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0, 101, 127, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.home_service_card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 168, 212, 0.42);
    box-shadow: 0 18px 36px rgba(0, 101, 127, 0.13);
}

.home_service_card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #eaf7fa;
}

.home_service_num {
    width: fit-content;
    margin: 18px 20px 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 168, 212, 0.1);
    color: var(--brand-cyan);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0;
}

.home_service_card h3 {
    min-height: 58px;
    margin: 0 20px 10px;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0;
}

.home_service_card p {
    margin: 0 20px 22px;
    color: #4f5b70;
    font-size: 1.35rem;
    line-height: 1.75;
    letter-spacing: 0;
}

@media (max-width: 900px) {
    #container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .about_title {
        font-size: 3rem;
    }

    .about_ai_grid,
    .home_news_grid {
        grid-template-columns: 1fr;
    }

    .anytalk_area {
        flex-direction: column;
        padding: 36px 24px;
    }

    .anytalk_img {
        width: 100%;
    }

    .home_service_card {
        flex-basis: 82vw;
        min-height: 390px;
    }
}

@media (max-width: 520px) {
    .about_text {
        font-size: 1.45rem;
        line-height: 1.95;
    }

    .about_ai_card {
        padding: 20px;
    }

    .title_01_inner h1 {
        font-size: 3.2rem;
    }

    .subtitle_01 {
        font-size: 2rem;
    }
}

/* ===== Hero typography & layout — mobile ===== */
@media (max-width: 880px) {
    .catch_copy_area {
        width: 92%;
        max-width: 92%;
        text-align: center;
        padding: 0 8px;
    }

    .main_catch {
        font-size: 3.8rem;
        line-height: 1.15;
        letter-spacing: 0.04em;
    }

    .sub_catch {
        font-size: 2rem;
        line-height: 1.5;
        letter-spacing: 0.06em;
        margin-top: 12px;
    }

    .hero_container {
        height: 86vh;
        min-height: 480px;
    }

    #background_img {
        height: 86vh;
        min-height: 480px;
    }
}

@media (max-width: 520px) {
    .main_catch {
        font-size: 3rem;
    }

    .sub_catch {
        font-size: 1.7rem;
    }

    .hero_container {
        height: 78vh;
        min-height: 440px;
    }

    #background_img {
        height: 78vh;
        min-height: 440px;
    }

    .scrolldown1 {
        display: none;
    }
}