@charset "UTF-8";
/* 全デバイス共通汎用セレクタ

全デバイスで共通で使用するスタイルはこのCSSに記述してください。
---------------------------------------------------------- */
/* index　----------------------------------------------- 
カード
H1
H2
H3
リンクエリア
テキストエリア
タブ
ボタン
ローダー
エラー
ページャー
ポップアップ
モーダルウィンドウ
画像+テキストレイアウト
テキスト
リスト
汎用コンテンツエリア
フロート解除
要素の非表示
ストアカラー
位置調整
余白調整(margin)
余白調整(padding)
ゲーミフィケーション

---------------------------------------------------------- */
/* カード
ページ個別でスタイルを変更したい場合はstyle_**.cssに新たにスタイルを記述してください。
階層の深さにより、l1→l2と使い分ける
---------------------------------------------------------- */
/* h2含むコンテンツ配置用
---------------------------------------------------------- */
.cont_l1 {
	box-sizing: border-box;
	margin: 0 0 15px;
	padding: 0 0 15px;
	background-color: #ffffff;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
}

/* 見出しなしでコンテンツを配置する場合に使用 */
.cont_l1_noheading {
	box-sizing: border-box;
	margin: 0 0 15px;
	padding: 5px 0 15px;
	background-color: #ffffff;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
}

/* cont_l1_noheading内に要素を配置する場合に以下のクラスで囲うこと */
.noheadingTextarea {
	padding: 5px 10px 0;
}

/* バナーのみのページ等、背景もシャドウもしない場合に使用 */
.cont_l1_nobg {
	box-sizing: border-box;
	margin: 0 0 15px;
	padding: 0 0 15px;
}

/* お知らせや注意文言などのインフォメーションをカードで表示したい場合はこちらを使用 */
.cont_l1_infomation {
	background-color: #ffffff;
	box-shadow: #d3d3d3 0px 2px 1px;
	margin-bottom: 15px;
	padding: 15px;
}

/* h1と隣接した場合ネガティブマージンでh1側のマージンボトムを打ち消す */
/*h1 + .cont_l1_noheading,
h1 + .cont_l1_infomation {
	margin-top: -15px;
}*/

/* cont_l1内でh3単位でセクションを切る場合に使用
---------------------------------------------------------- */
.cont_l2 {
	margin: 0 5px 10px;
}

.cont_l2:last-child {
	margin-bottom: 0;
}

/* SP専用ページでPCやらくらくフォンにQRコード付きの案内を表示する場合に使用
---------------------------------------------------------- */
.contl2_caution {
	margin: 0 10px;
	overflow: hidden;
}

.contl2_caution .caution_txt {
	margin-bottom: 10px;
	float: left;
	width: 70%;
	font-size: 100%;
	line-height: 1.5;
}

.contl2_caution .caution_img {
	box-sizing: border-box;
	float: right;
	width: 25%;
	border: #dcdcdc 10px solid;
}

/* らくらくフォン用 */
@media (max-width: 540px) {
	.contl2_caution .caution_txt {
		float: none;
		width: 100%;
		margin-bottom: 10px;
	}
	.contl2_caution .caution_img {
		float: none;
		width: 45%;
		margin: 0 auto 10px;
	}
}

/* H1
---------------------------------------------------------- */
/* h1基本スタイル
デフォルトは左余白/背景画像無し、背景赤
---------------------------------------------------------- */
.h1_style_01 {
	margin: 0 0 15px;
	padding: 10px;
	color: #ffffff;
	background-color: #cf0f31;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

/* h1基本スタイル
左余白/背景画像あり
デフォルトの背景色は赤、ページ毎に背景画像、カラーをstyle_**で指定
---------------------------------------------------------- */
.h1_style_02 {
	margin: 0 0 15px;
	padding: 10px 10px 10px 40px;
	color: #ffffff;
	background-color: #cf0f31;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

/* ゲーミフィケーション専用スタイル
---------------------------------------------------------- */
.h1_style_gamification {
	margin: 0 0 15px;
	padding: 10px 10px 10px 40px;
	background: url(../../../template/gamification/img/bg_gamification_h1_icon.png) 5px center no-repeat #ec6890;
	background-size: 34px;
	color: #ffffff;
	-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

/* H2
---------------------------------------------------------- */
/* h2基本スタイル
ページ個別でスタイルを変更したい場合はstyle_**.cssに新たにスタイルを記述してください。
基本的に上記の.sect_style_01とセットで使用
デフォルトではボーダーカラーは赤
---------------------------------------------------------- */
.h2_style_01 {
	margin: 0 0 5px;
	padding: 5px 10px;
	border-top: 2px solid #cf0f31;
	background-color: #ffffff;
	color: #cf0f31;
}

/* リンク付（SPのみ）
---------------------------------------------------------- */
.h2_style_link_sp {
	margin-bottom: 5px;
	padding: 5px;
	border-top: solid 2px #cf0f31;
	background-color: #ffffff;
}

.h2_style_link_sp a {
	display: -webkit-flex;
	display: flex;
	align-items: center;
}

.h2_style_link_sp h2 {
	align-items: center;
	width: 50%;
	position: relative;
	padding-left: 12px;
	color: #cf0f31;
}

.h2_style_link_sp h2:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 0;
	height: 0;
	margin-top: -5px;
	border-style: solid;
	border-width: 5px 0 5px 10px;
	border-color: transparent transparent transparent #cf0f31;
}

.h2_style_link_sp .btnArea {
	width: 50%;
	text-align: right;
}

.h2_style_link_sp .btnArea span {
	display: block;
	position: relative;
	width: 80px;
	margin-left: auto;
	padding: 4px 10px 4px 4px;
	background-color: #cf0f31;
	background-size: 8px;
	text-align: center;
	color: #ffffff;
	font-size: 12px;
}

.h2_style_link_sp .btnArea span:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 4px;
	display: block;
	position: absolute;
	top: 50%;
	right: 6px;
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -4px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}

/* H3
---------------------------------------------------------- */
/* デフォルト
---------------------------------------------------------- */
.h3_style_01 {
	margin-bottom: 5px;
	padding: 5px;
	background-color: #959595;
	color: #ffffff;
}

/* 下線付き
---------------------------------------------------------- */
.h3_style_02 {
	margin-bottom: 5px;
	padding: 5px 5px 2px;
	border-bottom: solid 1px #959595;
}

/* テキストのみ
---------------------------------------------------------- */
.h3_style_03 {
	margin-bottom: 5px;
}

/* リンク付（SPのみ）
---------------------------------------------------------- */
.h3_style_link_sp {
	box-sizing: border-box;
	min-height: 32px;
	margin-bottom: 5px;
	padding-bottom: 2px;
	border-bottom: solid 1px #959595;
	background-color: #ffffff;
}

.h3_style_link_sp a {
	display: -webkit-flex;
	display: flex;
	align-items: center;
}

.h3_style_link_sp h3 {
	width: 50%;
	min-height: 26px;
	text-indent: -9999px;
}

.h3_style_link_sp .btnArea {
	width: 50%;
}

.h3_style_link_sp .btnArea span {
	display: block;
	position: relative;
	width: 80px;
	margin-left: auto;
	padding: 4px 10px 4px 4px;
	background-color: #cf0f31;
	background-size: 8px;
	text-align: center;
	color: #ffffff;
	font-size: 12px;
}

.h3_style_link_sp .btnArea span:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 4px;
	display: block;
	position: absolute;
	top: 50%;
	right: 6px;
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -4px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}

/* H4
---------------------------------------------------------- */
.h4_style_01 {
	margin: 0 0 5px;
	padding: 5px;
	background-color: #dcdcdc;
	color: #959595;
	font-weight: normal;
}

/* リンクエリア
---------------------------------------------------------- */
/* 1カラム */
.link_list_01 {
	margin: 10px 0 0;
	border-width: 1px 1px 0 1px;
	border-style: solid;
	border-color: #dcdcdc #dcdcdc transparent #dcdcdc;
	background-color: #ffffff;
}

.link_list_01 li {
	border-bottom: 1px solid #dcdcdc;
}

.link_list_01 li a,
.link_list_02 li a,
.link_list_03 li a,
.link_list_04 li a {
	display: block;
	padding: 8px 16px 8px 8px;
}

