/* 基本スタイルリセット */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
    scroll-behavior: smooth;
}
body, html {
    margin: 0;
    padding: 0;
   /* overflow-x: hidden; /* 万が一のはみ出しによる横揺れを防止 */
}

/*
#app{
    overflow-x: hidden; 
}
    */
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    overflow-x: hidden; /* 背景色が横にはみ出さないように */
}

/* レイアウト共通設定 */
section, footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
/*    border-bottom: 1px solid #eee;*/
/*    overflow: hidden;*/
    overflow: visible !important;
}

.section-title{

}
.white{
    color: #fff;
}

/* コンテンツの最大幅を1224pxに制限 */
.container {
    width: 100%;
/*    max-width: 1224px;*/
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative; /* 子要素の配置の基準 */
    z-index: 10; /* コンテンツが背景より上にくるように */
    padding-bottom: 55px;
/*    background: #FFC107;*/
}

.container_Inner{
    display: flex;
}

h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
    margin-top: 50px;
    color: #002D5B;
}


/* --- 各セクション固有の高さ設定 --- */



/* About Service */
.about { height: 700px; background-color: #ffffff; }

/* 導入実績 */
.cases { 
    min-height: 700px; 
    background-color: #f0f4f8; 
    padding-top: 130px;
}

/* Price Plan */
.price { 
    background-color: #E5F0FF; 
    padding-top: 70px;
}

.PR{
    height: 500px; 
    
    background: 
        url('./img/CTA_background_circle.png') no-repeat center / cover,
        linear-gradient(180deg, #27C0EF 0%, #00A8DB 100%);

    background-color: #09BDDD; 
    padding-top: 50px;
}
.pr_text{
    width: 520px;
color: #002D5B;
text-align: center;
font-family: "Noto Sans JP";
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 52px; /* 185.714% */
letter-spacing: -0.5px;
}

/* --- 1. CTA画像のコンテナ（ホバー検知用） --- */
.cta-hover-wrapper {
    position: relative; /* TIPS画像を配置する基準点 */
    display: inline-block; /* 画像のサイズに合わせる */
    width: auto;           /* 必要なら width: 100% などに */
    cursor: pointer;       /* クリックできることを示す */
    overflow: visible;     /* TIPS画像がはみ出せるように */
}

.cta-wrapper {
    position: relative;
    display: inline-block; /* 画像のサイズに合わせる */
    margin-top: 50px;      /* 吹き出しが上にはみ出す分の余白 */
    width: 484px;
}

.cta-main-img {
    display: block;
    width: 100%; /* 親要素に合わせる */
    height: auto;
}

/* ホバー時 */
.cta-main-img:hover {
    transform: scale(1.00);
/*    content: url("./img/top_CTA_on.png");*/ /* ホバーで差し替え */
   
}

/* --- 2. 浮かせる画像（service_teian.png）の初期設定 --- */
.cta-tips-img {
position: absolute;
    
    /* 位置の調整：メイン画像の左上を基準に動かす */
    top: -40px;   /* マイナス値でメイン画像より上に飛び出させる */
    left: 50%;    /* 一旦真ん中に飛ばす */
    transform: translateX(-50%); /* 自身の幅の半分戻して中央揃え */
    
    width: 360px; /* 吹き出しのサイズ */
    z-index: 10;  /* メインより上に重ねる */
    
    opacity: 0;

}

/* --- 3. ホバー（マウスを載せた）時の動き --- */
.cta-hover-wrapper:hover .cta-tips-img {
    opacity: 1;             /* 見えるようにする */
    visibility: visible;
    /* translateY(0) にすることで、下から上にフワッと浮かぶ演出 */
    transform: translateX(-50%) translateY(0); 
}

.cta-trigger-wrapper {
    position: relative;
    display: inline-block;
    margin-top: -60px; /* 吹き出しが出るスペース */
}

.CTA_center{
    display: flex;
    justify-content: center;
    padding-bottom: 0px;
    margin-top: 55px;
    width: auto;
}
.tips-box {
    position: absolute;
    top: 115px;
    left: 50%;
    transform: translateX(-50%) translateY(20px); /* 最初は少し下に下げておく */
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); /* スッと出てピタッと止まる質感 */
    z-index: 10;
    width: 380px;
}

/* ★ 監視によってクラスがついた時のスタイル */
.tips-box.is-active {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* 本来の位置へ浮上 */
}

.tips-box img{
    width: 100%;
    height: auto;
    display: block;
}

.main-cta img {
    width: 484px;
    display: block;
    margin-top: 160px;
}

.online-section{
    height: 700px; 
    background-color: #09BDDD; 
}
/* How It Works */
.how-it-works { height: 500px; background-color: #e9ecef; }

/* FAQ */
.faq { height: 800px; background-color: #ffffff; }

/* Footer */
footer {
    height: 500px; 
    background: var(--color-azure-11, #0A192F);
    color: #fff; border: none; 
}

/* =========================================
   1. ローディング演出 (cube2.png回転)
========================================= */
.loading-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #fff; /* ローディング中は白 */
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; /* 最前面 */
    transition: opacity 1s ease; /* フェードアウト用 */
}

/* 3秒後のフェードアウト用クラス */
.loading-overlay.is-fading-out {
    opacity: 0;
    pointer-events: none; /* クリックなどを透過 */
}

.loader-image {
    width: 80px; height: auto;
    animation: spin 2s linear infinite; /* 車輪のような回転 */
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =========================================
   2. Heroセクション演出
========================================= */
/*
.hero {
    height: 750px;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}
*/
/* アイキャッチ */
/*
.hero {
    height: 750px;
    position: relative;
    overflow: hidden;
}
*/

.hero {
    position: relative;
    width: 100%;
    height: 60vh;
/*    overflow: hidden;*/
    overflow: visible !important;
    background-color: #fff; /* 最初は白（または画像が見える状態） */
    
    
    
    
    background-repeat: no-repeat;  /* 一枚だけ表示（繰り返さない） */
    background-position: center;   /* 中央に配置 */
    background-size: contain;      /* 要素に収まるように表示（全体を見せたい場合） */
    
    /* もし背景を画面いっぱいに広げたい場合は cover を使います */
    /* background-size: cover; */

    /* コンテンツを中央に寄せるための設定（必要に応じて） */
    display: flex;
    justify-content: center;
    align-items: center;

}

/* ★追加：青い円のレイヤー */
.hero-blue-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 単色の background-color から グラデーション(background) に変更 */
    background: linear-gradient(180deg, #27C0EF 0%, #00A8DB 100%);
    background: 
        url('./img/TOP_background_circle.png') no-repeat center / auto,
        linear-gradient(180deg, #27C0EF 0%, #00A8DB 100%);


    z-index: 1; 
    
    /* 最初は中心の一点（0%） */
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 2.5s cubic-bezier(0.65, 0, 0.35, 1);
}

/* step 3 になったら円を全開にする */
.is-circle-active .hero-blue-overlay {
    clip-path: circle(150% at 50% 50%);
}

/* step 2 で発火：背景色が広がる */
.hero.is-bg-active::before {
/*    transform: translateY(0) scaleX(1);*/
    transform: scale(1);
}

/* step 2 (画像表示フェーズ) で一斉に表示 */
.is-bg-active .years-img,
.is-bg-active .top-msg-image,
.hero-right.is-visible {
    opacity: 1;
}


/* --- メッセージ画像 (top_msg.png) のフェードイン --- */
.hero-container {
/*    max-width: 1364px;*/
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: flex;
    position: relative; /* 子要素の絶対配置の基準 */
    height: 500px; /* 必要に応じて調整 */
    z-index: 5; /* 青い円（z-index: 1）より前に出す */
}


/* --- コンテナの設定（左側の位置を決める） --- */
.hero-inner {
    max-width: 1224px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
}


/* 左右それぞれのブロックを50%に */
.hero-left, .hero-right {
    flex: 1; /* 均等に50%ずつ */
    width: 50%;
}

/* --- 左側：画像の調整 --- */
.hero-left {
    flex: 0 0 40%;
    z-index: 20;
    text-align: center;
    padding: 0px 4%;
    margin-left: 7%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* --- 右側：ここがポイント！ --- */
.hero-right-outer {
    position: absolute;
    top: 0;
    /* コンテナの左から45%の位置から開始し、ブラウザの右端(100%)まで広げる */
    left: 45%; 
    right: 0;
    width: auto;
    height: 100%;
    z-index: 10;
}

.hero-right-sticky {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end; /* 下にはみ出させるために下揃え */
}

.top-msg-image {
    max-width: 80%;
    height: auto;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* step 1 で発火：メッセージ画像が表示 */
.top-msg-image.is-visible {
    opacity: 1;
    transform: translateY(0);
    display: block !important;
}


/*転がる四角*/
.rolling-container {
    width: 200px;  /* キューブのサイズに合わせて調整 */
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 9999; /* 最前面に */
}

.rolling-container img {
    width: 150px;
    position: absolute; /* 5枚を同じ位置に重ねる */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    height: auto;
    opacity: 0;         /* 基本は消しておく */
    visibility: hidden;
    transition: opacity 0.4s ease; /* 切り替わりを滑らかに */
}

/* 表示対象の画像だけ見えるようにする */
.rolling-container img.is-active {
    opacity: 1;
    visibility: visible; /* アクティブな時だけ表示 */
}


/*Menu*/
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 90px;
    background: rgba(255, 255, 255, 0.95); /* 背後が少し透ける白 */
    backdrop-filter: blur(5px); /* ぼかしを入れると高級感が出ます */
    z-index: 1000; /* 全ての演出より最前面に */
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    opacity: 0;
    transform: translateY(-20px); /* 上からふわっと出す場合 */
    transition: opacity 0.8s ease, transform 0.8s ease;

}
/* step >= 3 で表示 */
.main-header.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 背景の青い丸（is-circle-active）のtransitionに遅延を入れるとさらに綺麗です */
.is-circle-active .hero-blue-overlay {
    /* ダッシュボードが出てから少し遅れて丸が広がるようにする場合 */
    transition-delay: 0.5s; 
}

.header-container {
    width: 100%;
    /*max-width: 1400px;*/
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* ナビ項目を右側に寄せる */
}

.header-nav {
    display: flex;
    justify-content: space-between; /* ロゴとメニューとボタンを分散 */
    align-items: center;            /* ★これが最重要！中身を垂直中央に揃えます */
    height: 100%;                   /* ヘッダーの高さ一杯に広げる */
    padding: 0 20px;                /* 左右の余白（必要に応じて） */
    width: 1600px;
    margin: auto;
}

/* 4. 下のコンテンツがヘッダーに隠れないようにする */
#app {
    padding-top: 90px;    /* ヘッダーの高さ分、全体を下げる */
}

.nav-item {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.3s;
}

.nav-item:hover {
    color: #005bac;
}

/* 問い合わせボタン画像 */
.btn-image_top {
    width: 345px;
    transition: transform 0.2s;
    content: url("./img/top_CTA1.png"); /* 初期画像を指定 */
}

/* ホバー時 */
.btn-image_top:hover {
    transform: scale(1.00);
    content: url("./img/top_CTA2.png"); /* ホバーで差し替え */
}

/* 問い合わせボタン画像 */
.btn-image {
    height: 45px;
    width: auto;
    transition: transform 0.2s;
}
.btn-image:hover {
    transform: scale(1.05);
}

.header-logo{
    display: flex;
    flex-direction: column;
}
/* 一番右のロゴ */
.header-logo img {
    height: 26px;
    width: auto;
}

.header_sien br{
    display: none;
}

/* ヒーローセクションの開始位置調整 */
.hero {
    padding-top: 80px; /* ヘッダーの高さ分、コンテンツを下げる */
}
/**/

.ourapp_title1_sp,.ourapp_title2_sp{
    display: none;
}
.ourapp_title1{
    font-size: 120px;
    color: #fff;
    margin: 0;
    padding: 0;
    text-align: left;
    color: #FFF;
    font-family: Oswald;
    font-size: 124px;
    font-style: normal;
    font-weight: 500;
    line-height: 150px; /* 120.968% */
    letter-spacing: -1.24px;
    text-transform: capitalize;

}
.ourapp_title2{
    color: #FFF;
    font-family: Oswald;
    font-size: 124px;
    font-style: normal;
    font-weight: 500;
    line-height: 150px;
    letter-spacing: -1.24px;
    margin-top: -35px;
    margin-left: 0px;
}
.ourapp_text{
    height: 400px;
    margin-top: 175px;
}

.ourapp_text > div:nth-child(1) {
    color: #242424;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-40, 40px); /* 100% */
    margin-bottom: 30px;
}
.ourapp_text > div:nth-child(2),.ourapp_text > div:nth-child(4) {
    color: #002D5B;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px; /* 208.333% */
    letter-spacing: -0.24px;
}

.ourapp_text > div:nth-child(2), .ourapp_text > div:nth-child(4) {
    display: block;
}

.ourapp_text > div:nth-child(3) {
    font-size: 27px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px; /* 185.185% */
    letter-spacing: -0.27px;
    background: linear-gradient(90deg, #23CCD5 0.09%, #81A7E7 29.27%, #A785FE 57.99%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* --- 1. 50周年ロゴ（years_img）の調整 --- */
.years-img {
    max-width: 473px; /* 記念ロゴなので、メインより小さく（適宜調整） */
    height: auto;
    
    /* 初期状態：非表示で少し上に配置 */
    opacity: 0;
    transform: translateY(-20px);
    
    /* フェードインの設定：背景が広がり始めてすぐ（0.5s後）に表示 */
    transition: opacity 1s ease-out 0.5s, transform 1s ease-out 0.5s;
    z-index: 2; /* メインメッセージより前面に */
}

/* step 2 で発火 */
.years-img.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- 2. メインメッセージ（top_msg.png）の調整 --- */
.hero-right.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- 右側：テキストの調整 --- */
.hero-right {
    position: absolute;
    top: 25px;
    /* 画面の右端（0）から、コンテナ外まで広げる魔法の計算 */
    right: calc(50% - 50vw); 
    width: 50vw; /* 画面の半分を占める */
    height: 100%;
    z-index: 1;
}
.dashboard-wrapper {
    margin-top: 13%;
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 73%;
    line-height: 0;
    margin-left: 12%;
    margin-bottom: -150px;
    z-index: 10;
}

/* --- メインのダッシュボード（下からスッと出る） --- */
.img-dashboard {
    position: relative; /* absoluteから変更して親のサイズを決定させる */
    width: 100%;
    height: auto;
    opacity: 0;
    transform: translateY(80px);
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s;
    top: -24px;
    left: -17px;

}

/* 3. 実行時：本来の位置（0）に戻る */
.is-visible .img-dashboard {
    opacity: 1;
    transform: translateY(0); 
}


/* --- チップ画像の共通設定 --- */
.img-chip {
    position: absolute;
    height: auto;
    opacity: 0;
    /* 各チップの浮き上がるアニメーション */
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 15; /* DashBoard(z-index:10程度)より上に */
}
.is-visible .img-chip {
    opacity: 1;
    transform: translate(0, 0); /* 各チップ固有の初期位置から0に戻る */
}

/* --- 各チップの個別配置とタイミング --- */

/* 左側に重なるグループ (0, 1, 2) */
.chip-0 { 
    width: 20%;
    top: -13%;
    left: 78%;
    transform: translateX(-30px);
    transition-delay: 1.4s;
}
.chip-1 {
    width: 31%;
    top: 11%;
    left: -12%;
    transform: translateX(-30px);
    transition-delay: 1.6s;
 }
.chip-2 { 
    width: 40%;
    top: 58%; 
    left: -15%; 
    transform: translateX(-30px);
     transition-delay: 1.8s; }

/* 下部に重なるグループ (3, 4) */
.chip-3 { 
    width: 46%;
    top: 63%;
    left: 30%;
    transform: translateX(-30px);
    transition-delay: 2.2s;
}
.chip-4 { 
    width: 22%; 
    top: 65%;
    right: 2%;
    transform: translateY(30px); 
    transition-delay: 2.1s; 
}


/* --- コンテンツの表示タイミング微調整 --- */
.top-msg-image, .hero-right {
    opacity: 0;
    transform: translateX(20px); /* 横への広がりに合わせて、少し右にずらしておく */
    
    /* 背景が半分くらい広がったタイミング(0.6s後)でフワッと出す */
    transition: opacity 1s ease-out 0.6s, transform 1s ease-out 0.6s;
}
/*
.hero-right.is-visible {
    opacity: 1;
    transform: translateX(130);
}
*/

/* ダッシュボードなどの表示制御 */
.hero-right, .years-img, .top-msg-image {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hero-right h2 {
    text-align: left; /* 左揃え */
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
}

.hero-right p {
    text-align: left;
    font-size: 1.1rem;
    color: #555;
}

.container_inner{
    width: 1224px;
    min-height: 300px;
    margin: auto;

    margin-top: 50px;
}
.midashi{
    font-family: "Oswald", sans-serif;
    font-size: 7vw;
    color: #fff;
}
.approach{
    display: flex; /* 横並びにする */
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: space-between; /* 左右に隙間を空けて配置 */

    /* コンテンツを中央の1224px内に収める場合 */
    max-width: 1224px;
    margin: 0 auto;
    padding: 0px 40px; /* 上下の余白 */
   /* gap: 60px;*/ /* 左右の要素の間の距離 */ 
}

.dounyu{
    background: #007aff;
}
.donyuboxes{
    display: flex;
    width: 1240px;
    margin: auto;
    margin-top: 50px;
    flex-direction: column;
}
.donyubox{
   width: 100%;
/*   height: 730px;*/
    margin-bottom: 70px;
    position: relative;
}

.donyu_space_sp {
    display: block;
}

.donyubox_up{
   height: 270px;
   background: #F6F6F6;
   display: flex;
    border-radius: 0 0px 10px 10px;
}

.bigNumLine{
    display: block;
}
.donyuReiText{
    display: block;
}
.upLeftNum{
    color: #242424;
    font-family: Oswald;
    font-size: 95px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-16, 16px); /* 16.842% */
    letter-spacing: var(--letter-spacing-1_2, 1.2px);
    text-transform: uppercase;
}
.upLeft {
    width: 55%;            /* 横幅50% */
    padding-right: 20px;   /* 右側に少し余白（画像との間隔） */
    box-sizing: border-box; /* パディングを含めて50%に計算する */
    margin-left: 60px;
    display: flex;
    flex-wrap: wrap; /* 子要素が100%を超えたら改行させる */
    height: 220px;
}

/* 上段の左半分 */
.upLeftLeft {
    width: 45%;
    box-sizing: border-box;
    padding-right: 10px; /* 右側に少し余白 */
}

/* 上段の右半分 */
.upLeftRight {
    width: 55%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end; /* 右寄せにする場合 */
    align-items: flex-start;       /* 上下中央揃え */
}

/* 下段（100%） */
.upLeftDw {
    width: 100%;
    box-sizing: border-box;
    margin-top: 15px; /* 上段との間に少し隙間を作る */
}
/* 下段（100%） */
.upLeftDw {
    width: 100%;
    box-sizing: border-box;
    margin-top: 15px; /* 上段との間に少し隙間を作る */
    color: #002D5B;
    line-height: 29px;
}
.upLeftDwText{
    color: #002D5B;
    line-height: 29px;
}
.upLeftDwTextBold{
    color: #002D5B;
    font-weight: bold;
}

.upLeftDwTextBold_purpule{
    background: linear-gradient(transparent 60%, #F1E4FF 60%);
}
.upLeftDwTextBold_blue{
    background: linear-gradient(transparent 60%, #D3EDFD 60%);
}
.upLeftDwTextBold_green{
    background: linear-gradient(transparent 60%, #CFF8EB 60%);
}

.upLeftDwTextBold_purpule_text{
    color: #A74EFF;
    font-weight: bold;
}
.upLeftDwTextBold_blue_text{
    color: #0C87F0;
    font-weight: bold;
}
.upLeftDwTextBold_green_text{
    color: #009566;
    font-weight: bold;
}

.btn-image_logo_pc{
    display: block;
}


.upRight {
    width: 50%;            /* 横幅50% */
    box-sizing: border-box;
    text-align: right;
}
.upRight img{
    width: 535px;
    right: 0;
    position: absolute;
}
.bigNumLine{
    height: 150px;
    background: #F6F6F6;
    padding-top: 50px;
    padding-left: 60px;
    display: flex;
    border-radius: 10px 10px 0px 0px;
}
.bigNumLineTitle{
    display: block;
    font-size: 20px;
    margin-left: 50px;
    margin-top: auto;
    margin-bottom: 40px;
}

.bigNumLineTitle br{
    display: none;
}
/*
.donyubox_dw{
    height: 230px;
    background: #fff; 
    display: flex;
    width: 90%;
    margin: auto;
    margin-top: 30px;
}
*/
.donyuTitle{
    font-size: 24px;
}
.donyuReiTitle{
    color: #002D5B;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 80% */
}
.donyuReiText{
color: #002D5B;
    text-align: justify;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
    margin-top: 20px;
}
.donyu-sien{
    background: #000;
    color: #fff;
    height: auto;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 0 5px;
    font-size: 14px;
    padding: 0 8px;
    height: 100%;       /* 親（27px）いっぱいに高さを取る */
    display: flex;
    align-items: center; /* 文字を高さ中央に */
    
}
.kazenBox01{
    width: 122px;
    height: 97px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    box-sizing: border-box;
    padding: 0px 3px;
}
.kazenBox_purple{
    background: linear-gradient(180deg, #A74EFF 0%, #7F00FF 100%);
}
.kazenBox_blue{
    background: linear-gradient(90deg, #34B3FF 0%, #0C87F0 100%);
    margin-left: 10px;
}
.kazenBox_green{
    background: linear-gradient(90deg, #00BA7F 0%, #00B115 100%);
    margin-left: 10px;
}
/* 上段：業務工数 */
.kazenTitle {
    font-size: 11px;
    font-weight: normal;
    margin: 0;
    padding-bottom: 5px;
    width: 100%;
    text-align: center;
    /* 白い線 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.6); 
}

/* 下段：数字とテキストのエリア */
.kazenContent {
    display: flex;
    align-items: baseline; /* 数字と文字の底辺を揃える */
    margin-top: 5px;
}

/* 数字部分（70） */
.kazenBoxNum {
    font-size: 48px; /* 画像に合わせた大きなサイズ */
    font-weight: 500;
    line-height: 1;
}

/* 単位部分（%削減） */
.kazenUnit {
    font-size: 14px;
    font-weight: bold;
    margin-left: 2px;
    white-space: nowrap; /* 改行防止 */
}

.donyubox_bottom{
    display: flex;
    width: 90%;
    margin: auto;
    align-items: center; /* 子要素同士の「高さ中央」を揃える */
    gap: 20px;           /* バッジと対応範囲の間の距離 */
    margin-top: 15px;
}


/* 対応範囲のラッパー */
.taiohani {
    display: flex;
    align-items: center; /* 中のテキストとアイコンの「高さ中央」を揃える */
    gap: 10px;           /* 各項目（対応範囲、業務設計...）の間の隙間 */
    height: 27px;        /* バッジの高さ(27px)に合わせる */
    margin-left: 63px;
}
.donyuTitle1{
    display: inline-flex;
    align-items: center; /* アイコンと文字を上下中央で揃える */
    gap: 8px;           /* アイコンと文字の間の隙間 */
    font-weight: bold;
    font-size: 24px;
}
.donyuTitle1::before {
    content: "";
    display: inline-block;
    
    /* 画像のサイズに合わせて数値を調整してください */
    width: 24px;  
    height: 24px;
    
    background-image: url("./img/donyuTitle1.png");
    background-size: contain;    /* 枠内に画像を収める */
    background-repeat: no-repeat;
    background-position: center;
}

.donyuTitle2{
    display: inline-flex;
    align-items: center; /* アイコンと文字を上下中央で揃える */
    gap: 8px;           /* アイコンと文字の間の隙間 */
    font-weight: bold;
    font-size: 24px;
}
.donyuTitle2::before {
    content: "";
    display: inline-block;
    
    /* 画像のサイズに合わせて数値を調整してください */
    width: 24px;  
    height: 24px;
    
    background-image: url("./img/donyuTitle2.png");
    background-size: contain;    /* 枠内に画像を収める */
    background-repeat: no-repeat;
    background-position: center;
}
.donyuTitle3{
    display: inline-flex;
    align-items: center; /* アイコンと文字を上下中央で揃える */
    gap: 8px;           /* アイコンと文字の間の隙間 */
    font-weight: bold;
    font-size: 24px;
}
.donyuTitle3::before {
    content: "";
    display: inline-block;
    
    /* 画像のサイズに合わせて数値を調整してください */
    width: 24px;  
    height: 24px;
    
    background-image: url("./img/donyuTitle3.png");
    background-size: contain;    /* 枠内に画像を収める */
    background-repeat: no-repeat;
    background-position: center;
}


.icon-taio {
    display: inline-flex;
    align-items: center; /* アイコンと文字を上下中央で揃える */
    gap: 8px;           /* アイコンと文字の間の隙間 */
    font-weight: bold;
    color: #242424;
    font-family: "Noto Sans JP";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 27px; /* 112.5% */
}

.icon-taio::before {
    content: "";
    display: inline-block;
    
    /* 画像のサイズに合わせて数値を調整してください */
    width: 24px;  
    height: 24px;
    
    background-image: url("./img/icon_taio.png");
    background-size: contain;    /* 枠内に画像を収める */
    background-repeat: no-repeat;
    background-position: center;
}


.donyu_text{
    color: #242424;
    font-size: 24px;
    font-weight: bold;
}
.donyu_text2{
    margin-top: 20px;
}
.dev-period-badge {
    /* サイズと配置 */
    width: 333px;
    height: 62px;
    display: flex;

    align-items: center;
    justify-content: center;
    position: relative; /* 三角形の基準点 */
    
    /* 背景グラデーションと角丸 */
   /* background: linear-gradient(90deg, #A74EFF 0%, #7F00FF 100%);*/
    border-radius: 5px;
    
    /* テキスト装飾 */
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.05em;
    column-gap: 4px; /* 「約」と「数字」と「カ月」の間の隙間を微調整 */
    padding-top: 8px;
}

/* 右側の三角形（吹き出しのツノ） */
.dev-period-badge::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px; /* 四角の外側に配置（三角形の幅分） */
    transform: translateY(-50%); /* 垂直方向の中心合わせ */
    
    /* 三角形の形成（borderを利用） */
    border-style: solid;
    border-width: 6px 0 6px 8px; /* 上・右・下・左 の順（左だけ色を付ける） */
/*    border-color: transparent transparent transparent #7F00FF;*/ /* 右端の色と同じにする */
}

.badge_purple{
    background: linear-gradient(90deg, #A74EFF 0%, #7F00FF 100%);
}
.badge_purple::after {
    border-color: transparent transparent transparent #7F00FF; /* 右端の色と同じにする */
}
.badge_blue{
    background: linear-gradient(90deg, #34B3FF 0%, #0C87F0 100%);
}
.badge_blue::after {
    border-color: transparent transparent transparent #0C87F0; /* 右端の色と同じにする */
}
.badge_green{
    background: linear-gradient(90deg, #00BA7F 0%, #00B115 100%);
}
.badge_green::after {
    border-color: transparent transparent transparent #00B115; /* 右端の色と同じにする */
}

.kikan{
    color: #FFF;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: 3px;
    position: relative;
    bottom: 6px;
}
/* 親要素：横並びの設定（以前の設定を維持しつつ調整） */
/* 親要素 */
.donyubox_dw {
    display: flex;
    align-items: flex-start;
    width: 90%;
    max-width: 1116px;
    margin: 0 auto;
    box-sizing: border-box;
    margin-top: 30px;
}

/* 各メイン要素の共通設定 */
.donyubox_dw > div:not(:empty) {
    flex: 1; /* ベース */
    min-width: 0;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.donyubox_dw_3 {
    display: flex;
    align-items: flex-start;
    width: 90%;
    max-width: 1116px;
    margin: 0 auto;
    box-sizing: border-box;
    margin-top: 30px;
}

/* 各メイン要素の共通設定 */
.donyubox_dw_3 > div:not(:empty) {
    flex: 1; /* ベース */
    min-width: 0;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}


/* 比率の調整（センター寄せ用） */
.donyubox_dw > div:nth-child(1) { flex: 1.2; } /* 課題：広め */
.donyubox_dw > div:nth-child(3) { flex: 1.0; } /* 導入内容：標準 */
.donyubox_dw > div:nth-child(5) { flex: 0.8; } /* 導入効果：狭め */

/* スペーサー：矢印の通り道を確保 */
.donyubox_dw > div:empty {
    flex: 0 0 150px; /* 矢印の長さ(120px)＋余白 */
    min-width: 150px;
}


/* 1. 課題（左側）：幅を少し広めに確保 */
.donyubox_dw > div:nth-child(1) {
    flex: 1.2;
    background: #fff;
     border-radius: 5px;
}

/* 2. 最初のスペーサー：ここを広げて「導入内容」を右へ押し出す */
.donyubox_dw > div:nth-child(2) {
    flex: 0.8; 
    min-width: 100px;
    position: relative;
}

/* 3. 導入内容（中央）：ここを視覚的中心にする */
.donyubox_dw > div:nth-child(3) {
    flex: 1;
}

/* 4. 2つ目のスペーサー：導入内容の右側 */
.donyubox_dw > div:nth-child(4) {
    flex: 0.8;
    min-width: 100px;
    position: relative;
}

/* 5. 導入効果（右側）：幅を狭くして右端に寄せる */
.donyubox_dw > div:nth-child(5) {
    flex: 0.8; /* 他より数値を小さくしてコンパクトに */
}



/* 比率の調整（センター寄せ用） */
.donyubox_dw_3 > div:nth-child(1) { flex: 1.2; } /* 課題：広め */
.donyubox_dw_3 > div:nth-child(3) { flex: 1.0; } /* 導入内容：標準 */
.donyubox_dw_3 > div:nth-child(5) { flex: 0.8; } /* 導入効果：狭め */

/* スペーサー：矢印の通り道を確保 */
.donyubox_dw_3 > div:empty {
    flex: 0 0 150px; /* 矢印の長さ(120px)＋余白 */
    min-width: 150px;
}


/* 1. 課題（左側）：幅を少し広めに確保 */
.donyubox_dw_3 > div:nth-child(1) {
    flex: 1.2;
    background: #fff;
     border-radius: 5px;
}

/* 2. 最初のスペーサー：ここを広げて「導入内容」を右へ押し出す */
.donyubox_dw_3 > div:nth-child(2) {
    flex: 0.8; 
    min-width: 100px;
    position: relative;
}

/* 3. 導入内容（中央）：ここを視覚的中心にする */
.donyubox_dw_3 > div:nth-child(3) {
    flex: 1;
}

/* 4. 2つ目のスペーサー：導入内容の右側 */
.donyubox_dw_3 > div:nth-child(4) {
    flex: 0.8;
    min-width: 100px;
    position: relative;
}

/* 5. 導入効果（右側）：幅を狭くして右端に寄せる */
.donyubox_dw_3 > div:nth-child(5) {
    flex: 0.8; /* 他より数値を小さくしてコンパクトに */
}




.donyu_color_box{
    border-radius: 5px;
    flex: 0 0 120px; 
    /* 実際のボックスは少し大きく見せる */
    width: 220px;
    
    /* はみ出しを許容して中央に配置したい場合はこれも有効 */
    margin-left: 0px; /* 必要に応じて位置を微調整 */

    /* ★高さを親に合わせず、中身に合わせる設定 */
    align-self: flex-start;
    box-sizing: border-box;
}
.donyu_purple{
    border: 1px solid #DBB6FF;
    background: #F1E4FF;
}
.donyu_blue{
    border: 1px solid #87D2FF;
    background: #D3EDFD;
}
.donyu_green{
    border: 1px solid #21D29A;
    background: #CFF8EB;
}
/* 導入効果の親要素(div)のflex設定を上書き */
/* これをしないと、親の flex: 1 が優先されて広がろうとしてしまいます */
.donyubox_dw > div:nth-child(5) {
    flex: 0 0 auto; /* 親要素自体は中身（220pxのボックス）に合わせる */
    width: auto;
}

.donyubox_dw_3 > div:nth-child(5) {
    flex: 0 0 auto; /* 親要素自体は中身（220pxのボックス）に合わせる */
    width: auto;
}


/* --- 矢印の配置調整 --- */
.arrowBox {
    position: relative;
    width: 110%;
    margin-left: 11px;
    margin-top: 12px;
    padding-left: 5px;
    padding-top: 8px;
}
/* 箇条書きリスト（矢印と重ならないように余白を作る） */
.arrowBox ul {
    margin: 0;
    padding: 0 0 0 20px; /* 左側のインデント */
}

.flow-arrow {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%) scaleX(1);
    transform-origin: left center;
    width: 110px; /* スペーサーの幅に合わせて微調整 */
    margin-left: 15px;
    z-index: 10;
    animation: none;
}



/* 矢印の初期状態（アニメーション前） */
/* 矢印本体（線）の親 */
/* 矢印本体：箇条書きリストに対して中央に配置 */
.flow-arrow {
    position: absolute;
    top: 50%;
    left: 100%;
    
    /* Y軸の中央揃え補正 + X軸の初期状態(scale 0) */
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    width: 120px; /* 矢印の長さ */
    height: 4px;
    z-index: 10;
    
    /* テキストとの隙間 */
    margin-left: 15px; 
    background-color: #a0a0a0;
}

/* --- 丸・三角・アニメーションの設定は以前のまま --- */

.flow-arrow::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: #A0A0A0;
    border-radius: 50%;
    top: -7px; 
    left: -9px; 
    opacity: 1;
    z-index: 2;
    aspect-ratio: 1 / 1;
}

.flow-arrow::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-top: 4px solid #A0A0A0;
    border-right: 4px solid #A0A0A0;
    transform: rotate(45deg);
    top: -8px; 
    right: 0;
    opacity: 1;
    animation: none;/* ★初期状態ではアニメーションを動かさない */
}

/* --- 2. 実行状態（.is-active が付いた瞬間） --- */
/* クラスがついた時だけ、animationプロパティを「上書き」して起動させます */
.flow-arrow.is-active {
    animation: extendLineMain 1.5s infinite !important;
}

.flow-arrow.is-active::after {
    animation: fadeInArrowHead 1.5s infinite !important;
}

@keyframes extendLineMain {
    0% { opacity: 0; transform: scaleX(0) translateY(-50%); }
    5% { opacity: 1; transform: scaleX(0) translateY(-50%); }
    15% { opacity: 1; transform: scaleX(0) translateY(-50%); }
    60% { opacity: 1; transform: scaleX(1) translateY(-50%); }
    90% { opacity: 1; transform: scaleX(1) translateY(-50%); }
    100% { opacity: 0; transform: scaleX(1) translateY(-50%); }
}
@keyframes fadeInArrowHead {
    0%, 55% { opacity: 0; }
    60%, 90% { opacity: 1; }
    100% { opacity: 0; }
}

/**/
/* --- 1. アニメーションの定義 --- */
@keyframes glow-border-bold {
    0%, 100% {
        /* 完全に消す */
        filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }
    50% {
        /* 2つのシャドウを重ねて、内側を濃く、外側を広く光らせる */
        filter: 
            drop-shadow(0 0 8px rgba(255, 255, 255, 1))   /* 内側のくっきりした光 */
            drop-shadow(0 0 15px rgba(255, 255, 255, 0.6)); /* 外側の広がる光 */
    }
}

@keyframes pulse-hint {
    0% {
        transform: scale(1);
        filter: brightness(100%);
    }
    50% {
        transform: scale(1.05); /* 3%だけ大きくする */
        filter: brightness(120%); /* 少し明るくして点滅感を出す */
    }
    100% {
        transform: scale(1);
        filter: brightness(100%);
    }
}

.char-animation {
    display: flex;
    white-space: nowrap;
}

.service_title_section{
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央が必要な場合 */
}
.char-animation span {
    display: inline-block;
    opacity: 0;
    transform: translateY(1em); /* 1文字分下から */
    filter: blur(0px); /* 最初は少しぼかすとオシャレです */
    animation: char-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;

    animation-fill-mode: forwards;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* このクラスがついた時だけアニメーションが実行される */
.is-visible .char-animation span {
    animation-name: fadeInUp;
    animation-duration: 0.5s;
}

/* アニメーションの基本設定 */
.ourapp_title1 span, .ourapp_title2 span, 
.works_title_section h3 span, 
.title_price1 span, .title_price2 span,.faq_title_section h3 span {
    display: inline-block;
    opacity: 0;
    transform: translateY(1em);
    filter: blur(5px);
    animation-fill-mode: forwards;
    backface-visibility: hidden;
    will-change: transform, opacity, filter;

    text-transform: none !important;
    
    /* フォント特有の挙動をリセットする場合（念のため） */
    font-variant: normal;

}

/* クラス「is-active」が付与されたら実行 */
/* ※JSで付けるクラス名を is-active に統一すると他と競合しにくいです */
.is-active span {
    animation: char-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes char-in {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
@keyframes char-in {
    0% {
        opacity: 0;
        transform: translateY(1em);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
*/


/* --- 2. メイン画像に適用 --- */
.main-img {
    cursor: pointer;
    /* 周期を少し速めて（2.5s → 1.8s）「動いている感」を強調 */
    animation: glow-border-bold 1.8s ease-in-out infinite;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* --- 3. ホバー時の演出（さらに目立たせる） --- */
.container_right > div:hover .main-img {
    animation-play-state: paused;
    /* ホバー時は最大輝度で固定。色は少しだけ黄色や青を混ぜるとより高級感が出ます */
    filter: 
        drop-shadow(0 0 10px rgba(255, 255, 255, 1))
        drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
    transform: scale(1.06); /* わずかに大きく */
}


ul {
    list-style: none; /* 標準の●を消す */
    padding-left: 1.5em; /* 左側の余白を調整 */
}
ul li {
    position: relative;
    line-height: 1.6;
}

/* 疑似要素で小さなドットを作成 */
ul li::before {
    content: "";
    position: absolute;
    left: -0.8em;    /* 文頭からの距離 */
    top: 0.6em;      /* 上からの位置（文字の高さに合わせる） */
    width: 4px;      /* ★ここでドットのサイズを自由に変更 */
    height: 4px;     /* ★ここでドットのサイズを自由に変更 */
    background-color: #242424; /* ドットの色 */
    border-radius: 50%; /* 丸くする */
}


.container_left{
    width: 55%;
    min-height: 400px;
    position: relative;
}

/* 2. 画像を絶対配置する */
.cube-image {
    position: absolute;
    top: 297px;
    left: 0px;
    z-index: 0;
    width: 100px;
    height: auto;
}
.cube-image img {
    width: 100%;   /* 親の .cube-image に合わせる */
    height: auto;
}

.cube-image2 {
    /*
    position: absolute;
    top: 396px;
    right: 211px;
    z-index: 0;
    width: 125px;
    height: auto;
    */
    position: absolute;
    top: -27px;
    right: 0px;
    z-index: 0;
    width: 125px;
    height: auto;
}
.cube-image2 img {
    width: 70%;   /* 親の .cube-image に合わせる */
    height: auto;
}
.cube-image3 {
    position: absolute;
    top: -27px;
    right: 0px;
    z-index: 0;
    width: 125px;
    height: auto;

}
.cube-image3 img {
    width: 70%;   /* 親の .cube-image に合わせる */
    height: auto;
}

.cube-image4 {
    position: absolute;
    top: -27px;
    right: 0px;
    z-index: 0;
    width: 125px;
    height: auto;
}
.cube-image4 img {
    width: 70%;   /* 親の .cube-image に合わせる */
    height: auto;
}
.about_service_elcom{
    position: relative;
    width: fit-content;  /* または具体的な幅（例: 1000px） */
    margin: 0 auto;
}
.cube-image5 {
    position: absolute;
    top: 5px;
    left: -75px;
    z-index: 0;
    width: 125px;
    height: auto;
}
.cube-image5 img {
    width: 100%;   /* 親の .cube-image に合わせる */
    height: auto;
}



.container_right{
    position: relative;
    width: 45%;                           /* 全体の幅 */
    min-height: 400px;
}

/* 共通設定：画像が枠からはみ出さないようにする */
.container_right img {
    height: auto;
    display: block;
}
/* --- 3. 全ての子要素（div）を「重ねる」設定 --- */
.container_right > div {
    position: absolute; /* ★重要：これで画像を自由に重ねられるようになります */
    
    /* 初期位置（左上基準） */
    top: 0;
    left: 0;
    transition: all 0.3s ease-out;
}

.text-img {
    position: absolute; /* 親のdivの中で重ねる */
    top: 0;
    left: 0;
    width: 100%; /* メイン画像と同じ幅にする */
    
    /* ★フワッとさせるための設定（初期は透明・少し下に配置） */
    opacity: 0;
    transform: translateY(10px); /* 10px下から浮かび上がらせる */
    
    /* ★重要：アニメーションの設定（0.4秒かけてイージング） */
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 2; /* メイン画像より手前に */
}

.main-img {
    position: relative;
    z-index: 1; /* テキスト画像より奥に */
    
    /* ★メイン画像もホバー時に少し暗くするなど、演出を入れるとより効果的 */
    transition: filter 0.3s ease;
}

/* カーソルが乗った（:hover）divの中の .text-img を表示する */
.container_right > div:hover .text-img {
    opacity: 1; /* 完全に表示 */
    transform: translateY(0); /* 元の位置（0）に戻す */
}

/* （オプション）ホバー時にメイン画像を少し暗くしてテキストを目立たせる */
.container_right > div:hover .main-img {
    filter: brightness(70%); /* 70%の明るさに */
}

/* （オプション）ホバー時にdiv全体を少し浮かせる（高級感を出す） */
.container_right > div:hover {
/*    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);*/
    z-index: 100 !important; /* ホバーした画像を最前面にする */
}



/* 1番目の画像（左上） */
.container_right div:nth-child(1) img {
    width: 222px;
}
.container_right div:nth-child(1) {
    top: 70px;   /* 上からの距離 */
    left: 10px;  /* 左からの距離 */
    z-index: 10; /* ★重要：重ねる順番（数字が大きいほど「上」に来る） */
}
/* テキスト画像（ap01_text.png）の設定（★ここを調整！） */
.container_right div:nth-child(1) .text-img {
width: 210px;
    top: -178px;
    left: 93px;
}

/* 2番目の画像（右上） */
.container_right div:nth-child(2) img {
    width: 220px;
}
.container_right div:nth-child(2) {
    top: 10px;
    right: 20px;
    z-index: 20;
    left: 202px;
}
.container_right div:nth-child(2) .text-img {
    width: 260px;
    top: -68px;
    left: 125px;
}

/* 3番目の画像（左下） */
.container_right div:nth-child(3) img {
    width: 230px;
}
.container_right div:nth-child(3) {
    left: 11px;
    z-index: 5;
    top: 270px;
}
.container_right div:nth-child(3) .text-img {
    width: 210px;
    top: 168px;
    left: 111px;
}


/* 4番目の画像（右下） */
.container_right div:nth-child(4) img {
    width: 275px;
}
.container_right div:nth-child(4) {
    top: 207px;
    left: 200px;
    z-index: 15;
}
.container_right div:nth-child(4) .text-img {
    width: 210px;
    top: 231px;
    left: 144px;
}



/*Price and Plan */
.price_plan_section{
    background: #E5F0FF;
    margin: auto;
    display: flex;
    align-items: flex-end;
    padding-bottom: 0;
    background: #E5F0FF; 
    justify-content: space-between;
    align-items: center;
    max-width: 1076px;
    margin: 0 auto;
    width: 100%;

}
.price_plan_section img{
    height: 130px;
}
.title_price{
    display: block;
    color: #FFF;
    font-family: Oswald;
    font-size: 127px;
    font-style: normal;
    font-weight: 600;
    line-height: 114.173%; /* 114.173% */
    letter-spacing: -1.27px;
    text-transform: capitalize;
}
.title_price_sp{
    display: none;
}

.title_price2{
    margin-left: 120px;
}



.price_cardBox{
    display: flex;
    justify-self: center;
    gap: 50px;
}
/* カード全体のコンテナ */
.price_card {
    position: relative;
    width: 100%;
    max-width: 500px; /* 画像のサイズに合わせて調整してください */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

/* フレーム画像（これを基準にする） */
.price_frame {
/*    width: 510px;*/
    width: 100%;
    height: auto;
    display: block;
}

/* フレームの上に乗るコンテンツ */
.price_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 縦に並べて中央に寄せる */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直方向中央 */
    align-items: center;     /* 水平方向中央 */
    padding: 60px 40px; /* 上下の余白を均等に */
    box-sizing: border-box;
    text-align: center;
}

/* 各要素の微調整 */
.price_label {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 30px;
    color: #333;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.price_icon {
    margin-bottom: 6px;
}

.price_icon img {
    width: 80px; /* アイコンのサイズ */
    height: 100px; /* ★アイコンエリアの高さを統一 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.price_icon2 img {
    height: 100px; /* ★アイコンエリアの高さを統一 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

}

.price_catch {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 20px;
    min-height: 4rem; /* ★2行分程度の高さを確保 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.price_catch .text_blue {
    color: #007aff; /* エルコムブルー */
    display: block;
    margin-top: 5px;
}

.price_desc {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    text-align: left;
    margin-top: auto; 
}

.ceter_pos {
    display: flex;          /* フレックスボックスにする */
    justify-content: center; /* 横方向の中央寄せ */
    align-items: center;     /* 縦方向の中央寄せ（必要であれば） */
    width: 100%;            /* 親の幅をいっぱいにする */
    margin-top: 40px;       /* 前後の余白（適宜調整） */
    margin-bottom: 40px;
}

.ceter_pos img {
    max-width: 100%;        /* 親より大きくならないように */
    height: auto;           /* 比率を維持 */
    width: 484px;
}


/* PCではハンバーガーボタンを非表示 */
.menu-trigger {
    display: none;
}

/* --- [2] PC版専用の設定（ここが重要！） --- */
/* 769px以上の時だけ適用されるように囲みます */
@media screen and (min-width: 1240px) {
    .nav-menu {
        display: flex;            /* 横並び */
        align-items: center;      /* 垂直中央 */
        gap: 25px;                /* 項目間の距離 */
        position: relative;
        left: 30px;               /* PC版での位置微調整 */
        
        /* スマホ版の設定を打ち消す */
        right: auto;
        width: auto;
        height: auto;
        background-color: transparent;
    }
}





/* --- スライドテキストの親コンテナ --- */
.slide-text-container {
    width: 100%;
    overflow: hidden; /* 画面外のはみ出しを隠す */
    background-color: transparent;
    padding: 40px 0; /* 上下の余白（必要に応じて調整） */
    user-select: none; /* テキストを選択不可にして背景感を出す */
        /* position: relative; */
    margin-top: -200px;    
}

/* --- テキストが流れるエリア --- */
.slide-text-inner {
    display: flex;
    white-space: nowrap; /* 改行を防ぐ */
    width: fit-content;
    animation: loop-slide 30s linear infinite; /* 20秒で一周、等速で無限ループ */
    z-index: 99;
    position: relative;
    display: block;
}
.slide-text-inner_sp {
    display: none;
}


/* --- 個別のテキスト設定 --- */
.slide-text-inner span {
    font-family: 'Oswald', sans-serif;
    
    /* 150pxを基準に可変設定（12vw ≒ 1224pxの時146px） */
    font-size: 12vw; 
    font-weight: 700;
    color: #e2e2e2;
    letter-spacing: 0.0em; 
    padding-right: 1em;
}

/* --- 無限ループアニメーションの定義 --- */
@keyframes loop-slide {
    from {
        transform: translateX(0);
    }
    to {
        /* 半分の地点まで流れたら 0 に戻すことでループさせる */
        transform: translateX(-50%);
    }
}

.section_text{
    text-align: center;
    margin-bottom: 70px;
    margin-top: 65px;
}

/* 1番目のdiv */
#service_section > div:nth-child(2) {
    color: #fff;
    font-weight: bold;
}

/* 2番目のdiv */
#service_section > div:nth-child(3) {
    margin-top: 20px;
    color: #fff;
    font-weight: bold;
    font-size: 24px;
}
#service_section > div:nth-child(4) {
    margin-top: 20px;
    color: #fff;
    font-size: 24px;
    margin-top: 28px;
}

.ourapproach {
    width: 100%;
    padding: 60px 0;
    position: relative;
    z-index: 1; /* ダッシュボードより後ろにする */
    padding-top: 100px; /* 画像が被るので、テキストが隠れないよう余白を調整 */
    overflow: hidden;    /* 画像が横にはみ出さないようにガード */
    /* ★修正：画像を背景として設定 */
    background-image: none;
    background-color: #fff; /* 白背景を強制 */
    background-repeat: no-repeat;
    background-position: center bottom; /* ★上からの位置を調整（飛び出し量を決める） */
    background-size: cover; /* 画面幅いっぱいに広げる */
    
    /* 飛び出しを表現するための余白調整 */
    padding-top: 0px;    /* 上のダッシュボードを被せるための隙間 */
    padding-bottom: 200px; /* 下のCase studyを被せるための隙間 */
    min-height: 63.6vw;

}
/* stepが進んでこのクラスがついたら画像を表示 */
.ourapproach.is-visible {
    background-image: url(./img/ourapp_back.png);
}

.bottom-shape-img {
    position: absolute;
    bottom: 0;          /* 下端にぴったりつける */
    left: 50%;          /* 中央に配置 */
    transform: translateX(-50%); /* 中央寄せの補正 */
    width: 100%;        /* 画面幅いっぱいに広げる場合 */
    max-width: 1440px;  /* コンテンツ幅に合わせる場合は数値を調整 */
    height: auto;
    z-index: -1;        /* テキストの下に回り込ませる */
    pointer-events: none; /* 画像がクリックの邪魔をしないようにする */
}

.title_group {
    display: flex;
    align-items: flex-start; /* 下揃えにするとベースラインが揃って綺麗です */
    justify-content: space-between; /* 両端に寄せる */
    margin-bottom: 10px;
    position: relative;
}

/*PR*/
.pr_right{
    position: relative;
    left: 30px;
}


.service_detail{
    width: 100%;
    position: relative;
    top: 15px;
}
.service_detailBold{
    font-weight: bold;
}
/* タイトル */
.intro_title {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
    flex: 1; /* タイトルが長くても数字を押し出さないようにする */
}
.intro_title .highlight {
    color: #006ECC; /* エルコムブルー */
    display: inline-block; /* 必要に応じて */
    margin-bottom: 5px;    /* 1行目と2行目の間隔を微調整したい場合 */
}

.text_bigNum {
    font-size: 145px; /* 指定のサイズ */
    font-weight: 400; /* 極太にすると映えます */
    color: rgba(0, 102, 255, 0.1); /* 少し透けさせると高級感が出ます */
    line-height: 0.8; /* 数字の上下余白をギリギリまで削る */
    margin: 0;
    font-family: 'Oswald', sans-serif;
    color: #E5F0FF;
    font-style: normal;
    margin-top: -20px;
}
.introduction{
    background: #ccc;
}

.introduction_box {
    position: sticky;
    /* トップで止まる位置。少し余裕を持たせるとリッチに見えます */
    top: 110px; 
    
    width: 1224px;
    margin: 0 auto 100px; /* ★この 150px が、重なるまでの「遊び」になります */
    height: 394px;
    
    display: flex;
    align-items: center;
    background-color: #fff;
    min-height: 400px;
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
    
    /* 重なる際の違和感を消すための設定 */
    overflow: hidden;

    /* 重なり順：後ろのカードほど「上に」重なるようにする */
    z-index: 1;

    /*
    view-timeline-name: --card-scroll;
    view-timeline-axis: block;
    animation: fade-out linear both;
    animation-timeline: --card-scroll;
    animation-range: exit 0% exit 40%; 
      */  
    
}

@supports (animation-timeline: --card-scroll) {
    .introduction_box {
        view-timeline-name: --card-scroll;
        view-timeline-axis: block;
        animation: fade-out linear both;
        animation-timeline: --card-scroll;
        animation-range: exit 0% exit 40%; 
    }
}

/* fade-out の定義（念のため確認） */
@keyframes fade-out {
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}


/* ブラウザの標準機能（CSSのみ）で「重なる時に消える」を表現する場合、
   view-timeline を使うとスクロール量に合わせて透過度を自動制御できます。
*/
@supports (view-timeline: --li) {
    .introduction_box {
        view-timeline: --card-exit;
        /* スクロール位置に合わせてアニメーションを進行させる */
        animation: card-fade-and-peel linear both;
        animation-timeline: --card-exit;
        /* カードが画面上部に到達してから、次のカードが重なり切るまでの範囲で実行 */
        animation-range: exit 0% exit 100%;
    }
}

@keyframes card-fade-and-peel {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    30% {
        opacity: 0.8;
        /* 少し小さくなり始める */
        transform: scale(0.95) translateZ(-50px);
    }
    100% {
        opacity: 0;
        /* 奥へ遠ざかりながら消える */
        transform: scale(0.8) translateZ(-200px) translateY(-20px);
        filter: blur(8px);
    }
}


/* 重なり順の指定（後ろにあるBOXほど上にくるようにする） */
.introduction_box:nth-child(1) { z-index: 1; }
.introduction_box:nth-child(2) { z-index: 2; }
.introduction_box:nth-child(3) { z-index: 3; }
.introduction_box:nth-child(4) { z-index: 4; }

/* 中身のレイアウト微調整 */
.introduction_box .intro_left,
.introduction_box .intro_right {
    flex: 1;
    padding: 0px;
}

/* フェードアウトのアニメーション内容 */
@keyframes fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9); /* ほんの少し小さくすると「消えていく」感が出ます */
    }
}


/* 2枚目、4枚目（is-reverseクラス）は左右を入れ替える */
.introduction_box.is-reverse {
    flex-direction: row-reverse;
}

.intro_left{
    width: 50%;
    border-radius: 24px 0 0 24px;
    padding: 20px;
}
.intro_right{
    width: 50%;
    padding: 10px;
}
.intro_pic{
    text-align: center;
}
.intro_left img,.intro_right img{
    text-align: center;
 /*   width: 80%;*/
}


/* --- サービスカードスタックセクション --- */
.blue_back{
     background-color: #2770BA;
}
.service_title_section h3{
    color: #669DD4;
    text-align: center;
    font-family: Oswald;
    font-size: 172px;
    font-style: normal;
    font-weight: 600;
    line-height: 93px; /* 54.07% */
    letter-spacing: -1.72px;
}

.service-wrap {
    position: relative;
   
    padding: 60px 0;
}

.service-card {
    position: sticky;
    top: 5vh; /* スマホでの重なり代 */
    width: 92%;
    max-width: 1000px;
    margin: 0 auto 8vh; /* カード間の距離（これがスクロールの遊びになる） */
    background: var(--card-bg);
    border-radius: 24px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease-out;
    min-height: 500px;
}

.card-inner {
    display: flex;
    flex-direction: row; /* 基本は横並び */
    min-height: inherit;
    background: #fff;
}

.card-image {
    flex: 1.2;
    background-size: cover;
    background-position: center;
    min-height: 300px;
}

.card-text {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-text small { color: #aaa; font-weight: bold; font-size: 1.2rem; }
.card-text h2 { font-size: clamp(1.5rem, 5vw, 2.5rem); margin: 10px 0 20px; color: #000; }
.card-text p { font-size: 1rem; line-height: 1.7; color: #555; margin: 0; }

/* カードごとの画像設定 */
.card-1 .card-image { background-image: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&q=80'); }
.card-2 .card-image { background-image: url('https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=800&q=80'); }
.card-3 .card-image { background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&q=80'); }


/* 右側：テキストエリア */
.card-text {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-text small { color: #aaa; font-weight: bold; font-size: 1.2rem; }
.card-text h2 { font-size: 1.8rem; margin: 10px 0 20px; color: #000; line-height: 1.4; }
.card-text p { font-size: 1rem; line-height: 1.7; color: #555; }

/* 偶数番目のカードを左右反転させる（LPのデザインに合わせる場合） */
.service-card:nth-child(even) .card-inner {
    flex-direction: row-reverse;
}

.br_pc{
    display: block;
}

/* モバイル対応 */
@media (max-width: 900px) {
    .card-inner { flex-direction: column !important; }
    .card-image { min-height: 250px; flex: none; height: 250px; }
    .service-card { top: 2vh; margin-bottom: 5vh; }
    .card-text { padding: 30px; }
}



.intro_text{
    font-size: 28px;
    font-weight: bold;
}
.text_blue{
    color: #006ECC;
    font-size: 1.4rem;
    font-weight: bold;
}


/*How It Works*/
.works{
    padding-top: 140px;
}
.works_title_section{
    margin-bottom: 50px;
}
.works_title_section h3 {
    color: #DADADA;
    text-align: center;
    font-family: Oswald;
    font-size: 172px;
    font-style: normal;
    font-weight: 600;
    line-height: 93px;
    letter-spacing: -1.72px;
}
.works_title_section{
    display: block;
}
.works_title_section_sp{
    display: none;
}

.workBoxes{
    display: flex;
    width: 1240px;
    margin: auto;
    justify-content: center;
    margin-top: 70px;
}
.workBoxUp{
    height: 350px;
    width: 1244px;
}
.workBoxUp img{
    width: 100%;
}
.workBoxDw{   
    display: flex;
    justify-content: space-between; /* 均等に配置 */
    align-items: flex-start;        /* 上揃え */
    width: 100%;
    gap: 20px;                      /* 各ボックス間の隙間 */
    box-sizing: border-box;
}
/* 4つの各子要素divの設定 */
.workBoxDw > div {
    flex: 1;                        /* 均等な幅を確保 */
    text-align: center;             /* 基本はすべてセンタリング */
    box-sizing: border-box;
    padding: 10px;                  /* 内側の余白 */
}

/* ★3番目のp要素（説明文）だけを左寄せにする */
/* nth-of-type(3) または last-child で指定 */
.workBoxDw > div p:nth-of-type(3) {
    text-align: left;               /* 文言は左寄せ */
    font-size: 0.9em;               /* 少し小さくするとバランスが良い */
    line-height: 1.6;               /* 行間を広げて読みやすく */
    display: inline-block;          /* センタリングされた親の中で左寄せを維持 */
    width: 201px;                    /* 幅いっぱいに広げる */
}

.worksNum{
    display: flex;
    width: 64px;
    height: 64px;
    padding: 15.5px 0 16.5px 0;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    background: #242424;
    color:#fff;
    margin: 0 auto;
    font-size: 1.5em;
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
}
.worksTitle{
    color: #242424;
    text-align: center;
    font-family:"Noto Sans JP", "Noto Sans", sans-serif;;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: var(--font-size-24, 24px); /* 100% */
    margin-top: 30px;
    margin-bottom: 30px;
}

/*FAQ*/
.qa-section {
    padding: 110px 20px 80px 20px;
    background-color: #E5F0FF;
}

.faq_title_section {
    display: flex;
    width: 1224px;
    height: 183px;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    margin: auto;
}

.faq_title_section{
    display: block;
    padding-top: 30px;
}
.faq_title_section_sp{
    display: none;
}

.faq_title_section h3{
    color: #FFF;
    text-align: center;
    font-family: Oswald;
    font-size: 172px;
    font-style: normal;
    font-weight: 600;
    line-height: 93px; /* 54.07% */
    letter-spacing: -1.72px;
}

.accordion-container {
    max-width: 900px;
    margin: 0 auto;
}

.accordion-item {
    border-bottom: 1px solid #e0e0e0;
}

/* ヘッダー（質問部分） */
.accordion-header {
    display: flex;
    align-items: center;
    padding: 24px 10px;
    cursor: pointer;
    position: relative;
    /* 背景を常に透明にする（セクションの背景色を透過させる） */
    background-color: transparent !important; 
    
    /* アニメーションを「変形（transform）」だけに限定する */
    transition: transform 0.3s ease; 

    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/*
.accordion-header:hover {
    background-color: #f9fbff;
}
*/

.is-open .accordion-header {
    background-color: transparent !important;
}

.q-icon {
    font-weight: bold;
    color: #006ECC;
    font-size: 1.8rem;
    margin-right: 15px;
    font-family: "Noto Sans JP", sans-serif;
}

.q-text {
    flex: 1;
    font-size: 1.5rem;
    margin: 0;
    font-weight: 600;
    line-height: 1.5;
    color: #002D5B;
}

/* 1. アイコンの土台（右端に配置） */
.icon-toggle {
    width: 24px;   /* 少し余裕を持たせる */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: transform 0.3s ease;
}

/* 2. 矢印本体（くの字）: beforeだけを使います */
.icon-toggle::before {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #242424; /* エルコムブルー */
    border-bottom: 2px solid #242424;
    transform: translateY(-2px) rotate(45deg); /* 初期状態：下向き */
    transition: all 0.3s ease;
}

/* 3. afterは不要なので、以前のプラス・マイナスの残骸を消すためにリセット */
.icon-toggle::after {
    display: none; 
}


/* 4. 開いている時（is-open）の動き */
.is-open .icon-toggle::before {
    /* 45度から225度（45+180）まで回転させて上向きにする */
    transform: translateY(3px) rotate(225deg);
}

/* --- 回答部分のアニメーション設定 --- */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
    overflow: hidden;
}

.is-open .accordion-content {
    grid-template-rows: 1fr;
}

.a-wrapper {
    min-height: 0;
    display: flex;
    padding: 0 10px 24px 10px;
    opacity: 0; 
    transition: opacity 0.2s ease-out;
}

.is-open .a-wrapper {
    opacity: 1;
    transition: opacity 0.4s ease-in 0.1s;
}



/* 回答部分のアニメーション設定 */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr; /* 初期状態は高さ0 */
    transition: grid-template-rows 0.3s ease-out;
    overflow: hidden;
}

.is-open .accordion-content {
    grid-template-rows: 1fr; /* 開くと中身に合わせて広がる */
}

.is-open .a-wrapper {
    opacity: 1; /* 高さが出た後にふわっと表示させる */
    transition: opacity 0.4s ease-in 0.1s; /* 少し遅らせて表示すると綺麗です */
}

.a-wrapper {
    min-height: 0; /* gridアニメーションに必須 */
    display: flex;
    padding: 0 10px 24px 10px;
    /* 閉じている時は中身を完全に透明にする */
    opacity: 0; 
    transition: opacity 0.2s ease-out;
}

.a-icon {
    font-weight: bold;
    color: #AC60E5; /* 回答は色を変えて視認性アップ */
    font-size: 1.8rem;
    margin-right: 15px;
}

.a-text {
    flex: 1;
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.7;
    color: #444;
}


/*Footer Adress*/
.adress_box{
    display: flex;
    width: 1224px;
    margin: auto;
}

.company_adressBox{
    display: flex;
}

.adress_left{
    min-height: 300px;
    flex: 0 0 33.333%;
    padding: 0 20px;
    box-sizing: border-box;
    line-height: 2.0;
    color: #9CA3AF;
    font-size: 0.875rem;
}
.adress_left p:first-of-type {
    color: #fff; /* お好みの色に */
}
.adress_right{
    min-height: 300px;
    flex: 0 0 66.666%;
    display: flex;
    flex-direction: column; /* 上下並びにする */
    box-sizing: border-box;
}
/* 右側・上段：50% */
.right_up {
    flex: 1; /* 高さを均等に分ける */
    border-bottom: 1px solid #d1d1d1;
    padding-bottom: 30px;
}

/* 右側・下段：50% */
.right_dw {
    flex: 1; /* 高さを均等に分ける */
    padding: 40px 0;
    box-sizing: border-box;
}

/* 拠点リストの横並び設定 */
.company_adressBox {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}
.adress_left > p:nth-child(3) a {
    color: #9CA3AF;
    text-decoration: none;
}
.company_adress {
    flex: 1; /* 3つの拠点を均等幅に */
    font-size: 0.85rem;
    line-height: 2.0;
    color: #9CA3AF;
}

.companyAdressName p {
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
    color: #fff;
}
.company_zip a{
    color: #9CA3AF;
    text-decoration: none;
}
.footer_logo_sp{
    display: none;
}
.copytext{
    text-align: center;
    color: #9CA3AF;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 1024px) {
    .hero-container {
        flex-direction: column;
        height: auto;
    }
    .hero-right {
        position: relative;
        right: 0;
        width: 100vw;
        margin-left: calc(50% - 50vw); /* 左側も画面端まで広げる */
        height: 300px;
    }
    .img-dashboard {
        width: 100%;
        bottom: 0;
    }
}



/* 1. 【最強設定】デフォルト状態：何があっても表示する */
/* セレクタを長くして(bodyを付けて)優先順位を上げます */
body .flow-arrow {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 120px;
    height: 4px;
    background-color: #a0a0a0;
    transform-origin: left center;
    margin-left: 15px;
    z-index: 10;

    /* 静止状態の見た目を強制 */
    opacity: 1; 
    transform: translateY(-50%) scaleX(1);
    
    /* アニメーションを完全に殺す */
    animation: none;
}

/* 2. 【最強設定】デフォルトの先端 */
body .flow-arrow::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-top: 4px solid #A0A0A0;
    border-right: 4px solid #A0A0A0;
    transform: rotate(45deg);
    top: -8px;
    right: 0;
    opacity: 1;
    animation: none;
}

/* 3. 【起動設定】特定のクラスがついた時だけ、アニメーションを「許可」する */
/* クラス名を is-active から is-moving に変えて、過去のコードとの干渉を断ち切ります */
body .flow-arrow.is-moving {
    animation: extendLineMain 2.0s infinite !important;
}

body .flow-arrow.is-moving::after {
    animation: fadeInArrowHead 2.0s infinite !important;
}

/* アニメーション定義（ここは変更なし） */
@keyframes extendLineMain {
    0% { opacity: 0; transform: translateY(-50%) scaleX(0); }
    10% { opacity: 1; transform: translateY(-50%) scaleX(0); }
    50% { opacity: 1; transform: translateY(-50%) scaleX(1); }
    90% { opacity: 1; transform: translateY(-50%) scaleX(1); }
    100% { opacity: 0; transform: translateY(-50%) scaleX(1); }
}

.btn-image_top_sp{
    display: none;
}
.header-menu_sp{
    display: none;
}

.top-msg-image_sp {
    display: none;
}

.works_sp{
    display: none;
}
.workBoxTitle img{
    display: none;
}
.worksNum{
    display: block;
}

.donyu01_pc,.donyu02_pc,.donyu03_pc{
    display: block;
}
.donyu01_sp,.donyu02_sp,.donyu03_sp{
    display: none;
}
.bigNumLineTitle_sp{
    display: none;
}
.donyuReiText_sp{
    display: none;
}
.service_text1,.service_text2{
    display: none;
}

.company_tel a{
    color: #9CA3AF; /* エルコムカラーなど、お好みの色に */
    text-decoration: none; /* 下線を消したい場合 */
}
a[href^="tel:"] {
    color: #9CA3AF; /* エルコムカラーなど、お好みの色に */
    text-decoration: none; /* 下線を消したい場合 */
}

.service_spacer{
        display: none; 
}

.elcom_logo_sp{
    display: none;       
}

/* タブレット・スマホ用のメディアクエリ内に追加 */
@media screen and (max-width: 1240px) {
    .nav-btn {
        /* ★ポイント1：幅を固定、または最大幅を制限する */
        display: block;
        width: 480px;      /* 任意の幅に変更してください */
        max-width: 95%;    /* 画面幅が480pxより小さくなった時のための保険 */
        
        /* ★ポイント2：中央寄せ */
        margin-left: auto;
        margin-right: auto;
        
        /* もし画像ボタンなら以下の設定も追加 */
        height: auto;
    }

    .nav-btn img {
        width: 100%;
        height: auto;
        display: block;
    }
}

@media screen and (min-width: 767px) and (max-width: 1239px) {
    .btn-image_top_sp {
        width: 70%;
        margin: auto;
    }
}


/* レスポンシブ対応 (タブレット・スマホ) */
/* --- スマートフォン用スタイル --- */
/*@media screen and (max-width: 768px) {*/
@media screen and (max-width: 1239px) {
    body{
        width: 480px;
        margin: auto;
    }

    .hero-right.is-visible {
        margin: auto;
    }

    section, .header-container {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden; /* ★ここで右へのはみ出しを物理的にカットします */
        box-sizing: border-box;
    }

    /* 固定高さだとコンテンツが溢れる可能性があるため、スマホでは最小高さに変更 */
    section {
        height: auto !important;
/*        min-height: 400px;*/
        padding: 0px 10px;
    }
    h2 { 
        font-size: 24px;
    }

    .header-logo img {
        max-width: 120px; /* ロゴが大きすぎて突き破るのを防ぐ */
        height: auto;
    }

    .btn-image_top{
        display: none;
    }
    .btn-image_logo{
        display: block;
        margin-top: 10px;
        width: 200px;
        margin: auto;
        margin-top: 11px;
    }
    .nav-btn .btn-image_logo_pc{
        display: none;
    }
    .header-menu_sp{
        display: block;
        flex: 1; /* 空きスペースに合わせて伸縮させる */
        min-width: 0; /* Flex子要素のはみ出し防止の魔法 */
        display: flex;
        justify-content: center;
        left: 15px;
        position: relative;
    }
   .header-menu_sp img {
        max-width: 78%;
        height: auto;
        object-fit: contain; /* 歪まないように */
    }

    .btn-image_top_sp {
        display: block;
        width: 100%;
        transition: transform 0.2s;
        content: url("./img/top_CTA1.png"); /* 初期画像を指定 */
    }
    .top-msg-image_sp {
        height: auto;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s ease-out, transform 1s ease-out;
    }
    .top-msg-image_sp.is-visible {
        opacity: 1;
        transform: translateY(0);
        display: display !important;
    }

    .top-msg-image.is-visible {
        opacity: 1;
        transform: translateY(0);
        display: none !important;
    }


    .top-msg-image_sp {
        opacity: 0;
        transition: opacity 0.8s ease;
    }

    /* ホバー時 */
    .btn-image_top_sp:hover {
        transform: scale(1.00);
        content: url("./img/top_CTA2.png"); /* ホバーで差し替え */
    }

    .hero{
        margin-top: -28px;
        
        padding-top: 0px;
/*        background: #E5F0FF;*/
        background: #E1EEFF;
        
    }
    .hero-left{
        margin-left: 0%;
    }
    
    .cta-wrapper {
        width: 100%;
    }
    .header-nav {
        padding: 0px 0px;
    }

    .header_sien{
        display: none;
    }
    
    .header_sien br {
        display: block;
    }
    .dashboard-wrapper {
        margin-top: 7%;
        max-width: 86%;
        margin-left: 11%;
    }
    .cta-tips-img {
        width: 264px;
        top: -33px;
    }

    .approach {
        flex-direction: column; /* 縦並びに変更 */
        text-align: center;
        gap: 40px;
        padding: 0px 10px;
        padding-bottom: 40px;
        padding-top: 50px;
    }

    .ourapproach {
        height: auto !important; /* 高さを固定せず中身に合わせる */
        padding-bottom: 50px;    /* 下の要素との間に余白を作る */
    }

    .container_inner {
        height: auto;
    }


    .adress_box {
        flex-direction: column;
    }
    .adress_left, .adress_right {
        flex: 0 0 100%;
    }
    .company_adressBox {
        flex-direction: column;
    }

    .main-header{
        width: 100%;
    }
    .main-header.is-visible{
        width: 100%;
        background: #E9F9FD;
        height: 62px;
    }


    .header-container {
        width: 58% !important;
        max-width: 100vw !important; /* 画面幅の100%を強制 */
        box-sizing: border-box;
        overflow: hidden; /* ★重要：中身がはみ出しても親を広げない */
        padding: 0 10px; /* 左右の余白を確保 */
    }

    /* ボタンのスタイル */
    .menu-trigger {
        display: block;
        position: relative;
        width: 30px;
        height: 22px;
        background: none;
        border: none;
        z-index: 100;
        cursor: pointer;
        flex-shrink: 0; /* 自分のサイズを死守して押し出されないように */
        margin-right: 10px;
    }

    .menu-trigger span {
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #333; /* 任意の色に */
        border-radius: 4px;
        transition: all 0.4s;
    }

    .cube-image {
        top: 87px;
        left: 25px;
        width: 60px;

    }

    .works_sp{
        margin-top: 0px;
        display: block;
    }
    .works_sp img{
        width: 100%;
        margin-top: 30px;
    }
    .ourapp_text {
        height: auto;
    }

    .menu-trigger span:nth-of-type(1) { top: 0; }
    .menu-trigger span:nth-of-type(2) { top: 10px; }
    .menu-trigger span:nth-of-type(3) { bottom: 0; }

    /* ボタンがアクティブ（開いたとき）の変形 */
    .menu-trigger.is-active span:nth-of-type(1) { transform: translateY(14px) rotate(-45deg); }
    .menu-trigger.is-active span:nth-of-type(2) { opacity: 0; }
    .menu-trigger.is-active span:nth-of-type(3) { transform: translateY(-14px) rotate(45deg); }

    .ourapp_text > div:nth-child(3) {
        font-size: 16px;
        text-align: left;
        line-height: 29px;
    }
    /* メニュー本体を全画面（または上から降ろす）設定 */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* 初期状態は画面の外 */
        width: 80%;    /* メニューの幅 */
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.95);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: all 0.5s;
        z-index: 90;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }

    .nav-menu.is-open {
        right: 0; /* 開いたときに画面内に戻る */
    }
    
    .header-nav {
        display: flex;
        justify-content: space-between; /* ロゴを左、ボタンを右に飛ばす */
        align-items: center;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .elcom-logo_sp img{
        width: 100px;
    }

    /* ロゴが大きすぎて突き抜けるのを防ぐ */
    .header-logo img {
        display: none
    }

    /* ハンバーガーボタンの位置固定 */
    .menu-trigger {
        display: block;
        flex-shrink: 0; /* ボタンが潰れないようにする */
        margin-left: auto; /* 強制的に右寄せ */
    }

    .nav-item {
        margin: 15px 0;
        font-size: 18px;
    }
    .hero-container {
        flex-direction: column; /* 縦並び */
        text-align: center;
        gap: 20px;
    }
    .hero-left, .hero-right {
        width: 100%;
    }
    .hero-right h2, .hero-right p {
        text-align: center;
    }
    .hero-right { height: 350px; width: 100%; }

    .cases {
        padding-top: 40px;
    }

    .arrowBox{
        margin-left: 0px;
    }
    .donyubox_up {
        flex-direction: column; /* 縦並びに変更 */
        height: auto;
    }
    .arrowBox {
        width: 100%;
    }
    .kazenBox_blue,.kazenBox_purple,.kazenBox_green{
        margin-left: 6px;
    }

    .top-msg-image {
        display: none;
    }
    .top-msg-image_sp {
        display: block;
        width: 95%;
        margin-top: 23px;
    }
    .img-dashboard{
        top: -47px;
        left: -17px;
    }

    .chip-0 {
        top: 35%;
        left: 74%;
    }
    .chip-1 {
        top: 36%;
        left: -14%;
        width: 68px;
    }
    .chip-2 {
        top: 60%;
        left: -5%;
    }
    .chip-3 {
        top: 63%;
        left: 40%;
        width: 149px;
    }
    .chip-4 {
        top: -5%;
        left: 73%;
        width: 84px;
    }


    .upLeft {
        margin-left: 0px;
    }

    .container_right
    {
        display: none;
    }

    .container_inner {
        margin-top: 0px;
    }

    .container_left {
        width: 100%;
    }

    .ourapp_title1,.ourapp_title2{
        display: none;
    }
    .ourapp_title1_sp,.ourapp_title2_sp {
        display: block;
        width: 75%;
        margin: auto;
        color: #FFF;
        font-family: Oswald;
        font-size: 60px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        letter-spacing: -0.6px;
    }

    .ourapp_title1_sp {
        margin-top: -31px;
        text-align: left;
    }
    .ourapp_title2_sp {
        margin-left: 70px;
    }

    .ourapp_text > div:nth-child(1) {
        font-size: 24px;
        text-align: left;
        margin-bottom: 15px;
    }

    .ourapp_text > div:nth-child(2), .ourapp_text > div:nth-child(4) {
        font-size: 15px;
        line-height: 29px;
        text-align: left;
    }
    .ourapp_text > div:nth-child(2), .ourapp_text > div:nth-child(4) br {
        display: block;
    }

    .br_pc{
        display: none;
    }
    .slide-text-container {
        position: relative; /* 絶対配置を解除して、自然な流れで下に置く */
        margin-top: 0px;   /* 上のセクションとの距離 */
        z-index: 1;         /* 重なり順の整理 */
        margin-top: -135px;
    }

    .ourapp_text {
        width: 90%;
        margin: auto;
        margin-top: 70px;
    }

    /*
    .donyubox {
        width: 100%;
        margin-bottom: 50px;
        display: flow-root;
        position: relative;
    }
    */

    .donyubox {
        width: 100%;
        margin-bottom: 0px;
        display: flow-root;
        position: relative;
        background: #f4f4f4;
        padding-bottom: 50px;
    }
    
    .donyubox_dw{
        flex-direction: column;
        position: relative; /* z-indexを効かせるため */
        z-index: 1;
        background: #f4f4f4;
        width: 100%;
        padding-top: 10px;
        margin-top: 0px;
    }
    /*
    .donyubox_dw > div:nth-child(1),
    .donyubox_dw > div:nth-child(2),
    .donyubox_dw > div:nth-child(3){
        background: #fff;
        border-radius: 5px;
        margin: auto;
        margin-top: 4px;
        width: 90%;
    }
        */

.donyubox_dw > div:not(.donyuBox3_1) {
    background: #fff;
    border-radius: 5px;
    margin: auto;
    margin-top: 4px;
    width: 90%;
}

.donyubox_dw > .donyuBox3_1 {
    background: #fff;
    border-radius: 5px;
    margin: auto;
    margin-top: 7px;
    width: 90%;
}

.donyubox_dw > div:nth-child(5){
    border-radius: 10px;
    margin: auto;
    margin-top: 5px;
    width: 90%;
    margin-bottom: 5px;
}

.donyubox_dw_3 > .donyuBox3_1 {
    background: #fff;
    border-radius: 5px;
    margin: auto;
    margin-top: 7px;
    width: 90%;
}

.donyubox_dw_3 > div:nth-child(5){
    border-radius: 10px;
    margin: auto;
    margin-top: 5px;
    width: 90%;
    margin-bottom: 5px;
}

    .donyubox_dw_3 {
        flex-direction: column;
        position: relative;
        z-index: 1;
        background: #f4f4f4;
        padding-top: 10px;
        margin-top: 10px;
    }
    
    .donyubox_dw_3 > div:nth-child(1),.donyubox_dw_3 > div:nth-child(3)  { 
        background: #fff;
        border-radius: 5px;
        margin: auto;
        margin-top: 7px;
        width: 90%;
        padding: 8px;
    }
        
    .donyubox_dw_3 > div:nth-child(5) {
        border-radius: 10px;
        margin: auto;
        margin-top: 7px;
        width: 90%;
        margin-bottom: 5px;
        padding: 8px;
    }
    .donyubox_dw_3 > div:nth-child(3) {
        flex: 1;
    }




    .donyu_purple_sp {
        border: 1px solid #DBB6FF;
        background: #F1E4FF;
    }

    .donyu_blue_sp {
        border: 1px solid #87D2FF;
        background: #D3EDFD;
    }

    .donyu_green_sp {
        border: 1px solid #21D29A;
        background: #CFF8EB;    
    }

    .donyu_purple,.donyu_blue,.donyu_green {
        border: none;
        background: none;
    }

    .bigNumLineTitle br{
        display: block;
    }
    
    .service_spacer{
        display: block; 
        margin-top: 80px;
    }
    
    .donyuReiTitle {
        font-size: 20px;
        margin-top: 10px;
    }
    .donyu_text {
       color: #242424;
        font-family: "Noto Sans JP", "Noto Sans", sans-serif;;
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 29px; /* 193.333% */
        letter-spacing: -0.15px;
        text-align: left;
    }
    .donyu_text2{
        text-align: left;
    }
    .donyuTitle1,.donyuTitle2,.donyuTitle3{
        font-size: 15px;
    }
    .bigNumLine{
        display: none;
    }
    .bigNumLineTitle{
        display: none;
    }
    .bigNumLineTitle_sp{
        display: block;
        color: #002D5B;
        font-size: 15px;
        font-weight: 700;
    }
    .donyuReiText{
        display: none;
    }
    .donyuReiText_sp{
        display: inline;
        padding-top: 25px;
        color: #002D5B;
    }
    .donyubox_up {
        display: flex;
        flex-direction: column-reverse; /* 子要素の順番を逆転させる */
        align-items: center; /* 必要に応じて中央寄せ */

        position: relative; /* z-indexを効かせるため */
        z-index: 1;
        background: #f4f4f4;
    }

    .donyu01_pc,.donyu02_pc,.donyu03_pc{
        display: none;
    }
    .donyu01_sp,.donyu02_sp,.donyu03_sp{
        display: block;
    }

    .arrowBox ul {
        margin: 0;
        padding: 0 0 0 6px;
    }

    .kazenBoxNum {
        color: #FFF;
        font-family: Oswald;
        font-size: 43px;
        font-style: normal;
        font-weight: 400;
        line-height: 35px;
        letter-spacing: -1px;
        text-transform: uppercase;
    }
    .slide-text-inner span {
        font-size: 21vw;
        margin-left: 12px;
    }

    .slide-text-inner {
        display: none;
        animation: none; 
    }
    .slide-text-inner_sp {
        display: block;
        font-size: 10vw;
        font-family: 'Oswald', sans-serif;
        font-weight: 700;
        color: #e2e2e2;
        letter-spacing: 0.0em;
        /* padding-right: 1em; */
        text-align: center;
        padding-top: 40px;
    }
    .upLeftDw {
        width: 90%;
        margin: auto;
    }


    .cube-image2 {
        top: -15px;
        right: 0px;
        z-index: 5;
        width: 70px;
        height: auto;
    }
    .cube-image3 {
        top: -15px;
        right: 0px;
        z-index: 9;
        width: 77px;
    }
    .cube-image4 {
        top: -15px;
        right: 0px;
        z-index: 9;
        width: 77px;
    }

    .cube-image5 {
        top: -92px;
        left: 21px;
        width: 80px;
    }

    /* 画像ブロック（元々右側）の調整 */
    .upRight {
        width: 100%;
        margin-bottom: 20px; /* 下にくるテキストとの間に余白を作る */
    }

    .upRight img {
        width: 100%;
        height: auto;

    }

    /* テキストブロック（元々左側）の調整 */
    .upLeft {
        width: 100%;
    }

    /* upLeft内がさらに横並びになっている場合の調整（必要に応じて） */
    .upLeft {
        display: flex;
       /* flex-direction: column;*/ /* upLeft内も縦並びにする場合 */
    }


    .upLeft, .upRight {
        width: 95%;           
        padding-right: 0;      /* 余白をリセット */
        height: 327px;
    }

    .upRight {
        margin-top: 0px;      /* 画像の上に少し隙間を作る */
    }

    .kazenBox01 {
        padding: 0px 2px;
    }

    .donyuboxes{
        width: 100%;
    }
    .donyubox_bottom {
        flex-direction: column;
        width: 98%;
    }
    .dev-period-badge::after {
        top: auto;        /* 上の固定を解除 */
        bottom: -8px;     /* 要素の下に配置 */
        right: 50%;       /* 一旦中央へ */
        left: 50%;        /* 中央寄せ */
        transform: translateX(-50%); /* 左右の中央揃え */
        
        /* 三角形の向きを下向きに変更 */
        border-width: 8px 6px 0 6px; 
        border-color: #7F00FF transparent transparent transparent;/* 上側だけに色をつける */
    }

    .badge_blue::after {
        border-color: #2196F3 transparent transparent transparent;
    }
    .badge_green::after {
        border-color: #00B115 transparent transparent transparent;
    }

    .upLeftLeft{
        width: 42%;
    }
    .upLeftRight {
        width: 58%;
     }

     .upLeftDw {
        margin-top: 20px;
    }    
    .hero-blue-overlay{
        height: 84%;
    }
    .container{
        padding-bottom: 15px;
        padding-top: 0px;
    }
    .donyu_space_sp{
        display: block;
        padding: 0 0;
    }
    .container_inner{
/*        width: 95%;*/
        width: 100%;
    }

    /*
    .upRight img{
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }
        */
    .upRight img{

        margin: auto;
       
    }


    .service_title_section h3,.title_price
    {
        font-size: 60px;
        letter-spacing: -0.6px;
    }
    .service_text2{
        margin-top: -28px;
        margin-left: 70px !important;
    }
    
    body .flow-arrow {
        display: none;
    }

    .works_title_section h3{
         font-size: 50px;
    }

    .workBoxUp {
        display: none;
    }
    .workBoxUp img {
        display: none;        
    }

    .workBoxCEll{
        display: flex;
    }
    
    .worksNum{
        display: none;
    }
    .workBoxDw {
        flex-direction: column; /* これで縦に並ぶ */
        align-items: center;
    }
    .works_title_section {
        margin-bottom: 0px;
    }
    .workBoxTitle{
        width: 45%;
    }
    .workBoxTitle img{
        display: block;
        width: 100%;
    }
    .worksTitle{
        font-size: 15px;
        margin-top: 7px;
        text-align: left;
    }
    .workBoxContents{
        width: 53%;
        text-align: left;
        margin-left: 5px;
    }
    .workBoxContents p:nth-child(2) {
        margin-top: -12px;
    }
    .section_text {
        margin-top: 0px;
        margin-bottom: 30px;
        margin: 15px;
    }

    .taiohani {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-left: 0px;
        overflow: unset;
        height: 65px;
        width: 91%;
    }

    .icon-taio {
        width: 100%;           /* これで「対応範囲」が一行を占領する */
        display: block;        /* 確実に一行にするため */
        margin-bottom: 5px;    /* 下の要素との隙間 */
        font-size: 16px;
    }
    .icon-taio::before{
        display: none;        
    }

    .donyu-sien {
        background: #363A5B;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 3px;
        margin: 0 0px;
        border-radius: 5px;
        font-size: 13px;
        height: auto;
        line-height: 1.2;        
    }
    #service_section > div:nth-child(3),#service_section > div:nth-child(4) {
        text-align: left;
        margin-top: 2px;
        line-height: 29px; /* 193.333% */
        font-size: 15px;
        width: 98%;
    }
    .about_service_elcom{
        margin-top: 30px;
    }
    #service_section > div:nth-child(4) br{
        display: none;
    }

    .service_text1,.service_text2{
/*        width: 100%;*/
        display: block;
    }
    .service_text1{
        margin-right: 140px;
    }
    .service_text2{
        margin-left: 140px;
    }
    .service_title_section{
        display: flex;
        flex-direction: column;
    }
    h2
    {
        margin-top: 0px;
    }
    .char-animation{
        display: none;
    }

    .PR {
        height: auto;           /* 500pxの固定を解除 */
        padding: 60px 20px;     /* 上下に余白を作り、左右にマージンを確保 */
        background-size: cover; /* 背景画像の見え方を調整 */
        padding: 20px 20px 0 20px;
    }

    .PR .container_Inner {
        position: relative;      /* 絶対配置の基準にする */
        
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .tips-box img {
        position: absolute;
        margin-top: -15px;
    }

    .container_Inner {
        width: 100%;
        align-items: center;
        text-align: center;
        display: flex;
        flex-direction: column; /* 縦並び */
    }

    /* 左側コンテンツ（テキスト・CTA） */
    .pr_left {
        order: 1; /* テキスト・CTAエリアを上に */
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .pr_right {
        order: 2; /* 画像エリアを下に */
        width: 100%;
        display: flex;           /* Flexboxを適用 */
        justify-content: center;  /* 水平方向の中央揃え */
        align-items: center;      /* 垂直方向の中央揃え（必要に応じて） */
        margin-top: 20px;        /* 上の要素との余白 */
        left: 0;;
    }

    /* 画像自体のサイズ調整 */
    .pr_right img {
        max-width: 100%;         /* 親要素の幅を超えないようにする */
        height: auto;            /* 縦横比を維持 */
        
        /* もし画像が大きすぎる場合は、ここで最大幅を制限できます */
        /* max-width: 800px; */
    }

    .pr_text {
        font-size: 16px;      /* スマホで見やすいサイズに微調整 */
        line-height: 1.6;
        width: 100%;
    }

    /* CTAエリアの調整 */
    .cta-trigger-wrapper {
        position: relative;     /* absoluteの基準点をリセット */
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 30px;
        width: 100%;
    }

    .main-cta img {
        width: 100%;            /* 484pxを解除して画面幅に合わせる */
        max-width: 300px;       /* スマホで大きすぎないように制限 */
        margin: 0 auto;         /* 上の大きなマージン(160px)をリセット */
    }

    /* 吹き出し（tips-box）の調整 */
    .tips-box {
        /* 1. 全ての配置と移動を「初期値」に強制リセット */
        position: relative !important; 
        left: auto !important;
        right: auto !important;
        top: auto !important;
        
        /* 2. 横移動を物理的に「0」で固定する */
        transform: translate(0, 0) !important; 
        
        /* 3. もしこれでも動くなら、transitionを一旦オフにする */
        transition: none !important; 
        
        /* 4. 見た目の調整 */
        width: 100% !important;
        max-width: 235px;
        margin: 0 auto 10px auto;
        display: block;
        opacity: 1 !important; /* スマホではパッと表示させる */
    }

    /* 5. もしJSでアニメーション用クラスが付与されていても、
    スマホでは横移動を絶対にさせない設定 */
    .tips-box.is-visible,
    .tips-box.active {
        transform: translate(0, 0) !important;
        left: auto !important;
    }

    /* アニメーションを維持したい場合、ここを「0」に上書き */
    .tips-box.is-visible {
        transform: translateX(0) translateY(0) !important;
    }

    /* 右側画像（モックアップ）の調整 */
    .pr_right {
        width: 100%;
    }

    .pr_right img {
        width: 100%;
        max-width: 400px;       /* 大きくなりすぎないように */
        height: auto;
    }

    .introduction_box{
        width: 100%;
       /* background: #007aff;*/
    }
    .workBoxUp{
        width: 100%;
    }
    .workBoxes{
        width: 100%;
        margin-top: 0px;
    }
    .service-wrap {
        padding: 0px 0;
    }
    .intro_title {
        font-size: 1.3rem;
        margin-top: 29px;
        z-index: 9;
    }

    .introduction_box {
        display: flex;
        /* 画像を上にしたい場合は column-reverse、
           テキストを上にしたい場合は column にしてください */
        flex-direction: column; 
        gap: 20px; /* 要素間の隙間 */
        padding: 10px;
        border-radius: 5px;
        margin: 0 auto 50px;
    }
    .introduction_box.is-reverse {
        display: flex;
        /* 画像を上にしたい場合は column-reverse、
           テキストを上にしたい場合は column に設定してください */
        flex-direction: column;
    }

    .introduction_box {
        position: static;/*レスポンシブ対応時は解除*/
        margin: 0 auto 10px; /* ★この 150px が、重なるまでの「遊び」になります */
        display: flex;
        align-items: center;
        background-color: #fff;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
        
        /* 重なる際の違和感を消すための設定 */
        overflow: hidden;

        /* アニメーションの設定 */
        /* view-timeline で「自分自身」のスクロール位置を監視 */

        view-timeline-name: --card-scroll;
        view-timeline-axis: block;

        /* アニメーションの適用 */
       animation: none;
        animation-timeline: auto;
        
        /* 重要：カードが「固定位置」に到達してから、画面外へ消えていくまでの間でフェード */
        animation-range: exit 0% exit 40%; 
            
        /* 重なり順：後ろのカードほど「上に」重なるようにする */
        z-index: 1;
    }


    .intro_left,
    .intro_right {
        width: 95%; /* 横幅をいっぱいにする */
    }

    /* テキスト内の改行（<br>）がスマホで邪魔な場合は無効化する */


    .price {
        padding-top: 0px;
    }

    .price_plan_section {
        
        text-align: center;      /* 全体を中央揃え */
        padding: 40px 15px;
    }

    .title_price {
        margin-bottom: 30px;    /* テキストと画像の間の余白 */
        width: 60%;
    }

    .title_price1, .title_price2 {
        font-size: 60px;
        display: block;         /* Pricing と &Plan を縦に積む */
        width: 100%;
        margin-left: 0px;
    }

    .price_plan_section > div:last-child {
        width: 130px;            /* 画像エリアを横いっぱいに */
        text-align: center;
    }
    .price_plan_section > div:last-child img{
        width: 100%;
    }

    .price_plan_section img {
        height: auto;
    }

    .price_cardBox {
        flex-direction: column;
        gap: 10px;
    }

    .price_label {
        font-size: 22px;
        margin: 0;
        padding: 0;
    }
    .price_desc {
        font-size: 0.95rem;
        line-height: 1.6;
        text-align: center;
        margin-top: 20px;
    }
    .price_desc br{
        display: none;
    }
    .price_content {
        position: absolute;
        padding: 60px 12px;
    }

    .CTA_center {
        margin-top: 10px;
    }

    .price_icon2 img{
        width: 100%;
        height: 80px;
    }

    .price_icon img {
        width: 63px;
        height: 63px;
    }
    .title_price{
        display: none;
    }
    .title_price_sp{
        display: block;
        font-size: 60px;
        width: 60%;
        margin-left: 0px;
        color: #FFF;
        font-family: Oswald;
        font-style: normal;
        font-weight: 600;
        line-height: 114.173%;
        letter-spacing: -1.27px;
        text-transform: capitalize;
    }
    .text_blue {
        font-size: 1.1rem;
    }
    .donyu_text br{
        display: none
    }
    #service_section > div:nth-child(3) br {
        display: none;
    }

    .price_icon img {
        margin-bottom: 5px;
    }
    .price_icon2 img {
        margin-bottom: 5px;
    }

    .service_detail br {
        display: none;
    }

    .text_bigNum {
        font-size: 118px;
        margin-top: -80px;
        margin-left: 201px;
    }

    /* 見出しや数字のレイアウト調整（必要に応じて） */
    .title_group {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* 左寄せ */
    }
    .introduction_box{
        height: auto;
    }

    .works {
        padding-top: 60px;
    }
    .works_title_section{
        display: none;
    }
    .works_title_section_sp{
        display: block;
        color: #DADADA;
        text-align: center;
        font-family: Oswald;
        font-size: 50px;
        font-style: normal;
        font-weight: 600;
        line-height: 93px;
        letter-spacing: -1.72px;
        margin-bottom: 37px;
    }
    .qa-section {
        padding: 0px 20px;
    }

    .accordion-header{
        padding: 14px 0px;
        align-items: flex-start;
    }

    .faq_title_section h3 {
        font-size: 60px;
    }
    .a-icon {
        margin-left: -8px;
    }

    .faq_title_section{
        width: 100%;
        display: none;
    }
    .faq_title_section_sp{
        width: 100%;
        display: block;
        color: #FFF;
        text-align: center;
        font-family: Oswald;
        font-size: 52px;
        font-style: normal;
        font-weight: 600;
        line-height: 93px;
        letter-spacing: -1.72px;
        margin: 35px;
        margin-top: 50px;
    }
    .q-icon{
        margin-top: -8px;
    }
    .q-text {
        font-size: 0.9rem;
        padding-right: 6px;
    }
    .q-text br{
        display: none;
    }

    .a-text {
        font-size: 0.9rem;
   }
   footer{
        height: auto;
   }
   .footer_logo_sp img{
        width: 120px;
   }
   .footer_logo_sp {
        display: block;
    }
    .right_up {
        margin-left: 20px;
        border: none;
    }
   .adress_left{
    min-height: auto;
    margin-bottom: 30px;
   }
   .adress_left br{
        display: none;
   }
   .adress_left > p:nth-child(3) a {
        color: #9CA3AF;
        text-decoration: none;
   }
    .adress_box{
        width: 100%;
    }
    .copytext {
        font-size: 12px;
    }

     .elcom_logo_sp{
        display: block;   
    }
    .btn-image_logo{
        display: none;
    }
}

/*スマホ版*/
@media screen and (max-width: 768px) {
    body{
        width: 100%;
    }
    .header-container {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box;
        overflow: hidden;
        padding: 0 10px;
    }
    .upRight img{
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }

    .header-menu_sp img {
        max-width: 88%;
    }

    .donyubox_up {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        position: relative;
        z-index: 1;
        background: #f4f4f4;
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }
    .upLeft, .upRight {
        width: 95%;           
        padding-right: 0;      /* 余白をリセット */
       height: 255px;
    }
    .donyubox_dw {
        flex-direction: column;
        position: relative;
        z-index: 1;
        background: #f4f4f4;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        padding-top: 10px;
        margin-top: 0px;
    }
    .donyubox_dw_3 {
        flex-direction: column;
        position: relative;
        z-index: 1;
        background: #f4f4f4;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        padding-top: 10px;
        margin-top: 80px;
    }
    
    .donyubox_dw_3 > div:nth-child(1),.donyubox_dw_3 > div:nth-child(3)  { 
        background: #fff;
        border-radius: 5px;
        margin: auto;
        margin-top: 7px;
        width: 90%;
        padding: 8px;
    }
        
    .donyubox_dw_3 > div:nth-child(5) {
        border-radius: 10px;
        margin: auto;
        margin-top: 7px;
        width: 90%;
        margin-bottom: 5px;
        padding: 8px;
    }
    .donyubox_dw_3 > div:nth-child(3) {
        flex: 1;
    }

    .service_spacer{
        display: block; 
        margin-top: 70px;
    }
    .slide-text-inner_sp {
        display: block;
        font-size: 15vw;
        font-family: 'Oswald', sans-serif;
        font-weight: 700;
        color: #e2e2e2;
        letter-spacing: 0.0em;
        /* padding-right: 1em; */
        text-align: center;
        padding-top: 40px;
    }
   
}

/*
* {
    outline: 1px solid red !important;
}
*/