@charset "utf-8";
html,body{ width: 100%; height: 100%; margin: 0; padding: 0; font-size: 1em; line-height: 1.8em; color: #333;}

em { font-style:normal;} 
li {list-style: none;}
a{font-size: 1em; font-weight: normal; font-weight: bold; color: #54822B;}

/**************  マニュアルとFAQ  ***************/
#float1 > a { width: 80px; height: 100px; bottom: 175px; right: 0px; position: fixed; z-index: 20; background: url(../img_rfb1/float_manual_g.png) no-repeat 0 0; text-indent: -9999px; transition-duration: 2s; background-size: 92%;}
#float2 > a { width: 80px; height: 100px; bottom: 70px; right: 0px; position: fixed; z-index: 20; background: url(../img_rfb1/float_faq_g.png) no-repeat 0 0; text-indent: -9999px; transition-duration: 2s;  background-size: 92%;}
#float3 > a { width: 80px; height: 100px; bottom: 490px; right: 0px; position: fixed; z-index: 20; background: url(../img_rfb1/float_login.png) no-repeat 0 0; text-indent: -9999px; transition-duration: 2s;  background-size: 92%;}
#float4 > a { width: 80px; height: 100px; bottom: 385px; right: 0px; position: fixed; z-index: 20; background: url(../img_rfb1/float_error_g.png) no-repeat 0 0; text-indent: -9999px; transition-duration: 2s;  background-size: 92%;}
#float5 > a { width: 80px; height: 100px; bottom: 280px; right: 0px; position: fixed; z-index: 20; background: url(../img_rfb1/float_form_g.png) no-repeat 0 0; text-indent: -9999px; transition-duration: 2s;  background-size: 92%;}

#float1 a:hover{opacity: 0.7;} 
#float2 a:hover{opacity: 0.7;} 
#float3 a:hover{opacity: 0.7;} 
#float4 a:hover{opacity: 0.7;} 
#float5 a:hover{opacity: 0.7;}

/********************************************
travelRFB/error 共通
*********************************************/
.red{color: #bf0000;}
.red-b{color: #bf0000; font-weight: bold;}
.flex {display:flex; justify-content: space-around; width: auto; margin: 0 auto; padding: 0; align-items: center;}
#header{ height: 42px; padding-: 0; background: url("../img_rfb1/rgb_one-line.png")no-repeat; background-position:  left 2px; margin: 0; align-items: center; display: flex;}
.toptitle{ align-items: center; margin: 0 auto; padding: 0; background-color: #FFF;}
.mainnav{width: 100%; background-color: #454545; margin: 0 auto; padding: 0; text-align: center;}
.mainnav .navcase{max-width: 1200px; width: 80%; min-width: 960px; margin: 0 auto; text-align: center; display: flex; align-items: center;}

/**************  dropdown  ***************/
.dropdown{ height: 42px; position: relative; display: inline-block; justify-content: space-around; color: #FFF; border-left : 1px solid #FFF; opacity: 1; align-items: center;}
.dropdown:hover{ background-color: #E2EED6;}
.dropdown img{ margin-left: 30px; padding-top: 0;}
.dropdown-button{ width: 300px; height: 39px; border: none; cursor: pointer; color: #FFF; font-size: 1em; letter-spacing: 1px; background-color: #454545; margin: 0 auto; font-weight: bold; align-items: center; text-align: center; text-decoration: none; display: inline-block; border-bottom: 2px solid #454545; border-top: 2px solid #454545;}
.dropdown-button::after{ content: url("../img_rfb1/navarrow_d.png"); display: inline-block; /*  width と height を適用するために必要 */ width: 10px;          /* 画像の幅を指定 */ height: 10px; margin-left: 10px;}
.dropdown-button:hover{ background-color: #E2EED6; color: #54822B; border-bottom: 2px solid #54822B; border-top: 2px solid #54822B; height: 42px;}
.dropdown-button:hover::after{ content: url("../img_rfb1/navarrow_hover.png"); display: inline-block; /*  width と height を適用するために必要 */ width: 10px;   /* 画像の幅を指定 */ height: 10px; margin-left: 10px;}
.dropdown.clicked .dropdown-button{ background-color: #E2EED6; color: #54822B; border-bottom: 2px solid #FFF; border-top: 2px solid #54822B;}
.dropdown.clicked .dropdown-button::after{ content: url("../img_rfb1/navarrow_u.png"); display: inline-block; /*  width と height を適用するために必要 */ width: 10px;/* 画像の幅を指定 */  height: 10px; margin-left: 10px;}
.dropdown-button a{ display: block; margin-top: auto; text-decoration: none;}
.dropdown-content{ width: 300px; display: none; position: absolute; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; top: 43px; left: 0;}
.dropdown-content a{ color: #333; padding: 15px 20px; text-decoration: none; display: block; font-weight: normal; font-size: 0.95em; text-align: left; letter-spacing: 0.4px; border-bottom: 2px solid #E2EED6; line-height: 1.5em;}
.dropdown-content a:hover{ background-color: #ddd; text-decoration: none;}
.dropdown-button_error{ width: 300px; height: 39px; border: none; cursor: pointer; color: #FFF; font-size: 1em; letter-spacing: 1px; background-color: #454545; margin: 0 auto; font-weight: bold; align-items: center; text-align: center; text-decoration: none; display: inline-block; border-bottom: 2px solid #454545; border-top: 2px solid #454545; position: relative;}
.dropdown-button_error::before{ content: url("../img_rfb1/icon_error.png"); display: inline-block; /*  width と height を適用するために必要 */ width: 10px;          /* 画像の幅を指定 */ height: 10px; position: absolute; top: 6px; left: 6px;}
.dropdown-button_error::after{ content: url("../img_rfb1/icon_newwindow.png"); display: inline-block; /*  width と height を適用するために必要 */ width: 10px;          /* 画像の幅を指定 */ height: 10px; margin-left: 5px; position: absolute; top: 8px;}
.dropdown-button_error:hover{background-color: #EAEEF1; color: #0071BC; border-bottom: 2px solid #0071BC; border-top: 2px solid #0071BC; height: 42px;}
.dropdown-button_error:hover::before{ content: url("../img_rfb1/icon_error_hover.png"); }
.dropdown-button_error:hover::after{ content: url("../img_rfb1/icon_newwindow_hover.png"); display: inline-block; /*  width と height を適用するために必要 */ width: 10px; /* 画像の幅を指定 */height: 10px; margin-left:  8px; position: absolute; top: 8px;}
.show {display:block;}
.dropdown.clicked .dropdown-content{ display: block; /* clickedクラスがある場合は常に表示 */}

#copyright { background-color: #333; height: 20px; font-size: 11px; color: #FFF; text-align: center; clear: both; margin: 0; padding-top: 8px;}

/**************  gototop  ***************/
#gototop { display: block; position: fixed; width: 25px; height: 23px; bottom: 15px; right: 18px;  padding: 15px 10px 5px; border-radius: 50px; background-color: #333; font-weight: bold; text-decoration: none; text-align: center; color: #FFF; font-size: 0.8em; line-height: 1.2em; transition-duration: 2s; border:1px solid #FFF;}
#gototop:hover { opacity: 0.7;}


/********************************************
travelRFB
*********************************************/

/**************  上部赤枠  ***************/
.topcase{
	max-width: 1900px;
	width: 100%;
	min-width: 1260px;
	background-color: #f1f7eb;
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
	border-bottom: 2px solid #f2f2f2;
}

.caution{
	width: 95%;
	max-width: 1160px;
	display: block;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
	margin: 0 auto;
	padding: 10px 0;
}

.caution p{
	margin: 10px auto 20px;
	font-size: 1.5em;
	line-height: 1.5em;
	letter-spacing: .15em;
}
.caution #login_btn{
	box-shadow: 4px 3px 3px 1px #c6cbc1;
	width: 62%;
	height: 62px;
	border-radius: 15px;
	background-color: #bc0000;
	border: 3px solid #900000;
	margin: 0 auto 15px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.caution #login_btn:hover{
	box-shadow: 1px 1px 1px 0px #c6cbc1;
	border: 3px solid #7A0000;
}

.caution #login_btn a{
	width: 690px;
	height: 58px;
	margin: auto;
}

.caution .linktext{
	margin: 1% auto;
	color: #333;
	font-weight: normal;
	font-size: 1.1em;
	letter-spacing: 1px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 50px;
	padding-bottom: -1px;
	padding: 0 20px;
}

.caution .linktext .errorpage{
	color: #0071BC; 
	text-decoration: underline;
}

.caution .linktext .errorpage:hover{
	color: #0050bc; 
	text-decoration: underline;
}

.caution .linktext p{
	font-size: .95em;
	letter-spacing: 1px;
	height: 30px;
	padding: 2px 15px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	border: 2px solid #bc0000;
	background-color: #f2e2e2;
	border-radius: 5px;
	box-shadow: 2px 2px 1px 1px #c6cbc1;
	margin: 0 0 1px;
}

.caution .linktext p:hover{
	background-color: #efd0d0;
	border: 2px solid #900000;
	box-shadow: 0 0 0 0;
}

.caution .linktext p a{
	font-weight: bold;
	color: #bc0000;
}

.caution .linktext p a:hover{
	text-decoration: none;
	color: #AC0000;
}

#nologin .caution{
	min-width: 1100px;
	width: 97%;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: -15px auto 0;
}

#nologin .caution p{
	font-size: 1.5em;
	line-height: 1.5em;
	font-weight: bold;
	text-align: center;
	color: #333;
	white-space: nowrap;
	margin: 0;
}

#nologin .caution span{
	color: #bc0000;
}

#check{
	width: 92%;
	margin: 2% auto;
	text-align: center;
	box-sizing: border-box;
	letter-spacing: .1em;
	}

#check .title{
	font-size: 1.6em;
	font-weight: bold;
	text-align: center;
	color: #333;
	margin: 0 auto 15px;
	letter-spacing: .1em;
	background: url("../img_rfb1/icon_i.png")no-repeat;
	height: 40px;
	width: 610px;
	padding-left: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
}

#check .topframe{
	border: 3px solid #666;
	padding: 1.5% 0;
	margin: 1% auto 0;
	font-size: 1.2em;
	line-height: 1.6em;
}

#check .topframe a{
	background-color: #F1F7EB;
	text-decoration: underline;
}

#check .topframe a:hover{
	background-color: #f2f2f2;
	color: #000;
}

#check .flex{
	width: 100%;
	margin: 0;
	padding: 0;
	justify-content: space-between;
	display: flex;
	align-items: baseline;
}


#check .leftframe{
	width:  37%;
	min-width: 400px;
	margin-right: 20px;
}

#check .framebox1{
	width: 100%;
	height: 140px;
	border: 3px solid #54822B;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: #FFF;
}

.framebox1 .text1{
	font-weight: bold;
	font-size: 1.5em;
}

.framebox1 .text2{
	font-weight: normal;
	font-size: 1.15em;
	line-height: 1.6em;
	margin-top: 15px;
}

.framebox1 .text2 span{
	font-weight: bold;
	color: #BC0000;
}

.framebox1 .text2 a{
	background-color: #F1F7EB;
	text-decoration: underline;
}

.framebox1 .text2 a:hover{
	color: #000;
	background-color: #f2f2f2;
}



#check .rightframe{
	width:  60%;
	min-width: 600px;
	margin-left: 20px;
	display: block;
}

.rightcase{
	width: 48%;
}

.rightcase .incase{
	width: 100%;
	background-color: #7F7F7F;
	height: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.incase .text1{
	font-size: 1.3em;
	font-weight: bold;
	color: #fff;
	line-height: 1.5em;
}

 .rightcase .btncase{
	width: 100%;
	border: 3px solid #bc0000;
	background-color: #FFF;
	height: 170px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 10px; 
}

.btncase .text1{
	font-size: 1em;
	font-weight: normal;
	color: #333;
	line-height: 1.4em;
}


.checkbtn{
	width: 100%;
	height: 50px;
	font-size: 1.2em;
	font-weight: bold;
	border: 2px solid #666;
	box-shadow: 2px 2px 2px 2px #ddd;
	border-radius: 10px;
	margin: 4% auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #F1F7EB;
}

.checkbtn:hover{
	border: 2px solid #54822B;
	box-shadow: 1px 1px 1px 1px #f2f2f2;
	cursor: pointer;
	background-color: #E9F3E0;
}

.checkbtn a{
	width: 95%;
	display: block;
	text-decoration: none;
	color: #333;
	padding: 18px 0;
}

.checkbtn a:hover{
	text-decoration: none;
	color: #54822B;
}


.checkbtn_flow{
	justify-content: center;
	align-items: center;
	background-color: #f2f2f2;
	gap: 2px;
}

.checkbtn_flow:hover{
	background-color: #D5D4D4;
	border-color: #333;
}

.checkbtn_flow a:hover{
	color: #000;
}

.checkbtn_form{
	width: 260px;
	justify-content: center;
	align-items: center;
	background-color: #f2e2e2;
	gap: 2px;
	padding-left: 10px;
}

.checkbtn_form a{
	width: 100%;
	color: #bc0000;
}

.checkbtn_form:hover{
	background-color: #efd0d0;
	border: 2px solid #900000;
}


.checkbtn_form a:hover{
	text-decoration: none;
	color: #AC0000;
}


.framebox1 .checkbtn {
	width: 360px;
}

.checkarrow{
	margin: 15px auto 10px;
}

.login_new{
	width: 1200px;
	height: 210px;
	position: relative;
	display: block;
	margin: 0 45px;
	background: url("../img_rfb1/loginimage1.png")no-repeat;
	background-position: left;
	background-size: 1160px;
}

#login_btn2{
	position: absolute;
	box-shadow: 3px 2px 2px 2px #666;
	width: 350px;
	height: 38px;
	border-radius: 10px;
	bottom: 42px;
	left: 740px;
	background-color: #FFF;
	border: 2px solid #FFF;
}

#login_btn2:hover{
	box-shadow: 1px 1px 1px 1px #333;
	border: 2px solid #333;
}

