@charset "utf-8";
:root {
	/* image ----------------------  */
	/* --static-icon-blog: url("//id-static.wania.jp/service/img/service-icon-blog.svg"); */
	/* help icon */

    /* size ----------------------  */
    --size-max-width: 1200px;
    --size-login-width: 640px;
    --size-small-width: 640px;

	/* color ----------------------- */
	/* 背景色・メインカラー ================= */
	--color-main-accent: #FF820D;
	--color-main-accent2: #79A31D;
    --color-main-accent3: #DDE41A;
	/* 背景色 */
    --color-bg: #FFF;
    /* 背景色 - サブ */
	--color-bg-sec: #f7f7f7;
    /* コンテンツ部分の背景色 */
	--color-content-bg: #ffffff;
    /* TOPヒーロー等の背景 */
    --color-bg-third: #F8F8E7;
    /* ナビのHover */
	--color-nav-hover: #363636;
    /* // ポータルのメインブルーカラー */
	--color-main-sub: #74CFE2;
    /* hover背景 (Hoverで薄い背景を使用している箇所)*/
    --color-bg-hover: #f2f2f2;
    /* オーバーレイ背景（モーダル、SPメニューの透過背景） */
    --color-bg-overray: rgba(0, 0, 0, 0.6);
    /* 成功カラー */
    --color-success: #04a852;
    --color-error: #ef5763;
    /* 成功時の背景色 */
    --color-bg-success:#eef7e4 ;
    --color-bg-error: #fbf1f2; /*#f1e5e6*/
    /* メインボタン背景色 */
    --color-btn-primary-bg: #FF820D;
    --color-btn-primary-bg-hover: #FF820D;
    
    /* walletなどのHover背景色 */
    --color-content-bg-wallet: #fff9f3;

	/* フォント関連 ========================= */
	/* フォントメインカラー */
	--color-text: #333;
	/* フォントサブ補足（補足説明等） */
	--color-text-sub: #8a8a8a;
    /* フォントメインカラー 反転カラー（白抜き）*/
	--color-text-inversion: #FFF;
	/* Disable */
    --color-text-disable: #b0b0b0;
	/* リンクカラー */
	--color-text-link:#2f86ed;
	--color-text-link-active:#ff0000;
	--color-text-link-hover:#ff0000;
	/* エラーの赤 */
    --color-text-error:var(--color-error);
    /* 警告・注意文章　（主に決済関連の注意文） */
    --color-text-warning: #ef5763;
	/* アクセント・メイン strongテキストに利用 */
	--color-text-accent:#FF6600;
	--color-text-accent2:var(--color-main-accent2);
    /* R18フォント */
    --color-text-r18: #ff0066;
    /* インプット関連 */
    --color-text-input-placeholder: #B2B2B2;
    

	/* ボーダー関連 ========================= */
	--color-bdr-main: #e1e1e1;
	--color-bdr-light: #ededed;
    /* エラー・警告用 */
    --color-bdr-error: #ef5763;
    /* コンテンツ角丸(コンテンツの角丸) */
    --raidus-contents: 4px;
    /* ボーダーボタン */
    --color-bdr-btn-primary:#8A2BE2;

	/* ボタン関連 ========================= */
    /* ボタントランジション */
    --btn-main-anim: all .14s linear;
	/* 送信ボタン */
	--btn-primary-bg: var(--color-btn-primary-bg);
	--btn-primary-bg-hover: var(--color-btn-primary-bg-hover);
	--btn-primary-border: var(--color-btn-primary-bg);
	--btn-primary-border-hover: var(--color-btn-primary-bg);
	--btn-primary-text: #fff;
	--btn-raidus: 30px;
    --btn-font-size: 16px;
	/* ノーマルボタン */
	--btn-normal-bg: #f7f7f7;
	--btn-normal-bg-hover: #f7f7f7;
	--btn-normal-border: #CCC;
	--btn-normal-border-hover: #939393;
	--btn-normal-text: var(--color-text);
    /* ノーマルボタン（キャンセル） 決済の枠線のみ */
    --btn-cancel-bg: var(--color-bg);
	--btn-cancel-bg-hover: var(--color-bg-sec);
	--btn-cancel-border: var(--color-bdr-main);
	--btn-cancel-border-hover: var(--color-bdr-main);
	--btn-cancel-text: var(--color-text-sub);
	--btn-cancel-text-hover: var(--color-text-sub);
    /* ノーマルボタン - アクセントカラー枠線 */
    --btn-normal-accent-bg: #fff;
    --btn-normal-accent-bg-hover: #fff;
    --btn-normal-accent-border: var(--color-btn-primary-bg);
    --btn-normal-accent-border-hover: var(--color-btn-primary-bg-hover);
    --btn-normal-accent-text: var(--color-btn-primary-bg);

    /* 新規登録・ログインボタン */
    --btn-sh-radius: 40px;
    --btn-sh-text-size: 16px;
    --btn-sh-hover-anim: all .14s linear;
    --btn-sh-sp-padding: 12px 12px;
    /* login */
    --btn-login-bg: var(--color-btn-primary-bg);
    --btn-login-bg-hover: var(--color-btn-primary-bg-hover);
    --btn-login-text: #fff;
    --btn-login-text-hover: #fff;
    --btn-login-border: 1px solid transparent;
    --btn-login-border-hover: 1px solid transparent;
    /* regist */
    --btn-regist-bg: var(--color-btn-primary-bg);
    --btn-regist-bg-hover: var(--color-btn-primary-bg-hover);
    --btn-regist-text: #fff;
    --btn-regist-text-hover: #fff;
    --btn-regist-border: 1px solid transparent;
    --btn-regist-border-hover: 1px solid transparent;
    /* signup =========================  */
    --singup-block-border: var(--color-bdr-main);
    --singup-block-bg: var(--color-content-bg);
    --signup-block-intro-bg: #dee44f;
    --signup-block-intro-text: var(--color-text);  
    
	/* フォーム関連 ========================= */
    --form-input-border: 1px solid var(--color-bdr-main);
    --form-input-border-dark: 1px solid var(--color-bdr-main);/*サブ背景色内等のInput要素枠線*/
    --form-input-border-active: 1px solid #FF820D;/*#225bde*/
    --form-input-border-active-color: #FF820D;
    --form-input-border-error:  1px solid var(--color-text-error);
    --form-input-bg: #fff;
    --form-input-radius: 4px;
    --form-input-transition: box-shadow .14s linear, broder-color .14s linear;
    --form-input-boxshadow: 0 0 0 3px transparent;/*Giftで使用*/
    --form-input-boxshadow-active: 0 0 0 3px #fff8f2;
    --form-input-padding: 14px 14px;
    --form-input-padding-sp: 8px 12px;
    --form-input-padding-selct-sp: 8px 24px 8px 12px;
    --form-input-placeholder-color: var(--color-text-sub);

    /* 汎用的なコンテンツブロック ========================= */
    --content-block-bg: var(--color-content-bg);
    --content-block-border: 1px solid var(--color-bdr-main);
    --content-block-boxshadow: none;
    --content-block-radius: 6px;

	/* 個別エリア ========================= */
	/* ヘッダ */
    --header-bg-base: #fff;
	--header-bg: var(--color-bg-sec);
	--header-bdr-top: 1px solid var(--color-bdr-main);
	--header-bdr-bottom: 1px solid var(--color-bdr-main);
    --header-shadow: 0 0 10px #0000000F;

    --header-logo-text: "Helvetica";
    --header-logo-fontsize: 34px;
    --header-logo-fontweight: bold;

    --header-lang-bdr: transparent;
    --header-lang-bg: #f7f7f7;

    
	/* Table ボーダー (一覧などのTable) */
	--table-border: var(--color-bdr-main);
	--table-border-top: var(--color-bdr-main);
	--table-border-bottom: var(--color-bdr-main);
	--table-border-side: var(--color-bdr-main);
	--table-border-noborder: transparent;
    --table-even-bg: #f5f5f5;
    /* Table 取引履歴のアクセント青 */
    --table-border-accent: #2f84ed70;
    /* タイトル */
    /* サイトでのメインタイトルsh_heading_main_b */
    --sh-title-primary-bg: transparent;/*linear-gradient(0deg, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 100%)*/
	--sh-title-primary-border-top: none;/*3px solid #e80011*/
    --sh-title-primary-border-bottom: none;/*1px solid #BFBFBF*/
    --sh-title-primary-padding: 12px 0;/*6px 0 3px*/
    /* サイトでのサブタイトルsh_heading_main_b */
    --sh-title-sub-bg: transparent;/*#fff*/
	--sh-title-sub-border-top: none;/**/
    --sh-title-sub-border-bottom: none;/*1px solid #e80011*/
    --sh-title-sub-padding: 12px 0;/**/
    --sh-title-sub-border-left: none;/*Smartphone Ver*/
    /* スマホ版のH3タイトル */
    --sh-title-3th-bg: transparent;
    --sh-title-3th-border-top: none;
    --sh-title-3th-border-bottom: none;
    --sh-title-3th-padding: none;

    /* サイドメニュー */
    --sh-sidemenu-bg: transparent;/*linear-gradient(0deg, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 100%)*/
    --sh-sidemenu-border-top: 1px solid var(--color-bdr-main);
    --sh-sidemenu-border-left: 1px solid var(--color-bdr-main);
    --sh-sidemenu-border-right: 1px solid var(--color-bdr-main);
    --sh-sidemenu-border-bottom: 1px solid var(--color-bdr-main);
    --sh-sidemenu-text-color: var(--color-text-link);
    /* サブメニューサポートなどの表示 */
    --sh-sidemenu-sub-border: 1px solid transparent;
    /* サイドメニュー 開閉メニュー */
    /* ログイン */
    --sh-login-bg: #fff;
    --sh-login-border: 1px solid var(--color-bdr-main);
    --sh-login-radius: 4px;
    /* PC版 SP切り替えバー */
    --header-spchange-background: #f2f2f2;
    --header-spchange-linkcolor: #2885ea;
    --header-spchange-img: url(/image/jp/chage-disp-sp@2x.png);
    /* PC版 編集画面Table */
    --edit-table-border-color :var(--table-border);
    /* Table全体の上下Border */
    --edit-table-main-top: var(--table-border) solid 1px;
    --edit-table-main-left: var(--table-border) solid 1px;
    /* Table tdのBorder */
    --edit-table-td-bottom: none;
    --edit-table-td-right: none;
    /* thの背景 */
    --edit-table-th-bg: #FFF;

    /* Error 主にPayment ------- */
    --payment-error-bg: #f9e1e4;
    --payment-error-border: 1px solid var(--color-bdr-main);
    /* エラー反転 */
    --payment-error-fatal-bg: #e75360;
    --payment-error-fatal-text: #fff;

    /* 3d - s */
    --enroll-bg: var(--color-main-accent2);/*#2f86ed*/
    --enroll-text: var(--color-main-accent2);/*#2f86ed*/
    --enroll-load-bg: var(--color-main-accent2);/*#2f86ed*/
    --enroll-btn-bg: #fff;
    --enroll-btn-border: 1px solid #e0e0e0;
    --enroll-btn-padding: 16px 32px;

    /* 変換 ------------ */
    /* 残高 */
    --convert-balance-border: 1px solid #e3e3e3;
    --convert-balance-bg: var(--color-bg);
    --convert-balance-text: var(--color-text);
    --convert-balance-title-bg: #eef3e3;
    --convert-balance-title-text: var(--color-text);
    /* 汎用 */
    --convert-underline: none;
    /* テキストColor */
    --convert-text-color-accent: var(--color-text);
    --convert-text-color-caution: #e75757;
    --convert-text-color-strong: var(--color-text-accent);
    --convert-type-base-bg: #fff;
    /* 種類 */
    --convert-type-border: #e7dfd9;
    /* 振替 */
    --convert-topoint-border: var(--color-text-accent2);
    /* 変換 */
    --convert-topayment-border: var(--color-text-accent2);
    /* 注意文・入力エリア */
    --convert-type-base-sub-bg: var(--color-bg-sec);
    --convert-type-base-sub-border: var(--color-bdr-main);
    /* タイトル */
    --convert-type-title-border: 1px solid var(--color-main-accent2);
    --convert-type-title-allow: var(--color-main-accent2);
    --convert-type-title-label-bg: var(--convert-text-color-caution);
    --convert-type-title-label-text: #fff;
    /* サブタイトル　背景 */
    --convert-type-title-sub: linear-gradient(transparent 50%, #ffecc2 0%);
    /* 種類のボタン */
    --convert-type-btn-bg: var(--color-bg);
    --convert-type-btn-bg-hover: var(--color-main-accent2);
    --convert-type-btn-color: var(--color-main-accent2);
    --convert-type-btn-color-hover: var(--color-text-inversion);
    --convert-type-btn-border: 1px solid var(--color-main-accent2);
    --convert-type-btn-border-hover: 1px solid var(--color-main-accent2);


    /* ギフトコード ----------- */
    --gift-table-border: var(--color-bdr-main);
    /* ギフトコード 購入ボタン */
    --gift-list-buybtn-bg: var(--btn-primary-bg);
    --gift-list-buybtn-border: var(--btn-primary-border);
    --gift-list-buybtn-text: var(--btn-primary-text);
    /* ギフトコード 登録ボタン */
    --gift-list-registbtn-bg: transparent;
    --gift-list-registbtn-border: var(--color-text);
    --gift-list-registbtn-text: var(--color-text);
    --gift-comp-color: var(--color-success);
    /* 各アイコン */
    --gift-icon-used: var(--color-success);
    --gift-icon-opend: #2f86ed;
    --gift-icon-unopend: #b3b8c4;
    --gift-icon-locked: #2f86ed;
    --gift-icon-unlocked: var(--color-success);
    --gift-icon-message: #6d7584;
    --gift-icon-send-btn: var(--btn-primary-text);/*ボタンのアイコン*/
    /* ギフトコードヘルプ吹き出し */
    --gift-help-balloon-border: 1px solid #B3B8C4;
    --gift-help-balloon-border-color: #B3B8C4;
    --gift-help-balloon-shadow: 0 0 10px rgba(119,119,119,.2);
    --gift-help-balloon-bg: var(--color-bg);
    /* ポイントの残高 */
    --gift-point-balance: #EF5763;
    /* 購入完了 */
    --gift-success-color: var(--color-success);
    --gift-success-border: #E5EDE9;
    /* 切り替えタブ */
    --gift-switch-color-active: var(--color-main-accent);
    --gift-switch-bg-active: rgba(253, 231, 232, .6);
    /* ギフト一覧のシャドウ */
    --gift-list-shadow: 0 3px 13px rgba(173,173,173,.16);

    /* ページャー ----------- */
    --pager-main-bg: var(--color-bg-sec);/* ページャー全体に背景色を付ける場合のみ */
    --pager-main-anim: background-color .14s linear, color .14s linear;
    /* ページャーデフォルト */
    --pager-default-bg: var(--color-bg);
    --pager-default-text: var(--color-text);
    --pager-default-border: var(--color-bdr-main);
    /* 非選択時 */
    --pager-default-disable-bg:var(--color-bg);
    --pager-default-disable-text: var(--color-text-disable);
    --pager-default-disable-border: var(--color-bdr-light);
    /* 選択時・Hover */
    --pager-default-active-bg: var(--color-main-accent2);
    --pager-default-active-text: var(--color-text-inversion);
    --pager-default-active-border:var(--color-main-accent2);

    /* モーダル ------------- */
    --mordal-bg: var(--color-bg-overray);
    --mordal-contents-bg: var(--color-bg);
    --mordal-loader-ling: #f3f3f3;
    --mordal-loader-ling-active: var(--color-main-accent);

    /* mfa icon ------------- */
    --mfa-icon-on:var(--color-success);
    --mfa-icon-off:#B7B7B7;

    /* パンくずリスト */
    --stepnav-active: var(--color-main-accent2);
    --stepnav-done: #c7c7c7;
    --stepnav-default: #666666;
    --stepnav-inversion: #fff;/*白抜き文字（反転用）*/

    /* helpアイコン */
    --icon-help-bg: var(--color-main-accent2);
    --icon-help-text: #fff;

    /* 警告バー（パスワード:pt1）index */
    --attentionbar-pt1-bg: #dd7146;
    --attentionbar-pt1-text: var(--color-text-inversion);

    /* TOPページアラート関連　index  */
    --top-alert-base-bg: #f7f7f7;
    --top-alert-base-border: var(--color-bdr-main);

    --top-alert-success-bg: var(--color-bg-success);
    --top-alert-success-text: var(--color-success);
    --top-alert-success-border: transparent;

    --top-alert-error-bg: var(--color-bg-error);
    --top-alert-error-text: var(--color-error);
    --top-alert-error-border: var(--color-error);

    --top-alert-notice-bg: #fff2ee;
    --top-alert-notice-text: #e5642b;
    --top-alert-notice-border: transparent;

    --top-alert-info-bg: #ebf1f9;
    --top-alert-info-text: #3e6eaf;
    --top-alert-info-border: #e5edf7;
    /* 汎用アラート */
    --alert-caution-bg: #fcf8e3;
    --alert-caution-text: #8a6d3b;
    --alert-caution-border: #faebcc;
    /* 認証コード画面のFAQ  */
    --la-faq-text: var(--color-main-accent);

    /* ゾロ目キャンペーン */
    /* ポイント購入画面の説明 */
    --lottery-wallet-info-bg: #F6E7F1;
    --lottery-wallet-info-border: #030103;
    --lottery-wallet-info-text: #E32B9E;
    /* ポイント購入画面のラベル */
    --lottery-wallet-label-bg:#E32B9E;
    --lottery-wallet-label-border:#E32B9E;
    --lottery-wallet-label-text:#FFF;
    /* ポイント還元キャンペーン */
    --wallet-camp-pointreturn-bg:var(--color-main-accent);
    --wallet-camp-pointreturn-text:#fff;
    --wallet-camp-pointreturn-border:var(--color-main-accent);
    /* ポイント還元キャンペーン その他 */
    --wallet-camp-other-bg:#fff;
    --wallet-camp-other-text:#7F858B;
    --wallet-camp-other-border:#DBE2EA;
    --wallet-label-other-bg:#fff;
    --wallet-label-other-text:#7F858B;
    --wallet-label-other-border:#DBE2EA;
    /* ポイント購入　お買い得 */
    --wallet-label-value-bg: #fff1e5;
    --wallet-label-value-text: var(--color-main-accent);
    --wallet-label-value-border: transparent;

    /* Helperボックスシャドウ ========================= */
    --helper-boxshadow: 0 0 12px rgba(100, 100, 100, .1);

    /*SP版配色追加*/
    /* Header Meunu Icon */
    --header-sp-icon: var(--color-main-accent2);
    /* TOP Menu */
    --topmenu-main-background:#f3f5ed;
    --topmenu-nav-background: #FFF;
    --topmenu-nav-border: #f3f5ed;
    --topmenu-nav-icon: var(--color-main-accent2);

    /*おすすめサービス*/
    --recomend-bg: #f3f5ed;
    --recomend-title-color: var(--color-main-accent2);
    --recomend-group-bg: #fff;
    --recomend-group-border: 1px solid transparent;
    --recomend-group-raidus: 4px;

    --footer-background: var(--color-bg);
    --footer-border-top: var(--color-bdr-main);
    --footer-link-text: var(--color-text);
    --footer-btn-border: var(--color-main-accent2);
    --footer-btn-background: var(--color-bg);
    --footer-btn-text: var(--color-main-accent2);

}