@charset “UTF-8”;

/*
#0ADCDC→#84BB1B
#057979→#425D0D
#08AAAA→1F2C06

鮮やかな緑
6DD268-22661E

*/

.title_NAVIGATOR {
	background-image: url(../images/title_icon_passport.png)
}
.menu_box_NAVIGATOR {
	background-image: url(../images/icon_passport.svg)
}
.title_send {
	background-image: url(../images/title_icon_send.png)
}
.menu_box_send {
	background-image: url(../images/icon_send.png)
}
.menu_box_payment {
	padding-top: 60px;
}
.title_exit {
	background-image: url(../images/title_icon_exit.png)
}
.menu_box_exit {
	background-image: url(../images/icon_exit.svg)
}
.menu_box_ope {
	background-image: url(../images/icon_ope.png)
}
.menu_box_torch {
	background-image: url(../images/icon_torch.svg)
}
.title_diamond {
	background-image: url(../images/title_icon_diamond.png)
}
.menu_box_diamond {
	padding-top:70px;
	background-image: url(../images/icon_diamond.svg)
}
.title_graph {
	background-image: url(../images/title_icon_graph.png)
}
.menu_box_graph {
	padding-top:70px;
	background-image: url(../images/icon_graph.svg)
}
.title_seminar {
	background-image: url(../images/title_icon_seminar.png)
}
.menu_box_seminar {
	padding-top:70px;
	background-image: url(../images/icon_seminar.svg)
}
.title_ranking {
	background-image: url(../images/title_icon_ranking.png)
}
.menu_box_ranking {
	background-image: url(../images/icon_cup.png)
}
.title_earth {
	background-image: url(../images/title_icon_earth.png)
}
.menu_box_earth {
	background-image: url(../images/icon_earth.png)
}
.title_com {
	background-image: url(../images/title_icon_com.png)
}
.menu_box_com {
	background-image: url(../images/icon_com.svg)
}
.title_qr {
	background-image: url(../images/title_icon_qr.png)
}
.menu_box_qr {
	padding-top:70px;
	background-image: url(../images/icon_qr.png)
}
.title_trans {
	background-image: url(../images/title_icon_trans.png)
}
.menu_box_trans {
	background-image: url(../images/icon_trans.png)
}
.title_ai {
	background-image: url(../images/title_icon_ai.png)
}
.menu_box_ai {
	background-image: url(../images/icon_ai.png)
}

.menu_wrap{
	position: relative;
}

.menu_middle{
	padding-top: 70px;
}
.menu_upper{
	padding-top: 60px;
}
.mbx{
	background-size: 35px;
}
.lbx{
	background-size: 35px;
}

.login_logo img{
	max-width: 100%;
}
.userpic{
	float: right;
	text-align: right;
}
.userpic img{
	max-height: 250px;
}
@media only screen and (max-width: 799px){
	.userpic img{
		max-height: 100px;
	}
}
@media only screen and (max-width: 350px){
	.userpic img{
		max-height: 40px;
	}
}
.right_info{
	position: absolute;
	right: 0px;
	top: 50px;
	z-index: 2;
}

.redbox{
	border: 2px solid #c00;
	padding :1px 3px;
	color: #c00;
	font-weight: bold;
}
.entry tr th.entry_nini {
	position: relative;
	padding-right: 70px
}

.entry tr th.entry_nini:after {
	display: block;
	position: absolute;
	top: 17px;
	right: 10px;
	padding: 3px 7px;
	background-color: #888;
	color: #fff;
	font-size: 10px;
	content: "任意"
}