#login_btn2 img{
	position: absolute;
	top: 7px;
	left: 12px;
	padding: 5px 10px;
	display: block;
	margin: -7px;
}

.mainwrap {
	max-width: 1260px;
	width: 100%;
	min-width: 960px;
	margin: 0 auto;
	text-align: center;
	font-size: 1em;
	line-height: 1.8em;
	color: #333;
	border: none;
	padding: 2% 1% 1%;
	background-color: #FFF;
}

/**************  アカウント登録（右タブｂ）  ***************/
#noneaccount{
	padding-top: 100px;
	margin-top:  -110px;
}


#noneaccount .title{
	text-align: left;
	width: 100%;
	border-bottom: 8px solid #666;
	background-color: #FFF;
}

.flowframe{
	width: 100%;
	margin: 0 auto;
}

.flowcase{
	width: 98%;
	display: flex;
	justify-content: space-between;
	margin: 0 0 30px 0;
	padding: 0;
}

.flowcase .flow_l{
	width: 260px;
	height: auto;
	padding: 0 0 2%;
	margin: 0;
	background-color: #F1F7EB;
}


.flowcase .arrowbox{
	background-color: #FFF;
	height: 20px;
	margin: -10px 0 0;
	text-align: center;	
}

.flowcase .flow_l .step{
	width: 100px;
	height: 30px;
	background-color: #598224;
	color: #FFF;
	text-align: center;
	font-weight: bold;
}