/* 2カラム */
.link_list_02 {
	box-sizing: border-box;
	width: 100%;
	margin: 10px 0 0;
	border-width: 1px 0 0 1px;
	border-style: solid;
	border-color: #dcdcdc transparent transparent #dcdcdc;
	background-color: #ffffff;
}

.link_list_02 li {
	box-sizing: border-box;
	float: left;
	width: 50%;
	border-width: 0 1px 1px 0;
	border-style: solid;
	border-color: transparent #dcdcdc #dcdcdc transparent;
	background-color: #ffffff;
}

/* 1カラム・2カラム混在 */
.link_list_03 {
	box-sizing: border-box;
	width: 100%;
	margin: 10px 0 0;
	border-width: 1px 0 0 1px;
	border-style: solid;
	border-color: #dcdcdc transparent transparent #dcdcdc;
	background-color: #ffffff;
}

/* １カラムデフォルト */
.link_list_03 li {
	box-sizing: border-box;
	float: left;
	width: 100%;
	border-width: 0 1px 1px 0;
	border-style: solid;
	border-color: transparent #dcdcdc #dcdcdc transparent;
	background-color: #ffffff;
}

/* 2カラムの場合このクラスをliにつける */
.link_list_03 li.half {
	width: 50%;
}

/* 4カラム(table仕様)
------------------------------------------------------ */
/*
table仕様のため、IE11でも問題なし
*/
.link_list_04 {
	width: 100%;
	margin-bottom: 20px;
	border-collapse: collapse;
}

.link_list_04 td {
	width: 25%;
	border: solid 1px #dcdcdc;
	background-color: #ffffff;
	vertical-align: middle;
}

.link_list_04 td a,
.link_list_04 td a:hover,
.link_list_04 td a:active {
	display: block;
	padding: 10px 12px 10px 5px;
	color: #6c6c6c;
	text-decoration: none;
}

/* 4カラム(フレキシブルボックス仕様)
------------------------------------------------------ */
/*
IE11では一部対応していない箇所があるため使用時は注意
box-alignがIE11では正しく動作しない
*/
.link_list_felxcol4 {
	box-sizing: border-box;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 10px 0 0 2px;
}

.link_list_felxcol4 li {
	box-sizing: border-box;
	width: 25%;
	margin: -1px 0 0 -1px;
	border-width: 1px;
	border-style: solid;
	border-color: #dcdcdc;
	background-color: #ffffff;
}

.link_list_felxcol4 li a {
	box-sizing: border-box;
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 10px 10px 10px 5px;
	display: -moz-box;
	display: -webkit-box;
	display: -o-box;
	display: -ms-box;
	-moz-box-align: center;
	-webkit-box-align: center;
	-ms-box-align: center;
}

.link_list_felxcol4 li a:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 6px;
	content: "";
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-width: 2px;
	border-color: #959595;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* リンクリスト用矢印アイコン */
.list_arw_gr_01,
.list_arw_gl_01,
.list_arw_wr_01,
.list_arw_wl_01,
.list_arw_gr_02 {
	display: block;
	position: relative;
}

/* 矢印（右）01 */
.list_arw_gr_01:after,
.list_arw_wr_01:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 6px;
	content: "";
	width: 6px;
	height: 6px;
	margin-top: -3px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* 矢印（右）02※グレー */
.list_arw_gr_02:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 6px;
	content: "";
	width: 10px;
	height: 10px;
	margin-top: -6px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* 矢印の色（グレー） */
.list_arw_gr_01:after,
.list_arw_gr_02:after,
.list_arw_gl_01:after {
	border-top: 1px solid #959595;
	border-right: 1px solid #959595;
}

/* 矢印の色（白） */
.list_arw_wr_01:after,
.list_arw_wl_01:after {
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}

/* 矢印（左）01 */
.list_arw_gl_01:after,
.list_arw_wl_01:after {
	display: block;
	position: absolute;
	top: 50%;
	left: 6px;
	content: "";
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-top: 1px solid #959595;
	border-right: 1px solid #959595;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

/* トグルメニュー（アコーディオン）
-------------------------------------------------------------------- */
/* QA用 */
/* 複数のアコーディオンメニュ-を設置する際の親要素とする */
.toggleList {
	margin-bottom: 15px;
}

/* アコーディオンメニュー本体 */
.toggleMenu_01 {
	border-bottom: solid 1px #ffffff;
	font-size: 14px;
}

/* リスト最後尾の罫線をキャンセル */
.toggleList .toggleMenu_01:last-child {
	border-bottom: none;
}

/* アコーディオンメニュータイトル兼ボタン */
.toggleMenu_01 .toggleTitle {
	display: block;
	padding: 5px;
	background-color: #959595;
	cursor: pointer;
}

/* アコーディオンメニューコンテンツ非表示 */
.toggleMenu_01 .toggleContent {
	display: none;
}

/* アコーディオンメニューアンカータグ */
.toggleMenu_01 .toggleContent a,
.toggleMenu_01 .toggleContent a:hover,
.toggleMenu_01 .toggleContent a:active {
	color: #000000;
}

/* アンカータグフォントサイズ調整 */
.toggleMenu_01 .toggleContent a.expd_arw_w_02 {
	font-size: 14px;
}

/* もっと見る */
.moreContent {
	display: none;
}

.moreButon {
	margin-bottom: 10px;
	padding: 5px;
	text-align: center;
}

.moreButon .expd_arw_g_01 {
	font-size: 14px;
}

.moreButon .expd_arw_g_01:after {
	border-width: 2px;
}

.moreButon .expd_arw_g_01.on:after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	margin-top: -4px;
}

/* 矢印付テキストリンク
----------------------------------- */
.txt_arw_gf_01,
.txt_arw_wf_01,
.txt_arw_rf_01 {
	display: inline-block;
	position: relative;
	padding-left: 1.5rem;
}

.txt_arw_gf_01:before,
.txt_arw_wf_01:before,
.txt_arw_rf_01:before {
	display: block;
	content: "";
	position: absolute;
	top: 25%;
	left: 0;
	width: 0;
	height: 0;
	margin-top: -3px;
	border-style: solid;
	border-width: 6px 0 6px 10px;
}

.txt_arw_gf_01:before {
	border-color: transparent transparent transparent #959595;
}

.txt_arw_wf_01 {
	color: #e6e6e6;
}

.txt_arw_wf_01:before {
	border-color: transparent transparent transparent #ffffff;
}

.txt_arw_wf_01:hover {
	color: #ffffff;
}

.txt_arw_wf_01:hover:before {
	border-color: transparent transparent transparent #cf0f31;
}

.txt_arw_rf_01:before {
	border-color: transparent transparent transparent #cf0f31;
}

/* テキストエリア
※テキスト主体のページの見出しに対して左右に5pxの余白を持たせる場合に使用。
cont_l2配下、H3下のリード分等で使用
---------------------------------------------------------- */
.txt_area_01 {
	padding: 0 5px;
}

/* タブ
---------------------------------------------------------- */
/* ページ遷移あり ------------------------ */
/* 上下共通設定 */
.tabList {
	display: table;
	width: 100%;
}

.tabList li {
	box-sizing: border-box;
	display: table-cell;
	width: 50%;
}

/* 左がアクティブ、右が非アクティブ */
.tabList.left li > div {
	box-sizing: border-box;
	display: block;
	margin: 0 5px 0 0;
	padding: 13px 10px 14px;
	text-align: center;
	font-size: 18px;
}

.tabList.left li > a {
	box-sizing: border-box;
	display: block;
	margin: 0 0 0 5px;
	padding: 13px 10px 14px;
	text-align: center;
	font-size: 18px;
}

/* 低解像度向け微調整
-------------------------------------- */
/* 375px以下 */
@media screen and (max-width: 375px) {
	.tabList.left li > a,
	.tabList.left li > div {
		font-size: 16px;
	}
}

/* 左がアクティブ、右が非アクティブ */
.tabList.right li > div {
	box-sizing: border-box;
	display: block;
	margin: 0 0 0 5px;
	padding: 13px 10px 14px;
	text-align: center;
	font-size: 18px;
}

.tabList.right li > a {
	box-sizing: border-box;
	display: block;
	margin: 0 5px 0 0;
	padding: 13px 10px 14px;
	text-align: center;
	font-size: 18px;
}

