@charset "utf-8";

/***************************************************
information
  filename : app_user.css;
***************************************************/
.borderBox{
	padding:1em 1em;
	margin: 2em auto;
}


.borderBox p:last-child{
	padding-bottom:0;
}
.brdT{
	border-top:4px solid;
}
.brdL{
	border-left:4px solid;
}
.brdTBW{
	border-top: 5px double;
	border-bottom: 5px double;
}
.brdRLW{
	border-left: 5px double;
	border-right: 5px double;
}
.brd{
	border: 2px solid;
}
.brdW{
	border: 5px double;
}
.boxShadow{
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* 線色 */
.brdClr1{
	border-color: var(--app-main-cr);/*メインカラー*/
}
.brdClr2{
	border-color: var(--app-main-txt-ub);/*差し色*/
}
.brdClr3{
	border-color: var(--app-main-cr-c);/*フォーカス色*/
}
.brdClr4{
	border-color: #ff0000;
}
.brdClr5{
	border-color: #00ff00;
}
.brdClr6{
	border-color: #0000ff;
}
/* 背景色 */
.bgClr1{
	background-color: var(--app-main-cr-ar);
}
.bgClr2{
	background-color: rgba(120,120,120,0.3);
}
.bgClr3{
	background-color: rgba(255, 72, 0,0.3);
}
.bgClr4{
	background-color: rgba(120,0,0,0.3);
}
.r4{
	border-radius: 4px;
}
.r10{
	border-radius: 10px;
}
.r16{
	border-radius: 16px;
}
.r20{
	border-radius: 20px;
}
/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 100％;/*最大幅*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #FFFFFF;
    font-weight: bold;
    background: #00BFFF;
    cursor :pointer;
    transition: all 0.5s;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#DFF1F6;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #DFF1F6;
    opacity: 1;
}

.accbox .accshow p {
    margin: 15px 10px}

/*TOP読み込み中のスライダー調整*/
.slideDf_box:not(.slick-slider) {
  position:relative;
}
.slideDf_box:not(.slick-slider) .slideDfInn:not(:first-child) {
  position:absolute;
  top:0;
  left:0;
  visibility:hidden;
}

/* ==============================================
PC
============================================== */

h1.det_ti{
margin: 0;
padding: 76px 0 15px 0;
font-size: 36px;
line-height: 50px;
}



.articleBox h2{
margin: 0;
padding: 66px 0 4px 0;
text-align: left;
font-size: 24px;
line-height: 32px;
font-weight: bold;
}
.articleBox h2.style1{
margin: 62px 0 0 0;
padding: 4px 0 4px 20px;
border: none;
border-left: 8px solid var(--app-main-cr);
}
.articleBox h2.style2{
margin: 71px 0 9px 0;
padding: 25px 30px 29px 30px;
border: 1px solid #cdcdcd;
background: none;
color: #000;
text-align: center;
}
.articleBox h2.style3{
margin: 71px 0 9px 0;
padding: 25px 30px 29px 30px;
background: var(--app-main-cr);
text-align: center;
}



.articleBox h3{
margin: 0;
padding: 46px 0 4px 0;
text-align: left;
font-size: 20px;
line-height: 28px;
font-weight: bold;
}
.articleBox h3.style1{
margin: 0 0 9px 0;
padding: 46px 0 3px 0;
border-bottom: 1px solid #cdcdcd;
}
.articleBox h3.style2{
margin: 46px 0 2px 0;
padding: 0 0 2px 10px;
border: none;
border-left: 8px solid var(--app-main-cr);
text-align: left;
}
.articleBox h3.style3{
margin: 51px 0 9px 0;
padding: 13px 0 16px 0;
border: none;
border-top: 1px solid #cdcdcd;
border-bottom: 1px solid #cdcdcd;
background: #ffffff;
}
.articleBox h3.style4{
margin: 51px 0 9px 0;
padding: 13px 0 16px 0;
border: none;
background: #f3f3f3;
text-align: center;
}



.articleBox h4{
margin: 0;
padding: 27px 0 5px 0;
font-size: 18px;
line-height: 24px;
font-weight: bold;
text-align: left;
}
.articleBox h4.style1{
margin: 0 0 9px 0;
padding: 27px 0 6px 0;
border-bottom: 1px solid #cdcdcd;
background: #ffffff;
}
.articleBox h4.style2{
margin: 27px 0 3px 0;
padding: 0 0 2px 10px;
border-left: 8px solid var(--app-main-cr);
background: #ffffff;
}
.articleBox h4.style3{
margin: 27px 0 3px 0;
padding: 0 0 2px 10px;
border: none;
border-left: 8px solid #000000;
}



.articleBox h5{
margin: 0;
padding: 26px 0 4px 0;
font-size: 16px;
line-height: 20px;
font-weight: bold;
text-align: left;
}
.articleBox h5.style1{
margin: 28px 0 4px 0;
padding: 1px 0 2px 10px;
border: none;
border-left: 8px solid #000000;
}



.articleBox p{
margin: 0;
padding: 22px 0 0 0;
font-size: 16px;
line-height: 32px;
}
.articleBox p.style1{
margin: 32px 0 8px 0;
padding: 21px 29px 23px 29px;
border-radius: 8px;
border: solid 1px #e7e7e7;
}
.articleBox p.style2{
margin: 32px 0 8px 0;
padding: 18px 26px 20px 26px;
border-radius: 8px;
border: solid 4px #e7e7e7;
background: #FFF;
}
.articleBox p.style3,
.articleBox div.style3{
margin: 32px 0 8px 0;
padding: 18px 26px 20px 26px;
border-radius: 8px;
border: solid 4px var(--app-main-cr);
background: #FFF;
}
.articleBox p.style4{
margin: 32px 0 8px 0;
padding: 22px 30px 24px 30px;
border-radius: 8px;
background: var(--app-main-cr);
}
.articleBox p.style5{
margin: 32px 0 8px 0;
padding: 22px 30px 24px 30px;
border-radius: 8px;
font-weight: normal;
background: #f3f3f3;
}
.articleBox p.widths{
padding: 22px 30px 0 30px;
}
.articleBox span.mck{
background: linear-gradient(transparent 50%, #fff5b4 50%);
}
.articleBox span.ubdr{
border-bottom: 1px solid #000000;
}
.articleBox p img{
margin: 14px 0 0 0;
}



.articleBox ul{
margin: 0;
padding: 16px 0 0 20px;
}
.articleBox ul li{
margin: 0;
padding: 10px 0 0 0;
font-size: 16px;
line-height: 24px;
}



.articleBox table{
margin: 31px 0 9px 0;
padding: 0;
}
.articleBox table td{
font-size: 16px;
line-height: 24px;
padding: 17px 20px 18px 20px;
}



.articleBox a{
color: #0078c8;
}



.articleBox .gallary_l{
margin: 0;
}
.articleBox .LayoutL{
margin: 0;
}
.articleBox .LayoutL img{
margin: 30px 40px 30px 0;
}
.articleBox .gallary_R{
margin: 0;
}
.articleBox .LayoutR{
margin: 0;
}
.articleBox .LayoutR img{
margin: 30px 0 30px 40px;
}



.articleBox .borderBox{
margin: 31px 0 9px 0;
padding: 24px 30px 27px 30px;
font-size: 14px;
line-height: 24px;
}
.articleBox .brdT{
margin: 31px 0 9px 0;
padding: 23px 30px 27px 30px;
font-size: 14px;
line-height: 24px;
border-top: solid 1px #e7e7e7;
}
.articleBox .brdL{
margin: 31px 0 9px 0;
padding: 24px 30px 27px 29px;
font-size: 14px;
line-height: 24px;
border-left: solid 1px #e7e7e7;
}
.articleBox .brdTBW{
margin: 31px 0 9px 0;
padding: 21px 30px 24px 30px;
font-size: 14px;
line-height: 24px;
border-top: double 3px #e7e7e7;
border-bottom: double 3px #e7e7e7;
}
.articleBox .brdRLW{
margin: 31px 0 9px 0;
padding: 24px 27px 27px 27px;
font-size: 14px;
line-height: 24px;
border-left: double 3px #e7e7e7;
border-right: double 3px #e7e7e7;
}
.articleBox .brd{
margin: 31px 0 9px 0;
padding: 23px 29px 26px 29px;
font-size: 14px;
line-height: 24px;
border: solid 1px #e7e7e7;
}
.articleBox .brdW{
margin: 31px 0 9px 0;
padding: 21px 27px 24px 27px;
font-size: 14px;
line-height: 24px;
border: double 3px #e7e7e7;
}
.articleBox .boxShadow{
margin: 31px 0 9px 0;
padding: 24px 30px 27px 30px;
font-size: 14px;
line-height: 24px;
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}



.articleBox .brdClr1{
border-color: #e7e7e7;
}
.articleBox .brdClr2{
border-color: var(--app-main-cr);
}
.articleBox .brdClr3{
border-color: #cdcdcd;
}
.articleBox .brdClr4{
border-color: #000000;
}
.articleBox .brdClr5{
border-color: #000000;
}



.articleBox .bgClr1{
background-color: #f3f3f3;
}
.articleBox .bgClr2{
background-color: var(--app-main-cr);
}
.articleBox .bgClr3{
background-color: #f3f3f3;
}
.articleBox .bgClr4{
background-color: #f3f3f3;
}



.articleBox .r4{
border-radius: 4px;
}
.articleBox .r10{
border-radius: 8px;
}
.articleBox .r16{
border-radius: 12px;
}
.articleBox .r20{
border-radius: 16px;
}



/* ==============================================
SP
============================================== */
@media screen and (max-width:750px) {

h1.det_ti{
width: 100%;
margin: 0;
padding: 36px 20px 20px 20px;
font-size: 24px;
line-height: 32px;
}



.articleBox h2{
margin: 0;
padding: 66px 20px 4px 20px;
text-align: left;
font-size: 20px;
line-height: 30px;
font-weight: bold;
}
.articleBox h2.style1{
margin: 62px 20px 0 20px;
padding: 4px 20px 4px 10px;
border: none;
border-left: 8px solid var(--app-main-cr);
}
.articleBox h2.style2{
margin: 71px 20px 9px 20px;
padding: 15px 20px 17px 20px;
border: 1px solid #cdcdcd;
background: none;
color: #000;
text-align: center;
}
.articleBox h2.style3{
width: 100%;
margin: 71px 0 9px 0;
padding: 15px 30px 17px 30px;
background: var(--app-main-cr);
text-align: center;
}



.articleBox h3{
margin: 0;
padding: 46px 20px 4px 20px;
text-align: left;
font-size: 18px;
line-height: 24px;
font-weight: bold;
}
.articleBox h3.style1{
margin: 0 20px 9px 20px;
padding: 46px 0 3px 0;
border-bottom: 1px solid #cdcdcd;
}
.articleBox h3.style2{
margin: 46px 20px 2px 20px;
padding: 0 0 2px 10px;
border: none;
border-left: 8px solid var(--app-main-cr);
text-align: left;
}
.articleBox h3.style3{
margin: 51px 20px 9px 20px;
padding: 13px 0 16px 0;
border: none;
border-top: 1px solid #cdcdcd;
border-bottom: 1px solid #cdcdcd;
background: #ffffff;
}
.articleBox h3.style4{
margin: 51px 20px 9px 20px;
padding: 13px 20px 16px 20px;
border: none;
background: #f3f3f3;
text-align: center;
}



.articleBox h4{
margin: 0;
padding: 27px 20px 5px 20px;
font-size: 16px;
line-height: 22px;
font-weight: bold;
text-align: left;
}
.articleBox h4.style1{
margin: 0 20px 9px 20px;
padding: 27px 0 6px 0;
border-bottom: 1px solid #cdcdcd;
background: #ffffff;
}
.articleBox h4.style2{
margin: 27px 20px 3px 20px;
padding: 0 0 2px 10px;
border-left: 8px solid var(--app-main-cr);
background: #ffffff;
}
.articleBox h4.style3{
margin: 27px 20px 3px 20px;
padding: 0 0 2px 10px;
border: none;
border-left: 8px solid #000000;
}



.articleBox h5{
margin: 0;
padding: 26px 20px 4px 20px;
font-size: 15px;
line-height: 20px;
font-weight: bold;
text-align: left;
}
.articleBox h5.style1{
margin: 28px 20px 4px 20px;
padding: 1px 0 2px 10px;
border: none;
border-left: 8px solid #000000;
}



.articleBox p{
width: 100%;
margin: 0;
padding: 22px 20px 0 20px;
font-size: 15px;
line-height: 28px;
}
.articleBox p.style1{
width: calc( 100% - 40px ) ;
margin: 32px 20px 8px 20px;
padding: 15px 19px 17px 19px;
border-radius: 8px;
border: solid 1px #e7e7e7;
}
.articleBox p.style2{
width: calc( 100% - 40px ) ;
margin: 32px 20px 8px 20px;
padding: 12px 16px 14px 16px;
border-radius: 8px;
border: solid 4px #e7e7e7;
background: #FFF;
}
.articleBox p.style3,
.articleBox div.style3{
width: calc( 100% - 40px ) ;
margin: 32px 20px 8px 20px;
padding: 12px 16px 14px 16px;
border-radius: 8px;
border: solid 4px var(--app-main-cr);
background: #FFF;
}
.articleBox p.style4{
width: calc( 100% - 40px ) ;
margin: 32px 20px 8px 20px;
padding: 16px 20px 18px 20px;
border-radius: 8px;
background: var(--app-main-cr);
}
.articleBox p.style5{
width: calc( 100% - 40px ) ;
margin: 32px 20px 8px 20px;
padding: 16px 20px 18px 20px;
border-radius: 8px;
font-weight: normal;
background: #f3f3f3;
}
.articleBox p.widths{
width: 100%;
padding: 22px 30px 0 30px;
}
.articleBox span.mck{
background: linear-gradient(transparent 50%, #fff5b4 50%);
}
.articleBox span.ubdr{
border-bottom: 1px solid #000000;
}
.articleBox p img{
margin: 14px 0 0 0;
}



.articleBox ul{
width: 100%;
margin: 0;
padding: 16px 20px 0 40px;
}
.articleBox ul li{
margin: 0;
padding: 10px 0 0 0;
font-size: 15px;
line-height: 24px;
}



.articleBox table{
width: calc( 100% - 40px )!important;
margin: 31px 20px 9px 20px;
padding: 0;
}
.articleBox table td{
width: auto;
font-size: 13px;
line-height: 22px;
padding: 12px 15px 13px 15px;
}



.articleBox a{
color: #0078c8;
}



.articleBox .float{
margin: 0;
}
.articleBox .LayoutL{
margin: 23px 20px 0 20px;
}
.articleBox .LayoutL img{
width: 100%;
height: auto;
margin: 9px 0 12px 0;
}
.articleBox .LayoutR{
margin: 23px 20px 0 20px;
}
.articleBox .LayoutR img{
width: 100%;
height: auto;
margin: 9px 0 12px 0;
}



.articleBox .borderBox{
margin: 32px 20px 8px 20px;
padding: 16px 20px 18px 20px;
font-size: 13px;
line-height: 22px;
}
.articleBox .brdT{
margin: 32px 20px 8px 20px;
padding: 16px 20px 18px 20px;
font-size: 13px;
line-height: 22px;
border-top: solid 1px #e7e7e7;
}
.articleBox .brdL{
margin: 32px 20px 8px 20px;
padding: 16px 20px 18px 19px;
font-size: 13px;
line-height: 22px;
border-left: solid 1px #e7e7e7;
}
.articleBox .brdTBW{
margin: 32px 20px 8px 20px;
padding: 16px 20px 18px 20px;
font-size: 13px;
line-height: 22px;
border-top: double 3px #e7e7e7;
border-bottom: double 3px #e7e7e7;
}
.articleBox .brdRLW{
margin: 32px 20px 8px 20px;
padding: 16px 17px 18px 17px;
font-size: 13px;
line-height: 22px;
border-left: double 3px #e7e7e7;
border-right: double 3px #e7e7e7;
}
.articleBox .brd{
margin: 32px 20px 8px 20px;
padding: 16px 19px 18px 19px;
font-size: 13px;
line-height: 22px;
border: solid 1px #e7e7e7;
}
.articleBox .brdW{
margin: 32px 20px 8px 20px;
padding: 16px 17px 18px 17px;
font-size: 13px;
line-height: 22px;
border: double 3px #e7e7e7;
}
.articleBox .boxShadow{
margin: 32px 20px 8px 20px;
padding: 16px 20px 18px 20px;
font-size: 13px;
line-height: 22px;
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}



.articleBox .brdClr1{
border-color: #e7e7e7;
}
.articleBox .brdClr2{
border-color: var(--app-main-cr);
}
.articleBox .brdClr3{
border-color: #cdcdcd;
}
.articleBox .brdClr4{
border-color: #000000;
}
.articleBox .brdClr5{
border-color: #000000;
}



.articleBox .bgClr1{
background-color: #f3f3f3;
}
.articleBox .bgClr2{
background-color: var(--app-main-cr);
}
.articleBox .bgClr3{
background-color: #f3f3f3;
}
.articleBox .bgClr4{
background-color: #f3f3f3;
}



.articleBox .r4{
border-radius: 4px;
}
.articleBox .r10{
border-radius: 8px;
}
.articleBox .r16{
border-radius: 12px;
}
.articleBox .r20{
border-radius: 16px;
}
}
.innvideo iframe{max-height:95%;}
.ListBox figure.image{border: none;}
.ListType1 .tpl-flexcolumn3 .column .ListMainTitle{font-size:20px;}
.ListBox.ListType1 .column .ListMainTitle{-webkit-line-clamp: 3;height: 74px;}

/*スマホでのヘッダーロゴを長めにする*/
#spheader p.logo {
    max-width: calc(100% - 100px);
}
.spview #spheader p.logo {
    padding: 0;
    width: auto;
    height: auto;
    max-width: calc(100% - 100px);
    max-height: 50px;
}
.spview #spheader p.logo img {
    max-height: 50px;
}
/***********************
ログイン画面カスタマイズ
************************/
/* ログインメッセージ用 */
.addcom .login_area {
    margin-top: 0px;
}