.flowcase .flow_l .step:before{
	content: 'STEP '
}


.flowcase .flow_l p{
	width: 90%;
	text-decoration: none;
	border: none;
	color: #000;
	font-size: 0.9em;
	margin: 20px auto 0;
	text-align: left;
	line-height: 1.4em;
}

.flowcase img{
	border: none;
	margin: auto 1%;
	align-items: center;
}

.flowcase p{
	color: #000;
	font-size: 1em;
	letter-spacing: 1px;
	font-weight: bold;
	margin: 0;
}

.flowcase .e-nobox{
	width: 98%;
	font-size: 1em;
	letter-spacing: 0.9px;
	color: #333;
	padding: 5px 0 2px 0; 
	background-color: #f2f2f2;
	margin: 20px 0 0 15px;
	border-bottom: 2px solid #0071bc;
	position: relative;
}


.flowcase .e-nobox .ball{
	width: 70px;
	color: #FFF;
	padding: 16px 3px 10px;
	background-color: #0071bc;
	border-radius: 50px;
	font-size: 0.8em;
	text-align: center;
	line-height: 1.3em;
	border: 4px solid #FFF;
	display: block;
	z-index: 50px;
	position: absolute;
	top: -20px;
	left: -20px;
}

 .flowcase .e-nobox img{
	border: none;
	position: absolute;
	 top: -25px;
	left: 15px;
	padding-top: 20px;
	 opacity: 0.8;
}