/* 低解像度向け微調整
-------------------------------------- */
/* 375px以下 */
@media screen and (max-width: 375px) {
	.tabList.right li > a,
	.tabList.right li > div {
		font-size: 16px;
	}
}

/* アクティブなタブ */
.tabList li > div.ac {
	position: relative;
	background-color: #ffffff;
	color: #959595;
}

/* 非アクティブなタブ */
.tabList li > a.link {
	position: relative;
	color: #ffffff;
	background: #959595;
}

/* ページ上部用 */
.tabList.top {
	background: #ebebeb;
	background: -moz-linear-gradient(top, #ebebeb 80%, #959595 100%);
	background: -webkit-linear-gradient(top, #ebebeb 80%, #959595 100%);
	background: linear-gradient(to bottom, #ebebeb 80%, #959595 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#959595',GradientType=0 );
}

.tabList.top li {
	vertical-align: bottom;
}

.tabList.top li > div.ac,
.tabList.top li > a.link {
	box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.3);
}

.tabList.top li > div.ac {
	margin-bottom: -2px;
	border-top: 2px solid #959595;
}

/* デフォルトのグラデ */
.tabList.top li > a.link {
	background: #959595;
	background: -moz-linear-gradient(top, #959595 80%, #777777 100%);
	background: -webkit-linear-gradient(top, #959595 80%, #777777 100%);
	background: linear-gradient(to bottom, #959595 80%, #777777 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#777777',GradientType=0 );
}

/* ページ下部用 */
.tabList.bottom {
	margin: 0 0 15px;
	background: #959595;
	background: -moz-linear-gradient(top, #959595 0%, #ebebeb 20%);
	background: -webkit-linear-gradient(top, #959595 0%, #ebebeb 20%);
	background: linear-gradient(to bottom, #959595 0%, #ebebeb 20%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#ebebeb',GradientType=0 );
}

.tabList.bottom li {
	vertical-align: top;
}

.tabList.bottom li > div.ac,
.tabList.bottom li > a.link {
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}

.tabList.bottom li > div.ac {
	border-bottom: 2px solid #959595;
}

/* デフォルトのグラデ */
.tabList.bottom li > a.link {
	background: #959595;
	background: -moz-linear-gradient(top, #777777 0%, #959595 20%);
	background: -webkit-linear-gradient(top, #777777 0%, #959595 20%);
	background: linear-gradient(to bottom, #777777 0%, #959595 20%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#777777', endColorstr='#959595',GradientType=0 );
}


/*　ゲーミフィケーション専用タブ
-------------------------------------------------- */

.link_state a,
.link_state a:hover,
.link_state a:active {
	display: block;
	text-decoration: none !important;
}

.gamification_nav_top {
	display: table;
	position: relative;
	width: 100%;
	border-bottom: 3px solid #ec6890;
	border-collapse: separate;
	border-spacing: 6px 0;
}

.gamification_nav_top__item {
	display: table-cell;
	position: relative;
	top: 3px;
}

.gamification_nav_top .current_state {
	padding: 0;
	background-color: #ffffff;
	border: 3px solid #ec6890;
	border-bottom: 6px #ffffff;
	border-radius: 7px 7px 0 0;
}

.gamification_nav_top .link_state {
	padding: 6px 0 2px 0;
	border-bottom: 3px solid #ec6890;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 0 8px;
}

@media screen and (min-width: 769px) {
	.gamification_nav_top .link_state {
		padding: 8px 5px;
	}
}

.gamification_nav_top.col3 .current_state {
	width: 33%;
}

.gamification_nav_top.col3 .link_state {
	width: 30%;
	background-image: url(../../../template/gamification/img/bg_gamification_top_col3.png);
}

@media screen and (min-width: 769px) {
	.gamification_nav_top.col3 .link_state {
		background-position: 0 14px;
	}
}

.gamification_nav_top.col4 .current_state {
	width: 22%;
}

.gamification_nav_top.col4 .link_state {
	width: 20%;
	background-image: url(../../../template/gamification/img/bg_gamification_top_col4.png);
}

@media screen and (min-width: 769px) {
	.gamification_nav_top.col4 .link_state {
		background-position: 0 12px;
	}
}

.gamification_nav_bottom {
	display: table;
	position: relative;
	width: 100%;
	margin-bottom: 10px;
	border-top: 3px solid #ec6890;
	border-collapse: separate;
	border-spacing: 6px 0;
}

.gamification_nav_bottom__item {
	display: table-cell;
	position: relative;
	top: -3px;
}

.gamification_nav_bottom .current_state {
	padding: 0 0 2px 0;
	background-color: #ffffff;
	border: 3px solid #ec6890;
	border-top: 6px #ffffff;
	border-radius: 0 0 7px 7px;
}

.gamification_nav_bottom .link_state {
	position: relative;
	padding: 0 0 8px 0;
	border-top: 3px solid #ec6890;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 0 -5px;
}

@media screen and (min-width: 769px) {
	.gamification_nav_bottom .link_state {
		padding: 8px 5px;
	}
}

.gamification_nav_bottom .link_state a {
	-webkit-transform: translateY(-3px);
	-ms-transform: translateY(-3px);
	transform: translateY(-3px);
}

.gamification_nav_bottom.col3 .current_state {
	width: 33%;
}

.gamification_nav_bottom.col3 .link_state {
	width: 30%;
	background-image: url(../../../template/gamification/img/bg_gamification_bottom_col3.png);
}

@media screen and (min-width: 769px) {
	.gamification_nav_bottom.col3 .link_state {
		background-position: 0 -8px;
	}
}

.gamification_nav_bottom.col4 .current_state {
	width: 22%;
}

.gamification_nav_bottom.col4 .link_state {
	width: 20%;
	background-image: url(../../../template/gamification/img/bg_gamification_bottom_col4.png);
}

@media screen and (min-width: 769px) {
	.gamification_nav_bottom.col4 .link_state {
		background-position: 0 -12px;
	}
}

.update_icon {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 20px;
	height: auto;
}

@media screen and (min-width: 769px) {
	.update_icon {
		width: 30px;
	}
}



/*　ボタン
-------------------------------------------------- */
/* 背景カラー：レッド */
/* 角丸あり */
.btn_style_red_01 {
	box-sizing: border-box;
	margin: 0 0 10px;
	padding: 0;
	border: 1px solid #ce0f31;
	border-radius: 6px;
	background-color: #ce0f31;
	box-shadow: 0px 4px 0px #a50c28;
	text-align: center;
}

/* リンクカラー、hover,active */
.btn_style_red_01 a,
.btn_style_red_01 a:hover,
.btn_style_red_01 a:active {
	display: block;
	padding: 10px 20px 10px 5px;
	text-decoration: none;
	color: #ffffff;
}

/* 背景カラー：グレー */
.btn_style_gray_01 {
	box-sizing: border-box;
	margin: 0 0 10px;
	padding: 0;
	border-radius: 6px;
	border: 1px solid #959595;
	background-color: #959595;
	box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.6);
	text-align: center;
}

.btn_style_gray_01 a,
.btn_style_gray_01 a:hover,
.btn_style_gray_01 a:active {
	display: block;
	padding: 10px 20px 10px 5px;
	text-decoration: none;
	color: #ffffff;
}

/* 角丸なし・・シャドウなし */
.btn_style_gray_03 {
	box-sizing: border-box;
	padding: 0;
	background-color: #dcdcdc;
	text-align: center;
}

/* リンクカラー、hover,active */
.btn_style_gray_03 a,
.btn_style_gray_03 a:hover,
.btn_style_gray_03 a:active {
	display: block;
	padding: 20px;
	color: #000000;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}

/* 低解像度ボタン用テキストサイズ調整
@media screen and (max-width:375px) {
	.btn_style_red_01 a,
	.btn_style_gray_01 a,
	.btn_style_gray_03 a {
		font-size: 80%;
	}
} */
/* ボタン用矢印
-------------------------------------------------- */
/* 共通設定 */
.btn_arw_wr_01,
.btn_arw_wr_01:hover,
.btn_arw_wr_01:active,
.btn_arw_wr_02,
.btn_arw_wr_02:hover,
.btn_arw_wr_02:active,
.btn_arw_wl_01,
.btn_arw_wl_01:hover,
.btn_arw_wl_01:active,
.btn_arw_wl_02,
.btn_arw_wl_02:hover,
.btn_arw_wl_02:active,
.btn_arw_wt_01,
.btn_arw_wt_01:hover,
.btn_arw_wt_01:active,
.btn_arw_wb_01,
.btn_arw_wb_01:hover,
.btn_arw_wb_01:active {
	position: relative;
	color: #ffffff;
	font-size: 16px;
	text-decoration: none;
}

.btn_arw_wr_01,
.btn_arw_wl_01,
.btn_arw_wt_01,
.btn_arw_wb_01 {
	display: block;
}

/* 右向き */
.btn_arw_wr_01:after {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	right: 5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 12px;
	border-color: transparent transparent transparent #ffffff;
	transform: translateY(-8px);
	-webkit-transform: translateY(-8px);
}

/* 左向き */
.btn_arw_wl_01:after {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	left: 5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 12px 8px 0;
	border-color: transparent #ffffff transparent transparent;
	transform: translateY(-8px);
	-webkit-transform: translateY(-8px);
}

/* 上向き */
.btn_arw_wt_01 span {
	position: relative;
}

.btn_arw_wt_01 span:after {
	display: inline-block;
	content: '';
	position: absolute;
	top: 50%;
	right: -20px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 8px 12px 8px;
	border-color: transparent transparent #ffffff transparent;
	transform: translateY(-8px);
	-webkit-transform: translateY(-8px);
}

/* 下向き */
.btn_arw_wb_01 span {
	position: relative;
}

.btn_arw_wb_01 span:after {
	display: inline-block;
	content: '';
	position: absolute;
	top: 50%;
	right: -20px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 8px 0 8px;
	border-color: #ffffff transparent transparent transparent;
	transform: translateY(-8px);
	-webkit-transform: translateY(-8px);
}

/* エクスパンド
--------------------------------------------- */
/* ホワイト01 */
.expd_arw_w_01,
.expd_arw_w_02 {
	display: block;
	position: relative;
	padding: 5px 20px 5px 10px;
	font-size: 16px;
	cursor: pointer;
}

.expd_arw_w_01,
.expd_arw_w_01:hover,
.expd_arw_w_01:active,
.expd_arw_w_02,
.expd_arw_w_02:hover,
.expd_arw_w_02:active {
	color: #ffffff;
	text-decoration: none;
}

.expd_arw_w_01:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	content: "";
	width: 12px;
	height: 12px;
	margin-top: -10px;
	border-top: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	transition: 0.3s;
}

.expd_arw_w_01.on:after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	margin-top: -4px;
}

/* ホワイト02 */
.expd_arw_w_02:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	content: "";
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-top: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	transition: 0.3s;
}

.expd_arw_w_02.on:after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	margin-top: -4px;
}

/* グレー */
.expd_arw_g_01 {
	display: block;
	position: relative;
	padding-right: 20px;
	font-size: 16px;
	cursor: pointer;
}

.expd_arw_g_01,
.expd_arw_g_01:hover,
.expd_arw_g_01:active {
	color: #959595;
	text-decoration: none;
}

.expd_arw_g_01:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	content: "";
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-top: 2px solid #959595;
	border-right: 2px solid #959595;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	transition: 0.3s;
}

.expd_arw_g_01.on:after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	margin-top: -4px;
}

/*	-- くじ専用スタイル start ------------------------ */
/* SP専用戻るボタン
------------------------------------------- */
.btn_style_gray_01 .btn_arw_wr_02,
.btn_style_gray_01 .btn_arw_wr_02:hover,
.btn_style_gray_01 .btn_arw_wr_02:active {
	display: block;
	padding: 5px 20px 5px 5px;
	text-decoration: none;
	color: #ffffff;
}

.btn_style_gray_01 .btn_arw_wr_02:after,
.btn_style_gray_01 .btn_arw_wr_02:hover:after,
.btn_style_gray_01 .btn_arw_wr_02:active:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 6px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #ffffff;
	transform: translateY(-6px);
	-webkit-transform: translateY(-6px);
}

.btn_style_gray_01 .btn_arw_wl_02,
.btn_style_gray_01 .btn_arw_wl_02:hover,
.btn_style_gray_01 .btn_arw_wl_02:active {
	display: block;
	padding: 5px 20px 5px 5px;
	text-decoration: none;
	color: #ffffff;
}

.btn_style_gray_01 .btn_arw_wl_02:after,
.btn_style_gray_01 .btn_arw_wl_02:hover:after,
.btn_style_gray_01 .btn_arw_wl_02:active:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 6px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 10px 6px 0;
	border-color: transparent #ffffff transparent transparent;
	transform: translateY(-6px);
	-webkit-transform: translateY(-6px);
}

/* h1内表示用戻るボタン
------------------------------------------- */
.btnReturn {
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	width: 48px;
	margin-right: 50px;
	padding: 5px;
	border-radius: 3px;
	background-color: #dcdcdc;
	font-size: 12px;
	line-height: 1;
	color: #6c6c6c;
	text-align: right;
	-webkit-transform: translateY(-0.2em);
	transform: translateY(-0.2em);
}

.btnReturn:hover,
.btnReturn:active {
	font-size: 12px;
	color: #6c6c6c;
	line-height: 1;
}

.btnReturn::before {
	display: block;
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent #959595 transparent transparent;
	border-width: 6px 8px 6px 0;
}

/*	-- くじ専用スタイル end ------------------------ */
/* メルマガ(メールマガジン)設定ボタン
---------------------------------------------------------- */
/* ボタン */
#mailSettingList_selected-button {
	clear: both;
	overflow: hidden;
}

input[type="button"]#selected-button_on, input[type="button"]#selected-button_off {
	width: 40%;
	float: left;
	background-color: #c9c9c9;
	margin: 10px 5% 10px;
	text-align: center;
	padding: 10px;
}

input[type="button"], input[type="submit"] {
	outline: none;
	border: 0;
	line-height: 130%;
	cursor: pointer;
	-webkit-appearance: none;
	border-radius: 0;
}

/* ローダー
※動的コンテンツを読みこむまでのウェイト時間に表示するgigアニメ用スタイル
---------------------------------------------------------- */
.loader {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto;
	padding: 20px;
}

/* エラー
強調したい情報を表示する場合に使用
----------------------------------------------------------
＜使い分け＞
１）importantNotices
→VM改修初期のページで使用されている。いずれ「importantNotices_01」に置き換え予定

２）importantNotices_01
→「importantNotices」の置き換え用。エラー用コンポーネントの種類が増えたため改名
各種設定は「importantNotices」と同様
テキスト中央寄せ。

３）importantNotices_02
→内部にボタンを配置する場合はこれを使用。主にログイン画面で使用。

４）importantNotices_03
→LP基盤メンテ専用。「cont_l1_infomation」と組み合わせて使用。
---------------------------------------------------------- */
.importantNotices {
	box-sizing: border-box;
	padding: 5px 10px;
	border: 2px solid #cf0f31;
	background-color: #ffffff;
	text-align: center;
	color: #000;
	font-size: 16px;
}

.importantNotices_01 {
	box-sizing: border-box;
	padding: 5px 10px;
	border: 2px solid #cf0f31;
	background-color: #ffffff;
	text-align: center;
	color: #000;
	font-size: 16px;
}

/* メッセージ内にボタンを配置する場合はこちらを使用 */
.importantNotices_02 {
	box-sizing: border-box;
	margin: 0 10%;
	padding: 10px;
	border: 2px solid #cf0f31;
	background-color: #ffffff;
	color: #000;
	font-size: 16px;
}

/* メッセージ内にボタンを配置する場合の幅指定 */
.importantNotices_02 > .btn_style_red_01,
.importantNotices_02 > .btn_style_gray_01 {
	width: 90%;
	margin: 0 auto 10px;
}

/* メッセージ内の赤文字の指定 */
.importantNotices em,
.importantNotices_01 em,
.importantNotices_02 em {
	color: #cf0f31;
}

/* LP基盤メンテ画面用
----------------------------------- */
.importantNotices_03 {
	margin: 10px;
	padding: 10px;
	background: #ffffff;
	border: solid 2px #cf0f31;
}

/* エラーメンテ用低解像度端末用ボタンテキストサイズ調整 */
@media screen and (max-width: 375px) {
	.importantNotices_02 > .btn_style_red_01 a,
	.importantNotices_03 > .btn_style_red_01 a,
	.importantNotices_02 > .btn_style_gray_01 a,
	.importantNotices_03 > .btn_style_gray_03 a {
		font-size: 80%;
	}
}

/* ページャー
------------------------------------------ */
#page_ctrl {
	background-color: #ffffff;
	text-align: center;
}
/* ページャー内aタグ初期設定 */
#page_ctrl a,
#page_ctrl a:hover,
#page_ctrl a:active {
	display: block;
	border: 1px solid #dcdcdc;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.2);
	color: #ffffff;
}

