@charset "utf-8";
/* Color Pattern CSS */

/* - ◆基本情報 ------------------------------------------------------- */
/* -- パターン番号  ：002                                               */
/*    メインカラー  ：オレンジ                                          */
/*    サブカラー    ：イエロー                                          */
/* ==================================================================== */


/* - ◆カラーパターンCSS記述のルール ---------------------------------- */
/*                                                                      */
/* -- □カラープロパティの規則                                  ------  */
/*       使用する色のカラーコードはカスタムプロパティとして記述         */
/*       色の変更は基本的にカスタムプロパティの値を変更する             */
/*                                                                      */
/*       カスタムプロパティの名づけは                                   */
/*        ・不透明度なし：colorXXX                                      */
/*        ・不透明度あり：colorAXXX                                     */
/*       カラーコードは #xxxxxx(rgb) または #xxxxxxxx(rgba)             */
/*                                                                      */
/*       新規クラスで色を指定する時はカスタムプロパティから指定         */
/*                                                                      */
/* -- □filterプロパティの使用方法                              ------  */
/*       背景画像(黒一色)が指定されているセレクタにfilterをかけて使用   */
/*       filterプロパティのみカラーコードでの色指定ができないため       */
/*       個別で調整を行う                                               */
/*       filter: hue-rotate(XXXdeg) saturate(X%) brightness(X%)         */
/*               色相(H)            彩度(S)      輝度(L)                */
/*                                                                      */
/* ==================================================================== */


/* - ●カスタムプロパティ:カラーコード -------------------------------- */
:root {
	/* 不透明度なし */
	--color001: #3f82e0; /* 色付きボタン 背景 */
	--color012: #3361cd; /* 色付きボタン 文字影 */

	--color002: #276dc6; /* ヘッダメニュー */
	--color019: #1259b4; /* ヘッダメニュー(hover時) */

	--color003: #ffffff; /* 画面名背景 */
	--color021: #7a7a7a; /* 画面名上線 */
	--color004: #f2f2f2; /* 画面名下線 */
	--color005: #9ebfee; /* 画面名アイコン（小） */
	--color006: #989898; /* フッタ（コピーライト） */

	--color017: #f6f6f6; /* メッセージ背景色＋フッタ（運営会社等）*/

	--color007: #eff5fc; /* th 背景 */
	--color009: #e2e2e2; /* テーブル ボーダー */

	--color008: #3f3f3f; /* ログイン画面文字色 */
	--color013: #192b51; /* ログイン画面文字色（補足） */
	--color016: #fcfcfc; /* ログイン画面テーブル背景色 */

	--color010: #fffdf9; /* box陰影色 */

	--color011: #ffffff; /* 文字色（白）*/
	--color014: #bbbbbb; /* ボーダー */
	--color015: #196090; /* ボタン背景色 */

	--color018: #909090; /* インフォメーションborder色*/

	--color020: #f3f6fb; /* 保険証説明背景色（hover時）*/

	--color022: #ecf7f8; /* 規約背景色 */

	--color023: #ef810f; /* 保険証ヘルプ画像ボーダー色 */

	/* 不透明度あり */
	--colorA001: #00000033;
}

/* ==================================================================== */


/* - ●配色用CSS ------------------------------------------------------ */

/* カラーコードによる配色箇所 */

#wrapper{
	border-top: 3px solid var(--color001);
}

.ribbon_mq{
	background: none repeat scroll 0 0 var(--color002);
}

.title14{
	background: none repeat scroll 0 0 var(--color003);
	border-top: 2px solid var(--color021);
	border-bottom: dotted var(--color004);
}

.title14:before, .title14B:before {
	border: 3px solid var(--color005);
}

.title14:after, .title14B:after {
	border: 3px solid var(--color002);
}

.loginTblHeadTh {
	background-color: var(--color007);
	color: var(--color008);
}

.loginTblFrm {
	border: 1px solid var(--color009);
}

.loginTblFrm Th {
	background-color: var(--color007);
	color: var(--color008);
	border: 1px solid var(--color009);
}

.loginTblFrm Td {
	border: 1px solid var(--color009);
    background-color: var(--color016);
}

