@charset "utf-8";

/******************** 共通スタイル ********************/
header { background-color: #fff; width: 100%; }

header:after {
	content: "";
	clear: both;
	display: block;
}

img { width: 100%; height: auto; }
a { display: block; }

/* 大枠 */
.wrapper { padding-left: 0; padding-top: 0;}


#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* コンテンツ内構造 */
.contents { width: 100%; background-color: #EAEAEA; padding-bottom: 170px;}

/* タブレット用指定 */
@media screen and (min-width: 768px) {
.contents {
    width: 100%;
    background-color: #EAEAEA;
    padding-bottom: 170px;
    background-image: url(../../images/image/haikei-logo3.png);   /*背景ロゴ無し希望の場合は削除*/
    background-repeat: repeat;   /*背景ロゴ無し希望の場合は削除*/
}
}

.sp-other { display: none; }
.sp-only { display: block; }
.sp-tb-only { display: block; }
.pc-only { display: none; }

/* タブレット用指定 */
@media screen and (min-width: 768px) {
	.sp-only { display: none; }
	.sp-other { display: block; }
	.sp-tb-only { display: block; }
	.pc-only { display: none; }
}

/*  PC用指定 960px～max */
@media screen and (min-width: 960px) {
	.sp-only { display: none; }
	.sp-other { display: block; }
	.sp-tb-only { display: none; }
	.pc-only { display: block; }
}


/*************** リンク関連 ***************/

/* テキストリンク、矢印アイコンあり（青色） */
.t-link-blue, .t-link-b-arrow, .tlink-block-arrow, .t-noline-arrow, .tcol2-blue-arrow { color: #0070c9; text-decoration: none; }
.t-link-blue:hover, .tlink-block-arrow:hover, .t-link-b-arrow:hover, tcol2-blue-arrow:hover { color: #0080ff; text-decoration: underline; }

.t-unlink-blue { text-decoration: underline !important; }

.t-link-blue:active, .tlink-block-arrow:active,
.t-link-b-arrow:active, .t-noline-arrow:active, tcol2-blue-arrow:active{
	color: rgba(0,112,201,0.5);
	text-decoration: none;
}

.tcol2-blue-arrow:hover {
	background-color: rgba(0, 0, 0, 0.15);
	-webkit-filter: brightness(0.85);
	-moz-filter: brightness(0.85);
	-o-filter: brightness(0.85);
	-ms-filter: brightness(0.85);
	filter: brightness(0.85);
}

/* テキストリンク（グレー） */
.t-link-d-gray { color: #757575; text-decoration: none; }
.t-link-d-gray:hover { color: #0080ff; text-decoration: underline; }
.t-link-d-gray:active { color: rgba(117,117,117,0.5); text-decoration: none; }

/* テキストリンク（黒） */
.t-link-black, a.t-link-black { color: #333333; text-decoration: none; }
.t-link-black:hover, a:hover.t-link-black  { color: #0373c3; text-decoration: underline; }
.t-link-black:active, a:active.t-link-black:active { color: rgba(51,51,51,0.5); text-decoration: none; }

/* アンカーリンク */
a.anc-link-up, a.anc-link-down {
	display: inline-block;
	padding-right: 24px;
}
a.anc-link-up:after, a.anc-link-down:after {
	content: "";
	height: 24px;
	width: 24px;
	position: absolute;
	margin-top: -1px;
	background-image: url();
	background-repeat: no-repeat;
	background-size: 384px;
	background-position: -24px -147px;
}
a.anc-link-up:after {
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
}
a.anc-link-down:after {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
a.anc-link-up:hover:after, a.anc-link-down:hover:after { background-position: -192px -147px; }

/* リストリンク */
.list-link {
	display: -webkit-flex;
	display: flex;
	color: #333;
	width: 100%;
	height: 100%;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-flex-grow: 1;
	flex-grow: 1;
}

.list-link-block:hover{
	background-color: #F6F6F6;
}

/* アイコンボタン、バナーリンク */
.ico-link:hover, .bnr-link:hover {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

/* テキストリンク（青色） 無効時 */
.t-link-blue-disabled {
	pointer-events: none;
	cursor: default;
	color: rgba(0,112,201,0.25);
}


/* TB、PC用指定 */
@media screen and (min-width: 768px) {

/* リスト型リンクアイコン サブメニュー用　使用中*/
.ico-link-arrow, .ico-ac-open, .ico-ac-close { position: relative; }

.ico-link-arrow:after {
	content: "";
	height: 24px;
	width: 24px;
	position: absolute;
	top: 55%;
	right: 16px;
	margin-top: -12px;
	background-image: url(../../images/image/ico-link-arrow3.png);
	background-repeat: no-repeat;
	background-size: 15px;
	display: inline-block;
}
}

/* 矢印リンクアイコン（右寄せ、上下中央） */
.ico-link-arrow:after { background-position: 0 0; }

/* イメージ画像、テキストリンク */

.snd-link-area { color: #333; }

.snd-link-area:hover{
	background-color: rgba(0, 0, 0, 0.15);
	-webkit-filter: brightness(0.85);
	-moz-filter: brightness(0.85);
	-o-filter: brightness(0.85);
	-ms-filter: brightness(0.85);
	filter: brightness(0.85);
	zoom: 1;
}


/*ログアウトボタン*/

.blue-logout {
    color: #ffffff;
    /* background-color: #B9101C; */
    /* background-color: #0065B2; */
    padding: 3px 10px 3px 10px;
    border: #ffffff 1px solid;
    text-decoration: none;
}



/*************** テキスト関連 ***************/

/* 太字 */
.t-bold, .txt-bold { font-weight: bold; }

/* サイズ */
.t-v-small { font-size: 10px !important; }
.t-small { font-size: 12px !important; }
.t-default { font-size: 14px !important; }

/* 位置 */
.t-left { text-align: left !important; }
.t-right { text-align: right !important; }
.t-center { text-align: center !important; }

/* 背景色 */
.bg-c-white { background-color: #fff; }
.bg-c-gray { background-color: #fafafa; }
.bg-c-red { color: #ea545d; }	/*必須背景カラー*/

/* テキスト枠 */
.red-waku {
    background-color: #F9E8E8;
    border: 1px solid #C62626;
    padding: 10px;
}

.green-waku {
    background-color: #F1F7E8;
    border: 1px solid #78C427;
    padding: 10px;
}


.green-waku2 {
    background-color: #F1F7E8;
    border: 1px solid #78C427;
    padding: 10px;
    margin-top: 10px;
    text-align: left;
    font-size:0.7rem;
}

.gray-waku{
    background-color: #f5f5f5;
    border: 1px solid #909092;
    padding: 10px;
}

/* 2020-10-22 */
.error-message {
	color: #ff0000;
	font-weight: bold;
}

/* 線・ボーダーライン */
hr{ opacity: 0.5; }


/* TB、PC用指定 */
@media screen and (min-width: 768px) {

	/* フォントサイズ 多胡20200525追記*/
	.t-v-small { font-size: 12px !important; }
	.green-waku {
    	background-color: #F1F7E8;
    	border: 1px solid #78C427;
    	padding: 30px;
}

.green-waku2 {
    background-color: #F1F7E8;
    border: 1px solid #78C427;
    padding: 10px;
    margin-top: 20px;
    text-align: left;
}


}


/*************** 余白関連 ***************/

.mt-4 { margin-top: -4px !important; }

.mt0 { margin-top: 0px !important; }
.mt4 { margin-top: 4px !important; }
.mt8 { margin-top: 8px !important; }
.mt12 { margin-top: 12px !important; }
.mt16 { margin-top: 16px !important; }
.mt24 { margin-top: 24px !important; }
.mt32 { margin-top: 32px !important; }

.mb0 { margin-bottom: 0px !important; }
.mb4 { margin-bottom: 4px !important; }
.mb8 { margin-bottom: 8px !important; }
.mb12 { margin-bottom: 12px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb16 { margin-bottom: 16px !important; }
.mb24 { margin-bottom: 24px !important; }
.mb32 { margin-bottom: 32px !important; }
.mb72 { margin-bottom: 72px !important; }

.ml4 { margin-left: 4px !important; }
.mr4 { margin-right: 4px !important; }


.margin-auto { margin: 0 auto; }

.pd0 { padding: 0 !important; }

.pb8 { padding-bottom: 8px !important; }
.pb12 { padding-bottom: 12px !important; }
.pb16 { padding-bottom: 16px !important; }
.pb24 { padding-bottom: 24px !important; }

.pr24 { padding-right: 24px; }

/*************** ブロック要素 ***************/

.pd12-block { padding: 12px; }
.pd16-block { padding: 16px; }

.pd-block-part1 { padding: 12px 16px; }
.pd-block-part2 { padding: 12px 16px 0 16px; }
.pd-block-part3 { padding: 16px 16px 0 16px; }
.pd-block-part4 { padding: 0 16px; }
.pd-block-part5 { padding: 16px 12px; }
.pd-block-part6 { padding: 0 16px 16px; }
.pd-block-part7 { padding: 0 32px; }
.pd-block-part8 { padding: 48px 16px; }

/***************  アイコン画像　*旧sprite画像 ***************/
.img-gnav-sprite, .img-sprite,
.img-fnav-sprite {
	background-image: url(../../images/image/icon-main_01.png);	/*スマホ用メインメニューアイコン*/
	background-repeat: no-repeat;
	background-size: 690px;
	position: relative;
}

/* ● アイコン画像指定 icon */
li.login-circle { position: relative; }

.ico-circle-blue, .ico-circle-red, .ico-circle-yellow {
	position: absolute;
	width: 16px;
	height: 16px;
	content: "";
	top: 44%;
	left: 0;
	margin-top: -6px;
}

.ico-circle-blue { background-position: -20px -113px;}
.ico-circle-red { background-position: -36px -113px;}
.ico-circle-yellow { background-position: -52px -113px;}

/* ログアウト／ログイン ボタン表示 */
.btn-logout, .btn-login {
	width: 83px;
	height: 23px;
	content: "";
	cursor: pointer;
}

.btn-logout { background-position: -96px -84px; }
.btn-login { background-position: 0 -84px; }

/* ログアウト／ログイン マウスオーバー、訪問済、アクティブ */
.btn-logout:hover, .btn-logout:visited, .btn-logout:active { background-position: -288px -84px; }
.btn-login:hover, .btn-login:visited, .btn-login:active { background-position: -192px -84px; }

/* リンク無効時 */
.link-disabled {
	pointer-events: none;
	cursor: default;
	opacity: 0.25;
}


/*************** モジュール ***************/

/* 基本的な状態変化（SMT:480px、TAB:768px、PC:960pxの中央寄せ） */
.mod-layout-01 {
	max-width: 480px;
	min-width: 320px;
	margin: 0 auto;
}

/* TAB用指定 */
@media screen and (min-width: 768px) {
	.mod-layout-01 {
		max-width: 768px;
	}
}

/* PC用指定 */
@media screen and (min-width:960px){
	.mod-layout-01 {
		max-width: 960px;
	}
}

/* 基本的な状態変化（SMT:480px、TAB:768px、PC:960pxの左寄せ） */
.mod-layout-02 {
	max-width: 480px;
	min-width: 320px;
}

/* TAB用指定 */
@media screen and (min-width: 768px) {
	.mod-layout-02 {
		max-width: 768px;
	}
	.mod-layout-02 .list-num-notes,
	.mod-layout-02 .list-tnum-notes {
		padding: 0 0 16px;
	}
}

/* PC用指定 */
@media screen and (min-width:960px){
	.mod-layout-02 {
		max-width: 960px;
	}
}



/* リスト型リンク（FAQで使用） */
.mod-link-list li a {
	padding: 0 16px;
	color: #333;
}
.mod-link-list li:first-child p {
	border-top: 1px solid #ddd;
}
.mod-link-list p {
	border-bottom: 1px solid #ddd;
	padding: 16px 48px 16px 8px;
}
.mod-link-list li:first-child .list-inner {
	border-top: 1px solid #ddd;
}




/* ログアウトモジュール  17.11.16（index.cssから移動） */

.ttl-logout {
	font-size: 18px;
	padding: 12px 16px 24px;
	text-align: center;
}

.ttl-s-logout {
	font-size: 16px;
	padding: 12px 0;
	margin-bottom: 16px;
	border-bottom: 1px solid #bbb;
	text-align: left;
}


/*　ログイン画面の翻訳枠調整　*/
.current{
    border-color: #333333!important;
    border-radius: 4px;
}

.current .text{
    padding-top:6px;
}

.current .arrow{
top: 10px!important;
}


/* 吹き出しなし 横長 17.11.16追加 */

.mod-main { padding: 0 16px 16px; }

.main-white-box {
  width: 100%;
  border-radius: 2px;
  background-color: #fff;
  margin: 0 auto;
  padding-bottom: 16px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.main-wbox-inner { padding: 0 16px; }
.main-wbox-inner li {
	display: -webkit-flex;
	display: flex;
	margin-bottom: 16px;
}

.main-wbox-inner li:first-child { margin-top: 16px; }
.main-wbox-inner li:last-child { margin-bottom: 0; }


/* TB用指定 */
@media screen and (min-width: 768px) {
	/* 1to1 吹き出し指定 */
	.main-login {
		min-width: 768px;
		padding: 0 32px 0 32px;
	}

	.btn-main-login-block { margin: 0 auto; }


	/* 吹き出しなし 横長 17.11.16追加 */
	.mod-main { padding: 0 32px 24px; }

	.main-wbox-inner {
		display: -webkit-flex;
		display: flex;
	}
	.main-wbox-col {
		display: -webkit-flex;
		display: flex;
		width: 50%;
		padding: 0 16px;
		-webkit-flex-direction: column;
		flex-direction: column;
	}

	.main-wbox-col:first-child { border-right: 1px solid #ddd; }
	.main-wbox-col:last-child { border-right: none; }

}


/* PC用指定 メインエリア中央寄せ */
@media screen and (min-width: 960px) {
	/* 1to1 吹き出し指定 */
	.main-login { min-width: 960px; }
}


/* ★2カラム レイアウト */

/* ボタンリンク */

a.btn-basic {
	display: block;
	margin: 0 auto;
	padding: 4px;
	text-align: center;
	max-width: 320px;
	width: 100%;
	min-height: 36px;
}

a.btn-white, a.btn-blue {
	display: -webkit-flex;
    display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.mod-btn-area {
	display: -webkit-flex;
    display: flex;
}

a.btn-white {
	background-color: #fff;
	border: 2px solid #0070c9;
	color: #0070c9;
}

a.btn-white-right {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	min-height: 36px;
	padding: 4px 16px;
	text-align: center;
	color: #0070c9;
	background-color: #fff;
	border: 2px solid #0070c9;
	border-radius: 4px;
}

a.btn-blue{
    background-color: #ffffff;
    border: 1px solid #333;
    color: #333;
    min-height: 36px;
}

a:hover.btn-white, a:hover.btn-white-right,
a:hover.btn-blue-arrow {
	background-color: rgba(0, 0, 0, 0.15);
	-webkit-filter: brightness(0.85);
	-moz-filter: brightness(0.85);
	-o-filter: brightness(0.85);
	-ms-filter: brightness(0.85);
	filter: brightness(0.85);
}

a:hover.btn-blue {
	background-color: #B9101C;
/*	background-color: #0065B2; */
}


/* アコーディオンメニューリスト */

/* タイトル */
/* 18.01.25追加 */
.mod-ac-menu > li { margin: 0 0 8px; }

.mod-ac-menu > li .title{
	display: -webkit-flex;
    display: flex;
	-webkit-align-items: center;
	align-items: center;
	padding: 12px 44px 12px 12px;
	border: 1px solid #ddd;
	background-color: #fff;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
}
.mod-ac-menu > li .title:hover{
	background-color: rgba(0, 0, 0, 0.15);
	-webkit-filter: brightness(0.85);
	-moz-filter: brightness(0.85);
	-o-filter: brightness(0.85);
	-ms-filter: brightness(0.85);
	filter: brightness(0.85);
}
.mod-ac-menu .ico-ac-open:after,
.mod-ac-menu .ico-ac-close:after {
    right: 12px;
}

/* コンテンツ */
.mod-ac-menu > li div.con {
	display: none;
	font-size: 12px;
	padding: 16px 12px 24px;
	border: 1px solid #ddd;
	border-top: none;
}
.mod-ac-menu .section { margin-bottom: 24px; }
.mod-ac-menu .section > * { margin-bottom: 12px; }
.mod-ac-menu .section > *:last-child { margin-bottom: 0; }
.mod-ac-menu .section:last-child { margin-bottom: 0; }
.mod-ac-menu > li:nth-child(even) .con > *:last-child { margin-bottom: 0; }

.mod-ac-menu a.btn-basic > ul { width: 100%; }


/* 注釈・中黒リスト */
.mod-ac-menu .list-ac-notes > li, .mod-ac-menu .list-ac-dot > li {
	counter-increment: notes;
	padding-left: 16px;
	text-indent: -16px;
}
.mod-ac-menu .list-ac-notes > li:before {
	content: "\203b";
	padding-right: 4px;
}
.mod-ac-menu .list-ac-dot > li:before {
	content: "\30FB";
	padding-right: 4px;
}

/* ボタン */
.mod-ac-menu a.btn-basic { font-size: 14px; }
.mod-ac-menu a.btn-white {
	font-size: 12px;
	font-weight: normal;
	padding: 2px;
	min-height: 24px;
	border: 1px solid #0070c9;
}

/* テキストリンク */
.mod-ac-menu a.t-link-b-arrow {
	display: inline-block;
	font-size: 14px;
	padding-right: 24px;
}

/* 2カラムボタン */
.mod-ac-menu .link-2col-area {
	display: -webkit-flex;
	display: flex;
	padding:0 20px;
}
.mod-ac-menu .link-2col-area .col {
	width: 50%;
}
.mod-ac-menu .link-2col-area .col:nth-child(odd) {
	padding-right: 8px;
}
.mod-ac-menu .link-2col-area .col:nth-child(even) {
	padding-left: 8px;
}

/* テキストリンク */
.mod-ac-menu .section .link-area {
	padding: 0 20px;
	margin-bottom: 12px;
}

.mod-ac-menu .section .link-area > ul li {
	display: -webkit-flex;
	display: flex;
	margin-bottom: 8px;
}

.mod-ac-menu .section .link-area > ul li:last-child {
	margin-bottom: 0;
}


.number li{
	list-style-type: decimal;
	margin-left:30px;
}
.number-2 li{
	list-style-type: decimal;
	margin-left:50px;
}
.number-3 li{
	list-style-type: decimal;
	margin-left:70px;
}

/* 注記エリア */
.ac-notes-area {
	font-size: 12px;
	padding: 0 16px 16px;
}

/* TB、PC用指定 */
@media screen and (min-width: 768px) {

/* 18.01.25修正 */
	.mod-ac-menu {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-bottom: -8px;
		margin-right: -16px;
	}

	.mod-ac-menu > li{
/*		width: 50%; */
		width: 100%;
		padding-right: 16px;
	}

	.ac-notes-area { padding: 0 32px 16px; }

}




/* カード（セカンドページ） */
.mod-card-sec {
	width: 100%;
	border-radius: 2px;
	background-color: #fff;
	margin: 0 auto 15px;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.mod-card-sec .inner {
	display: -webkit-flex;
	display: flex;
	width: 100%;
	position:relative;
    	padding: 0;
	background-color: #F5F6F7;
}

.mod-card-sec li.pd16-block{ padding: 16px; }
.mod-card-sec .double {
	-webkit-flex-direction: column;
	flex-direction: column;
}

.mod-card-sec .single li:first-child {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	min-height: 48px;
	position:relative;
	-webkit-align-items: center;
	align-items: center;
    padding: 8px 12px 8px 52px;
}

.mod-card-sec .single li:last-child {
	display: -webkit-flex;
	display: flex;
	width: 60px;
	font-size: 12px;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
    padding: 8px 12px 8px 0;
}

.mod-card-sec .card-sec-tit {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	min-height: 48px;
	position:relative;
	-webkit-align-items: center;
	align-items: center;
        padding: 8px 12px 8px 15px;
	border-bottom: 1px solid #ddd;
        font-weight: 700;
}


/* アイコンなしstate用ブロック */
.mod-card-sec .double-state {
	-webkit-flex-direction: column;
	flex-direction: column;
}

/* カード全体リンク 青色矢印有り */
.mod-card-link {
	width: 100%;
    border-radius: 2px;
    background-color: #fff;
	margin: 0 auto;
 	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.mod-card-link a:hover {
	background-color: rgba(0, 0, 0, 0.15);
	-webkit-filter: brightness(0.85);
	-moz-filter: brightness(0.85);
	-o-filter: brightness(0.85);
	-ms-filter: brightness(0.85);
	filter: brightness(0.85);
}

.mod-card-link a {
	display: -webkit-flex;
	display: flex;
}

.card-link-inner {
	display: -webkit-flex;
	display: flex;
	min-height: 56px;
	padding: 0 16px;
	margin: 0 auto;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	text-align: center;
}

.mod-card-link .card-link-inner {
	display: -webkit-flex;
	display: flex;
	min-height: 56px;
	padding: 8px 16px;
	margin: 0 auto;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	text-align: left;
}

.card-link-inner span.t-block { padding: 0 24px 0 0; }


/* カード内リンクブロック1カラム */
.mod-card-sec .link-col-block {
	width: 100%;
	border-top: 1px solid #ddd;
}

.link-col-block .link-col-inner {
	display: -webkit-flex;
	display: flex;
	min-height: 56px;
	-webkit-align-items: center;
	align-items: center;
	width: 100%;
	-webkit-justify-content: center;
	justify-content: center;
	padding: 8px 16px;
}

/* カード内リンクブロック2カラム */
.mod-card-sec .link-col2 { overflow: hidden; }

.mod-card-sec .link-col2-block {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	background-color: #fff;
	border-top: 1px solid #ddd;
	margin-bottom: -1px;
}

.mod-card-sec .link-col2-block li {
	display: -webkit-flex;
	display: flex;
	width: 50%;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

.mod-card-sec .link-col2-block li:nth-child(2n) { border-right: none; }

.link-col2-block .link-col2-inner {
    display: -webkit-flex;
	display: flex;
    width: 100%;
    min-height: 56px;
	-webkit-align-items: center;
    align-items: center;
	-webkit-justify-content: center;
    justify-content: center;
 	padding: 8px 16px;
}

.mod-card-sec .link-col-block > a,
.mod-card-sec .link-col2-block li > a {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-grow: 1;
	flex-grow: 1;
}

.link-col-inner span.t-block,
.link-col2-inner span.t-block {
	padding-right: 24px;
}

.double-col-inner {
	display: -webkit-flex;
	display: flex;
	width: 100%;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-flex-direction: column;
	flex-direction: column;
}



/****************************** ヘッダー構造 ******************************/

/* ホームヘッダーメニュー掲載パーツ */
.global-nav {
	width: 100%;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.global-nav-inner {
	display: -webkit-flex;
	display: flex;
	width: 100%;
	max-width: 480px;
	min-width: 320px;
	margin: 0 auto;
	border-left: 1px solid #ddd;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.global-nav-inner .gnav-col {
	display: -webkit-flex;
	display: flex;
	width: calc(100%/3);
/*	width: 25%; */
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.global-nav-inner .t-gnav {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	width: 100%;
	padding: 0 4px 10px 4px;
	margin: 0 auto;
	font-size: 12px;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-flex-direction: column;
	flex-direction: column;
	text-align: center;
}

.global-nav-inner a {
	color: #000;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	-webkit-flex-direction: column;
	flex-direction: column;
}
/* 19m1(phase2) hover remain  対応 start */
/* .global-nav-inner a:hover, .global-nav-inner a:active { background-color: #fdd000; } */
.global-nav-inner.pc a:hover, .global-nav-inner.pc a:active { background-color: #F6F6F6; }
/* .global-nav-inner.sp a:active { background-color: #fdd000; }  */
/* 19m1(phase2) hover remain  対応 end   */

.global-nav-inner .gnav-on {
	background-color: #F6F6F6;
	pointer-events: none;
	cursor: default;
}

.global-nav-inner .gnav-col:nth-child(4),
.global-nav-inner .gnav-col:last-child {
	border-right: 1px solid #ddd;
}

.global-nav-inner .gnav-col:nth-child(n+5) { border-bottom: none; }

/* スマホ版ホームメニュー画像掲載指定 */
.ico-home, .ico-data, .ico-charge, .ico-call, .ico-invoice, .ico-apply, .ico-mailservice, .ico-point, .ico-support, .ico-shop,
 .ico-ReqCharge, .ico-ModOptions, .ico-ModService {
	display: block;
	width: 32px;
	height: 32px;
	margin:10px auto 4px auto;
}

.ico-home { background-position: 0 0;}
.ico-data { background-position: -90px 0;}
.ico-charge { background-position: -185px 0;}
.ico-call { background-position: -275px 0;}
.ico-apply { background-position: -275px 0; }
.ico-invoice { background-position: -189px 0; }
.ico-mailservice { background-position: -375px 0; }
.ico-point { background-position: -466px 0; }
.ico-support { background-position: -565px 0; }
.ico-shop { background-position: -657px 0; }
.ico-ReqCharge { background-position: -374px 0;}
.ico-ModOptions{ background-position: -90px 0;}
.ico-ModService{ background-position: -463px 0;}

/* お客様情報、請求情報照会、通話明細照会、チャージ、プラン変更予約、音声オプション、追加/変更、お客様情報変更、パスワード変更、アイコンhover,active用 */

a:hover .ico-data, a:visited .ico-data, a:active .ico-data { background-position: -256px 0; }
a:hover .ico-apply, a:visited .ico-apply, a:active .ico-apply { background-position: -288px 0; }
/*19m1(phase2) chg start */
/* a:hover .ico-shop, a:visited .ico-shop, a:active .ico-shop { background-position: -320px 0; } */
.global-nav-inner.pc > a:hover .ico-shop, .global-nav-inner.pc > a:visited.ico-shop, .global-nav-inner.pc > a:active .ico-shop { background-position: -320px 0; }
/*19m1(phase2) chg end   */

.global-nav-inner .gnav-on > .ico-data  { background-position: -94px 0; }/*スマホ版使用中css*/
.global-nav-inner .gnav-on > .ico-apply { background-position: -288px 0; }
/*19m1(phase2) chg start */
/* .global-nav-inner .gnav-on > .ico-shop { background-position: -1000px 0; } */
/*.global-nav-inner.pc .gnav-on > .ico-shop { background-position: -1000px 0; } 不具合があったので非表示css*/
/*19m1(phase2) chg end   */


/* TB用指定 */
@media screen and (min-width: 768px) {

	/* コンテンツメニュー */
	.global-nav-inner {
		max-width: 768px;
		-webkit-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}

	.global-nav-inner .gnav-col {
		border-bottom: none;
		width: calc(100%/6);
/*		width: 96px; */
	}

	.global-nav-inner .gnav-col { border-bottom: none;	}
	.global-nav-inner .gnav-col:nth-child(4) { border-right: 1px solid #ddd; }

}


/*  PC用指定 */
@media screen and (min-width: 960px) {
	.hd-inner { min-height: none; /*height: 100%;*/ }
/*	.hd-inner { min-height: none; height: 100%; } */

	/* コンテンツメニュー */
	.global-nav-inner { max-width: 960px; }
	.global-nav-inner .gnav-col { width: calc(100%/6); }
/* 	.global-nav-inner .gnav-col { width: 120px; } */

	/* ホームメニュー画像掲載指定 */
	.ico-home, .ico-data, .ico-charge, .ico-call, .ico-invoice, .ico-apply, .ico-mailservice, .ico-point, .ico-support, .ico-shop,
	 .ico-ReqCharge, .ico-ModOptions, .ico-ModService {
		display: block;
		width: 48px;
		height: 48px;
	}

	.ico-home { background-position: 0 -0;}
	.ico-data { background-position: -140px 0;}/*-144px 0;*/
	.ico-charge { background-position: -285px 0;}
	.ico-invoice { background-position: -285px 0; }
	.ico-call { background-position: -425px 0;}
	.ico-apply { background-position: -422px 0; }
	.ico-mailservice { background-position: -572px 0; }
	.ico-point { background-position: -710px 0; }
	.ico-support { background-position: -860px 0; }
	.ico-shop { background-position: -1000px 0; }
	.ico-ReqCharge { background-position: -570px 0;}
	.ico-ModOptions { background-position: -140px 0;}
	.ico-ModService{ background-position: -705px 0;}


	/* お客様情報、請求情報照会、通話明細照会、チャージ、プラン変更予約、音声オプション、追加/変更、お客様情報変更、パスワード変更、アイコンhover,active用 */
	a:hover .ico-data, a:visited .ico-data, a:active .ico-data  { background-position: -140px 0; }/*-144px 0;*/
	a:hover .ico-apply, a:visited .ico-apply, a:active .ico-apply { background-position: -422px 0; }
	a:hover .ico-shop, a:visited .ico-shop, a:active .ico-shop { background-position: -1000px 0; }

	.global-nav-inner .gnav-on > .ico-data  { background-position: -140px 0; }
	.global-nav-inner .gnav-on > .ico-apply { background-position: -422px 0; }
	.global-nav-inner .gnav-on > .ico-shop {  background-position: -1000px 0; }/*-481px*/
}


/* PC用ヘッダーナビ sprite画像 */
@media screen and (min-width:960px) {
	/* sprite画像 */
	.img-gnav-sprite {
		background-image: url(../../images/image/icon-main_01.png);
		background-repeat: no-repeat;
		background-size: 1050px;
	}
}


/****************************** header ******************************/

/* H01 グローバルヘッダー */
.hd-inner { overflow: hidden; }

.global-hd {
	display: -webkit-flex;
	display: flex;
	min-width: 320px;
	width: 100%;
	height: 70px;
	-webkit-align-items: center;
	align-items: center;
	position: relative;
	padding: 0 16px;
}

.ico-toggle {
	position: absolute;
	width: 24px;
	height: 24px;
	top: 14px;
	left: 16px;
	content: "";
}

.ico-toggle {background-position: -169px -147px;}

.ico-toggle:hover { opacity: 0.5;}

.logo-mypage {
	width: 40px;
	margin: 0 0 0 5px;
}

.logo-mypage img { width: 140px; }

.tel-area {
	position: absolute;
/* 2023-11-14 */
	top: 9px;
	right: 4px;
	font-size: 10px;
/* 2021-11-11
	top: 17px;
	right: 16px;
	font-size: 6px;
 2021-11-11 */
}

	.tel-area a { font-size: 12px; color: #333; font-weight: 700; }

.tel-area img {
    width: 10px;
    margin-top: 3px;
}


/* TB、PC用指定 */
@media screen and (min-width: 768px) {

.tel-area img {
    width: 15px;
    margin-top: 3px;
}
}



/* H03 ステータスバー */
.status-login, .status-logout {
	max-width: 480px;
	min-width: 320px;
	display: -webkit-flex;
	display: flex;
	font-size: 12px;
	padding: 12px 16px 12px 8px;
	margin: 0 auto;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-flex-direction: column;
	flex-direction: column;
	position: relative;
	background: #223C68;
/*	background: #a10624; */
}

.status-login-area {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: row;
    flex-direction: row;
}


.status-logout-area {
	display: -webkit-flex;
	display: flex;
	width: 100%;
	padding-right: 83px;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-direction: row;
	flex-direction: row;
}

.status-user {
	display: -webkit-flex;
	display: flex;
	width: 60%;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	position: relative;
	word-break: break-all;
}

.status-user .t-area {
	padding: 0 8px 0 24px;
	text-align: left;
}

.status-user-in li { margin-bottom: 4px; }

.status-user-in li:last-child { margin-bottom: 0; }

.status-btn-logout {
	display: -webkit-flex;
	display: flex;
	width: 83px;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

.status-btn-login {
	position: absolute;
	top: 23%;
	right: 16px;
}

#mypage_status_bar-01{
	color:#fff;
}


/* 自動ログイン */
.status-auto {
	display: -webkit-flex;
	display: flex;
	width: auto;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}


/* ログアウト */
.status-logout-tlink {
	display: -webkit-flex;
	display: flex;
	width: auto;
	padding-top: 12px;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

li.account {
	width: auto;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-grow: 1;
	flex-grow: 1;
}

li.account .t-area a { display: inline; }


/* ステータスバーシステムエラー */
.status-error {
	width: 100%;
	margin: 0 auto;
	background: #fff0ab;
}

.status-error .status-error-block { position: relative; }

.status-error .status-error-block:before {
	content: "";
	position: absolute;
	top: -9px;
	left: 32px;
	margin-left: -9px;
	display: block;
	width: 0;
	height: 0;
}

.status-login + .status-error .status-error-block:before {
	border-bottom: 9px solid #fff0ab;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
}

.status-error .status-error-inner {
	padding: 12px 12px 16px 12px;
	width: 100%;
}

.status-error a { display: inline-block; }

.ico-error {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
}

.mod-ico-error {
  position: relative;
  padding-left: 32px;
  margin-bottom: 16px;
  text-align: left;
}

.ico-error:before, .mod-ico-error:before {
  content: "";
  height: 24px;
  width: 24px;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -12px;
  background-image: url();
  background-repeat: no-repeat;
  background-size: 384px;
}


.ico-error:before, .mod-ico-error:before { background-position: -240px -147px; }

.ico-error:before, .mod-ico-error:before {
	content: "";
	clear: both;
	display: block;
	*zoom: 1;
}


/* TB、PC用指定 */
@media screen and (min-width: 768px) {

	/* ステータスバーシステムエラー */
	.status-error .status-error-inner:before{ left: 40px; }
	.status-error .status-error-inner { padding: 12px 44px 16px 44px; }

	.status-login-area {
		display: -webkit-flex;
		display: flex;
		width: 930px;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-direction: row;
		flex-direction: row;
}

}



/* TB用指定 */
@media screen and (min-width: 768px) {

	/* H01 グローバルヘッダー */
	.global-hd {
		clear: both;
		width: 100%;
		height: 52px;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		padding: 0 24px;
		margin: 0 auto;
	}

	.ico-toggle { position: static; }
	.tel-area { position: static; }
	.tel-area a { font-size: 16px; color: #333; font-weight: 700; }
	.global-toggle { margin-right: 24px; }

	.logo-mypage {
		-webkit-flex-grow: 1;
		flex-grow: 1;
	}

	.logo-mypage a, .logo-mypage img { width: 112px; }


	/* H03 ステータスバー */
	.status-login, .status-logout {
		max-width: 768px;
		min-height: 23px;
		padding: 12px 32px 12px 8px;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-direction: row;
		flex-direction: row;
		position: static;
	}

	.status-btn-login { position: static; }

	.status-user-in .t-area {
		padding: 0 16px 0 24px;
		text-align: left;
	}

	.status-user-in li:last-child .t-area { padding: 0 0 0 0; }

	.status-user-in li { margin-bottom: 0; }

	.status-user .status-user-in {
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
	}

	.login-info-in {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
	}


	/* ログアウト */
	.status-logout-area {
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-direction: row;
		flex-direction: row;
		-ms-flex: 0 1 auto; /* IE10表示用 */
	}

	.status-logout-tlink {
		width: 36%;
		padding: 0 16px 0 0;
	}

	.logout-area-in {
		width: 100%;
		-webkit-flex-grow: 1;
		flex-grow: 1;
	}

	li.account {
		border-left: 1px solid #ddd;
		padding-left: 16px;
	}

	.logout-area-in .status-user {
		display: -webkit-flex;
		display: flex;
		text-align: left;
		-webkit-flex-grow: 1;
		flex-grow: 1;
		-webkit-align-items: center;
		align-items: center;
		margin-bottom: 0;
		border-right: none;
	}

}


/*  PC用指定 960px～max */
@media screen and (min-width: 960px) {

	/* H01 グローバルヘッダー */
	.logo-mypage a, .logo-mypage img { width: 180px; }

	/* H03 ステータスバー */
	.status-login, .status-logout {	max-width: 100%; background:#223C68;}
	/*グラデーションにする時　background-image: linear-gradient( 45deg, rgb(192,0,0) 0%, rgb(255,167,28) 100%);*/

	/* ログアウト */
	.logout-area-in li .t-area { padding: 0 16px 0 24px; }

	.logout-area-in li.account .t-area { padding: 0 0 0 16px; }

}

/****************************** /ヘッダー構造 ******************************/

/****************************** サブメニュー ******************************/

/* サブメニュー */
.snav-on {
    background-color: #F6F6F6;
/*    background-color: #F6F6F6; */
    pointer-events: none;
    cursor: default;
}

/****************************** /サブメニュー ******************************/

/****************************** alert他 ******************************/

.main-box-in {
	max-width: 480px;
	min-width: 320px;
	padding: 12px 16px 0;
	margin: 0 auto;
	text-align: center;
}

.main-box-in .box-col {
	width: 100%;
	border-radius: 2px;
	background-color: #fff;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
	margin: 0 auto;
	position: relative;
	text-align: left;
}

.main-box-in .box-col a { color: #333; }

.box-alert-area, .box-info-area { padding-top: 12px; }

.box-alert-area + .box-info-area,
.box-info-area + .box-alert-area {
	padding-top: 0;
}

.box-alert-area li,
.box-info-area li {
	background-color: #f3f3f3;
	font-size: 12px;
	min-height: 48px;
}
.box-alert-area li {
	color: #cc0033;
	border-top: none;
	border-right: 2px solid #cc0033;
	border-left: 2px solid #cc0033;
	border-bottom: 2px solid #cc0033;
	position: relative;
}
.box-alert-area li:first-child { border-top: 2px solid #cc0033; }
.box-alert-area li:nth-child(n+2) { min-height: 46px; }

.box-alert-area li:before {
	content: "";
	height: 24px;
	width: 24px;
	position: absolute;
	top: 10px;
	left: 10px;
	background-position: -264px -147px;
	background-image: url();
	background-repeat: no-repeat;
	background-size: 384px;
}
.box-alert-area li a {
	color: #cc0033;
	padding: 13px 12px 13px 40px;
	text-decoration: underline;
}
.box-info-area li { border-bottom: 1px solid #ddd; }

.box-info-area li:last-child { border-bottom: none; }

.box-info-area li a {
	color: #333;
	padding: 15px 12px;
	text-decoration: underline;
}

.box-reco-wrap {
	display: inline-block;
	position: relative;
	vertical-align: middle;
}

/* 2018.02.08修正対応　2020.05再修正 */
.box-reco-txt { padding: 16px 40px 16px 12px; }

.box-reco-txt:hover {
	background-color: rgba(0, 0, 0, 0.15);
	-webkit-filter: brightness(0.85);
	-moz-filter: brightness(0.85);
	-o-filter: brightness(0.85);
	-ms-filter: brightness(0.85);
	filter: brightness(0.85);
}

.sp-only .box-reco-img {
	max-height: 252px;
	max-width: 100%;
	width: initial;
}

.box-recommend h3 {
	font-weight: bold;
	margin-bottom: 8px;
}

.close-area {
	position: absolute;
	top: 0;
	right: 0;
}

.close-area a {
	padding: 8px;
	height: 40px;
	width: 40px;
}

.close-area a:hover {
	background-color: rgba(0, 0, 0, 0.15);
	-webkit-filter: brightness(0.85);
	-moz-filter: brightness(0.85);
	-o-filter: brightness(0.85);
	-ms-filter: brightness(0.85);
	filter: brightness(0.85);
}

.close-area .close {
	display: block;
	background-image: url();
	background-position: -144px -147px;
	background-repeat: no-repeat;
	background-size: 384px;
	height: 24px;
	width: 24px;
}


/* TB用指定 */
@media screen and (min-width: 768px) {
	.main-box-in {
		min-width: 768px;
		padding: 30px 32px 0 32px;
	}

	.box-reco-area { margin: 0; }

	.box-alert-area, .box-info-area {
		padding: 12px 32px 0;
		min-width: 768px;
	}

}


/*  PC用指定 960px～max */
@media screen and (min-width: 960px) {

	.main-box-in { min-width: 960px; }
	.box-alert-area, .box-info-area { min-width: 960px; }

}

/****************************** /alert他 ******************************/

/****************************** タイトル設定 ******************************/

.rec-title {
	padding: 12px 0;
	font-size: 18px;
	text-align: center;
	margin: 0 auto;
}

.title {
	text-align: center;
	padding: 24px 16px;
	font-size: 18px;
	max-width: 480px;
	margin: 0 auto;
}

.tit-cont {
	font-size: 18px;
	padding: 0 16px 24px;
}

/* TB用指定 */
@media screen and (min-width: 768px) {

	.rec-title {
		padding: 20px 32px;
		max-width: 768px;
	}

	.title {
		padding: 32px 64px;
		max-width: 768px;
		margin: 0;
	}

}

/*  PC用指定 960px～max */
@media screen and (min-width: 960px) {

	.rec-title {
		font-size: 24px;
		max-width: 960px;
	 }

	.title {
		font-size: 24px;
		max-width: 960px;
	 }

}

/****************************** /タイトル設定 ******************************/

/****************************** コンテンツ構造 ******************************/

/* ユーザー情報 */
.tit-use-area {
	padding: 12px 16px;
	font-size: 12px;
	font-weight: bold;
}

/* 法人用 */
.tit-use-area p:nth-child(1) { float: left; }

.tit-use-area p:nth-child(2) {
	float: right;
	padding-left: 12px;
	text-align: right;
}

.tit-use-area:after {
	content: "";
	clear: both;
	display: block;
	*zoom: 1;
}



/* ユーザー情報余白対応追加 18.06.26 */
.tit-use-block {
	padding: 12px 0;
	font-size: 12px;
	font-weight: bold;
}

.tit-use-block p:nth-child(1) { float: left; }

.tit-use-block p:nth-child(2) {
	float: right;
	padding-left: 12px;
	text-align: right;
}

.tit-use-block:after {
	content: "";
	clear: both;
	display: block;
	*zoom: 1;
}

.main {
	display: -webkit-flex;
	display: flex;
	max-width: 480px;
	min-width: 320px;
	margin: 0 auto;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.main-login .tit-use-info {
	padding: 12px 0;
	font-size: 12px;
	font-weight: bold;
}

.main.main-inner { padding: 0 16px 8px 16px; }

.main.snd-main-inner { padding: 0 16px 16px; }

.disabled-text {
	filter:alpha(opacity=25);
	-moz-opacity: 0.25;
	opacity: 0.25;
}

.card-t-number {
	font-size: 26px;
	white-space: nowrap;
}

.card-t-snumber {
	font-size: 20px;
	white-space: nowrap;
}

.card-t-ssnumber {
	font-size: 28px;
	white-space: nowrap;
}

.logout-t {
	font-size: 18px;
	font-weight: bold;
}

.t-unit {
	font-size: 12px !important;
/*	font-size: 14px !important; */
	font-weight: bold;
	margin-left: 4px;
}

/* TB、PC用指定 */
@media screen and (min-width: 768px) {
.t-unit {
	font-size: 14px !important;
	font-weight: bold;
	margin-left: 4px;
}
}
.t-confirm {
	font-size: 14px !important;
	font-weight: bold;
	margin-left: 4px;
}

/* 2020-11-11 */
.t-confirm-red {
/*	font-size: 14px !important; */
	font-size: 1rem !important;
	color: #ff0000;
	font-weight: bold;
	margin-left: 4px;
}

.t-big {
	font-size: 20px !important;
	margin-left: 4px;
}

.t-bold {
	font-weight: bold;
}

.t-maxbig {
	font-size: 30px !important;
	font-weight: bold;
	margin-left: 4px;
}

.t-red{
	color:#ff0000;
}

.t-blue{
	color:#0080FF;
}

.t-taxin {
	font-size: 12px !important;
	margin-right: 4px;
}

.centering-block {
	display: table;
	width: 100%;
	position: relative;
}

.in-data-line {
	position: absolute;
	bottom: 5px;
	left: 50%;
	width: 22px;
	margin-left: -11px;
	text-align: center;
}

.centering-block .in-data-use p,
.centering-block .in-data-total p {
	margin-bottom: 4px;
}

.centering-block .in-data-use {
	display: table-cell;
	text-align: center;
	width: 50%;
	padding-right: 11px
}

.centering-block .in-data-total {
	display: table-cell;
	text-align: center;
	width: 50%;
	padding-left: 11px;
}

/*進捗バー表示　現在のページ*/
.location_area {
    display: flex;
    margin-bottom: 30px;
}

.location_area .location-on {
    background-color: #B9101C;
/*    background-color: #0065B2; */
    color: #fff;
}

.location_area .location-off, .location_area .location-on {
    flex: auto;
    -webkit-flex: auto;
    text-align: center;
}

.location_area > div {
    position: relative;
    line-height: 50px;
    overflow: hidden;
}

.location_area > div:first-child:after {
    content: none;
}

.location_area > div:after {
    position: absolute;
    z-index: 1;
    left: -25px;
    top: 0;
    transform: scale(0.707) rotate(45deg) skew(30deg, 30deg);
    content: '';
    background-color: #ccc;
    border-radius: 0 5px 0 50px;
    width: 50px;
    height: 50px;
    box-shadow: 2px -2px 0 2px #fafaff;
}

.location_area > div p {
    line-height: 1rem;
    padding-left: 10px;
    /*font-size: 1.2rem;*/
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
}

.location_area .location-on {
    background-color: #B9101C;
/*    background-color: #0065B2; */
    color: #fff;
}

.location_area .location-off, .location_area .location-on {
    flex: auto;
    -webkit-flex: auto;
    text-align: center;
}

/*進捗バー表示　他のページ*/
.location_area .location-off {
    background-color: #ccc;
}

.location_area .location-off, .location_area .location-on {
    flex: auto;
    -webkit-flex: auto;
    text-align: center;
}

.location_area .location-on + .location-off:after {
    background-color: #B9101C;
/*    background-color: #0065B2;*/
}

.location_area > div:after {
    position: absolute;
    z-index: 1;
    left: -25px;
    top: 0;
    transform: scale(0.707) rotate(45deg) skew(30deg, 30deg);
    content: '';
    background-color: #ccc;
    /* border-radius: 0 5px 0 50px; */
    width: 50px;
    height: 50px;
    box-shadow: 2px -2px 0 2px #fafaff;
}

.location_area .location-off:nth-child(n+2) p {
    padding-left: 16px;
}

/*スクロールバー付き枠（利用規約など）*/

p.infobox {
   height: 300px;     /* 高さを制限(※) */
   overflow: scroll;  /* スクロールバーを表示(※) */
   border: #333 1px solid;    /* 枠線を追加 */
   background-color: #fff7f7; /* 背景色を追加 */
   padding: 5px;
}

div.infobox {
   height: 600px;     /* 高さを制限(※) */
   overflow: scroll;  /* スクロールバーを表示(※) */
   border: #333 1px solid;    /* 枠線を追加 */
   background-color: #fffdfd; /* 背景色を追加 */
   padding: 5px;
}

.standard, .standard_c {
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;
    border-width: 0 0 1px 1px;
    border-color: #ddd;
    border-style: solid;
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-all;
}

.standard_c th {
    background: #ddd;
}

.standard_c th {
    padding: 10px;
    border-width: 1px;
    border-color: #7d7b7b;
    border-style: solid;
    text-align: center;
    vertical-align: middle;
}

.standard_c td {
    padding: 10px;
    border-width: 1px;
    border-color: #7d7b7b;
    border-style: solid;
    text-align: left;
    vertical-align: middle;
}



input[type="submit" i].chbx {
    border: none;
    margin: 0 auto;
    text-align: center;
    border: solid 1px #333;
    border-radius: 50px!important;
    padding: 4px 5px 4px 5px;
    width: 35%;
    background-color: rgb(102, 102, 102);
}

input[type="submit" i].chbx:hover {
    border: none;
    margin: 0 auto;
    text-align: center;
    border: solid 1px #333;
    border-radius: 50px!important;
    padding: 4px 5px 4px 5px;
    width: 35%;
    background-color: rgb(102, 102, 102);
}



/* 追加 18v1対応 */
.centering-t-area {
	width: 100%;
	font-size: 12px;
	text-align: left;
	padding: 4px 16px;
	background-color: #fafafa;
	border-bottom: 1px solid #ddd;
}

/* 追加 18v1対応 */
.flex-inner-right {
	-webkit-align-self: flex-end;
	align-self: flex-end;
}



/* SMT用指定 ホーム1to1カード部分指定内容をindex.cssから移動 */

.main .main-col {
	width: 100%;
    border-radius: 2px;
    background-color: #fff;
	margin: 0 auto 8px;
	-webkit-flex-direction: column;
	flex-direction: column;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.main .main-col-inner {
	position:relative;
	border-bottom: 1px solid #ddd;
}

.main-col .main-col-inner a {
	display: -webkit-flex;
	display: flex;
	width: 100%;
	color: #333;
	padding: 8px 12px;
}

.main-col .main-col-inner a:hover {
	background-color: rgba(0, 0, 0, 0.15);
	-webkit-filter: brightness(0.85);
	-moz-filter: brightness(0.85);
	-o-filter: brightness(0.85);
	-ms-filter: brightness(0.85);
	filter: brightness(0.85);
}

.fr{ float:right; }
.fl{ float:left; }

.uchiwake{
	padding:0px 15px;
}

.getsugaku {
    background-color: #EAEAEA;
/*    background-color: #eceef1;*/
    padding: 15px;
}

	.green-waku .getsugaku {
	background-color: #e1e9e6;
	padding: 15px;
	border: 1px solid #78c427;
	}


/* タブレット用指定 */
@media screen and (min-width: 768px) {

	.tit-use-area { padding: 12px 32px; }

	.main { min-width: 768px; }
	.main.main-inner { padding: 0 24px 8px 24px; }
	.main.snd-main-inner { padding: 0 0 24px 0; }

	.main .main-col {
		display: -webkit-flex;
		display: flex;
		width: 344px;
		margin: 0 8px 8px 8px;
	}

	.uchiwake{
		padding:0 0 0 100px;
	}

	.getsugaku {
    	background-color: #EAEAEA;
/*    	background-color: #eceef1; */
    	padding: 30px;
	}

	.green-waku .getsugaku {
	background-color: #e1e9e6;
	padding: 15px 15px 5px 15px;
	border: 1px solid #78c427;
	}
}

/* PC用指定 メインエリア中央寄せ */
@media screen and (min-width: 960px) {

	.main { min-width: 960px; }

	.main .main-col {
		display: -webkit-flex;
		display: flex;
		width: 288px;
	}

}

/* バナー＋テキスト */
.col-in > .tit-bnr {
	padding: 16px;
	font-weight: bold;
	background-color: #efefef;
}

.bnr-link-block {
	display: -webkit-flex;
	display: flex;
	color: #333;
	-webkit-flex-grow: 1;
	flex-grow: 1;
}

.bnr-link-block:hover {
	background-color: rgba(0, 0, 0, 0.15);
	-webkit-filter: brightness(0.85);
	-moz-filter: brightness(0.85);
	-o-filter: brightness(0.85);
	-ms-filter: brightness(0.85);
	filter: brightness(0.85);
}

.bnr-t-list {
	width: 100%;
	padding: 16px;
}

.bnr-t-list dt {
	float: left;
	clear: both;
	width: 110px;
}

.bnr-t-list dt > img {
	display: block;
	width: 110px;
	border: 1px solid #ddd;
}

.bnr-t-list dd {
	margin-top: 4px;
	margin-left: 110px;
	padding-left: 16px;
}

/*トップへ戻るボタン*/

.pagetop {
	color: #fff;
	background-color: rgba(0,0,0,0.3);
	text-decoration: none;
	display: none;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	font-size: 1.5rem;
	width: 3.3rem;
	height: 3.3rem;
	line-height: 3.3rem;
	border-radius: 3.3rem;
	text-align: center;
	cursor: pointer;
}

.pagetop:hover {
	color: #fff !important;
	background-color: #c6c6c7;
	text-decoration: none;
}


/****************************** /コンテンツ構造 ******************************/

/****************************** サブコンテンツ構造 ******************************/

.sub-contents { padding-bottom: 8px; }
.sub-contents > *:last-child { margin-bottom: 0 !important; }

/* タブ切り替え */
ul.bc-tab-menu {
	display: -webkit-flex;
	display: flex;
	width: 100%;
}

ul.bc-tab-menu li {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	width: 50%;
	text-align: center;
	cursor: pointer;
}

ul.bc-tab-menu li p { width: 100%; }

ul.bc-tab-menu li p {
	color: #999;
	display: block;
	padding: 12px;
}

ul.bc-tab-menu li.active p {
	color: #333;
	font-weight: bold;
	padding-bottom: 8px;
}

ul.bc-tab-menu li.active { border-bottom: 4px solid #fdd000; }

ul.bc-tab-menu li.active:hover { cursor: default; }
ul.bc-tab-menu li:not(.active):hover{
	background-color: rgba(0, 0, 0, 0.15);
	-webkit-filter: brightness(0.85);
	-moz-filter: brightness(0.85);
	-o-filter: brightness(0.85);
	-ms-filter: brightness(0.85);
	filter: brightness(0.85);
}

/*ログイン画面　パスワード忘れテキスト枠*/

.loginbg {
    background-color: #eaf6ff;
    border: #B9101C 1px solid;
/*    border: #0065B2 1px solid; */
    padding: 10px;
    margin: 0 auto;
}

.support-area .inner .col { background-color: #fff; }

/* 17.11.21修正 */
.support-area .inner .col .col-in {
	display: -webkit-flex;
	display: flex;
	max-width: 480px;
	width: 100%;
	margin: 0 auto;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.support-area .col-in .support-list a {
	display: -webkit-flex;
	display: flex;
}
.support-area .col-in .support-list p {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	padding: 8px 32px 8px 40px;
	min-height: 48px;
	width: 100%;
}

.support-area .inner .col .t-link-pd a {
	display: -webkit-flex;
	display: flex;
	font-weight: bold;
	padding: 16px;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	text-align: left;
}

.support-area .inner .col .t-link-pd span { padding-right: 24px; }


/* お知らせ */
.info-area .list-inner {
	border-bottom: 1px solid #ddd;
	padding: 12px 32px 12px 8px;
}
.info-area .list-inner dt {
	font-size: 12px;
	margin-bottom: 4px;
}
.info-area .list-inner dd { font-size: 12px; }

.info-area .t-link-pd a {
	display: -webkit-flex;
	display: flex;
	font-weight: bold;
	padding: 16px;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	text-align: left;
}

.info-area .t-link-pd span { padding-right: 24px; }

/*お問い合わせ*/

.con-waku{
	border:1px solid #333;
	border-radius:4px;
	width: 100%; /* */
}


/* TB用指定 */
@media screen and (min-width: 768px) {

	.support-area .inner {
		display: -webkit-flex;
		display: flex;
		margin: 0 auto;
		padding: 0 32px;
		text-align: left;
		max-width: 768px;
	}

	.support-area .inner .col {
		display: -webkit-flex;
		display: flex;
		width: 50%;
	}

	.info-area { padding: 0 32px; }
	.info-area .t-link-pd { margin-top: 12px; }
}


/* PC用指定 */
@media screen and (min-width:960px) {

	.support-area .inner { max-width: 960px; }

}

/****************************** /サブコンテンツ構造 ******************************/

/******************** /footer構造 ********************/

/* アイコン */
.ico-foot-home, .ico-foot-data, .ico-foot-charge, .ico-foot-apply, .ico-foot-mailservice, .ico-foot-point, .ico-foot-device, .ico-foot-shop, .ico-first, .ico-service-list, .ico-appli {
	display: block;
	width: 48px;
	height: 48px;
}

.ico-foot-home { background-position: 0 -181px;}
.ico-foot-data { background-position: -48px -181px;}
.ico-foot-charge { background-position: -96px -181px;}
.ico-foot-apply { background-position: -144px -181px; }
.ico-foot-mailservice { background-position: -192px -181px; }
.ico-foot-point { background-position: -240px -181px; }
.ico-foot-device { background-position: -288px -181px; }
.ico-foot-shop { background-position: -336px -181px; }
.ico-first { background-position: 0 -296px; }
.ico-service-list { background-position: -48px -296px; }
.ico-appli { background-position: -96px -296px; }


/* コピーライトエリア */
.ft-copyright-area{
	background-color: #fff;
	padding:16px 0 0;
}
.ft-copyright-area .inner{
	padding: 0 12px;
}
.ft-copyright-area .text-link{
	margin-bottom: 24px;
	font-size: 0px; /* 余白バグ対策 */
}
.ft-copyright-area .text-link li{
	font-size: 12px;
	display: inline-block;
	border-right: solid 1px #333;
	padding-right: 10px;
	margin-right: 10px;
}
.ft-copyright-area .text-link li:last-child {
	border-right: none;
}

.ft-copyright-area .copyright{
    font-size: 10px;
    color: #fff;
    text-align: center;
    background-color: #223C68;
/*    background-image: linear-gradient( 45deg, rgb(192,0,0) 0%, rgb(255,167,28) 100%);*/
/*    background-color: #B9101C;*/
    padding: 5px 0 5px 0;
}

/*コピーライトエリア　2020.05追記*/
footer #wpFooter01 {
    padding: 10px 0px 25px 0px;
}


footer #wpFooter01 > .inner01 .box:first-child {
    width: 100%;
    float: left;
    margin: 0 30px 0 0;
}

footer #wpFooter01 > .inner01 .box {
    width: 140px;
    float: left;
    margin: 5px 15px 5px 15px;
}

/*フッター企業情報ボタン　2020.05追記*/
h1 span.kigyoubtn {
    font-size: 10px;
    padding: 3px 15px 3px 15px;
    margin: 0 0 0 30px;
    border: 1px solid #333;
    border-radius: 30px;
}
.box h1 {
    font-size: 1rem;
}

.kigyoubtna{
    color: #333;
    display: inline;
}

.kigyoubtn:hover, a:hover.kigyoubtn{
    color: #fff;
    background-color: #BFA959;
/*    background-color: #0065B2; */
    text-decoration: none;
}

body,
.wrapper {
  display: flex;
  flex-direction: column;
/*  min-height: 100vh; フッター固定できないけど、仕方ない*/
}

footer {
  margin-top: auto;
}


/* TB用指定 */
@media screen and (min-width: 768px) {

	/* アイコン */
	.ico-foot-home, .ico-foot-data, .ico-foot-charge, .ico-foot-apply, .ico-foot-mailservice, .ico-foot-point, .ico-foot-device, .ico-foot-shop, .ico-first, .ico-service-list, .ico-appli {
		display: block;
		width: 60px;
		height: 60px;
	}
	.ico-foot-home { background-position: 0 -226px;}
	.ico-foot-data { background-position: -60px -226px;}
	.ico-foot-charge { background-position: -120px -226px;}
	.ico-foot-apply { background-position: -180px -226px; }
	.ico-foot-mailservice { background-position: -240px -226px; }
	.ico-foot-point { background-position: -300px -226px; }
	.ico-foot-device { background-position: -360px -226px; }
	.ico-foot-shop { background-position: -420px -226px; }
	.ico-first { background-position: 0 -370px; }
	.ico-service-list { background-position: -60px -370px; }
	.ico-appli { background-position: -120px -370px; }

	.ft-copyright-area .text-link {
		text-align: center;
	}
}

/* PC用指定 */
@media screen and (min-width:960px){

	/* アイコン */
	.ico-foot-home, .ico-foot-data, .ico-foot-charge, .ico-foot-apply, .ico-foot-mailservice, .ico-foot-point, .ico-foot-device, .ico-foot-shop, .ico-first, .ico-service-list, .ico-appli {
		display: block;
		width: 60px;
		height: 60px;
	}
	.ico-foot-home { background-position: 0 -226px;}
	.ico-foot-data { background-position: -60px -226px;}
	.ico-foot-charge { background-position: -120px -226px;}
	.ico-foot-apply { background-position: -180px -226px; }
	.ico-foot-mailservice { background-position: -240px -226px; }
	.ico-foot-point { background-position: -300px -226px; }
	.ico-foot-device { background-position: -360px -226px; }
	.ico-foot-shop { background-position: -420px -226px; }
	.ico-first { background-position: 0 -370px; }
	.ico-service-list { background-position: -60px -370px; }
	.ico-appli { background-position: -120px -370px; }

	.ft-copyright-area .text-link {
		text-align: center;
		clear: both;
	}


	/*コピーライトエリア　多胡追記*/
	footer #wpFooter01 {
	    padding: 10px 0px 25px 0px;
	}

	footer #wpFooter01 > .inner01 .box:first-child {
	    width: 40%;
	    float: left;
	    margin: 0 30px 0 0;
	}

	footer #wpFooter01 > .inner01 .box {
	    width: 200px;
	    float: left;
	    margin: 0 15px 15px;
	    line-height: 25px;
	}

	footer #wpFooter01 > .inner01 .box:last-child {
	/*    clear:both;*/
	}

	/*フッター企業情報ボタン　2020.05追記*/
	h1 span.kigyoubtn {
	    font-size:12px;
	    padding: 5px 20px 5px 20px;
	    margin: 0 0 0 50px;
	    border: 1px solid #333;
	    border-radius: 30px;
	}
	.box h1 {
    	    font-size: 1.2rem;
	}

	.kigyoubtna{
	    color: #333;
    	    display: inline;
	}

}

/******************** /footer構造 ********************/

/******************** 2カラム **********************/
.container-l,
.container-r {
	width: 100%;
}

.no-link { width: 100%; }

.container-l .tit-use-info {
	padding: 12px 0;
	font-size: 12px;
	font-weight: bold;
}


.container-r .tit-use-info {
	padding: 16px 0 12px 0;
	font-size: 12px;
	font-weight: bold;
}

.snd-tit {
	font-weight: bold;
	padding-bottom: 4px;
	margin-bottom: 12px;
	border-bottom: 1px solid #ddd;
}

.snd-s-tit {
	font-weight: bold;
	padding: 12px 0 8px 0;
}

/* セカンド 1col 背景灰色 */
.snd-gray-area {
	width: 100%;
	background-color: #fafafa;
	padding: 32px 16px;
}

.snd-gray-area p:first-child {
	font-size: 12px;
	text-align: center;
	margin-bottom: 16px;
}

.container-r .menu-block {
	width: 100%;
	border-radius: 2px;
	background-color: #fff;
	margin: 0 auto;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.container-r .gray-area {
	background-color: #fafafa;
	padding: 32px 0;
	text-align: center;
	margin-top: 1px;
}

.container-r .gray-area p:first-child { margin: 0 12px; }

.container-r .gray-area p.btn-block { margin: 16px 16px 0 16px; }

.container-r-list {
	width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	background-color: #fff;
	margin-bottom: -1px;
}

.container-r-list li {
	display: -webkit-flex;
	display: flex;
	width: 33.3333%;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.container-r-list li {
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.container-r-list > li:nth-child(3n) {
	border-right: none;
	border-bottom: 1px solid #ddd;
	-webkit-flex-grow: 1;
	flex-grow: 1;
}

.container-r-list a {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-grow: 1;
	flex-grow: 1;
}

.container-r-list li > div {
	-webkit-flex-grow: 1;
	flex-grow: 1;
}

.container-r-list li:last-child p {
	border-bottom:0;
}

.container-r-list .link-t-area {
    padding: 64px 8px 12px 8px;
    text-align: center;
    width: 100%;
    color: #333;
    font-size: 12px;
}

.data-detail-block a.link-info-area {
    color: #333;
}

.data-detail-block a.link-info-area:hover {
    color: #B9101C;
/*    color: #0065B2; */
}

/*.container-r-list .ico-link-arrow:after { display: none; }*/


/* TB用指定 */
@media screen and (min-width: 768px) {
	.container-l {
		width: 434px;
		margin-right: 16px;
	}

	.main .snd-main-col { margin: 0 auto 24px; }

	/* セカンド 1col 背景灰色 */
	.snd-gray-area p:first-child {
		font-size: 14px;
		text-align: center;
		margin-bottom: 16px;
	}

	.container-r { width: 254px; }
	.container-r .tit-use-info { padding: 12px 0; }

	.container-r-list li {
		width: 100%;
 		border-right: none;
 	}

	.container-r-list a { font-size: 14px; }

	.container-r-list .link-t-area {
		padding: 0;
		text-align: left;
		font-size: 14px;
	}

	.container-r-list .ico-link-arrow:after { display: block; }

	.container-r .menu-block { margin: 0 auto; }

	/* disabled 矢印アイコン表示 */
	.container-r-list.disabled-text > li div:after {
		background-position: 0 -147px;
		content: "";
		height: 24px;
		width: 24px;
		position: absolute;
		top: 50%;
		right: 16px;
		margin-top: -12px;
		background-image: url(../../images/image/ico-link-arrow3@2x.png);
		background-repeat: no-repeat;
		background-size: 384px;
	}
}

/* PC用指定 */
@media screen and (min-width: 960px) {
	.container-l {
		width: 516px;
		margin-right: 46px;
	}

	.container-r { width: 398px; }
}

/******************** /2カラム **********************/

/******************** 1カラム **********************/


.btn-block-col3 {
    width: 100%;
    padding: 0 16px 16px;
    margin: 0 auto;
}

.btn-block-col3 li {
    float: left;
    width: 44%;
    display: -webkit-flex;
    display: flex;
    margin: 0 6px 15px;
}

input[type="submit" i].sbmbtn {
    border: none;
    background-color: #fff;
    margin: 0 auto;
    text-align: center;
    border: solid 1px #333;
    border-radius: 50px!important;
    padding: 4px 5px 4px 5px;
    width: 100%;
}


input[type="submit" i].nextbtn {
    border: none;
    background-color: #fff;
    margin: 0 auto;
    text-align: center;
    border: solid 1px #333;
    border-radius: 50px!important;
    padding: 4px 5px 4px 5px;
    width: 100%;
}


/*キャンセルボタン　薄いグレーボタン*/

input[type="submit" i].grybtn {
    border: none;
    margin: 0 auto;
    text-align: center;
    border: solid 1px #333;
    border-radius: 50px!important;
    padding: 4px 5px 4px 5px;
    width: 35%;
    background-color: rgb(210, 210, 210);
}

input[type="submit" i].grybtn:hover {
    border: none;
    margin: 0 auto;
    text-align: center;
    border: solid 1px #333;
    border-radius: 50px!important;
    padding: 4px 5px 4px 5px;
    width: 35%;
    background-color: rgb(102, 102, 102);
}



/* TB、PC用指定 */
@media screen and (min-width: 768px) {

.container-all {
    width: 100%;
    margin-right: 0;
display: inline-block
}

.btn-block-col3 {
    width: 35%;
    padding: 0 16px 16px;
    margin: 0 auto;
}

.btn-block-col3 li {
    float: left;
    width: 45%;
    display: -webkit-flex;
    display: flex;
    margin: 0 6px;
}

.btn-block-col3:after {
    content: "";
    clear: both;
    display: block;
    *zoom: 1;
}

input[type="submit" i].sbmbtn {
    border: none;
    background-color: #fff;
    margin: 0 auto;
    text-align: center;
    border: solid 1px #333;
    border-radius: 50px!important;
    padding: 4px 5px 4px 5px;
    width: 40%;
}
}


/******************** /2カラム **********************/

/********** お客様情報変更　input他 **********/

input.ime_off{
	font-size: 12px;
	width: 100%;
	padding: 0.5em 1em 0.5em 1em;
	background-color: white;
	border-radius: 4px!important;
	display: inline-block;
	line-height: 1.5em;
	border:1px solid #333;
/*	margin-left: 10px;*/
	box-sizing: border-box;
	  -webkit-appearance: none;
}

input.imegray{
	font-size: 12px;
	width: 100%;
	padding: 0.5em 1em 0.5em 1em;
	background-color: #dddddd;
	border-radius: 4px!important;
	display: inline-block;
	line-height: 1.5em;
	border:1px solid #333;
/*	margin-left: 10px;*/
	box-sizing: border-box;
	  -webkit-appearance: none;
}

input.gender{
	margin-left: 5px;
}

/*送信ボタン*/
input[type="submit" i]  {
    border: none;
    background-color: #fff;
    margin: 0 auto;
    text-align: center;
    border: solid 1px #333;
color: #333333;
    border-radius: 50px!important;
    padding: 4px 5px 4px 5px;
    width: 35%;
}

input[type="submit" i]:hover {
    border: none;
    background-color: #BFA959;
/*    background-color: #0065B2; */
    color: #fff;
    border: solid 1px #333;
}

/*送信ボタン 2つ横並び*/
.btn-two-area input[type="submit" i]  {
    width: 100%;
}

/*送信ボタン 2つ横並び*/
.btn-double{
width:100%;
}
.btn-double li {
    width: 43%;
    float: left;
    margin: 10px;
}

.btn-double-area {
    width: 100%;
    height: 50px;
}

.backbtn:hover {
    background-color: #B9101C;
}

/* TB、PC用指定 */
@media screen and (min-width: 768px) {
.btn-double-area {
    width: 100%;
    height: 50px;
}
.btn-double li{
    width: 45%;
    float: left;
    margin: 10px;
}
}

/*戻るボタン キャンセルボタン*/
/*戻るボタン*/
button {
    border: none;
    background-color: #fff;
    margin: 0 auto;
    text-align: center;
    border: solid 1px #333;
    border-radius: 50px!important;
    padding: 4px 5px 4px 5px;
    width: 100%;
    background-color: #ddd;
}

/* チャージ選択ボタン */
button[type="submit" i] {
    width: 100%;
    border-radius: 0;
    border: 1px solid #333333;
    background-color: #fff;
    padding: 10px;
    font-size: 14px;
}

button[type="submit" i]:hover {
    background-color: #BFA959;
}

 /* 次へボタン */
button[type="submit" i].nextbtn {
    width: 100%;
    border-radius: 0;
    border: 1px solid #333333;
    background-color: #fff;
    padding: 3px;
    font-size: 14px;
/* 2021-11-12 */
    color: #333333;
/* 2021-11-12 */
}

button[type="submit" i].nextbtn:hover {
    border: none;
    background-color: #BFA959;
    color: #fff;
/*    color: #333333; */
    border: solid 1px #333;
}

 /* 戻るボタン */

button[type="submit" i].backbtn {
    width: 100%;
    border-radius: 0;
    border: 1px solid #333333;
    background-color: #DDDDDD;
    padding: 3px;
    font-size: 14px;
}

button[type="submit" i].backbtn:hover {
    border: none;
    color: #fff;
    background-color: #666666;
    border: solid 1px #333;
}

 /* クレジットボタン */
button[type="submit" i].creditbtn {
    width: 40%;
    border-radius: 0;
    border: 1px solid #333333;
    background-color: #fff;
    padding: 3px;
    font-size: 14px;
}

button[type="submit" i].creditbtn:hover {
    border: none;
    background-color: #B9101C;
    color: #fff;
    border: solid 1px #333;
}

 /* 確定ボタン */
 button[type="submit" i].okbtn {
    width: 40%;
    border-radius: 0;
    border: 1px solid #333333;
    background-color: #fff;
    padding: 3px;
    font-size: 14px;
}

button[type="submit" i].okbtn:hover {
    border: none;
    background-color: #B9101C;
    color: #fff;
    border: solid 1px #333;
}

 /* ボタン */
 button[type="button" i].okbtn {
    width: 40%;
    border-radius: 0;
    border: 1px solid #333333;
    background-color: #fff;
    padding: 3px;
    font-size: 14px;
}

button[type="button" i].okbtn:hover {
    border: none;
    background-color: #B9101C;
    color: #fff;
    border: solid 1px #333;
}

/* チャージ選択ボタン */
button[type="submit" i] {
    width: 100%;
    border-radius: 0;
    border: 1px solid #333333;
    background-color: #fff;
    color: #333333;
    padding: 3px;
    font-size: 14px;
}

button[type="submit" i]:hover {
    background-color: #BFA959;
    color: #ffffff;
}

/* お問い合わせ選択ボタン */
button.square {
    border: none;
    background-color: #fff;
    margin: 0 auto;
    text-align: center;
    border: solid 1px #333;
    border-radius: 0px!important;
    padding: 15px 5px 15px 5px;
    width: 100%;
}

button.square:hover {
    border-radius: 0px!important;
/*    padding: 4px 5px 4px 5px;*/
    background-color: #B9101C;
/*    background-color: #0065B2; */
    color: #fff;
}

/*別サイト遷移（クレジットカード決済または本人確認書類アップロード画面）*/
button#OrderSubmit.creditbtn{
    width: 100%;
}

/* TB、PC用指定 */
@media screen and (min-width: 768px) {

button#OrderSubmit.creditbtn{
    width: 40%;
}
}

/* お問い合わせフォーム ラジオボタン選択で表示非表示 */

.sbh1,.sbh2{display:none;}
input[type="radio"]:checked#sbh1~div.sbh1 {display:block;}
input[type="radio"]:checked#sbh2~div.sbh2 {display:block;}





/****************************** お知らせ、静的ページmodule ******************************/

.mod-contents { padding-bottom: 8px; padding-top: 12px; }
.mod-contents > *:last-child { margin-bottom: 0; }

.mod-title {
	display: -webkit-flex;
	display: flex;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #bbb;
	background-color: #fafafa;
	padding: 16px;
	margin-bottom: 16px;
 	font-size: 18px;
 }

.mod-title .img-block {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	padding-left: 4px;
	margin-left: auto;
}


/* TB、PC用指定 */
@media screen and (min-width: 768px) {

	.mod-title { margin: 0 32px 16px; }

}

/****************************** common（style.css） 静的 ******************************/

/* フォントサイズ */
.fs12 { font-size: 12px !important; }
.fs14 { font-size: 14px !important; }
.fs16 { font-size: 16px !important; }
.fs18 { font-size: 18px !important; }
.fs22 { font-size: 22px !important; }
.fs24 { font-size: 24px !important; }


/* マージン、パディング */
.ml-auto{ margin: 0 0 0 auto !important; }
.mr-auto{ margin: 0 auto 0 0 !important; }

.mt-10 { margin-top: -10px !important; }
.mt-12 { margin-top: -12px !important; }
.mr-10 { margin-right: 10px !important; }
.ml-10 { margin-left: 10px !important; }
.ml20 { margin-left: 20px !important; }
.ml30 { margin-left: 30px !important; }
.ml40 { margin-left: 40px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }

.pt0{ padding-top: 0 !important; }
.pb0{ padding-bottom: 0 !important; }

.center{ text-align: center; }


/* セクション */
.com-inner { padding: 0 16px 32px; }
.com-t-inner { padding: 0 16px 16px; } /* section テキスト＋テキスト余白 */
.com-tlink-inner { padding: 0 0 32px; } /* section 横線＋テキストリンク余白 */

a.com-img-anchor { display: inline; } /* 画像リンク */
a.com-t-inline { display: inline; }


/* section 横線 */
.com-t-line { border-top: 1px solid #ddd; }



/* テキストリンク、アンカーリンク */
a.com-inline-link, a.com-anchor-link {
	display: inline;
	color: #0070c9;
	text-decoration: underline;
}
a.com-anchor-link {
	display: inline-block;
	padding-right: 24px;
	position: relative;
}
a.com-anchor-link:after {
	content: "";
	height: 24px;
	width: 24px;
	position: absolute;
	background-image: url();
	background-repeat: no-repeat;
	background-size: 384px;
	background-position: -24px -147px;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
a.com-inline-link:hover, a.com-anchor-link:hover {
	color: #0080ff;
	text-decoration: none;
}

/* テキストリンク（青文字+右矢印）（左矢印+青文字）181114更新 */
.com-t-r-arrow, .com-t-l-arrow {
	color: #0070c9;
	position: relative;
	display: inline-block;
}

.com-t-r-arrow { padding: 0 24px 0 0; }
.com-t-l-arrow { padding: 0 0 0 24px; }

.com-t-r-arrow:after, .com-t-l-arrow:before {
	content: "";
	height: 24px;
	width: 24px;
	position: absolute;
	top: 50%;
	margin-top: -12px;
	background-image: url();
	background-repeat: no-repeat;
	background-size: 384px;
	background-position: -24px -147px;
}

.com-t-l-arrow:before {
	left: 0;
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.com-t-r-arrow:hover, .com-t-l-arrow:hover {
	color: #0080ff;
	text-decoration: underline;
}

/* ページ内リンク */
.com-anchor-block li { padding-bottom: 12px; }
.com-anchor-block li:first-child { padding-top: 12px; }

/* ボタンリンク（白背景） */
.btn-basic-area, .btn-secion-area  {
	display: -webkit-flex;
	display: flex; /* IE対策 */
	margin: 16px 0;
}

.com-btn-basic {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	min-height: 36px;
	width: 100%;
	max-width: 320px;
	padding: 4px 16px;
	border: 2px solid #0070c9;
	border-radius: 4px;
	background-color: #fff;
	color: #0070c9;
	font-weight: bold;
	text-align: center;
}

.com-btn-basic:hover {
	background-color: rgba(0, 0, 0, 0.15);
	-webkit-filter: brightness(0.85);
	-moz-filter: brightness(0.85);
	-o-filter: brightness(0.85);
	-ms-filter: brightness(0.85);
	filter: brightness(0.85);
}

/* ボタンリンク（青背景） */
.com-btn-basic.strong {
	color: #fff;
	background-color: #0080ff;
}

.com-btn-basic.strong:hover {
	background-color: #0070c9;
	-webkit-filter: brightness(0.85);
	-moz-filter: brightness(0.85);
	-o-filter: brightness(0.85);
	-ms-filter: brightness(0.85);
	filter: brightness(0.85);
}

/* ボタンリンク（inline-block） */
.btn-mini-area {
	display: -webkit-flex;
	display: flex; /* IE対策 */
	margin: 12px 0;
}

.com-btn-basic.mini {
	display: -webkit-inline-flex;
	display: inline-flex;
	width: auto;
	max-width: 100%;
	margin: 0;
	font-size: 12px;
}


/* ボタンの配置変更 */
.btn-left { margin-right: auto !important; }
.btn-right { margin-left: auto !important; }
.btn-center{ margin-left: auto !important; margin-right: auto !important; }


/* 見出し */
h3{
    font-weight: 700;
    font-size: 1rem;
    margin-top: 5px;
}

.title-lev1, .title-lev2, .title-lev3, .title-lev4, .title-lev5, .title-lev6, .title-lev7 { line-height:1.25; }
/* .title-lev1, .title-lev2, .title-lev3, .title-lev4, .title-lev5, .title-lev6 { line-height:1.25; } */

.title-lev1 {
　　font-size: 22px;
    padding: 0px 5px 10px;
    margin-bottom: 14px;
    border-bottom: 2px solid #BFA959;
/*    border-bottom: 2px solid #0065B2; */
}

.title-lev1-green {
　　font-size: 22px;
    padding: 0px 5px 10px;
    margin-bottom: 14px;
    border-bottom: 2px solid #A5D374;
}

.title-lev2 {
    display: -webkit-flex;
    display: block;
    padding: 16px;
    margin-bottom: 16px;
    /* margin: auto; */
    /* border-top: 1px solid #ccc; */
    /* border-bottom: 1px solid #bbb; */
    /* background-color: #fafafa; */
    font-size: 18px;
    text-align: center;
}

.title-lev2 .img-block {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	padding-left: 8px;
	margin-left: auto;
}

/*
.title-lev3, .title-lev4, .title-lev5 {
	font-size: 14px;
	padding: 12px 0;
	border-bottom: 1px solid #bbb;
	margin: 0 16px 16px;
}
*/

.title-lev6 {
	padding: 8px 0;
	border-bottom: 1px solid #bbb;
	margin: 0 16px 16px;
}

.title-lev3 { font-size: 16px; }
.title-lev4 { font-size: 14px;font-weight: bold; }
.title-lev5 {
    display: -webkit-flex;
    display: block;
    padding: 16px;
    margin-bottom: 16px;
    /* margin: auto; */
    /* border-top: 1px solid #ccc; */
    /* border-bottom: 1px solid #bbb; */
    /* background-color: #fafafa; */
    font-size: 18px;
}

.title-lev6 {
	font-size: 12px;
	border-top: 1px solid #ccc;
}

.title-lev7 {
　　font-size: 14px;
    padding: 0px 5px 5px;
    border-bottom: 1px solid #B9101C;
}


.sec-col2-left2 { margin-bottom: 32px; }


/* 「・」、「※」付きリスト */
ul.com-list-note, ul.com-list-dot { margin-left: 1em; }

.com-list-dot > li { position: relative; }
.com-list-note > li { position: relative; font-size: 12px;}

.com-list-dot > li:before,
.com-list-note > li:before {
	margin-left: -1.0em;
}

.com-list-dot > li:before { content: "\30FB"; }
.com-list-note > li:before { content: "\203b"; }/* ※印をテキスト前に配置 */

.com-list-note > li { margin-bottom: 8px; } /* 17.11.14追加 */
.com-list-note > li:last-child { margin-bottom: 0; } /* 17.11.14追加 */

/* 注釈右寄せテキスト 17.12.08追加 */
 p.com-list-note {
	display: -webkit-flex;
	display: flex;
	font-size: 12px;
	margin-left: 1em;
	text-align: left;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

p.com-list-note:before {
	content: "\203b";
	margin-left: -1.0em;
}

/* 連番 17.11.24追加 */
ul.com-list-num { margin-left: 1.8em; }

.com-list-num > li {
	position: relative;
	counter-increment: section;
}

.com-list-num > li:before {
	/* position: absolute; */
	content: counter(section) ".";
	margin-left: -1.8em;
	margin-right: 1em;
}

/* 注記連番 17.12.6追加 */
ul.com-list-numnote { margin-left: 2.5em; }
.com-list-numnote > li {
	font-size: 12px;
	position: relative;
	counter-increment: notes;
	margin-bottom: 8px;
}
.com-list-numnote > li:last-child { margin-bottom: 0; }
.com-list-numnote > li:before {
	content: "\203b" counter(notes);
	margin-left: -3em;
	margin-right: 1em;
}


/* 表組 17.11.14追加 */
figcaption { display: none; line-height: 0; }

.table-block {
	width: 100%;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

.table-block th, .table-block td {
	padding: 12px 8px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-size: 12px;
}

.table-block th {
	background-color: #e7e7e7;
	font-weight: bold;
	vertical-align: top;
}

.table-block th { width: 25%; white-space: nowrap; }
.table-block td { width: 75%; }


/* 2列 */
.sec-col2-block .col2-com-inner { margin: 0 16px; }
.sec-col2-block .img-mt { margin-top: 32px; }

/* 3列リスト(中黒) */
.sec-list-col3 li { width: 100%; }

/* 画像表示 */
.sec-lev1 figure > img, .sec-lev2 figure > img,
.sec-lev3 figure > img, .sec-lev4 figure > img,
.sec-lev5 figure > img, .sec-lev6 figure > img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	border: 1px solid #ddd;
}

/* 画像線なし指定 */
.sec-lev1 figure.no-border > img, .sec-lev2 figure.no-border > img,
.sec-lev3 figure.no-border > img, .sec-lev4 figure.no-border > img,
.sec-lev5 figure.no-border > img, .sec-lev6 figure.no-border > img {
	border: none;
}

/* 1:3（画像＋テキスト）*/
.sec-col2-block > li figure {
	margin: 0 16px;
}

/* notice */
.sec-notice-box {
	border: 2px solid #cc0033;
	font-size: 12px;
	padding: 12px;
	color: #333;
}

.sec-notice-box > .notice-t-box { padding-left: 28px; margin-top: 12px; }

.ico-notice {
	position: relative;
	padding-left: 28px;
	margin-bottom: 8px;
}

.ico-notice:before {
	content: "";
	height: 24px;
	width: 24px;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -12px;
	background-image: url();
	background-repeat: no-repeat;
	background-size: 384px;
}

.ico-notice:before { background-position: -240px -147px; }

.ico-notice:before {
	content: "";
	clear: both;
	display: block;
	*zoom: 1;
}


	/* 3列リスト(APN設定) */
	ul.sec-waku-col3{ margin-left: 0; }

	.sec-waku-col3 {
		display: -webkit-block;
    		display: block;
    	/*	-webkit-flex-wrap: wrap;*/
    	/*	flex-wrap: wrap;*/
	/*	justify-content: space-between;*/
	}

	.sec-waku-col3 li {
		width: 100%;
	}

	.right-gray-waku{
	    background-color: #f5f5f5;
	    padding: 38px;
		margin-bottom:30px;
	}

/*構成プロファイルダウンロードボタン*/
	.dl-btn{
	color: #ffffff;
	background-color: #0065B2;/*赤ボタンなら→#B9101C*/
	padding: 15px;
	 border-radius: 5px;
	width: 90%;
	text-align: center;
	margin: 0 auto;
	margin-top: 10px;
	}


/* タブレット用指定 */
@media screen and (min-width: 768px) {
	/* セクション */
	.sec-lev1, .sec-lev2, .sec-lev3, .sec-lev4, .sec-lev5, .sec-lev6 { padding: 0 32px; }

	/* 表組 17.11.14追加 */
	.table-row-block th, .table-row-block td,
	.table-block th, .table-block td { display: table-cell; }
	.table-row-block th, .table-block th { width: 16.66%; }
	.table-row-block td, .table-block td { width: 83.34%; }

	/* ブロック要素 17.11.14追加 */
	.sec-col-block {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	/* 2列表示 */
	.sec-col2-inner li {
		-webkit-flex-direction: column;
		flex-direction: column;
		width: 50%;
	}

	/* 3列表示 */
	.sec-col3-inner li {
		-webkit-flex-direction: column;
		flex-direction: column;
		width: 33.33%;
	}

	.sec-col2-inner > .com-inner,
	.sec-col3-inner > .com-inner {
		padding: 0 16px 32px;
	}

	/***** 画像＋テキスト *****/
	.sec-col2-block {
		display: -webkit-flex;
		display: flex;
		width: 100%;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	/* 17.12.07 */
	.sec-col2-block > li:nth-child(odd) {
		width: 33.33%;
		padding-bottom: 32px;
	}

	.sec-col2-block > li figure { margin: 0 16px 0 0; }

	.sec-col2-block > li:nth-child(even) {
		width: 66.67%;
		padding-bottom: 32px;
	}

	.sec-col2-block > li:nth-child(even) .com-inner { padding: 0 16px; }

	.sec-col2-block > li .title-lev4 { padding: 0 0 12px; }


	.com-inner-col2 { padding: 0 0 0 16px; }


	/* 画像＋テキスト余白 */
	.com-inner-mt24 { margin-top: 24px; }
	.sec-col2-tblock > .title-lev4 { padding: 0 0 12px; }

	/* テキスト＋表 */
	.sec-col2-left2 {
		width: 70%;
		padding-right: 32px;
		margin-bottom: 0;
	}

	.sec-col2-text {
		width: 30%;
		-webkit-flex-grow:1;
		flex-grow: 1;
	}

	/* 追加 */
	.sec-lev1 .sec-col-block figure > img, .sec-lev2 .sec-col-block figure > img,
	.sec-lev3 .sec-col-block figure > img, .sec-lev4 .sec-col-block figure > img,
	.sec-lev5 .sec-col-block figure > img, .sec-lev6 .sec-col-block figure > img,
	.sec-lev1 .sec-col2-block figure > img, .sec-lev2 .sec-col2-block figure > img,
	.sec-lev3 .sec-col2-block figure > img, .sec-lev4 .sec-col2-block figure > img,
	.sec-lev5 .sec-col2-block figure > img, .sec-lev6 .sec-col2-block figure > img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}

	/* 1画像 w640pxより大きい画像の場合 */
	.sec-lev1 figure > img, .sec-lev2 figure > img,
	.sec-lev3 figure > img, .sec-lev4 figure > img,
	.sec-lev5 figure > img, .sec-lev6 figure > img {
		max-width: 640px;
	}

	/* 1画像 w640pxより大きく線なしリンクあり */
	.sec-lev1 figure.no-border a > img, .sec-lev2 figure.no-border a > img,
	.sec-lev3 figure.no-border a > img, .sec-lev4 figure.no-border a > img,
	.sec-lev5 figure.no-border a > img, .sec-lev6 figure.no-border a > img {
		max-width: 640px;
	}

	/* 注記 */
	.mod-list-area { padding: 0 32px 16px 32px; }
	/* 注記＋番号テキスト記載 */
	.list-num-notes { padding: 0 32px 16px 0; }
	.list-tnum-notes { padding: 0 32px 16px; }


	/* 3列リスト(中黒) */
	ul.com-list-dot.sec-list-col3{ margin-left: 0; }

	.sec-list-col3 {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
/*		margin: 0 -32px 0 0;*/
	}

	.sec-list-col3 li {
		width: 33.33%;
		padding: 0 32px 0 1.2em;
	}







	/* 3列リスト(APN設定) */
	ul.sec-waku-col3{ margin-left: 0; }

	.sec-waku-col3 {
		display: -webkit-flex;
    		display: flex;
    		-webkit-flex-wrap: wrap;
    		flex-wrap: wrap;
		justify-content: space-between;
	}

	.sec-waku-col3 li {
		width: 32.5%;
	}

	.right-gray-waku{
	    background-color: #f9f9f9;
	    padding: 38px;
		margin-bottom:30px;
	}

/*構成プロファイルダウンロードボタン*/
	.dl-btn{
	color: #ffffff;
	background-color: #0065B2;/*赤ボタンなら→#B9101C*/
	padding: 15px;
	 border-radius: 5px;
	width: 90%;
	text-align: center;
	margin: 0 auto;
	margin-top: 10px;
	}


	/* App Store */
	figure.sec-bnr-download {
		margin: 16px 0;
		text-align: left;
	}

}

/* PC用指定 */
@media screen and (min-width: 960px) {
	/* 見出し */
	.title-lev1 { font-size: 16px; }

	/* 2列、3列表示画像 */
	.sec-col1-inner figure > img, .sec-col2-inner figure > img,
	.sec-col3-inner figure > img, .sec-col4-inner figure > img,
	.sec-col5-inner figure > img, .sec-col6-inner figure > img {
		max-width: 100%;
	}

	.sec-col2-block figure > img {
		max-width: 100%;
	}

}

/****************************** 下層ページ作成　2020.05追記 ******************************/

/*詳細ボタン*/


.s-btn {
    margin: 0 auto;
    text-align: center;
/*    border: solid 1px #333;*/
/*    border-radius: 50px;*/
/*    padding: 4px 5px 4px 5px;*/
    width: 35%;
    background-color:#fff;
}


.s-btn a {
    border-radius: 50px;
    border: solid 1px #333;
    padding: 4px 5px 4px 5px;
    color: #333;
}

.s-btn:hover {
/*    padding: 4px 5px 4px 5px;*/
    border-radius: 50px;
    background-color: #B9101C;
/*    background-color: #0065B2; */
    color:#fff;
}

.s-btn a:hover {
    border-radius: 50px;
    padding: 4px 5px 4px 5px;
    background-color: #B9101C;
/*    background-color: #0065B2; */
    color:#fff;
}

/*お客様情報　横並びボタン*/

.s-double-btn {
/*    margin-bottom: 20px;*/
    text-align: center;
    width: 42%;
    margin: 10px;
    float: left;
    background-color: #fff;
}

.s-double-btn a {
    border-radius: 50px;
    border: solid 1px #333;
    padding: 4px 5px 4px 5px;
    color: #333;
}

.s-double-btn:hover {
/*    padding: 4px 5px 4px 5px;*/
    border-radius: 50px;
    background-color: #B9101C;
    color:#fff;
}

.s-double-btn a:hover {
    border-radius: 50px;
    padding: 4px 5px 4px 5px;
    background-color: #B9101C;
    color:#fff;
}

/* TB、PC用指定 */
@media screen and (min-width: 768px) {
.s-double-btn {
/*    margin-bottom: 20px;*/
    text-align: center;
    width: 45%;
    margin: 10px;
    float: left;
    background-color: #fff;
}
}


/*お客様情報　解約　横並びボタン*/
.s-double-kbtn {
/*    margin-bottom: 20px;*/
    text-align: center;
    width: 42%;
    margin: 10px;
    float: left;
}

.s-double-kbtn a {
    border-radius: 50px;
    border: solid 1px #333;
    padding: 4px 5px 4px 5px;
    color: #333;
    background-color: #DDDDDD;
}

.s-double-kbtn:hover {
/*    padding: 4px 5px 4px 5px;*/
    border-radius: 50px;
    background-color: #666666;
    color:#fff;
}

.s-double-kbtn a:hover {
    border-radius: 50px;
    padding: 4px 5px 4px 5px;
    background-color: #666666;
    color:#fff;
}

/* TB、PC用指定 */
@media screen and (min-width: 768px) {
.s-double-kbtn {
    margin: 10px;
    text-align: center;
    width: 45%;
    float: left;
}
}



/*ポップアップ　解約アラート*/
.open {
	cursor:pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}

#pop-up {
	display: none; /*  label でコントロールするので input は非表示に */
}


.overlay {
	display: none; /* input にチェックが入るまでは非表示に */
}
/*
input[type=”checkbox”]:checked + #popup + .overlay{
*/
#pop-up:checked + .overlay {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
.window {
	width: 90vw;
	max-width: 380px;
	height: 240px;
	background-color: #ffffff;
	border-radius: 6px;
	display: block;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
        z-index: 999;
	boder:1px solid #f5f5f5;
	padding: 50px 30px 30px;
}

.text {
	font-size: 18px;
	margin: 0;
}
.close {
	cursor:pointer;
	position: absolute;
	top: 4px;
	right: 4px;
	font-size: 20px;
}

.doui-btn{
	color:#ffffff;
	background-color:#B9101C;
	padding:15px;
	border-radius:5px;
	width: 50%;
	text-align: center;
	margin: 0 auto;
	margin-top:10px;
}

/*必須ボタン　label*/

.label {
    padding: 0 .6em;
}

.label-danger {
    background-color: #d9534f;
}

.label-info {
    background-color: #5BC0DE;
}

.label {
    display: inline;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

/*お支払い前ボタン　label*/
.label-orange {
    background-color: #FF6D00;
}


/*ドロップダウンメニュー（select）*/

select {
    background-color: white;
    border: 1px solid #000000;
    border-radius: 4px;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 3.5em 0.5em 1em;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

select.minimal {
    font-size: 10px;
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 4em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

select.minimal:focus {
  background-image:
    linear-gradient(45deg, #333 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, #333 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 4em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  outline: 0;
}


select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}


/* TB、PC用指定 */
@media screen and (min-width: 768px) {

select.minimal {
    font-size: 12px;
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 3em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

select.minimal:focus {
  background-image:
    linear-gradient(45deg, #333 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, #333 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 3em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  outline: 0;
}

}