/*=====--ヘルプ=====--*/
/*--大枠テーブル--*/
.hel-l {
   width: 100%;
   vertical-align: top;
   padding-left: 0;
}

.hel-r {
   display: none !important;
   width: 0px;
}

/* ヘルプサイドメニュー (.hel-r-box) */
.hel-r-box {
   width: 170px;
}
.hel-r-box .hel-r-ti,
.hel-r div.hel-r-ti {
   background-color: #CC0000;
   color: #FFFFFF;
   padding: 5px 8px;
   font-size: 12px;
   font-weight: bold;
   margin-bottom: 8px;
   border-bottom: 1px solid #FFFFFF;
}
.hel-r-box .hel-r-ti a,
.hel-r div.hel-r-ti a {
   color: #FFFFFF;
   text-decoration: none;
   display: block;
}
.hel-r-box .hel-r-ti a:hover,
.hel-r div.hel-r-ti a:hover {
   color: #CC0000;
   background-color: #FFFFFF;
}
.hel-r-box dl {
   margin: 5px 0 15px 10px;
   padding: 0;
   list-style: none;
}
.hel-r-box dl dd,
.hel-r-box dl dt {
   margin: 0;
   padding: 2px 0;
   font-size: 12px;
   line-height: 1.8;
}
.hel-r-box dl dd a,
.hel-r-box dl dt a {
   color: #333333;
   text-decoration: none;
}
.hel-r-box dl dd a:hover,
.hel-r-box dl dt a:hover {
   color: #CC0000;
   text-decoration: underline;
}
.hel-r-box dl.hel-r-sub {
   text-align: right;
   margin-top: 15px;
}

/*--左--*/
.hel1 {
  margin-left:5%;
  margin-bottom:35px;
  border:1px solid #CCCCCC;
}
.hel1 th {
  font-size:14px;
  color:#FFFFFF;
  text-align:left;
  padding:5px;
  background-color:#999999;
}
.hel1 th a{
  color:#FFFFFF;
}
.hel1 td { 
  font-size:14px;
  line-height:190%;
  padding:10px;
  vertical-align:top;
  background-color:#F6F6F6;
}

.hel2 {
  margin-left:5%;
  margin-bottom:30px;
}
.hel2 th {
  font-size:14px;
  color:#333333;
  text-align:left;
  padding:5px 7px;
  border-left:7px solid #CCCCCC;
  border-bottom:4px solid #E6E6E6;
  background-color:#F6F6F6;
}
.hel2 td { 
  font-size:14px;
  line-height:150%;
  padding:5px 1px 50px 20px;
  vertical-align:top;
}
.hel2 td span {
  color:#CC0000; 
}

.hel-ti {
   font-size:16px;
   font-weight:bold;
   border-bottom:1px solid #CCCCCC;
   padding:5px;
   margin-top:10px;
}
.hel-com {
   font-size:12px;
   line-height:1.4;
   padding:5px;
   margin-bottom:7px;
}
ul.hel-menu {
   list-style-type: none;
   font-size:12px;
   margin:10px 15px;
   padding:0;
}
ul.hel-menu li {
   margin-top:7px;
}

/*--左メニュー--*/
.hel-l-menu {
   font-size:12px;
   line-height:1.9;
   color:#666666;
}
.hel-l-menu a {
   font-size:14px;
   font-weight:bold;
   padding-right:7px;
}

/* help-thum アイコンスプライト */
img.icon-info{ background: transparent url('/img/thum/help-thum.jpg') no-repeat -5px -5px; width: 38px; height: 40px; }
img.icon-mail{ background: transparent url('/img/thum/help-thum.jpg') no-repeat -5px -50px; width: 42px; height: 39px; }
img.icon-tag{ background: transparent url('/img/thum/help-thum.jpg') no-repeat -5px -99px; width: 42px; height: 39px; }
img.icon-useful{ background: transparent url('/img/thum/help-thum.jpg') no-repeat -5px -163px; width: 16px; height: 12px; margin-right:2px;margin-top:5px;}
img.icon-folder{ background: transparent url('/img/thum/help-thum.jpg') no-repeat -5px -220px; width: 16px; height: 12px; margin-right:5px;}
img.icon-prev{ background: transparent url('/img/thum/help-thum.jpg') no-repeat -5px -196px; width: 12px; height: 12px; margin-top:5px;}
img.icon-list{ background: transparent url('/img/thum/help-thum.jpg') no-repeat -5px -174px; width: 16px; height: 20px; }
img.icon-next{ background: transparent url('/img/thum/help-thum.jpg') no-repeat -5px -207px; width: 12px; height: 12px; margin-top:5px;}

