@charset "utf-8";
/* CSS Document */
@import url("/style/default.css");
@import url("/style/common_sf.css");
@import url("/style/top_sf.css");

/* H2 */

div.login{
	width:585px !important;
	height:45px;
	line-height:45px;
	background:white url(/img/login/h2_bg_login.gif) no-repeat top left;
	color:white;
	font-weight:bold;
	font-size:120%;
	text-indent:30px;
	margin-bottom:1.2em;
}
@media screen and (max-width: 700px) {
          div.login{
              width: 100% !important;
          }
      }
/*---------------------------*/
dl#breadcrumbs {
	/*width:580px;*/
	/*margin-left:220px;*/
	height:25px;
	clear:both;
}
dl#breadcrumbs dt { display:none; }
dl#breadcrumbs dd {
	font-size:80%;
	height:25px;
	line-height:25px;
}
dl#breadcrumbs dd{ float:left; }
dl#breadcrumbs dd.l2{ height:4em; }

dl#breadcrumbs dd.new {
	font-weight:bold;
	color:#FF0000;
	font-size:80%;
	height:25px;
	line-height:25px;
}
dl#breadcrumbs dd.new { float:right; }
dl#breadcrumbs dd.l2{ height:4em; }



dl#catmenu { margin-bottom:15px; }
dl#catmenu dt {
	width:180px;
	height:30px;
	background:#666666 url(/img/common/sidemenu_bg.gif) no-repeat top left;
	color:white;
	font-size:115%;
	font-weight:bold;
	line-height:30px;
	text-indent:20px;
}
dl#catmenu.login dt{
	background:#3A61AE url(/img/login/catmenu_login.gif) no-repeat top left !important;
}
dl#catmenu a {
	display:block;
	padding-left:30px;
	height:32px;
	line-height:32px;
}
dl#catmenu a:hover, dl#catmenu a:active { background-image:url(/img/common/submenu_list_bg2.gif); }
dl#catmenu a:link, dl#catmenu a:visited, dl#catmenu a.current:hover, dl#catmenu a.current:active { background:#F1EFEB url(/img/common/submenu_list_bg1.gif) no-repeat top left; }
dl#catmenu a.current {
	font-weight:bold;
	text-decoration:none !important;
	color:#ff6600;
}
dl#catmenu dd#logout{ text-align:center; margin:1em auto 0px auto; }
dl#catmenu dd#logout a{
	padding-left:0px;
	background:none !important;	
}

div#mainContentBody { margin-left:5px; }
div#mainContent ul, dl.marked { margin:30px 15px; }
div#mainContentBody ul li {
	list-style-type: disc;
	list-style-position: inside;
}
dl.marked dd {
	display:list-item;
	list-style-type: disc;
	list-style-position: inside;
}
dl.number dt { font-weight:bold; }
/* h2～ */
h1, h2, h4, dt{
    scroll-margin-top: 10em;
}
h2 {
	width:585px;
	height:107px;
}
h1, h4, h5, h2,.cf_sheading {
	margin-top:20px;
	margin-bottom:10px;
	font-weight:bold;
	/*width:580px;*/
}
h1 {
	height:30px;
	font-size:115%;
	line-height:30px;
	background:white url(/img/common/h3_bg.gif) no-repeat top left;
	text-indent:20px;
	margin-top:35px;
	padding-left: 9px;
}
h4, h5, h2,.cf_sheading {
	height:25px;
	line-height:25px;
	text-indent:35px;
	margin-top:35px;
	width: 100%;
}
h4, h2 {
	background:#3A61AE url(/img/common/h4_bg_2.gif) no-repeat top left;
	color:#FFFFFF;
}
h2 a{
    color: #fff;
}
h5,.cf_sheading {
	background:#FFFFFF url(/img/common/h5_bg.gif) no-repeat top left;
	color:#3A61AE;
	margin-bottom:5px;
}
.res-img{
    width: 100%;
    height: 100%;
}
div#mainContentBody p {
	margin-bottom:1em;
	margin-left:10px;
	line-height:140%;
	word-break: break-all;
}
div#mainContent p a, div#mainContent a {
    word-break: break-all;
}
div#mainContentBody strong {
	color:#FF6600;
	font-weight:bold;
}
/* table */
select{
    width:100%;
}
table {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	border-top:1px solid #666666;
	border-left:1px solid #666666;
	border-spacing:0;
	border-collapse:separate;
 *border-collapse:collapse; /* ie6,7 */
	border-spacing:0px;
}
th, td {
	padding:5px;
	border-right:solid 1px #666666;
	border-bottom:solid 1px #666666;
	font-size:85%;
}
td { background-color:white; }
tr.top th {
	background : #666666 url(/img/common/table_bg.gif) repeat-x;
	vertical-align:top !important;
	color:white;
	white-space: normal;
}
tr.top span { font-weight:bold; }
th {
	font-weight:normal;
	background-color:#C0D8E1;
	color:#333333;
	background-image:none;
	white-space: nowrap;
}
table#plans-table { margin-bottom:5px; }
table#plans-table th, table#plans-table td {
	text-align:center;
	vertical-align:middle;
	padding:5px;
}
table#plans-table td { width:120px; }