.flowcase .e-nobox a{
	width: 95%;
	font-size: 0.95em;
	padding: 0 30px 0 40px;
	margin-left: 35px;
	color: #0071BC;
	font-weight: normal;
	display: block;
	line-height: 1.4em;
}

.flowcase .e-nobox span{
	font-weight: normal;
	color: #666;
	font-size: 0.85em;
}

.flowcase .e-nobox a:hover{
	color: #083654;
	text-decoration: none;
}

.flowcase .nobox{
	border-bottom: 1px dashed #666;
	font-size: 0.97em;
	line-height: 1.7em;
	letter-spacing: 0.9px;
	color: #333;
	padding-top: 1%; 
}

.flowcase .nobox a{
	padding: 0;
	font-weight: normal;
	color: #0071BC;
}

.flowcase .nobox span{
	color: #666;
}

.flow_r{
	width: 72%;
	min-width: 720px;
	text-align: left;
}

.flow_r img {
	border: none;
	margin: 1%;
}

.flow_r .stepcase {
	width: 95%;
	margin: -5px auto 0;
}

.flow_r .stepcase .text{
	font-size: 0.95em;
	text-align: left;
	letter-spacing: 1px;
	line-height: 1.6em;
	font-weight: normal;
}

.maildetail {
	height: auto;
	font-weight: normal;
	font-size: 1em;
	letter-spacing: 1px;
	line-height: 2em;
	text-align: left;
	padding:  2%;
	margin: 0 auto 2%;
	background-color: #FFF;
	border: 1px solid #666;
}