/* help layout elements */
.help-container h1 {
	font-size:20px;
	margin-left:10px;
}
.help-container h1 a {
	color:#000000;
}
.help-container h1 a:hover{
	color:#000000;
	text-decoration:underline;
}
.help-container p.scate {
	display:inline;
}
.help-container p.scate a {
	color:#000000;
}
.help-container p.scate a:hover {
	text-decoration:underline;
}
.help-container h2 {
	margin:10px;
}
.help-container .det-title{
	margin-left:15px;
	display:block;
	line-height:40px;
	border-top:#CCCCCC 1px solid;
	border-bottom:#CCCCCC 1px solid;
}
.help-container h3 {
	border-bottom:#CCCCCC 1px solid;
	margin-bottom:10px;
}
.help-container h3 img {
	vertical-align:bottom;
	margin-right:5px;
}
.help-container .faq-title {
	vertical-align: bottom;
}
.help-container .faq-title span {
	vertical-align: bottom;
}
.help-container div.help-com{
	padding:10px;
	line-height:24px;
	zoom: 1;
}
.help-container div.help-com div.f{
	height: 28px;
	line-height:24px;
}
.help-container div.help-com a.supo {
	float:left;
}
.help-container .ser-ta{
	margin:0px 10px 0px 10px;
}
.help-container div.faqlist{
	line-height:28px;
}
.help-container .help-contents{
	padding:10px;
}
.help-container p.help-exp{
	text-align:right;
	font-size:12px;
	display:inline;
	float:right;
}
.help-container div.useful{
	font-size:12px;
	margin-bottom:20px;
	line-height:24px;
}
.help-container table.page{
	font-size:12px;
}
.help-container table.page a{
	display:block;
	width:120px;
	height:30px;
	text-decoration:none;
}
.help-container table.page td{
	width:140px;
	color:#CCCCCC;
}
.help-container table.page td div{
	height:30px;
	width:120px;
	background-color:#F9F9F9;
	border:#CCCCCC 1px solid;
	line-height:30px;
	margin:10px;
}
.help-container td.pcbtn{
	vertical-align: middle;
}
.help-container td.pcbtn div.pcbtn1{
	height: 30px;
	line-height: 30px;
	vertical-align: middle;
	zoom: 1;
}
.help-container td.pcbtn div.pcbtn1 a{
	vertical-align: middle;
}
.help-container td.pcbtn div.pcbtn1 img{
	margin:0;
	padding:0;
	vertical-align: middle;
}
.help-container td.pcbtn div.pcbtn1 span.pcbtn2{
	height: 30px;
	line-height: 30px;
}
.help-container .training-faq{
	background-color:#999999;
	font-size:1.0em;
	line-height:1.4;
	margin:20px 10px 5px 25px;
	border-spacing:1px;
}
.help-container .training-faq th {
	font-weight:normal;
	background-color:#EDEDED;
	padding:5px;
}
.help-container .training-faq td{
	background-color:#FFFFFF;
	padding:5px;
}
.help-container .faq-at{
	background-color:#FAFAFA;
	width:710px;
	border:1px solid #DEDEDE;
	padding:5px;
}

/* ==========================================================================
   健康手帳・ツール系ヘルプ (syohi, calc 等)
   ========================================================================== */
.wl-b-ti {
  background-color: #F6F6F6;
  border-top: 1px solid #CECFCE;
  border-left: 1px solid #E0E0E0;
  border-right: 1px solid #E0E0E0;
  padding: 8px 15px;
  margin-top: 10px;
}
.wl-b-ti h1 {
  font-size: 14px !important;
  font-weight: bold;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 24px;
  color: #333333;
}
.wl-b {
  border: 1px solid #E0E0E0;
  background-color: #FFFFFF;
  border-collapse: collapse;
  width: 100%;
}
.wl-b td.n-help {
  padding: 15px;
}