.nmtitle{
	margin-left: 15px;
}
.header_logo_right{
	padding: 7px 15px 0 0;
}
@media only screen and (max-width: 480px){
	.header_wrap .nmtitle {
		margin-left: 15px;
		font-size: 16px;
		background-size: 36px;
		padding-left: 45px;
	}
}
/*↓AI*/
#copymsg{
	display: inline-block;
	background: #fff;
	color: #00c;
	padding: 15px;
	border-radius: 0.5em;
	border: 1px solid #000;
	box-shadow: 0 0 10px #000;
}
#copywrap{
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
.box_menu{
	float: right;
}
#wait{
	display: none;
	text-align: center;
}
#voice{
	display: none;
}
.half_btn{
	display: inline-block;
	margin: auto;
	max-width: 49%;
}
.toggle_contents{
}
.toggle_title {
	position: relative;
	cursor: pointer;
	padding-left: 30px;
}
.toggle_btn {
	position: absolute;
	top: 40%;
	left: 0;
	transform: translateY(-50%);
	background: #0052a4;
	display: block;
	width: 20px;
	height: 20px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 50%;
}
.toggle_btn:before, .toggle_btn:after {
	display: block;
	content: '';
	background-color: #fff;
	position: absolute;
	width: 10px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.toggle_btn:before {
	width: 2px;
	height: 10px;
}
.toggle_title.selected .toggle_btn:before {
	content: normal;
}
.toggle_contents .closed {
	display: none;
}
/*↑AI*/

@media screen and (max-width: 640px) and (hover: none) and (pointer: coarse) {
	.right_info{
		display: block;
	}
}
.earth_info{
	position: absolute;
	color:#fff;
	background: rgba( 0,0,0,0.4 );
	border-radius: 5px;
	padding: 10px;
	border: 2px double #666;
	z-index: 2;
	text-align: center;
	box-shadow: 2px 2px 10px #000;
}
@media only screen and (max-width: 480px){
	.right_info{
		top: 25px;
	}
	.earth_info{
		padding: 5px;
	}
}
.earth_head{
	font-size: 95%;
	margin-bottom: 10px;
}
.earth_cont{
	margin-bottom: 5px;
}
.earth_btn{
	border: solid 2px #8c8;
	color: darkgreen;
	margin-bottom: 5px;
}
.earth_btn:hover:before, .earth_btn:focus:before, .earth_btn:active:before {
	border: #8c8 solid 3px;
}
.menu .return_staffmenu{
	right: 0;
}

iframe{
	max-width: 100%;
}
.small_btn{
	margin: 0;
	padding: 5px 0;
	width: auto;
	min-width: 90px;
}
.admin_box{
	opacity: 0.5;
}
/* ↓pm-indicator */
.pm-indicator {
	margin:10px 0;
	padding:1.5em 1em;
	color:#2c3e50;
	font-size:12px;
	text-align:center;
	border:1px solid #ccc;
	border-radius:2px;
	background:#e4e4e4;
	text-shadow:1px 1px 0 rgba(255,255,255,.8);
	-webkit-transition:all .2s ease-in-out;
					transition:all .2s ease-in-out;
}

.pm-indicator.very-weak,
.pm-indicator.not-match {
	border-color:#be1d30;
	background-color:#ffc3cf;
}

.pm-indicator.weak {
	border-color:#ff787d;
	background-color:#ffe6e5;
}

.pm-indicator.strong {
	border-color:#78bc42;
	background-color:#bceea6;
}

.pm-indicator.very-strong {
	border-color:#4f85a7;
	background-color:#68c6d7;
}
/* ↑pm-indicator */
.chart_wrap{
	position: relative;
	width:100%;
	height: 350px;
	margin: 0 auto;
}
#card-errors{
	color: #c00;
}

.form_button{
	width: auto;
}

.icon_houjin{
	color: #84BB1B;
	font-size: 70%;
	border: 2px solid #6DD268;
	padding: 1px 2px;
	font-weight: bold;
}
.icon_topinfo{
	vertical-align: middle;
}
.sub_info{
	text-align: center;
}
table.profiles td img{
	max-width: 100%;
}

@media only screen and (max-width: 480px){
	.sub_info{
		text-align: left;
	}
	.chart_wrap{
		height: 250px;
	}

}
.entry_btn_sub {
	background: #fff;
	border: 3px solid #84BB1B;
	color: #425D0D;
	cursor: pointer;
	transition: all, .3s
}
.entry_btn_sub:hover, .entry_btn_sub:focus {
	background: #84BB1B;
	color: #fff;
}
.entry_btn_google {
	background: #3360CB;
	border: 3px solid #397FEB;
	color: #fff;
	cursor: pointer;
	transition: all, .3s
}
.entry_btn_google:hover, .entry_btn_google:focus{
	background: #397FEB;
	color: #fff;
}

