@charset "utf-8";
@import url("/info/common/css/header_2024.css");

#new {max-width:600px; padding: 86px 15px 0; }
#new h2{
    margin: 0 0 20px; padding: 7px 10px; background: #004885;
    color: #fff; font-size: 20px; font-weight: 600;
}

@media screen and (max-width:699px){
    #new { padding: 60px 15px 0;}
}

#user-info {max-width:780px;}
#user-info > p {
    margin:0 0 15px; padding: 5px;
    border-bottom: double #004885 5px; border-left: solid #004885 8px;
    color: #004885; font-size: 17px; font-weight: 600;
}

#form .dis-tbl_tab,
#form .dis-tblcl01,
#form .dis-tblcl02 {display: block;}
	
#form .dis-tblcl01 {padding: 0 0 5px; font-size: 14px; font-weight: 600; }

#form .dis-tblcl01 .reqmk {
    display: inline-block; margin: 0 0 0 10px; padding: 2px;
    border: #C74A4C solid 1px; background: #ffffff;
    color: #C74A4C; font-weight: bold;}

#form .dis-tblcl02 {font-size: 12px;}
#form .dis-tblcl02 .reqmk{background-color: rgba(255, 221, 221, 0.7);}


#form input[type="text"],
#form input[type="email"],
#form input[type="password"],
#form input[type="tel"] {
    display: inline-block; box-sizing: border-box; height: 34px; padding: 6px 12px;
    border: solid #ccc 1px; border-radius: 4px; background: #fff;
    color: #555; font-size: 14px; vertical-align: middle;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}


#form input[type="text"],
#form input[type="email"],
#form input[type="password"],
#form input[type="tel"] {font-size: 16px;}	
	


#form input::placeholder {color:#acacac; font-size: 14px;}
#form input::-webkit-input-placeholder {color:#acacac; font-size: 14px;}
#form input:-ms-input-placeholder {color:#acacac; font-size: 14px;}
#form input::-ms-input-placeholder {color:#acacac; font-size: 14px;}
	


#form input[type="email"],
#form input[type="password"] {width: 80%;}

#form input[name="frmNAME1"],
#form input[name="frmNAME2"],
#form input[name="frmNAMEK1"],
#form input[name="frmNAMEK2"] {width: 180px; margin: 0 20px 0 5px;}


#form input[type="tel"] {width: 80px;}

#form select {padding: 2px; font-size: 16px;}


input[name="frmADD1"],
input[name="frmADD2"] {width: 80%;}



#form label,
#form input[type="radio"],
#form input[type="checkbox"] {cursor: pointer;}

#form input[name="regist"] {font-size:16px; padding:10px; font-weight:600; cursor: pointer;}
#form input[name="regist"]:hover {opacity: 0.7;}


#form table {font-size: 12px;}

#privacy {padding: 10px 0;}
#privacy .ttl1 {
    width: 99%;
    background-color: #004885;
    box-sizing: border-box;
    color: #fff;
    font-size: 1.3em;
    font-weight: 600;
    padding: 7px 7px 4px 7px;
    margin: 0 auto 20px auto;
}

#privacy .ttl3 {
    border-bottom: double 5px #004885;
    border-left: solid 8px #004885;
    color: #004885;
    font-size: 1.1em;
    font-weight: 600;
    padding: 5px;
    margin: 0 auto 15px auto;
	}



#regconfirm {max-width:940px; padding: 0 10px; }





#regconfirm {font-size: 14px;}

#regconfirm h2 {
    margin: 0 0 30px; padding: 5px;
    border-bottom: double #004885 5px;
    border-left: solid #004885 8px;
    color: #004885; font-size: 20px; font-weight: 600;
}

#tel input[type="submit"],
#tel input[type="button"],
#password input[type="submit"],
#data-check input[type="button"] {font-size:16px; padding:10px; font-weight:600; cursor: pointer;}

#tel input[type="submit"]:hover,
#tel input[type="button"]:hover,
#password input[type="submit"]:hover,
#data-check input[type="button"]:hover {opacity: 0.7;}



#tel {width: 600px; margin: 50px auto;}
#tel .box {padding: 15px; border: double #004885 2px; color:#004885; font-size:20px; font-weight: 600; line-height:1.5em; text-align: center;}