/* 消費カロリー計算フォーム (.syohi_frm_cl) */
.syohi_frm_cl {
  background-color: #F8F9FA;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
  padding: 10px 15px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #333333;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.syohi_frm_cl label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.syohi_frm_cl input.text {
  text-align: right;
  padding: 3px 6px;
  border: 1px solid #CBD5E1;
  border-radius: 3px;
  font-size: 12px;
  width: 60px;
  height: 24px;
  box-sizing: border-box;
}
.syohi_frm_cl select {
  padding: 3px 6px;
  border: 1px solid #CBD5E1;
  border-radius: 3px;
  font-size: 12px;
  height: 26px;
  background-color: #FFFFFF;
}
.syohi_frm_cl input[type="submit"] {
  height: 26px;
  padding: 0 16px;
  background: linear-gradient(180deg, #FF7700 0%, #E65100 100%);
  color: #FFFFFF;
  border: 1px solid #D84315;
  border-radius: 3px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.syohi_frm_cl input[type="submit"]:hover {
  background: linear-gradient(180deg, #FF8811 0%, #F4511E 100%);
}

/* 消費カロリー結果テーブル (.syohi_ly_tbl_cl / .syohi_tbl_cl) */
div.syohi_div {
  margin-top: 15px;
}
.syohi_ly_tbl_cl {
  width: 100%;
  border-collapse: collapse;
}
.syohi_ly_tbl_cl caption {
  font-size: 14px;
  text-align: left;
  font-weight: bold;
  color: #333333;
  padding: 6px 4px 10px 4px;
  border-bottom: 2px solid #E2E8F0;
  margin-bottom: 10px;
}
.syohi_ly_tbl_cl td {
  vertical-align: top;
}

.syohi_tbl_cl {
  width: 98%;
  margin: 0 auto 15px auto;
  border-collapse: separate;
  border-spacing: 1px;
  background-color: #CCCCCC;
}
.syohi_tbl_cl thead th {
  background-color: #E2E8F0;
  color: #334155;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 8px;
  text-align: left;
}
.syohi_tbl_cl tbody th {
  background-color: #F8FAFC;
  color: #1E293B;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 8px;
  text-align: left;
  white-space: nowrap;
}
.syohi_tbl_cl tbody td {
  font-size: 12px;
  padding: 5px 8px;
  color: #475569;
  background-color: #FFFFFF;
}
.syohi_tbl_cl tbody tr.even th {
  background-color: #F1F5F9;
}
.syohi_tbl_cl tbody tr.even td {
  background-color: #F8FAFC;
}
.syohi_tbl_cl tbody td.num {
  text-align: right;
  white-space: nowrap;
}
.syohi_tbl_cl tbody td span {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
p.syohi-note {
  font-size: 11px;
  color: #888888;
  margin-top: 12px;
  line-height: 1.5;
}

/* BMI計算ツール (.area_bmi) */
#area_bmi {
  background-color: #F8F9FA;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
  padding: 15px;
  margin-top: 10px;
}
div.calc_title {
  font-weight: bold;
  font-size: 14px;
  color: #333333;
  margin-bottom: 10px;
}

/* レスポンシブ対応 (SP表示最適化) */
@media (max-width: 768px) {
  .help-container {
    padding: 5px 10px;
    width: 100%;
    box-sizing: border-box;
  }
  .help-contents {
    padding: 5px 0;
  }
  .help-contents tbody,
  .help-contents tr,
  .help-contents td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .ser-ta {
    margin: 20px 0 0 0 !important;
    width: 100% !important;
  }
  .ser-ta tr,
  .ser-ta td {
    display: table-cell !important;
    width: 100% !important;
  }
  .hel-r {
    display: none !important;
  }
  .hel-l {
    display: block !important;
    width: 100% !important;
    padding-left: 0 !important;
  }

  /* syohi SP最適化 */
  .syohi_frm_cl {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .syohi_ly_tbl_cl,
  .syohi_ly_tbl_cl tbody,
  .syohi_ly_tbl_cl tr,
  .syohi_ly_tbl_cl td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 !important;
  }
  .syohi_tbl_cl {
    width: 100% !important;
    margin-bottom: 15px;
  }
  .syohi_tbl_cl thead th,
  .syohi_tbl_cl tbody th,
  .syohi_tbl_cl tbody td {
    padding: 5px 4px;
    font-size: 11px;
  }
  .syohi_tbl_cl tbody td span {
    font-size: 12px;
  }
}