.login_addcom {
    color: #333;
    font-weight: bold;
    width: 810px;
    max-width: 95%;
    margin: 30px auto 0;
    line-height:1.2;
}

.login_addcom h2 {
    color: #f00;
    font-size: 30px;
    display: block;
    text-align: center;
}
.login_addcom h2 span{
    color: #f00;
    font-size: 30px;
    border-bottom: 1px solid;
    display: inline-block;
    text-align: center;
}
.login_addcom p span{color: #f00;}

/*同意して社用IDでログイン 色変更*/
.LoginForm a.whBT {
    background: #0078C7;
    color: #fff;
}
.LoginForm a.whBT:hover{
    background: #008BEA;
}
.login_area .BtM a.whBT.next::after {border-left-color: #fff;}

/*同意してログイン*/
.LoginForm button.bkBT {
    background: #DAE3F3;
    border-color: #7F7F7F;
    color: #595959;
}
.LoginForm button.bkBT:hover{
    background: #F0F4FA;
}
.login_area .BtM button.bkBT.next::after {border-left-color: #6E6E6E;}

/*　↓ログイン画面の注釈窓の高さを若干狭めます↓↓　*/
.login_rules_area{height: 10em;}

/*　↓ログインボタンのマージン↓↓　*/
.LoginForm .BtM a{
  margin-top:5px;
  margin-bottom:5px;
}
.login_rules .login_rules_field {
    margin: 10px auto 0px auto;
}

/* ↓スマホ＋Webブラウザログイン対応 */
.login_area.fadebox {opacity: 1!important;}

/****************************
ログイン画面カスタマイズここまで
*****************************/

/*------------------------------

ここからアコーディオンのCSS

------------------------------*/
/*ボックス全体*/
.accbox {
  margin: 2em 0;
  padding: 0;
  max-width: 100%;
  /*最大幅*/
}

/*ラベル*/
.accbox label {
  display: block;
  margin: 1.5px 0;
  padding: 13px 12px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 18px;
  background: #00BFFF;
  cursor: pointer;
  transition: all 0.5s;
}

/*ラベルホバー時*/
.accbox label:hover {
  background: #38B48B;
}

/*チェックは隠す*/
.accbox input {
  display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
  height: auto;
  padding: 5px;
  background: #DFF1F6;
  opacity: 1;
}

.accbox .accshow p {
  margin: 15px 10px;
}
.spview .dialogue .text{
  width:calc(75% - 1em);
}

/*20220907標準仕様で入るようになった©を非表示化*/
#footer .copy {
  color: transparent!important;
}

/*edge0808 トップ記事テキストサイズ*/
#top .ListMainTitle{
	font-size: 16px;
	line-height: 22px;
	height: 46px;
}

/*h1, h2, h3{
	font-family: "游明朝", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Noto Serif JP", serif;
	font-weight:bold;
}*/


/*edge0809 ヘッダーロゴ調整*/
#header p.logo {
	padding-top: 70px;
	padding-bottom: 12px;
	position: relative;
	max-width: 200px;
}
#header p.logo:after {
	background-image: url("https://img-benesse-pr.shapplix.com/00_%E3%83%AD%E3%82%B4/logo_benesse.png");
	background-size: 105px auto;
	content: "";
	height: 24px;
	position: absolute;
	top: 15px;
	left: 0;
	width: 105px;
}
.header_innTR {
	background: url("https://img-benesse-pr.shapplix.com/99_banner/2025_henkaku_logo_Yoko3.png") no-repeat right 0 bottom 10px;
	background-size: 180px auto;
	padding-bottom: 50px;
}

#spheader p.logo {
	padding: 14px 0 0;
	position: relative;
	text-align: center;
	max-width: none;
}
#spheader p.logo:after {
	background-image: url("https://img-benesse-pr.shapplix.com/00_%E3%83%AD%E3%82%B4/logo_benesse_tate.png");
	background-size: 35px auto;
	content: "";
	height: 30px;
	position: absolute;
	top: 10px;
	left: 12px;
	width: 35px;
}
#spheader p.logo img {
	height: 24px;
	width: auto;
}


/*20240926経営NOW非表示→20241225再表示・順序変更*/
.SideCln {
  display: grid;
}
.SideCln .keieiCateList {
  order: -1;
}
/*.keieiCateList {
  display: none;
}*/