.maildetail .flow{
	font-size: 1.1em;
	text-align: left;
	color: #bc0000;
	margin: 40px 0 20px;
	padding-left: 30px;
	display: block;
	background-color: #FFF;
}

.flowcase .flow_r .step{
	background-color: #bc0000;
	color: #FFF;
	padding: 0 2%;
	margin-top: -50px;
	display: inline-block;
	font-size: 0.9em;
	font-weight: bold;
}

.maildetail span{
	font-weight: bold;
}

.maildetail img{
	margin: 0 auto 1%;
	text-align: center;
	padding: 0;
	display: block;
}

.maildetail .text {
	font-weight: bold;
	font-size: 1em;
	letter-spacing: 1px;
	line-height: 2.2em;
	text-align: left;
	margin: 0;
}

.maildetail .text span{
	background-color: #f1f7eb;
	font-weight: normal;
	font-size: 0.95em;
	letter-spacing: 0.1em;
	line-height: 2.2em;
	margin-right: 10px;
	text-align: left;
	padding: 0 1%;
	border-right: 1px solid #666;
}

.mailsample_p{
	width: 55%;	
	padding-top: 1%;
}

.mailsample_p p{
	margin: 0;
	padding: 0;
	font-size: 0.9em;
	line-height: 1.5em;
	font-weight: normal;
	letter-spacing: 0;
	text-align: left;
}