#tel p.square {position: relative; padding: 0 0 0 18px;}
#tel p.square:before {content:'｢｣'; position: absolute; top: 0; left: 0;}

#tel hr {border: dashed #999; border-width: 1px 0 0;}

#tel p.asterisk {position: relative; padding: 0 0 0 18px; color: #c00; font-weight: 600;}
#tel p.asterisk:before {content:'｢ｨ'; position: absolute; top: 0; left: 0;}

#tel .dis-tbl_tab {width: 100%; margin:30px 0;}
#tel .dis-tblcl {padding:0 10px; font-weight: 600;}



#password {width: 600px; margin: 50px auto;}
#password .box {padding: 15px; border: double #004885 2px; color:#004885; font-size:20px; font-weight: 600; line-height:1.5em; text-align: center;}

#password p.square {position: relative; padding: 0 0 0 18px;}
#password p.square:before {content:'｢｣'; position: absolute; top: 0; left: 0;}

#password .dis-tbl_tab {width: 100%; margin: 0 0 15px;}
#password .dis-tblcl {padding:0 10px; font-weight: 600;}




#data-check .dis-tbl_tab {display: block; margin: 0 0 15px; padding: 0;}
#data-check .dis-tbl_tab > p {vertical-align: top;}
#data-check .dis-tblcl01 {display: block; padding:0;}
#data-check .dis-tblcl02 {display: block;  padding:5px 0 10px; border-bottom: solid #ccc 1px;}





.notes{
    position: relative; 
    box-sizing: border-box; width: 100%; max-width: 490px; padding: 7px;
    border: solid 3px #e00; 
    color: #e00; font-weight: 600;}

.large-txt{font-size: 1.4em; padding: 0 3px;}



/* ツールチップ */

/* カーソルを重ねる要素 */
.tooltip {
  position: relative; /* ツールチップの位置の基準に */
  cursor: pointer; /* カーソルを当てたときにポインターに */
}

/* ツールチップのテキスト */
.tooltip-text {
  opacity: 0; /* はじめは隠しておく */
  visibility: hidden; /* はじめは隠しておく */
  position: absolute; /* 絶対配置 */
  left: 50%; /* 親に対して中央配置 */
  transform: translateX(-50%); /* 親に対して中央配置 */
  bottom: -50px; /* 親要素下からの位置 */
  display: none;
  box-sizing: border-box;
  width: 300px;
  padding: 5px; /* 余白 */
  font-size: 0.8rem; /* フォントサイズ */
  font-weight: 400;
  line-height: 2em; /* 行間 */
  background: #333; /* 背景色 */
  color: #fff; /* 文字色 */
  border-radius: 3px; /* 角丸 */
  transition: 0.3s ease-in; /* アニメーション */
}

/* ホバー時にツールチップの非表示を解除 */
.tooltip:hover .tooltip-text {
  display: inline-block;
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width:399px){
.tooltip-text {
  transform: translateX(-67.5%); /* 親に対して中央配置 */
  }

}


/* 吹き出し形にする 
.tooltip-text:before {
	content: '';
	position: absolute;
	top: -13px;
	left: 50%;
	margin-left: -7px;
	border: 7px solid transparent;
	border-bottom: 7px solid #333;
}
*/

/* ページトップへ */
#top-button {
    display: block; position: fixed; right: 0px; bottom: 10px; z-index: 1; 
    padding: 15px 10px; 
    border-radius: 8px 0 0 8px; background: #2e3071; 
    color: #FFF; font-size: 12px; font-weight: bold; line-height: 1.3em; text-align: center;}

#top-button span {
    display: inline-block; position: relative;
    padding: 0 0 0 30px;}

#top-button span::before {
    width: 0; height: 0; margin: -5px 0 0 5px;
    border-style: solid; border-width: 0 6px 9px 6px;
    border-color: transparent transparent #fff transparent;}

#top-button span:before, #top-button span:after {
    content: '';
    position: absolute; top: 50%; left: 0px;}

#top-button span:after {
    width: 20px; height: 20px; margin: -11px 0 0;
    border: solid #fff 1px; border-radius: 10px;}

@media screen and (max-width:699px){
    #top-button { bottom: 60px;}
}

/* LastUp2024.09.06_kimata */