#page_before,
#page_after {
	display: inline-block;
}

#page_number {
	margin-bottom: 10px;
}

#page_before li,
#page_after li,
#page_number li {
	display: inline-block;
	margin: 0 5px;
}

#page_number a {
	padding: 10px;
}
#page_before a,
#page_after a {
	padding: 10px 5px;
}

/* カレント */
.current_page > a,
.current_page > a:hover,
.current_page > a:active {
	background: #ffffff !important;
	color: #cc0000 !important;
}

.terminal {
	visibility: hidden;
	cursor: default;
}

.terminal_none {
	display: none !important;
}

.mission1_useInfo_caution_text {
	display: block !important;
	padding: 10% 5%;
	border-collapse: separate;
	border-spacing: 0px;
	border: 1px solid #dcdcdc;
	text-align: center;
}

/* ポップアップ
---------------------------------------------------------- */
.popupMessage {
	width: 50%;
	margin: 0 auto;
	-webkit-animation: tutorial_store_messageAnimetion .8s ease infinite alternate;
	animation: tutorial_store_messageAnimetion .8s ease infinite alternate;
}

@-webkit-keyframes tutorial_store_messageAnimetion {
	0% {
		transform: translateY(-2px);
	}
	100% {
		transform: translateY(2px);
	}
}