.contents{
	background-color: #FFF;
	padding: 1%;
}

.contents .addtext{
	margin: 1% 0;
	padding: 0;
	font-size: 1.1em;
	font-weight: normal;
	letter-spacing: 1px;
	text-decoration: underline;
	text-align: center;
}


.contents .addcase{
	width: 90%;
	margin: 0 auto;
	padding-bottom: 20px;
	font-size: 1em;
	}


.contents .text{
	font-size: 1em;
	font-weight: normal;
	text-align: center;
	margin-bottom: 5px;
	letter-spacing: 0.1em;
	line-height: 1.4em;
}

.contents img{
	max-width: 100%;
	height: auto;
}

#noneaccount .subtitle{
	font-size: 1.35em;
	font-weight: bold;
	color: #54822B;
	letter-spacing: 1px;
	margin: 0 1%;
	padding-top: 1%;
	text-align: left;
	position: relative;
}

#noneaccount .subtitle .tips{
	font-size: 0.7em;
	font-weight: bold;
	color: #598224;
	background-color: #E6ECDF;
	letter-spacing: 0;
	margin: 0 8px 0 0;
	padding: 5px 10px;
	border-radius: 50%;
}

#nexttime .subtitle {
	color: #bc0000;
	font-size: 1.1em;
	font-weight: bold;
}

#nexttime {
	margin: -15px auto;
	padding: 1% 0;
	text-align: left;
}

#nexttime .submenu{
	font-size: 1em;
}

#nexttime .submenu .subtitle{
	font-size: 1.2em;
	color: #565656;
}

#nexttime .submenu p{
	width: 95%;
	margin: 1% auto;
}

#nexttime .flex{
	border: 1px solid #666;
	padding: 2%;
	width: 930px;
	margin: 0 0 1% 5%;
}

#nexttime p a{
	color: #bc0000;
}

.cp__none-submenu {
            /* 閉じた状態のトリガーのスタイルがあればここに */
        }

.topiccase{
	 width: 100%;
	 background-color: #FAEBED;	 
}

.topic{
	 width: 78%;
	 margin: 5px auto;
	padding: 1%;
	text-align: center;
	 display: flex;
	 align-items: center;
}

.topic p{
	font-size: 1.25em;
	letter-spacing: 1.1px;
	font-weight: bold;
	margin: 0 auto;
	display: inline-block;
	white-space: nowrap;
}

.topic img{
	margin: 0;
}

#login_btn1_end{
	box-shadow: 2px 2px 2px 1px #e4c6cc;
	width: 200px;
	border-radius: 10px;
	background-color: #bc0000;
	border: 2px solid #c3929d;	
	margin: 3px 8px 8px;
	padding: 0 15px;
}


#login_btn1_end:hover{
	box-shadow: 1px 1px 1px 1px #cb9ca4;
	border: 2px solid #bc0000;	
}

#login_btn1_end img{
	display: block;
	padding: 0 2%;
	margin: 0 auto;
}

/**************  アカウント管理（左タブa） ***************/

#management{
	width: 97%;
	margin: 0 auto 1%;
	padding: 0;
	text-align: center;
	border: 1px solid #f2f2f2;
	border-top: 1px solid #FFF;
	}

#management  .container2 {
  display: flex;
  /* min-height は、containerがsticky要素の親として機能するのに十分な高さであることを保証するために重要です。 */
  /* 例えば、sticky要素の高さ + top + left-pane-content の高さよりも大きくする必要があります。 */
  min-height: 150vh; /* 十分な高さを確保し、stickyの動作を確認しやすくする */
  width: 100%;
  padding: 1% 0; /* 全体の余白 */
  box-sizing: border-box; /* paddingを含めて幅を計算 */
}