.loginTxtMini {
	color: var(--color013);
	background-color: var(--color017);
}

.loginTbl {
	border: 1px solid var(--color009);
}

.mainFlowBtn {
	background: var(--color001);
	border: 1px solid var(--color001);
	color: var(--color011);
	text-shadow: 0 1px 1px var(--color012);
}

a.infolink:hover span.fileicon::after {
    color: var(--color001);
}

.box_shadow, .box_shadow_mq {
	-webkit-box-shadow: 0px 1px 2px 0px var(--color010);
    -moz-box-shadow: 0px 1px 2px 0px var(--color010);
    -o-box-shadow: 0px 1px 2px 0px var(--color010);
    -ms-box-shadow: 0px 1px 2px 0px var(--color010);
    box-shadow: 0px 1px 2px 0px var(--color010);
}

.grayBtn:hover {
	color: var(--color001);
}

#footerUpper {
    background-color: var(--color017);
}

footer #cr {
    background-color: var(--color006);
    color: var(--color011);
}

@media only screen and (max-width: 768px){
	.gmenu_mq .selected a.trigger {
		background: url(../img/@2x/bg_arrow01_active02@2x.png) no-repeat scroll right center / 16px 9px var(--color002);
	}
	.menulist_mq li a, .gmenu_mq a.trigger {
	    background: none repeat scroll 0 0 var(--color002);
	    color: var(--color011);
	    text-shadow: 0 1px 1px var(--color002);
	}
}

@media screen and (max-width: 1024px){
	footer {
	    border-top: 2px solid var(--color006);
	}
}

.menulist_mq li a, .gmenu_mq a.trigger {
    background: none repeat scroll 0 0 var(--color002);
    color: var(--color011);
    text-shadow: 0 1px 1px var(--color002);
}

.menulist_mq li a:hover {
    background: none repeat scroll 0 0 var(--color019);
}

#infomationbox{
	border: 1px solid var(--color002);
	background-color: var(--color003);
}

a.infolink:hover {
    color: var(--color001);
}

.mypage-menu a span {
	background: var(--color015);
    color: var(--color011);
}

.mypage-menu a span:after {
    border-top: 6px solid var(--color015);
}

form table.table02_mq th {
    border: 1px solid var(--color009);
    background-color: var(--color007);
}

form table.table02_mq td {
    border: 1px solid var(--color009);
    background-color: var(--color016);
}

.bgBrown {
    background: none repeat scroll 0 0 var(--color022);
}

#footerUpper li a:hover {
    color: var(--color001);
}

div.helpBlock {
    background-color: var(--color003);
    box-shadow: 0 0 10px var(--colorA001);
}

.helpImg {
	border: 1px solid var(--color023);
}

.kiyaku {
	border: 1px solid var(--color009);
	background-color: var(--color003);
	border-left: none;
}

.qrLogin .kiyakuBox {
	border: 1px solid var(--color009);
    background-color: var(--color011);
}

.link_button{
	background-color:var(--color001);
}

.accordionMenu:after {
	border-top: solid 3px var(--color012);
    border-right: solid 3px var(--color012);
}

.accordionMenu {
    &:hover {
        cursor: pointer;
        transition: 0.1s;
        color: var(--color012);
        border-color: var(--color012);
        background-color: var(--color020);
    }
}

.stepElem.active span{
	color:var(--color001);
}

.stepElem.pass .stepNom
,.stepElem.active .stepNom{
	background-color:var(--color001);
	color:var(--color011);
}
.stepElem.pass:not(:first-child):after
,.stepElem.active:not(:first-child):after {
	background-color: var(--color001);
}

.mypageInfo{
    border: 1px solid var(--color018);
    background-color: var(--color003);
    background-image: url("../img/002/menu_profile_back.png");
}

.arrow02 {
    background-image: url(../img/002/bg_arrow04.png);
}
.arrow05 {
    background-image: url(../img/002/bg_arrow04left.png);
}
.title11 {
    background: url(../img/002/listicon02.png) no-repeat left;
}
.title12 {
    background: url(../img/002/listicon03.png) no-repeat left;
}