@keyframes tutorial_store_messageAnimetion {
	0% {
		transform: translateY(-2px);
	}
	100% {
		transform: translateY(2px);
	}
}

.popupMessage_inner {
	position: relative;
	border: 2px solid #dcdcdc;
	border-radius: 10px;
	background-color: #ffffff;
	font-size: 12px;
}

.popupMessage_inner:before {
	content: "";
	display: block;
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 14px 10px 0 10px;
	border-color: #dcdcdc transparent transparent transparent;
	-weblkit-transform: translateX(-10px);
	transform: translateX(-10px);
	z-index: 10;
}

.popupMessage_inner:after {
	content: "";
	display: block;
	position: absolute;
	top: 92%;
	left: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 14px 10px 0 10px;
	border-color: #ffffff transparent transparent transparent;
	-weblkit-transform: translateX(-10px);
	transform: translateX(-10px);
	z-index: 11;
}

/* 閉じるボタン */
.btn_style_close_01 {
	box-sizing: border-box;
	display: table;
	float: right;
	width: 25px;
	height: 25px;
	margin: 4px 4px 0 0;
	padding: 4px;
	border-radius: 4px;
	background-color: #ebebeb;
	text-align: center;
}

.btn_style_close_01 span {
	box-sizing: border-box;
	display: table-cell;
	vertical-align: middle;
	font-size: 1.5em;
	line-height: 100%;
}

/* テキスト */
.append_store_message {
	margin: 10px 30px 10px 10px;
	text-align: center;
}

/* モーダルウィンドウ
---------------------------------------------------------- */
/* モーダルウィンドウを開くリンク */
.modal_link {
	cursor: pointer;
}

/* オーバーレイ */
#modal_overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 120%;
	background-color: rgba(0, 0, 0, 0.75);
}

/* モーダルウィンドウ本体 */
.modal_wrap {
	overflow: auto;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
}

.modal_contents {
	display: none;
	position: relative;
	width: 60%;
	background: #ffffff;
}

/* モーダルウィンドウを閉じるボタン */
.modal_close {
	box-sizing: border-box;
	display: inline-block;
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 2px 4px;
	background-color: #dcdcdc;
	cursor: pointer;
}

.modal_lock {
	overflow: hidden;
}

/* 画像+テキストレイアウト
---------------------------------------------------------- */
/* ボックスリンク
----------------------------------- */
[class*="listContainer"] {
	border-top: 1px solid #dcdcdc;
}

[class*="listContainer"] > div {
	position: relative;
	border-bottom: solid 1px #dcdcdc;
}

[class*="listContainer"] > div:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 1%;
	width: 2em;
	height: 2em;
	margin-top: -1em;
	border-top: 4px solid #959595;
	border-right: 4px solid #959595;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

[class*="listContainer"] > div a {
	display: block;
	padding: 2% 7.5% 2% 0%;
}

[class*="listContainer"] .pictArea {
	box-sizing: border-box;
	float: left;
	width: 27%;
	padding-right: 2%;
}

[class*="listContainer"] .pictArea img {
	display: block;
	border: solid 1px #dcdcdc;
}

[class*="listContainer"] .textArea {
	box-sizing: border-box;
	float: right;
	width: 73%;
}

[class*="listContainer"] .textArea p {
	margin: 5px 0 25px;
	color: #6c6c6c;
	font-size: 14px;
	line-height: 1.4;
	font-weight: bold;
}

/* 2カラム */
.listContainer.twoCol {
	width: 100%;
}

.listContainer.twoCol li {
	box-sizing: border-box;
	width: 50%;
}

.listContainer.twoCol li:nth-child(odd) {
	float: left;
}

.listContainer.twoCol li:nth-child(even) {
	float: right;
}

.listContainer.twoCol li > div {
	position: relative;
	border-bottom: solid 1px #dcdcdc;
}

.listContainer.twoCol li > div:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 2%;
	width: 1em;
	height: 1em;
	margin-top: -.5em;
	border-top: 2px solid #959595;
	border-right: 2px solid #959595;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.listContainer.twoCol li > div a {
	display: block;
	padding: 2% 7.5% 2% 0%;
}

/*-----各ストア用boxレイアウト共通------*/
[class*="box_"].box {
	margin: 5px 0 15px;
}

[class*="box_"].box img {
	box-sizing: border-box;
	display: block;
	border: 1px solid #959595;
}

[class*="box_"].box li:last-child {
	margin-right: 0;
}

[class*="box_"].box li a {
	display: block;
	position: relative;
	color: #6c6c6c;
}

[class*="box_"].box .description {
	margin-top: 3px;
	padding: 2%;
	background: #e6e6e6;
	text-align: left;
	line-height: 140%;
}

/*----- ボックスレイアウト1カラム box_oneCol ------*/
.box_oneCol li {
	margin-bottom: 5px;
}

.box_oneCol figure {
	position: relative;
}

.box_oneCol figure img {
	width: 100%;
}

[class*="box_"].box .caption {
	box-sizing: border-box;
	position: absolute;
	background: rgba(0, 0, 0, 0.5) 30%;
	bottom: 0;
	width: 100%;
	margin: 0;
	padding: 5px;
	color: #ffffff;
}

/*-----ボックスレイアウト2カラム　box_twoCol------*/
.box_twoCol li {
	float: left;
	width: 49%;
	margin: 0 2% 5px 0;
}

.box_twoCol li:nth-child(even) {
	margin-right: 0;
}

/*-----ボックスレイアウト3カラム　box_threeCol------*/
.box_threeCol li {
	float: left;
	width: 32.6%;
	margin: 0 1% 0 0;
}

/*-----ボックスレイアウト3カラム　box_fourCol------*/
.box_fourCol li {
	float: left;
	width: 24.2%;
	margin: 0 1% 0 0;
}

/*-----ボックスレイアウトテキスト&イメージ　box_txtImg------*/
.box_txtImg.box span {
	display: block;
	width: 49%;
}

.box_txtImg.box li {
	padding-bottom: 10px;
}

.box_txtImg.box li a {
	display: -webkit-box;
	/*--- Androidブラウザ用 ---*/
	display: flex;
}

.box_txtImg.box .description {
	display: block;
	float: right;
	width: 46%;
	margin: 0 0 0 1%;
}

/* テキスト
---------------------------------------------------------- */
/* テキストサイズを小さくする */
.smText {
	font-size: 12px;
}