th.plans-table-row { width:100px !important; }
table.center th, table.center td { text-align:center; }
table.half td { width:50%; }
table.guide th { width:130px; }
table.guide dd { margin-bottom:1.5em; }
p.caption { font-size:85%; }



table#plans-table2 { width:240px; }
table#plans-table2 { margin-bottom:5px; }
table#plans-table2 th, table#plans-table2 td {
	text-align:center;
	vertical-align:middle;
	padding:5px;
}
table#plans-table2 td { width:120px; }

div.table-wrapper {
    width: 100%;
    overflow-x: auto; /* Enables horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */
}
table#plans-table3 { width:100%; }
table#plans-table3 { margin-bottom:5px; }
table#plans-table3 th, table#plans-table3 td {
	text-align:center;
	vertical-align:middle;
	padding:5px;
}
table#plans-table3 td { width:120px; }
table#plans-table3 td.special { 
						width:120px; 
						background-color:#FFFFCC;
}
table#plans-table3 td.special2 { 
						width:120px; 
						background-color:#FFCCCC;
}
table#plans-table3 td.discountrate { 
						width:120px; 
						background-color:#ffffff;
						color:#000000;
						font-size:70%;
						font-weight:bold;
}
table#plans-table3 td.discountrate2 { 
						width:120px; 
						height:2px;
						background-color:#CCCCCC;
						color:#000000;
						font-size:20%;
						font-weight:bold;
}					




table.plan-detail th { width:200px; }
th.price-other, td.price-other,th.checkpoint,td.checkpoint,tr.checkpoint th,tr.checkpoint td {
	background-color:#cccccc;
	color:#444444;
}
dd p {
	margin-top:5px;
	margin-bottom:0px !important;
}
dd ul { margin-top:0px !important;  margin-left:0px !important; }
dl.faq dt,dl.text dt{
	font-weight:bold;
	margin-top:20px;
	margin-bottom:5px;
	border-bottom:solid 1px #666666;
}
dl.faq dt a { text-decoration:none !important; }
dl.faq p {
	margin-left:0px !important;
	margin-bottom:1.5em !important;
}
dl.faq dl dt {
	border:none;
	color:#3A61AE;
}
dl#ppolicy ol { margin-top:1em; }
dd ol {
	margin-bottom:1.5em;
}
table.faq th { width:150px; }
div#viewing ul, div#viewing ul li { list-style-type:none !important; }
table.environment {width: 100%};
table.environment li { margin:0.5em 20px 1em 30px; }
table.environment img { vertical-align:middle; }
table caption {
	text-align:left;
	font-weight:bold;
	color:#3A61AE;
}
.code {
	font-size:90%;
	color:#3A7594;
}

