@charset "UTF-8";
/* =========================================================
p-lpvn / ベトナムLPで使用される変数
========================================================= */
:root {
	/* 背景色 */
--base-color01: #08223B; 
--base-color02: #F2F5F7;
--base-color03: #F6F3EA;
--base-color04: #FFF4F4;/*薄い赤*/

--base-color05: #F4F9FD;/*薄い青*/
--base-color06: #202F46;
--base-color07: #32445F;

/* アクセントカラー */
--accent-color01: #025BF1;
--accent-color02: #278FE1;
--accent-color03: #D93735;
--accent-color04: #F4CE00;
--accent-color05: #A9C0EE;
--accent-color06: #F4CE00;
--accent-color07: #21BBEC;
--accent-color08: #3545D9;

/* グラデーション */
--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);

/* テキストカラー */
--text-color01: #08223B;
--text-color02: #8B9AB9;
--text-color03: rgba(#0E0B0B,.3);
--text-color04: rgba(#fff,1);
--text-color05: #A9C0EE;

/*リンクカラー */
--link-color01: #21BBEC;

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

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

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

/* シャドウカラー */
--shadow-color01: rgba(#0F2038,0.1);
--shadow-color02: rgba(#0F2038,0.3);

/* シャドウ */
--shadow01: 4px 6px 12px rgba(#0F2038,9%);

--shadow02: 0 6px 17px rgba(#01011c,28%);
--shadow03: 0 6px 24px rgba(#01011c,43%);

/* 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;

/* フォントファミリー */
--font-family01:  "Montserrat", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
--font-family02: "Montserrat", sans-serif, Meiryo;

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

/* margin */

--margin00 : .8rem;
--margin01 : 1.6rem;
--margin02 : 3.2rem;
--margin03 : 4rem;
--margin04 : 8rem;
--margin05 : 12.0rem;

/* padding */
--padding00 : .8rem;
--padding01 : 1.6rem;
--padding02 : 3.2rem;
--padding03 : 4rem;
--padding04 : 8rem;
--padding05 : 12.0rem;

/* gap */
--gap00 : 1rem;
--gap01 : 2rem;
--gap02 : 4rem;
--gap03 : 6rem;
--gap04 : 8rem;
--gap05 : 10rem;

/* max-width */
--max-width00 : 560px;
--max-width01 : 720px;
--max-width02 : 1280px;
--max-width-small : 88rem;
--max-width-mini : 72rem;
--max-width-tiny : 63rem;
--max-width-big : 1640px;

/* radius */
--radius01: .5rem;
--radius02: 1rem; 

 
/* 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);
}