.mdText {
	font-size: 14px;
}

/* 強調するテキスト
★emやstrongと組み合わせて使用
---------------------------------------------------------- */
/* 文字食赤+下線 */
.emText {
	color: #ff0000;
	font-weight: normal;
	text-decoration: underline;
}

/* 太字 */
.bdText {
	font-weight: bold;
}

/* 注釈（※印の下にテキストを回り込ませない）
---------------------------------------------------------- */
.noteText_01 {
	padding-left: 1em;
	text-indent: -1em;
}

.txt_note {
	padding-left: 1em;
	text-indent: -1em;
}

/* インフォメーション用カード（cont_l1_infomation）内に配置するテキスト用のクラス
---------------------------------------------------------- */
.text_infomaiton {
	font-size: 100%;
}

/* SPの場合は文字サイズを縮小 */
@media screen and (max-width: 729px) {
	.text_infomaiton {
		font-size: 12px;
	}
}

/* ドット付きテキスト
テキストをドット付きリストと同じ体裁にする場合に使用
---------------------------------------------------------- */
.dotText_01 {
	margin-bottom: 5px;
	padding-left: 1em;
	text-indent: -1em;
}

.dotText_01::before {
	content: '・';
}

.txt_dot {
	margin-bottom: 5px;
	padding-left: 1em;
	text-indent: -1em;
}

.txt_dot::before {
	content: '・';
}

/* リンク
テキストリンクのカラー設定
独立したリンクの場合は末尾に" ＞"をつける
hover、active時は下線付き
---------------------------------------------------------- */
/* テキストの一部をリンクにする場合
---------------------------------------------------------- */
/* 青 */
.link_blue {
	color: #003cc3;
}

.link_blue:hover,
.link_blue:active {
	color: #003cc3;
	text-decoration: underline;
}

/* 赤 */
.link_red {
	color: #cf0f31;
}

.link_red:hover,
.link_red:active {
	color: #cf0f31;
	text-decoration: underline;
}

/* 独立したテキストリンクの場合
---------------------------------------------------------- */
/* 青 */
.link_blue_arw {
	color: #003cc3;
}

.link_blue_arw:hover,
.link_blue_arw:active {
	color: #003cc3;
	text-decoration: underline;
}

.link_blue_arw:after {
	content: " ＞";
	color: #003cc3;
}

/* 赤 */
.link_red_arw {
	color: #cf0f31;
}

.link_red_arw:hover,
.link_red_arw:active {
	color: #cf0f31;
	text-decoration: underline;
}

.link_red_arw:after {
	content: " ＞";
	color: #cf0f31;
}

/* リスト
---------------------------------------------------------- */
/* ドット付リスト */
.list_dot_01 {
	margin: 5px 0 0;
}

.list_dot_01 > li {
	margin-bottom: 5px;
	padding-left: 1em;
	text-indent: -1em;
}

.list_num_01 > li:last-child {
	margin-bottom: 0;
}

.list_dot_01 > li:before {
	content: '・';
}

/* 番号付リスト */
.list_num_01 {
	counter-reset: listNum;
	/* カウンターリセット */
}

.list_num_01 > li {
	counter-increment: listNum;
	position: relative;
	margin-bottom: 5px;
	padding-left: 1.5em;
}

.list_num_01 > li:last-child {
	margin-bottom: 0;
}

.list_num_01 > li:before {
	position: absolute;
	top: 0;
	left: 0;
	content: counter(listNum);
	content: counter(listNum) ".　";
	width: 1.6em;
	height: 1.6em;
	/* background-color: #ccc;
	font-size: 0.8em;
	line-height: 1.6em; */
	text-align: center;
}

/* 注釈リスト（※付） */
.list_note_01 {
	margin: 5px 0 0;
}

.list_note_01 > li {
	margin-bottom: 5px;
	padding-left: 1em;
	text-indent: -1em;
}

.list_note_01 > li:last-child {
	margin-bottom: 0;
}

.list_note_01 > li:before {
	content: '※';
}

/*　リストマークなし（下マージン10px／5px） */
/* 下マージン10px */
.list_nonIcn_mb10 {
	margin: 10px 10px 0;
}

.list_nonIcn_mb10 > li {
	margin-bottom: 10px;
}

.list_nonIcn_mb10 > li:last-child {
	margin-bottom: 0;
}

/* 下マージン5px */
.list_nonIcn_mb5 {
	margin: 10px 10px 0;
}

.list_nonIcn_mb5 > li {
	margin-bottom: 5px;
}

.list_nonIcn_mb10 > li:last-child {
	margin-bottom: 0;
}

/* ポータル内定義リスト基本スタイル */
.list_def_01 {
	/**/
}

.list_def_01 > dt {
	margin-bottom: 5px;
	font-weight: bold;
}

.list_def_01 > dd {
	margin-bottom: 10px;
}

.list_def_01 > dd:last-child {
	margin-bottom: 0;
}

/* フロート解除
旧IEはサポート対象外のため、
IE6/7のhasLayoutのバグ対策の「zoom」は省略
overflowを使ったフロート解除は非推奨
---------------------------------------------------------- */
.cf::after {
	content: " ";
	display: block;
	clear: both;
}

/* 要素の非表示
デザイン上、要素を消すのではなく隠したい場合に使用
見出しがタブになっているなど、そのままコーディングした場合にSEO的に
問題が出る可能性がある場合にこのスタイルを適用
---------------------------------------------------------- */
.hide_elements {
	visibility: hidden;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: none;
	font-size: 0;
	line-height: 1;
}

/* ストアカラー
標準とタイルの2種類あり
---------------------------------------------------------- */
/* 標準 */
.s {
	border-left: 2px groove #f47d83;
}

.g {
	border-left: 2px groove #4d79c8;
}

.b {
	border-left: 2px groove #a7cd66;
}

.t {
	border-left: 2px groove #6471af;
}

.m {
	border-left: 2px groove #ff88c2;
}

.f {
	border-left: 2px groove #ababab;
}

.ap {
	border-left: 2px groove #66b8eb;
}

.h {
	border-left: 2px groove #f2a3c8;
}

.v {
	border-left: 2px groove #ec6a7e;
}

.an {
	border-left: 2px groove #ff9d7f;
}

.k {
	border-left: 2px groove #fbd580;
}

.d {
	border-left: 2px groove #f8b360;
}

.mg {
	border-left: 2px groove #66bd8d;
}

.go {
	border-left: 2px groove #c05765;
}

.he {
	border-left: 2px groove #78D6D2;
}

.l {
	border-left: 2px groove #fa646e;
}

.en {
	border-left: 2px groove #5bbc2e;
}

.jo {
	border-left: 2px groove #00bac7;
}

.ca {
	border-left: 2px groove #03a9f4;
}

.ch {
	border-left: 2px groove #00a2e6;
}

.ph {
	border-left: 2px groove #00a2e6;
}

.mk {
	border-left: 2px groove #d45215;
}
.dazn {
	border-left: 2px groove #0C161C;
}

.disney {
	border-left: 2px groove #01147b;
}

.sg {
	border-left: 2px groove #CC0033;
}

.nl {
	border-left: 2px groove #9FA0A0;
}

.ht {
	border-left: 2px groove #00a2e6;
}

/* タイル */
.shopping {
	background-color: #d72832;
}

.game {
	background-color: #144191;
}

.book {
	background-color: #009141;
}

.music {
	background-color: #e64191;
}

.appli {
	background-color: #0078c3;
}

.hits {
	background-color: #c36e96;
}

.video {
	background-color: #df0628;
}

.anime {
	background-color: #eb5528;
}

.fashion {
	background-color: #4a4a4a;
}

.kids {
	background-color: #f6ab00;
}

.travel {
	background-color: #21348c;
}

.delivery {
	background-color: #d78113;
}

.magazine {
	background-color: #009141;
}

.gourmet {
	background-color: #a50f23;
}

.health {
	background-color: #14a6a0;
}

.living {
	background-color: #fa646e;
}

.enjoypass {
	background-color: #5bbc2e;
}

.job {
	background-color: #00bac7;
}

.carshare {
	background-color: #03a9f4;
}

.dtvchannel {
	background-color: #00a2e6;
}

.photo {
	background-color: #3892B9;
}

.mealkit {
	background-color: #ff553c;
}