#management .left-pane {
  flex: 0 0 235px; /* 左ペインの幅を固定 (例: 300px) */
  border-right: 0px solid #ccc;
  padding: 0 0 1%;
	margin-top: 10px;
  background-color: #F1F7EB;
  align-self: flex-start; /* sticky が機能するように */
	text-align: left;
}

#management .left-pane .textbox{
	border-top: 3px solid #e0e0e0;
	margin-bottom: 1%;
	padding: 1% 0;
}

#management .left-pane .text1 a{
	margin: 2px 0; 
	font-size: 1em;
	font-weight: bold;
}

#management .left-pane .text1{
	margin: 5px 0 0; 
	font-size: 1em;
	font-weight: bold;
	text-align: center;
}

#management .left-pane .text2 a{
	margin: 0; 
	font-size: 0.85em;
	font-weight: normal;
}

/* left-pane を固定するためのクラス */
.left-pane.is-sticky {
    position: sticky;
    top: 20px; /* スクロール時に上から20pxの位置で固定 */
    z-index: 100; /* 他の要素の上に表示 */
}

/* left-pane 内のナビゲーションリンクのスタイル */
.left-pane .nav-list a {
    display: block; /* クリック領域を広げる */
    padding: 5px;
    margin-bottom: 5px;
    color: #333;
    text-decoration: none;
    border-left: 5px solid #f0f0f0;
    transition: background-color 0.3s ease;
	font-weight: normal;
	border-bottom: 1px solid #f2f2f2;
}

.left-pane .nav-list a:hover {
    background-color: #E6ECDF;
	border-left: 5px solid #54822B;
	font-weight: bold;
}

/* アクティブなリンクのスタイル */
#management .left-pane .nav-list a.active {
    background-color: #FFF; /* アクティブ時の背景色 */
    color: #54822B;
	font-weight: bold;
	border-left: 4px solid #3B3B3B;
	border-bottom: 3px solid #E6ECDF;
}

#management #main{
	flex-grow: 1; /* 右ペインは残りのスペースを全て使う */
	padding: 0 0 0 10px;
	margin-left: 10px;
	background-color: #FFF;
    overflow-y: auto; /* 縦スクロールを有効にする */
    overflow-x: hidden; 
}

#management #main .title{
	font-size: 1.4em;
	font-weight: bold;
	letter-spacing: .1em;
	text-align: center;
	color: #FFF;
	margin: 3px 0 15px;
	padding-bottom: 10px;
	background-color: #3B3B3B;
	padding: 8px 1%;
}

#management #main p{
	width: 98%;
	text-align: left;
	margin: 1% 0 15px 5px;
}

#management #main hr{
	margin: 1% auto 2%;
}

#management #main .subtitle{
	font-size: 1.35em;
	font-weight: bold;
	color: #54822B;
	letter-spacing: 1px;
	margin: 1%;
	padding-top: 1%;
	text-align: left;
	position: relative;
}

#management #main .subtitle p{
	font-weight: bold;
	color: #333;
	letter-spacing: 0;
	background-color: #E6ECDF;
	width: 55px;
	padding: 0 1%;
	border-radius: 5px;
	margin: 0 0 5px;
}

#management #main .subtitle p span{
	font-size: 0.7em;
	color: #333;
	letter-spacing: 0;
	margin: 0 auto;
}

#management #main .subtitle .tips{
	font-size: 0.7em;
	font-weight: bold;
	color: #598224;
	background-color: #E6ECDF;
	letter-spacing: 0;
	margin: 0 8px 0 0;
	padding: 5px 10px;
	border-radius: 50%;
}


#management #main .step{
	width: 110px;
	text-align: left;
	border: 1px solid #54822B;
	padding: 5px;
	position: absolute;
	top: -15px;
	margin-left: 10px; 
}

#management #main .step0{
	border: 1px solid #bc0000;
	background-color: #FFF;
}

#management #main img{
	height: auto;
	margin: 1% auto;
}

