@charset "UTF-8";
/* =========================================================
p-lpvn / ベトナムLPで使用される変数
========================================================= */
:root {
    /* 背景色（prototype準拠に更新） */
    --base-color01: #111c3b;
    --base-color02: #f5f6ff;
    --base-color03: #fff;
    --base-color04: #F9F9FC;
    --base-color05: #E2E6EE;

    /* アクセントカラー（prototype準拠に更新）*/
    --accent-color01: #0076e5;/* primary */
    --accent-color02: #3c65df;/* secondary */
    --accent-color03: #d44056;/* alert/red系 */
    --accent-color04: #D48C40;/* yellow */
--accent-color05: #A9C0EE;
--accent-color06: #F4CE00;
--accent-color07: #21BBEC;
    --accent-color08: #6130de;/* purple */
    --accent-color09: #ECFBFE;
    --accent-color10: #5983FF;

/* グラデーション */
--gradient-color01: rgba(#E14827,1);
--gradient-color02: rgba(#E7C82E,1);
--gradient-color03: rgba(#F6F7F8,1);
--gradient-color04: rgba(#A9C0EE,1);
--gradient-color05: rgba(#E6989B,1);

/* グラデーション用RGB値 */
--accent-color01-rgb: 60, 101, 223;
--accent-color02-rgb: 60, 101, 223;
--accent-color03-rgb: 212, 64, 86;
--accent-color08-rgb: 97, 48, 222;
--base-color01-rgb: 17, 28, 59;
--base-color02-rgb: 245, 246, 255;
--base-color03-rgb: 249, 249, 252;

/* グラデーション定義 */
--gradient-hero: linear-gradient(315deg, rgba(60,101,223,1) 0%, rgba(0,118,229,1) 90%, rgba(30,180,226,1) 100%);
--gradient-hero-simple: linear-gradient(315deg, rgba(60,101,223,1) 0%, rgba(0,118,229,1) 100%);
--gradient-main-bg: linear-gradient(94deg, var(--base-color02) 0%, var(--base-color03) 100%);
--gradient-header-actions: linear-gradient(224deg, rgba(43,121,149,1) 2%, rgba(47,69,132,1) 11%, rgba(17,28,59,1) 38%);
--gradient-orange: linear-gradient(224deg, rgba(212,140,64,1) 0%, rgba(229,1,5,1) 25%);
--gradient-blue: linear-gradient(224deg, rgba(43,121,149,1) 2%, rgba(47,69,132,1) 11%, rgba(17,28,59,1) 38%);
--gradient-line01: linear-gradient(90deg, rgba(60,101,223,1) 0%, rgba(236,251,254,0) 40%);
--gradient-line02: linear-gradient(to bottom, rgba(45,102,231,1) 0%, rgba(225,252,255,1) 75%, rgba(225,252,255,0) 100%);
--gradient-line03: linear-gradient(to right, rgba(60,101,223,1) 29%, rgba(129,236,249,1) 30%);
--gradient-line04: linear-gradient(to right, transparent, var(--accent-color02) );

--gradient-card-overlay: linear-gradient(to bottom, rgba(17, 28, 59, 0) 0%, rgba(17, 28, 59, 0.6) 50%, rgba(17, 28, 59, 1) 70%);

--gradient-button01: linear-gradient(to top right, rgba(17,28,59,1) 59%, rgba(47,69,132,1) 80%, rgba(43,121,149,1) 100%);
--gradient-button02: linear-gradient(to top right, rgba(229,1,5,1) 75%, rgba(212,140,64,1) 100%);
--gradient-button03: linear-gradient(to bottom right, rgba(30,180,226,1) 0%, rgba(0,118,229,1) 10%, rgba(60,101,223,1) 0%);
--gradient-button04: linear-gradient(to bottom right, rgba(60,101,223,1) 0%, rgba(104,45,231,1) 100%);

--gradient-icon01: conic-gradient(rgba(249,249,252,1) 0%, rgba(83,215,249,1) 79%, rgba(104,45,231,1) 100%);

    /* テキストカラー（prototype準拠に更新） */
    --text-color01: #111c3b;
    --text-color02: #8b9ab9;
--text-color03: rgba(#0E0B0B,.3);
--text-color04: rgba(255,255,255,1);
--text-color05: #A9C0EE;

    /*リンクカラー */
    --link-color01: #0076e5;

/* 線カラー */
--border-color01: #D9DEE9;
--border-color02: #08223B; 
--border-color03: #E2E6EE;
--border-color04: #fff;
--border-color05: #202F46;
--border-color06: #8B9AB9;
--border-color07: #E2E6EE;
--border-color08: #7D9AF8;

/* サブカラー */
--sub-color01: #F8F9FA;

--sub-color02: #EFEFF2;
--sub-color03: #88909B;
--sub-color04: #122940;
--sub-color05: #0D1E2F;
--sub-color06: #383E48;

/* シャドウカラー */
--shadow-color01: rgba(15,32,56,0.1);
--shadow-color02: rgba(15,32,56,0.3);

/* シャドウ */
--shadow00: 2px 4px 32px rgba(15,32,56,4%);
--shadow01: 4px 6px 12px rgba(15,32,56,24%);

--shadow02: 0 6px 24px rgba(15,32,56,48%);
--shadow03: 0 6px 32px rgba(15,32,56,63%);

/* SNSカラー */
--line-color: #1dcd00;
--fb-color: #3B5998;
--tw-color: #55acee;
--hatebu-color: #008fde;
--pocket-color: #ee4056;
--youtube-color: #c4302b;

/* 基本色 */
--red01: #D93735;
--white01: #fff;

/* フォントサイズ */
--fs-min : 1.3em;
--fs-p : 1.5em;
--fs-title : 1.7em;
--fs-big : 3.1em;

/* フォントサイズ */
--font-size00 : 11px;
--font-size01 : 12px;
--font-size02 : 14px;
--font-size03 : 16px;
--font-size04 : 21px;
--font-size05 : 25px;
--font-size06 : 28px;
--font-size07 : 44px;
--font-size08 : 36px;

    /* フォントファミリー（prototype準拠に更新） */
    --font-family01: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    --font-family02: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, -apple-system, Segoe UI, Arial, sans-serif; 
    --font-quantico: "Quantico", system-ui, Arial, sans-serif;
    --font-outfit: "Outfit", system-ui, Arial, sans-serif;

--font-awesome: 'Font Awesome 5 Free';
--googleicon: 'Material Icons Outlined';
--font-flat: 'Flaticon';

/* margin */

--margin00 : 0.3125rem; /* 5px */
--margin01 : 0.625rem;  /* 10px */
--margin02 : 0.9375rem; /* 15px */
--margin03 : 1.25rem;   /* 20px */
--margin04 : 1.5625rem; /* 25px */
--margin05 : 3.125rem;  /* 50px */
--margin06 : 3.75rem;   /* 60px */
--margin07 : 4.375rem;  /* 70px */
--margin08 : 5rem;      /* 80px */
--margin09 : 5.625rem;  /* 90px */
--margin10 : 6.25rem;   /* 100px */

/* padding */
--padding00 : 0.3125rem; /* 5px */
--padding01 : 0.625rem;  /* 10px */
--padding02 : 0.9375rem; /* 15px */
--padding03 : 1.25rem;   /* 20px */
--padding04 : 1.5625rem; /* 25px */
--padding05 : 3.125rem;  /* 50px */
--padding06 : 3.75rem;   /* 60px */
--padding07 : 4.375rem;  /* 70px */
--padding08 : 5rem;      /* 80px */
--padding09 : 5.625rem;  /* 90px */
--padding10 : 6.25rem;   /* 100px */

/* gap */
--gap00 : clamp(0.15rem, 0.2vw + 0.3rem, 0.375rem); /* 1080px時: 0.25rem (4px), 1280px時: 0.3125rem (5px), 1920px時: 0.375rem (6px) */
--gap01 : clamp(0.25rem, 0.4vw + 0.3rem, 0.75rem); /* 1080px時: 0.5rem (8px), 1280px時: 0.625rem (10px), 1920px時: 0.75rem (12px) */
--gap02 : clamp(0.5rem, 0.6vw + 0.3rem, 1.125rem); /* 1080px時: 0.75rem (12px), 1280px時: 0.9375rem (15px), 1920px時: 1.125rem (18px) */
--gap03 : clamp(0.75rem, 0.8vw + 0.3rem, 1.5rem); /* 1080px時: 1rem (16px), 1280px時: 1.25rem (20px), 1920px時: 1.5rem (24px) */
--gap04 : clamp(1rem, 1.5vw + 0.3rem, 1.875rem); /* 1080px時: 1.25rem (20px), 1280px時: 1.5625rem (25px), 1920px時: 1.875rem (30px) */
--gap05 : clamp(2rem, 1.5vw + 0.3rem, 3.75rem); /* 1080px時: 2.5rem (40px), 1280px時: 3.125rem (50px), 1920px時: 3.75rem (60px) */
--gap06 : clamp(2.5rem, 2.4vw + 0.3rem, 4.5rem); /* 1080px時: 3rem (48px), 1280px時: 3.75rem (60px), 1920px時: 4.5rem (72px) */
--gap07 : clamp(3rem, 2.8vw + 0.3rem, 5.25rem); /* 1080px時: 3.5rem (56px), 1280px時: 4.375rem (70px), 1920px時: 5.25rem (84px) */
--gap08 : clamp(3.5rem, 3.2vw + 0.3rem, 6rem); /* 1080px時: 4rem (64px), 1280px時: 5rem (80px), 1920px時: 6rem (96px) */
--gap09 : clamp(4rem, 3.6vw + 0.3rem, 6.75rem); /* 1080px時: 4.5rem (72px), 1280px時: 5.625rem (90px), 1920px時: 6.75rem (108px) */
--gap10 : clamp(4.5rem, 4vw + 0.3rem, 9.5rem); /* 1080px時: 5rem (80px), 1280px時: 6.25rem (100px), 1920px時: 7.5rem (120px) */

/* max-width */
--max-width00 : 560px;
--max-width01 : 980px;
--max-width02 : 1280px;
--max-width-small : 88rem;
--max-width-mini : 72rem;
--max-width-tiny : 63rem;
--max-width-large : 1600px;
--max-width-big : 1800px;

/* radius */
--radius01: .2rem;
--radius02: .4rem; 

 
/* effect */
--blur01: blur(20px);

/* transition */
--transition01 : 0.45s cubic-bezier(0.77, 0, 0.175, 1);
--transition02 : cubic-bezier(0.77, 0, 0.175, 1) .5s;

/* duration */
--duration01 : .5s;
--duration02 : 1s;

/* timing */
--timing01 : cubic-bezier(0.77, 0, 0.175, 1);
--timing02 : cubic-bezier(.36,1.25,1,1);
}