.dazn {
	background-color: #0C161C;
}

.disney {
	background-color: #01147b;
}

.sugotoku {
	border-left: 2px groove #CC0033;
}

.newlive {
	border-left: 2px groove #9FA0A0;
}

.hikaritv {
	border-left: 2px groove #00a2e6;
}

/* 位置調整
---------------------------------------------------------- */
/* 要素をセンタリング
ボックスを中央寄せにしたい場合に使用
上or下に余白を入れる場合調整用クラスと組み合わせて使用する。
※ただし、ボックス自身にwidth指定しないと効いてくれないので対象のブロックには必ず
widthを指定すること。
例）
<div class="foo mCenter mt20">
	<img>
</div>
---------------------------------------------------------- */
.mgn_center {
	margin: 0 auto;
}

/* ボックス内の要素の位置指定
ボックス内の要素の位置を指定する場合にこのクラスを追加してください。
※ボックスそのものの位置指定でないので注意！
.taCenter・・・要素を中央寄せに
.taLeft・・・要素を左寄せに
.taRight・・・要素を右寄せに
例）
<p class="taCenter">テキスト</p>
---------------------------------------------------------- */
.txt_center {
	text-align: center;
}

.txt_left {
	text-align: left;
}

.txt_right {
	text-align: right;
}

/* 余白調整(margin)
＜用途＞
.mt** ・・・上方向にmarginを効かせる
.mb** ・・・下方向にmarginを効かせる
.mr** ・・・右方向にmarginを効かせる
.ml** ・・・左方向方向にmarginを効かせる
.ma** ・・・全方向にmarginを効かせる
---------------------------------------------------------- */
/* 上方向 */
.mt0 {
	margin-top: 0px !important;
}

.mt5 {
	margin-top: 5px !important;
}

.mt10 {
	margin-top: 10px !important;
}

.mt15 {
	margin-top: 15px !important;
}

.mt20 {
	margin-top: 20px !important;
}

.mt25 {
	margin-top: 25px !important;
}

.mt30 {
	margin-top: 30px !important;
}

.mt35 {
	margin-top: 35px !important;
}

.mt40 {
	margin-top: 40px !important;
}

.mt45 {
	margin-top: 45px !important;
}

.mt50 {
	margin-top: 50px !important;
}

.mt55 {
	margin-top: 55px !important;
}

.mt60 {
	margin-top: 60px !important;
}

.mt65 {
	margin-top: 65px !important;
}

.mt70 {
	margin-top: 70px !important;
}

.mt75 {
	margin-top: 75px !important;
}

.mt80 {
	margin-top: 80px !important;
}

.mt85 {
	margin-top: 85px !important;
}

.mt90 {
	margin-top: 90px !important;
}

.mt95 {
	margin-top: 95px !important;
}

.mt100 {
	margin-top: 100px !important;
}

/* 下方向 */
.mb0 {
	margin-bottom: 0px !important;
}

.mb5 {
	margin-bottom: 5px !important;
}

.mb10 {
	margin-bottom: 10px !important;
}

.mb15 {
	margin-bottom: 15px !important;
}

.mb20 {
	margin-bottom: 20px !important;
}

.mb25 {
	margin-bottom: 25px !important;
}

.mb30 {
	margin-bottom: 30px !important;
}

.mb35 {
	margin-bottom: 35px !important;
}

.mb40 {
	margin-bottom: 40px !important;
}

.mb45 {
	margin-bottom: 45px !important;
}

.mb50 {
	margin-bottom: 50px !important;
}

.mb55 {
	margin-bottom: 55px !important;
}

.mb60 {
	margin-bottom: 60px !important;
}

.mb65 {
	margin-bottom: 65px !important;
}

.mb70 {
	margin-bottom: 70px !important;
}

.mb75 {
	margin-bottom: 75px !important;
}

.mb80 {
	margin-bottom: 80px !important;
}

.mb85 {
	margin-bottom: 85px !important;
}

.mb90 {
	margin-bottom: 90px !important;
}

.mb95 {
	margin-bottom: 95px !important;
}

.mb100 {
	margin-bottom: 100px !important;
}

/* 右方向 */
.mr0 {
	margin-right: 0px !important;
}

.mr5 {
	margin-right: 5px !important;
}

.mr10 {
	margin-right: 10px !important;
}

.mr15 {
	margin-right: 15px !important;
}

.mr20 {
	margin-right: 20px !important;
}

.mr25 {
	margin-right: 25px !important;
}

.mr30 {
	margin-right: 30px !important;
}

.mr35 {
	margin-right: 35px !important;
}

.mr40 {
	margin-right: 40px !important;
}

.mr45 {
	margin-right: 45px !important;
}

.mr50 {
	margin-right: 50px !important;
}

.mr55 {
	margin-right: 55px !important;
}

.mr60 {
	margin-right: 60px !important;
}

.mr65 {
	margin-right: 65px !important;
}

.mr70 {
	margin-right: 70px !important;
}

.mr75 {
	margin-right: 75px !important;
}

.mr80 {
	margin-right: 80px !important;
}

.mr85 {
	margin-right: 85px !important;
}

.mr90 {
	margin-right: 90px !important;
}

.mr95 {
	margin-right: 95px !important;
}

.mr100 {
	margin-right: 100px !important;
}

/* 左方向 */
.ml0 {
	margin-left: 0px !important;
}

.ml5 {
	margin-left: 5px !important;
}

.ml10 {
	margin-left: 10px !important;
}

.ml15 {
	margin-left: 15px !important;
}

.ml20 {
	margin-left: 20px !important;
}

.ml25 {
	margin-left: 25px !important;
}

.ml30 {
	margin-left: 30px !important;
}

.ml35 {
	margin-left: 35px !important;
}

.ml40 {
	margin-left: 40px !important;
}

.ml45 {
	margin-left: 45px !important;
}

.ml50 {
	margin-left: 50px !important;
}

.ml55 {
	margin-left: 55px !important;
}

.ml60 {
	margin-left: 60px !important;
}

.ml65 {
	margin-left: 65px !important;
}

.ml70 {
	margin-left: 70px !important;
}

.ml75 {
	margin-left: 75px !important;
}

.ml80 {
	margin-left: 80px !important;
}

.ml85 {
	margin-left: 85px !important;
}

.ml90 {
	margin-left: 90px !important;
}

.ml95 {
	margin-left: 95px !important;
}

.ml100 {
	margin-left: 100px !important;
}

/* 全方向 */
.ma0 {
	margin: 0px !important;
}

.ma5 {
	margin: 5px !important;
}

.ma10 {
	margin: 10px !important;
}

.ma15 {
	margin: 15px !important;
}

.ma20 {
	margin: 20px !important;
}

.ma25 {
	margin: 25px !important;
}

.ma30 {
	margin: 30px !important;
}

.ma35 {
	margin: 35px !important;
}

.ma40 {
	margin: 40px !important;
}

.ma45 {
	margin: 45px !important;
}

.ma50 {
	margin: 50px !important;
}

.ma55 {
	margin: 55px !important;
}

.ma60 {
	margin: 60px !important;
}

.ma65 {
	margin: 65px !important;
}

.ma70 {
	margin: 70px !important;
}

.ma75 {
	margin: 75px !important;
}

.ma80 {
	margin: 80px !important;
}

.ma85 {
	margin: 85px !important;
}

.ma90 {
	margin: 90px !important;
}

.ma95 {
	margin: 95px !important;
}

.ma100 {
	margin: 100px !important;
}

/* 余白調整(padding)
＜用途＞
.pt** ・・・上方向にpaddingを効かせる
.pb** ・・・下方向にpaddingを効かせる
.pr** ・・・右方向にpaddingを効かせる
.pl** ・・・左方向方向にpaddingを効かせる
.pa** ・・・全方向にpaddingを効かせる
---------------------------------------------------------- */
/* 上方向 */
.pt0 {
	padding-top: 0 !important;
}

.pt5 {
	padding-top: 5px !important;
}

.pt10 {
	padding-top: 10px !important;
}

.pt15 {
	padding-top: 15px !important;
}

.pt20 {
	padding-top: 20px !important;
}

.pt25 {
	padding-top: 25px !important;
}

.pt30 {
	padding-top: 30px !important;
}

.pt35 {
	padding-top: 35px !important;
}