table.table th{
	text-align: left;
	padding-right: 20px;
}

.fright{
	float: right;
}

.entry tr th.entry_nini {
	position: relative;
	padding-right: 70px
}

.entry tr th.entry_nini:after {
	display: block;
	position: absolute;
	top: 17px;
	right: 10px;
	padding: 3px 7px;
	background-color: #888;
	color: #fff;
	font-size: 10px;
	content: "任意"
}

.half_btn{
		display: inline-block;
		width: 40%;
		margin: 10px;
		padding: 20px 0;
		border: none;
		border-radius: 5px;
		color: #fff;
		font-size: 15px;
		text-align: center;
		text-decoration: none;
}

/* 操作できないラジオ／チェックを見た目で伝える
	 ネイティブの input は display:none で隠し、可視部分は label の擬似要素で描いているため、
	 disabled を付けても既定では有効なものと全く同じ見た目（枠色・背景・cursor:pointer）になる。
	 見た目を変えないと、利用者はタップしても何も起きない理由が分からない。 */
.form_type_box input[type=radio]:disabled + .radio,
.form_type_box input[type=checkbox]:disabled + .checkbox {
	color: #444444;          /* 白地で 9.73:1（§18.6 の本文・ラベル基準） */
	cursor: not-allowed;
}
.form_type_box input[type=radio]:disabled + .radio:after,
.form_type_box input[type=checkbox]:disabled + .checkbox:after {
	border-color: #b9b9bd;
	background-color: #e4e4e6;
}
/* 選択済みのまま操作できない状態（現在の契約内容の表示）。赤のままだと操作可能に見えるため彩度を落とす */
.form_type_box input[type=radio]:disabled:checked + .radio:after,
.form_type_box input[type=checkbox]:disabled:checked + .checkbox:after {
	border-color: #9b7676;
	background-color: #9b7676;
}
/* 変更できない旨の案内文（font-size は下限14px・§18.1） */
.lockednote {
	margin: 6px 0 0 0;
	color: #444444;
	font-size: 14px;
	line-height: 1.7;
}
/* リンク色は指定しない＝サイト共通の a の色をそのまま使う（独自色を作らない） */

/* 狭い画面・拡大表示では見出しセルも折り返せるようにする
	 .entry tr th の white-space:nowrap は横並びレイアウト時に見出しを1行に保つ指定。
	 ただし 480px 以下では .entry が縦積み（display:block）になり1行に保つ意味が無く、
	 長い見出しが折り返せず画面を突き破る。
	 縦積みになる幅でだけ折り返しを許可する（横並び時の見た目は変えない）。 */
@media only screen and (max-width: 480px) {
	.entry tr th {
		white-space: normal;
	}
}

/* em指定の固定幅入力欄が、拡大表示や狭い画面で親を超えないようにする */
input.udate,
input.ltext,
input.utext,
input.utext2,
input.uzip {
	max-width: 100%;
}

/* 画像が親を超えないようにする
	 width を指定した画像は、拡大表示や狭い画面で親の幅を超えてはみ出す。
	 width 指定は見た目を保つため残し、上限だけ足す。 */
img {
	max-width: 100%;
	height: auto;
}

/* 長い連続文字（メールアドレス・URL・ID等）がセルからはみ出さないようにする
	 分割点の無い長い連続文字は、セルの幅を超えて表を押し広げる。
	 日本語の通常文には影響しない（分割点が無い長い連続文字だけが対象）。 */
.entry tr th,
.entry tr td,
.list tr th,
.list tr td {
	overflow-wrap: break-word;
}

/* 中央寄せで2行になりうる文言は、意味のまとまりを <span class="wb"> で囲み、まとまりの切れ目でだけ改行させる */
.wb {
	display: inline-block;
}