dl.text{
	margin-left:10px;
}
dl.text dt,dl.faq dt{	margin-top:2em; color:#3A61AE; }
dl.text dd,dl.faq dd{ margin-left:20px; }
ul.csr,p.csr,p.command,ul.command,span.command,dd.command,ul.notice{
	padding:1em;
	margin-right:0px;
	border:solid 1px #4D6A37;
}
p.csr,p.command,span.command,dd.command,ul.notice{ font-size:80%; padding-left:2em; }
span.command{ margin:0em 0.2em; padding:0.2em; }


dl.dd-margin-bottom dd{ margin-bottom:1.5em; }
dl.dd-margin-bottom-s{ margin-bottom:0.5em; }
dl.dd-margin-none dd{ margin-left:0px; }
table.ssl-data{ width:530px !important; }
table.ssl-data dd{ margin-left:0px; margin-bottom:0.2em !important; }
table.ssl-data dt{ font-weight:bold; margin-top:0em; margin:0px !important; }
ul.csr,ul.csr li,ul.command,ul.command li,ul.notice li{ list-style-type:none !important; }
table.csr input{ width:240px; }


table.csr textarea,textarea.parse-csr{ width:300px; height:19em; }

dl.list-s span.num{ font-weight:bold; color:#3A61AE;}


/* list number */
ol.step,dl.step{ margin-top:15px; margin-bottom:2em;  padding-left: 5px !important; }
ol.step,ol.step li{ list-style-type:none !important; margin-left:0px; }
ol.step li{  border-bottom:dashed 1px #cccccc ; padding:0px 0px 10px 25px; background-position:3px left; background-repeat:no-repeat; margin-bottom:1em; }
dl.step dt{ border-top:dashed 1px #cccccc; padding:10px 0px 5px 25px; background-position:0px 12px; background-repeat:no-repeat; margin-top:1em; }
dl.step dd{ margin-left:25px; }
dl.step dt.top{ margin-top:0px; border-top:none !important; }
dl.list-s dt,dl.step td dt,td dt{ padding:0px !important; margin-top:1em; font-weight:normal; border:none !important; color:#333333 !important; }
dl.inner dt,dl.inner dd{ margin-left:0px !important; padding-left:0px !important; }
dl.inner dt{ color:#666666 !important; border-bottom:none !important; }
dl.step td dd{ margin-left:0px; padding-left:0px !important; }

ol ul li,dd ul li{ border:none !important; }
li.n1,dt.n1{ background-image:url(/img/common/number/n1.gif); }
li.n2,dt.n2{ background-image:url(/img/common/number/n2.gif); }
li.n3,dt.n3{ background-image:url(/img/common/number/n3.gif); }
li.n4,dt.n4{ background-image:url(/img/common/number/n4.gif); }
li.n5,dt.n5{ background-image:url(/img/common/number/n5.gif); }
li.n6,dt.n6{ background-image:url(/img/common/number/n6.gif); }
li.n7,dt.n7{ background-image:url(/img/common/number/n7.gif); }
li.n8,dt.n8{ background-image:url(/img/common/number/n8.gif); }
li.n9,dt.n9{ background-image:url(/img/common/number/n9.gif); }
li.n10,dt.n10{ background-image:url(/img/common/number/n10.gif); }
li.n11,dt.n11{ background-image:url(/img/common/number/n11.gif); }
li.n12,dt.n12{ background-image:url(/img/common/number/n12.gif); }
li.n13,dt.n13{ background-image:url(/img/common/number/n13.gif); }
li.n14,dt.n14{ background-image:url(/img/common/number/n14.gif); }
li.n15,dt.n15{ background-image:url(/img/common/number/n15.gif); }
li.n16,dt.n16{ background-image:url(/img/common/number/n16.gif); }
li.n17,dt.n17{ background-image:url(/img/common/number/n17.gif); }
li.n18,dt.n18{ background-image:url(/img/common/number/n18.gif); }
li.n19,dt.n19{ background-image:url(/img/common/number/n19.gif); }
li.n20,dt.n20{ background-image:url(/img/common/number/n20.gif); }
li.n21,dt.n21{ background-image:url(/img/common/number/n21.gif); }
li.n22,dt.n22{ background-image:url(/img/common/number/n22.gif); }
li.n23,dt.n23{ background-image:url(/img/common/number/n23.gif); }
li.n24,dt.n24{ background-image:url(/img/common/number/n24.gif); }
li.n25,dt.n25{ background-image:url(/img/common/number/n25.gif); }
li.n26,dt.n26{ background-image:url(/img/common/number/n26.gif); }
li.n27,dt.n27{ background-image:url(/img/common/number/n27.gif); }
li.n28,dt.n28{ background-image:url(/img/common/number/n28.gif); }
li.n29,dt.n29{ background-image:url(/img/common/number/n29.gif); }
li.n30,dt.n30{ background-image:url(/img/common/number/n30.gif); }

ol.step p,dl.step p{ margin-left:0px !important; }


table.contact input,table.contact textarea{ width:100%; }
input.url{ width:20em !important;}
input.url-s{ width:6em !important; }
table.contact textarea{ height:200px; }
table.contact input.button{ width:100px; }
input.radio{ width:2em !important;}
/*iframe{ width:500px; height:300px; }*/

dl.flow img{ vertical-align:middle !important; margin-left:1em; }
ul.flow-plans li{ float:left; margin-left:1em; }

th.regist-th{ width:10em; }

th.w12{ width:12em; }
th p{ margin-left:0px !important; }


table.inner{ width:545px; }
img.reissue{ width:459px; margin:1em auto 0px 20px; }
@media screen and (max-width: 700px) {
          img.reissue{
             width: 100%;
             height: 100%;
             margin:1em 0px 0px 0px;
          }
          
          table.inner{width: 100%}
          table.inner th{white-space: normal !important;}
      }

/* お問い合わせ------------------------------------------------------ */
/*フォームでの問い合わせ */
div#contact_form,div#contact_phone{
	width:270px;
	float:left;
}
div#contact_form h5,div#contact_phone h5,.cf_sheading{
	width:270px;
	margin-top:1.5em !important;
}
div#contact_phone{
	margin-left:20px;
}
div#contact_form p,div#contact_phone p{ margin-bottom:1em; }

/* 資料ダウンロード */
ul#pdf_image{ height:230px;}
ul#pdf_image li{ width:270px; height:200px; float:left; }
ul#pdf_image img{ border:solid 1px #cccccc; }

/* 申し込みガイド ---------------------------------------------------------*/
div.innertext{ visibility:hidden !important; }
div.point{
	background-color:white;
	background-position:top left;
	background-repeat:no-repeat;
	/*width:580px;*/
	width:100%;
}
/*CSR自動作成ボタン等 */
ul#buttons_csr li{ float:left; margin-right:2px !important;}
li#button_csr{ width:width:172px; }
li#button_parse_csr{ width:150px; }
li#button_match{ width:232px; }

/*初めての方*/
div#point_beginner{ height:270px;  background-image: url(/img/service/point/beginner_point.gif);   background-size: cover;
  
}
/*乗り換えの方*/
div#point_transfer{ height:284px; background-image: url(/img/service/point/norikae_point.gif); background-size: cover;
  } 
/*学校の方*/
div#point_education{ height:309px; background-image: url(/img/service/point/education_point.gif); background-size: cover;} 
ul#service_buttons li{
	float:left;
	margin-right:10px;
}
/*更新の方*/
div#point_renewal{ height:232px; background-image:url(/img/service/point/koushin_point.gif); background-size: cover;}
div#bonus_renewal{	width:580px; margin-top:1.5em;  padding-top:220px; background:white url(/img/service/point/kousin_bonus.gif) top left no-repeat; }
div#bonus_renewal table{ margin-bottom:1em; }