.pt40 {
	padding-top: 40px !important;
}

.pt45 {
	padding-top: 45px !important;
}

.pt50 {
	padding-top: 50px !important;
}

.pt55 {
	padding-top: 55px !important;
}

.pt60 {
	padding-top: 60px !important;
}

.pt65 {
	padding-top: 65px !important;
}

.pt70 {
	padding-top: 70px !important;
}

.pt75 {
	padding-top: 75px !important;
}

.pt80 {
	padding-top: 80px !important;
}

.pt85 {
	padding-top: 85px !important;
}

.pt90 {
	padding-top: 90px !important;
}

.pt95 {
	padding-top: 95px !important;
}

.pt100 {
	padding-top: 100px !important;
}

/* 下方向 */
.pb0 {
	padding-bottom: 0 !important;
}

.pb5 {
	padding-bottom: 5px !important;
}

.pb10 {
	padding-bottom: 10px !important;
}

.pb15 {
	padding-bottom: 15px !important;
}

.pb20 {
	padding-bottom: 20px !important;
}

.pb25 {
	padding-bottom: 25px !important;
}

.pb30 {
	padding-bottom: 30px !important;
}

.pb35 {
	padding-bottom: 35px !important;
}

.pb40 {
	padding-bottom: 40px !important;
}

.pb45 {
	padding-bottom: 45px !important;
}

.pb50 {
	padding-bottom: 50px !important;
}

.pb55 {
	padding-bottom: 55px !important;
}

.pb60 {
	padding-bottom: 60px !important;
}

.pb65 {
	padding-bottom: 65px !important;
}

.pb70 {
	padding-bottom: 70px !important;
}

.pb75 {
	padding-bottom: 75px !important;
}

.pb80 {
	padding-bottom: 80px !important;
}

.pb85 {
	padding-bottom: 85px !important;
}

.pb90 {
	padding-bottom: 90px !important;
}

.pb95 {
	padding-bottom: 95px !important;
}

.pb100 {
	padding-bottom: 100px !important;
}

/* 右方向 */
.pr0 {
	padding-right: 0 !important;
}

.pr5 {
	padding-right: 5px !important;
}

.pr10 {
	padding-right: 10px !important;
}

.pr15 {
	padding-right: 15px !important;
}

.pr20 {
	padding-right: 20px !important;
}

.pr25 {
	padding-right: 25px !important;
}

.pr30 {
	padding-right: 30px !important;
}

.pr35 {
	padding-right: 35px !important;
}

.pr40 {
	padding-right: 40px !important;
}

.pr45 {
	padding-right: 45px !important;
}

.pr50 {
	padding-right: 50px !important;
}

.pr55 {
	padding-right: 55px !important;
}

.pr60 {
	padding-right: 60px !important;
}

.pr65 {
	padding-right: 65px !important;
}

.pr70 {
	padding-right: 70px !important;
}

.pr75 {
	padding-right: 75px !important;
}

.pr80 {
	padding-right: 80px !important;
}

.pr85 {
	padding-right: 85px !important;
}

.pr90 {
	padding-right: 90px !important;
}

.pr95 {
	padding-right: 95px !important;
}

.pr100 {
	padding-right: 100px !important;
}

/* 左方向 */
.pl0 {
	padding-left: 0 !important;
}

.pl5 {
	padding-left: 5px !important;
}

.pl10 {
	padding-left: 10px !important;
}

.pl15 {
	padding-left: 15px !important;
}

.pl20 {
	padding-left: 20px !important;
}

.pl25 {
	padding-left: 25px !important;
}

.pl30 {
	padding-left: 30px !important;
}

.pl35 {
	padding-left: 35px !important;
}

.pl40 {
	padding-left: 40px !important;
}

.pl45 {
	padding-left: 45px !important;
}

.pl50 {
	padding-left: 50px !important;
}

.pl55 {
	padding-left: 55px !important;
}

.pl60 {
	padding-left: 60px !important;
}

.pl65 {
	padding-left: 65px !important;
}

.pl70 {
	padding-left: 70px !important;
}

.pl75 {
	padding-left: 75px !important;
}

.pl80 {
	padding-left: 80px !important;
}

.pl85 {
	padding-left: 85px !important;
}

.pl90 {
	padding-left: 90px !important;
}

.pl95 {
	padding-left: 95px !important;
}

.pl100 {
	padding-left: 100px !important;
}

/* 全方向 */
.pa0 {
	padding: 0 !important;
}

.pa5 {
	padding: 5px !important;
}

.pa10 {
	padding: 10px !important;
}

.pa15 {
	padding: 15px !important;
}

.pa20 {
	padding: 20px !important;
}

.pa25 {
	padding: 25px !important;
}

.pa30 {
	padding: 30px !important;
}

.pa35 {
	padding: 35px !important;
}

.pa40 {
	padding: 40px !important;
}

.pa45 {
	padding: 45px !important;
}

.pa50 {
	padding: 50px !important;
}

.pa55 {
	padding: 55px !important;
}

.pa60 {
	padding: 60px !important;
}

.pa65 {
	padding: 65px !important;
}

.pa70 {
	padding: 70px !important;
}

.pa75 {
	padding: 75px !important;
}

.pa80 {
	padding: 80px !important;
}

.pa85 {
	padding: 85px !important;
}

.pa90 {
	padding: 90px !important;
}

.pa95 {
	padding: 95px !important;
}

.pa100 {
	padding: 100px !important;
}

.outer_block {
	margin: 0 5px 15px;
}

.inner_block {
	margin: 0 10px 10px;
}

.inner_block:last-child {
	margin: 0 10px 0;
}

[class^="cont_l2"] > .inner_block {
	margin: 0 5px 10px;
}

[class^="cont_l2"] > .inner_block:last-child {
	margin: 0 5px;
}

.gamificationInfo_block {
	margin: 0 0 10px;
	border: 2px solid #959595;
}

.gamificationInfo_block {
	margin-top: 5px;
	padding: 5px 5px 10px;
}

.gamificationInfo_block p {
	margin-top: 1em;
	line-height: 1.4em;
}

.gamificationInfo_block dt {
	font-weight: bold;
}

.qr_block {
	margin: 0 10px;
}

.qr_block::after {
	content: "";
	display: block;
	clear: both;
}

.qr_block__text {
	float: left;
	width: 70%;
	font-size: 16px;
}

.qr_block__image {
	box-sizing: border-box;
	float: right;
	width: 25%;
	border: solid #dcdcdc 10px;
	text-align: center;
}

/* ゲーミフィケーションお知らせ枠
---------------------------------------------- */
.gamificationInfo_item > a, .gamificationInfo_item > a:hover, .gamificationInfo_item > a:active {
	color: #6c6c6c;
	text-decoration: none;
}

.gamificationInfo {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 10px 0;
	padding-right: 5px;
}

.gamificationInfo + nav {
	padding-top: 0;
	margin-top: 0;
}

.gamificationInfo_item {
	margin-bottom: 10px;
	line-height: 130%;
}

.gamificationInfo_item:last-child {
	margin-bottom: 0;
}

.gamificationInfo_item > a {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	padding-left: 1.1em;
}

.gamificationInfo_item > a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.4em 0 0.4em 0.8em;
	border-color: transparent transparent transparent #cf0f31;
	-webkit-transform: translateY(0.1em);
	-ms-transform: translateY(0.1em);
	transform: translateY(0.1em);
}

/* ゲーミフィケーションタブ上のテキストお知らせ枠
--------------------------------------------------- */
.gamificationInfo_txtBlock {
	margin-bottom: 5px;
	padding: 5px;
	background-color: #ffffff;
	-webkit-box-shadow: #d3d3d3 0px 2px 1px;
	box-shadow: #d3d3d3 0px 2px 1px;
}

.gamificationInfoTxt_item {
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	margin: 0 8px;
	padding-left: 1.0em;
	line-height: 1.4em;
	color: #6c6c6c;
}

.gamificationInfoTxt_item::before {
	content: "";
	position: absolute;
	top: 3%;
	left: 0;
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.4em 0 0.4em 0.8em;
	border-color: transparent transparent transparent #cf0f31;
	-webkit-transform: translateY(0.1em);
	-ms-transform: translateY(0.1em);
	transform: translateY(0.1em);
}