#management #main .movableimg{
	width: 90%;
	min-width: 960px;
	height: auto;
	margin: 1% auto;
}


#management #main .flex{
	width: 96%;
	margin: 1% auto;
	justify-content: space-between;
	align-items: center;
}

#management #main .visualbox{
	flex: 0 0 590px;
	border-right: 0px solid #ccc;
	padding: 0 5px 1%;
	margin-top: 10px;
	align-self: flex-start; /* sticky が機能するように */
	text-align: center;
}

#management #main .visualbox img{
	max-width: 575px;
	margin-left: 0;
}

#management #main .steptext{
	flex-grow: 1;
	text-align: left;
	margin: 1% 0 1% 5px;
	font-size: .94em;
}

#management #main .number1{
	font-size: 1.5em;
	color: #bc0000;
	font-weight: bold;
	letter-spacing: .05em;
}

/**************  サイトコントローラー  ***************/

#sitecontroller{
	width: 94%;
	margin: 2% auto;
	padding: 2% 1% 3%;
	text-align: center;
	border: 1px solid #f2f2f2;
	}

#sitecontroller p{
	width: 95%;
	text-align: left;
	margin: 5px auto;
}

#sitecontroller .title{
	font-size: 1.5em;
	font-weight: bold;
	letter-spacing: .1em;
	text-align: center;
	color: #FFF;
	margin: 10px 0 25px 1%;
	padding-bottom: 10px;
	background-color: #54822B;
	padding: 1%;
}

#sitecontroller .subtitle{
	font-size: 1.35em;
	font-weight: bold;
	color: #54822B;
	letter-spacing: 1px;
	margin: 0 auto;
	padding-top: 1%;
}

#sitecontroller img{
	width: 90%;
	height: auto;
	margin: 1% auto;
}

/**************  accordion  ***************/
.accordion { font-size: 1em; text-align: left; font-weight: normal;}
.submenu {display: none; font-size: 0.9em; margin-left: 20px; padding: 1% 0; background-color: #FFF;}
.normal{margin-left: 0; padding: 1% 2%; background-color: #FFF; border: 5px solid #E2EED6;}
.normal p{width: 95%; font-size: 1em; font-weight: normal; line-height: 1.6em;}
.active-submenu {/* アクティブなサブメニューのスタイルを追加 */}
.cp__none-submenu {/* 非アクティブなサブメニューのスタイルを追加 */}
.cp__trigger.active {color: #bc0000; /* アコーディオンが開いている時の色 */margin-top: 0px; font-weight: bold;}
.cp__trigger::before {content: '+ ';}
.cp__trigger.active::before {content: '× ';}
.cp__trigger:hover{cursor: pointer; text-decoration: underline; color: #bc0000;}
.cp__trigger.active:hover {opacity: 0.8;}

/**************  tab  ***************/
#tabcase { width: 85%; min-width: 1200px; border-bottom: 2px solid #ccc; margin: 20px auto 0;}
.tab-nav{ max-width: 1200px; width: 90%; min-width: 960px; margin: 0 auto; list-style: none; padding: 0; display: flex;}
.tab-nav li{ width: auto; margin: 0 auto; text-align: center;}
.tab-nav a{ display: block; padding: 14px; text-decoration: none;  color: #666; background-color: #f0f0f0; border: 4px solid #f0f0f0; border-bottom: none; border-radius: 10px 10px 0 0; font-size: 1.1em; letter-spacing: 1.1px; white-space: nowrap; font-weight: normal; margin-top: 15px;}
.tab-nav a:hover{ text-decoration: none;}
.tab-nav a.active{ background-color:#54822B; border: 11px solid #54822B; color: #FFF; font-size: 1.25em; font-weight: bold; padding: 16px 20px 16px; margin-top: -8px;}
.tab-content{ padding: 20px;}
.tab-pane{ display: none;}
.tab-pane.active{display: block;}
.tab-nav #gray.active{ background-color:#555; border-color:#555; color: #FFF; font-size: 1.25em; font-weight: bold;}