/* 複数件お申込の方 */
div#point_multiple{ height:315px; background-image:url(/img/service/multiple/multiple_point.gif); }

/*代理取得の方 */
div#point_partners{ padding-top:220px; background-image:url(/img/service/partners/partners_point.gif) ; }
div#point_partners p{ margin-top:1em; }

/* CSRエラー */
div#csr_error_graph{ margin-bottom:1em; }
div#csr_error_graph img{ width:215px; float:left;}
div#csr_error_text{
	margin-top:2em;
	margin-left:10px;
	margin-bottom:1em;
	width:340px;
	float:left;
}

/* SSL確認方法 */
dl#ssl_check{ /*width:580px;*/ }
dl#ssl_check dt{ margin-top:3em; }
dl#ssl_check dd{ text-align:center; margin-bottom:10px; }

/* 各種カードイメージ */
div.payment{ margin-bottom:1em; }
.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}
/* 利用規約埋め込み */
body#terms_if{ margin:0px; padding:10px; }
body#terms_if h1{ margin-top:0px; text-indent:0px; }
body#terms_if,body#terms_if *{ text-align:left; background-image:none !important; background-color:white; }
body#terms_if div#copy{ color:#333333; }
pre{white-space: pre-wrap; word-wrap: break-word;}
#loader{
    font-weight: bold; color: #007BFF; display:flex; align-items:center; justify-content: center; width: 100%; height: 100%; background: rgba(0,0,0,0.25);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999999;
}
#loader .loader-icon {
    animation: spin 1s linear infinite;
    font-size: 2rem;
    margin-right: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}