@charset "UTF-8";
/* CSS Document（受講生画面用 No.1～9） */


/******************************

全ページ共通（受講者画面全ページ共通）

******************************/

/* ▼▼▼全体枠とカラム設定▼▼▼ */
/* コンテンツ全体枠 */
#ContainerLearn,#ContainerSub{
    max-width:959px;
    width: calc(100% - 40px);
    margin:0 auto;
}

/* コンテンツ（右カラム） */
#ContainerLearn article,#ContainerSub article{
    width: 100%; /* width: 992px; */
}

/* ヘッダの帯をグリーンに */
.governance{
    background: #3e7d31;
}






/******************************

全ページ共通:サイドメニュー

******************************/
/* ▼▼▼ハンバーガーメニュー内のデザイン▼▼▼ */
/* トップ */
#ContainerLearn nav .top a,#ContainerSub nav .top a{
    width: 80%;
    background:url(../img/common/icon-navi_01.png) 8px 50% no-repeat #ebebeb;
    padding: 16px 8px 16px 64px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 133.3%; /* 16px */
    color: #000;
}
#ContainerLearn nav .top a:hover,#ContainerSub nav .top a:hover{
    opacity: 0.5;
}

/* コース検索 */
#ContainerLearn nav .course a,#ContainerSub nav .course a{
    width: 80%;
    background:url(../img/common/icon-navi_02.png) 8px 50% no-repeat #ebebeb;
    padding: 16px 8px 16px 64px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 133.3%; /* 16px */
    color: #000;
}
#ContainerLearn nav .course a:hover,#ContainerSub nav .course a:hover{
    opacity: 0.5;
}

/* 成長記録（下層アリ） */
#ContainerLearn nav .grow summary,#ContainerSub nav .grow summary{
    width: 80%;
    background:url(../img/common/icon-navi_03.png) 8px 50% no-repeat;
    padding: 16px 8px 16px 64px;
    /* margin-bottom: 8px; */
    border-radius: 4px;
    font-size: 133.3%; /* 16px */
    color: #000;   
    background-color: #ebebeb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    cursor: pointer;
}
#ContainerLearn nav .grow summary:hover,#ContainerSub nav .grow summary:hover{
    cursor:pointer;
    opacity: 0.5;
}

/* 通知 */
#ContainerLearn nav .info a,#ContainerSub nav .info a{
    width: 80%;
    background:url(../img/common/icon-navi_04.png) 8px 50% no-repeat #ebebeb;
    padding: 16px 8px 16px 64px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 133.3%; /* 16px */
    color: #000;   
}
#ContainerLearn nav .info a:hover,#ContainerSub nav .info a:hover{
    opacity: 0.5;
}

/* 設定（下層アリ） */
#ContainerLearn nav .setting summary,#ContainerSub nav .setting summary{
    width: 80%;
    background:url(../img/common/icon-navi_05.png) 8px 50% no-repeat;
    padding: 16px 8px 16px 64px;
    /* margin-bottom: 8px; */
    border-radius: 4px;
    font-size: 133.3%; /* 16px */
    color: #000;
    background-color: #ebebeb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    cursor: pointer;
}

#ContainerLearn nav .setting summary:hover,#ContainerSub nav .setting summary:hover{
    cursor:pointer;
    opacity: 0.5;
}


/* ▼▼▼ナビ展開時（下層アリのデザイン）▼▼▼ */
/* ナビ展開時 */
#ContainerLearn nav .NavOpen ul,#ContainerSub nav .NavOpen ul{
  margin-bottom: 8px;
}
#ContainerLearn nav .NavOpen li,#ContainerSub nav .NavOpen li{
    width: 80%;
  padding: 8px 8px 8px 64px;
  background-color: #ebebeb;
  font-size: 116.7%; /* 14px */
  margin-top: -2px;
}
#ContainerLearn nav .NavOpen li:last-child,#ContainerSub nav .NavOpen li:last-child{
   border-radius: 0 0 4px 4px; /* 最後だけ角丸 */
}

#ContainerLearn nav .NavOpen a,#ContainerSub nav .NavOpen a{
  color: #000; 
}

#ContainerLearn nav .NavOpen li:hover,#ContainerSub nav .NavOpen li:hover{
    cursor:pointer;
    opacity: 0.5;
}

.NavOpen:not([open]) {
    margin-bottom: 8px;
}

.NavOpen summary::-webkit-details-marker {
    display: none;
}

.NavOpen summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    content: '';
    transition: transform .3s;
}

.NavOpen[open] summary::after {
    transform: rotate(225deg);
}


/* 場所の調整 */
.nav_content{
    padding: 64px 24px 24px 40px;
}



/******************************

全ページ共通:SPハンバーガーメニュー

******************************/
/* ▼▼▼ハンバーガーメニューの動きに関するCSS▼▼▼ */
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}


/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  top: 100px;
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: fixed; 
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
  background-color: #fff;
  opacity: 0.8;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 90%;
  position: fixed;
  top: 100px;
  right: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #fff;
  transition: .5s;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  right: 0;/* メニューを画面に入れる */
}




/******************************

index.html トップページ用css

******************************/
/* スライダー大枠部分 */
#ContainerLearn #SliderBox,#ContainerSub #SliderBox{
   /* width: 77.5%;  width: 992px; */
    padding: 24px 32px 48px;
    background-color: #edf5eb;
    border-radius: 8px;
    margin-bottom: 48px;
}

/******************************
Swiper（スライダー）用css
******************************/
/* 複数枚表示  */
.multi-swiper {
    width: 100%;
    max-width: 959px;
    margin: 0 auto;
}
/* ▼▼▼左右の矢印・ページネーションを外に出す▼▼▼ */
#slider {
  margin-inline: auto;
  max-width: 959px;
  position: relative;
  height: auto; 
}
#SliderBox{
	--swiper-navigation-color: green; /* 矢印の色 */
}
/* 前への矢印 */
.swiper-button-prev {
  left: -50px !important;
  padding: 8px;
}
/* 次への矢印 */
.swiper-button-next {
  right: -50px !important;
  padding-right: 8px;
}
/* ページネーション */
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: -25px;

  margin-top: 100px;
}



/* ▼▼▼左右の矢印・ページネーションのカスタマイズ▼▼▼ */
/* 左右の矢印カスタマイズ */
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 1.0rem;
    color: #3e7d31;
    font-weight: 900;
}

/* ページネーションのデザイン変更基本スタイル */
.swiper-pagination-bullet {
  background-color: #3e7d31;
  border-radius: 0;
  width: 32px;
  height: 5px;
}



/* ▼▼▼画像の表示▼▼▼ */
/* 左右を薄く、中央画像を拡大 */
.swiper-slide {
  opacity: .3; /* 左右のスライドを薄くする */
 transform: scale(.9);  /* 左右のスライドを小さくする */
  transition: .7s;  /*ゆっくり小さくさせる */
}
.swiper-slide img {
  height: auto;
  width: 100%;
  position: relative;
  z-index: 0; 
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.swiper-slide-active {
  opacity: 1; /* 中央のスライドは薄くしない */
  transform: scale(1);   /*中央のスライドは小さくしない */
  position: relative;
  z-index: 0; /* 中央のスライドを一番上にする */
  aspect-ratio: 16 / 9;
  object-fit: contain;
}





/******************************
カードタイプデザインcss
******************************/
/* ▼▼▼カード部分の各ボックス▼▼▼ */
/* 受講を再開する大枠*/
#ContainerLearn .CourseBox-Green{
  /* width: 77.5%;  width: 992px; */
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #3e7d31;
  margin-bottom: 32px;

}
/* 受講中のコース 受講中の学習パス大枠*/
#ContainerLearn .CourseBox,#ContainerSub .CourseBox-Subtop{
  /* width: 77.5%;  width: 992px; */
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #b3b3b3;
  margin-bottom: 32px;
}

/* 内枠の余白 */
#ContainerLearn .inner,#ContainerSub .CourseBox-Subtop .inner{
    padding: 0 0 0 24px;
}

/* h1見出しの色をグリーンに変更 */
#ContainerLearn h1,#ContainerSub .CourseBox-Subtop h1{
    font-size:183.3%; /* 22px */
    font-weight:bold;
    color:#000;
    padding:6px 0 0 13px;
    border-left:solid 2px #3e7d31;
    margin:32px 24px 0px 24px;
    border-bottom: none;/* 下層のh1デザイン打消し用 */
    text-align: left;/* 下層のh1デザイン打消し用 */
    word-break: break-all; 
    overflow-wrap: break-word; 
}

/* 全コース表示ボタン／全学習パス表示ボタン */
.AllCourse{
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  width: 96px;
  height: 28px;
  text-align: center;
  padding: 8px 0 0 0;
  border:solid 1px #3e7d31;
  border-radius: 100px;
  color: #000;
  background-color: #fff;
  margin: 0 24px 8px auto;
  min-width: 96px;
}

.AllCourse:hover {
  opacity: 0.5;
}
.AllCourse:active {
  opacity: 0.5;
}


/* 抽出結果 */
#ContainerLearn .Result,#ContainerSub .CourseBox-Subtop .Result{
    text-align:center;
    font-size: 116.7%; /* 14px */
    font-weight:bold;
    color:#777;
    width:166px;
    height:auto;
    padding:2px 5px 0;
    background:url(../img/common/bg_result.png) left top no-repeat;
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    background-size:100% 100%;
  margin:0px 24px 8px 24px;
}



/* ▼▼▼カードの並び関連▼▼▼ */
#ContainerLearn .flexCard,#ContainerSub .CourseBox-Subtop .flexCard {
    display: flex;
    flex-wrap: wrap;
}
#ContainerLearn .flex-item,#ContainerSub .CourseBox-Subtop .flex-item {
  display: flex;
  flex-direction: column;

  width: 100%;
  border: 1px solid #e6e6e6;  
  border-radius: 8px;
  margin-right: 2.1%; 
  margin-bottom: 16px;
}
#ContainerLearn .flex-item:hover,#ContainerSub .CourseBox-Subtop .flex-item:hover {
  opacity: 0.8;
  cursor: pointer;
}
#ContainerLearn .flex-ItemPhoto img,#ContainerSub .CourseBox-Subtop .flex-ItemPhoto img{
  width: 100%;
  border-radius: 8px 8px 0 0; 
  aspect-ratio: 16/9;
  object-fit: contain;
}



/* ▼▼▼カードのボックス内部のパーツ▼▼▼ */
/* 見出し */
#ContainerLearn .title,#ContainerSub .CourseBox-Subtop .title{
  padding: 8px;
  word-break: break-all;
}
/* 日付と指定受講の横並び */
#ContainerLearn .flex-item ul,#ContainerSub .CourseBox-Subtop .flex-item ul{
  display: block;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  }
/* 日付 */
#ContainerLearn .day-calendar,#ContainerSub .CourseBox-Subtop .day-calendar {
  width: 80px;
  height: 20px;
  font-size: 83.3%;  /*10px*/
  padding: 4px 2px 2px 24px;
  margin: 0 0 4px 4px;
  background: url(../img/common/icon-calendar.png) top 4px left 8px no-repeat;  
  background-color: #ebebeb;
  background-size: 14%;
  border-radius: 100px;
}
/* 指定受講 */
#ContainerLearn .check,#ContainerSub .CourseBox-Subtop .check{
  width: 50px;
  height: auto;
  padding: 2px 8px 2px 8px;
  margin: 0 0 8px 4px;
  background-color: #f48200;
  border-radius: 100px;
  color: #fff;
}

/* ▼▼▼もっと見るボタン 開閉なし▼▼▼ */
.more-course-button {
  display: inline-block;
  width: 100%;
  height: auto;
  background-color: #edf5eb;
  color: #3e7d31;
  text-align: center;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.3s;
  padding: 8px 0;
}
.more-course-arrow {
  background: url(../img/common/icon-more-on.png) no-repeat;
  background-position: 100% 50%;
  padding: 10px;
}


/* ▼▼▼もっと見る　開閉css▼▼▼ */
.more-toggle,
.hidden-content {
  display: none;
}

.more-toggle:checked ~ .hidden-content {
  display: block;
}

.more-button {
  display: inline-block;
  width: 100%;
  height: auto;
  background-color: #edf5eb;
  color: #3e7d31;
  text-align: center;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.3s;
  padding: 8px 0;
}

.more-button::before {
  content: 'もっと見る';
  background: url(../img/common/icon-more-on.png) 104px center no-repeat;
  padding: 40px;
}
.more-button:hover {
  opacity: 0.7;
}
.more-button:active {
  opacity: 0.4;
}

.more-toggle:checked ~ .more-button::before {
  display: none;

}

.more-toggle:checked ~ .more-button {
  background-color: #fff;
  pointer-events:none;/*リンクを非リンクに変える*/
  cursor:default;/*マウスカーソルを矢印のまま変えない*/

}


/* ★★★2つ目の時（内容は上記と同じ）★★★ */
/* ▼▼▼もっと見る　開閉css▼▼▼ */
.more-toggle2,
.hidden-content2 {
  display: none;
}

.more-toggle2:checked ~ .hidden-content2 {
  display: block;
}

.more-button2 {
  display: inline-block;
  width: 100%;
  height: auto;
  background-color: #edf5eb;
  color: #3e7d31;
  text-align: center;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.3s;
  padding: 8px 0;
}

.more-button2::before {
  content: 'もっと見る';
  background: url(../img/common/icon-more-on.png) 104px center no-repeat;
  padding: 40px;
}
.more-button2:hover {
  opacity: 0.7;
}
.more-button2:active {
  opacity: 0.4;
}

.more-toggle2:checked ~ .more-button2::before {
  display: none;

}

.more-toggle2:checked ~ .more-button2 {
  background-color: #fff;
  pointer-events:none;/*リンクを非リンクに変える*/
  cursor:default;/*マウスカーソルを矢印のまま変えない*/
}



/* ★★★3つ目の時（内容は上記と同じ）★★★ */
/* ▼▼▼もっと見る　開閉css▼▼▼ */
.more-toggle3,
.hidden-content3 {
  display: none;
}

.more-toggle3:checked ~ .hidden-content3 {
  display: block;
}

.more-button3 {
  display: inline-block;
  width: 100%;
  height: auto;
  background-color: #edf5eb;
  color: #3e7d31;
  text-align: center;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.3s;
  padding: 8px 0;
}

.more-button3::before {
  content: 'もっと見る';
  background: url(../img/common/icon-more-on.png) 104px center no-repeat;
  padding: 40px;
}
.more-button3:hover {
  opacity: 0.7;
}
.more-button3:active {
  opacity: 0.4;
}

.more-toggle3:checked ~ .more-button3::before {
  display: none;

}

.more-toggle3:checked ~ .more-button3 {
  background-color: #fff;
  pointer-events:none;/*リンクを非リンクに変える*/
  cursor:default;/*マウスカーソルを矢印のまま変えない*/
}





/******************************

下層共通css

******************************/
/* ▼▼▼基本設定▼▼▼ */
/* h1見出し　下層共通 */
#ContainerSub h1{
    font-size:183.3%; /* 22px */
    font-weight:bold;
    color:#000;
    border-bottom:solid 1px #b3b3b3;
  padding:0 0 0 13px;
    margin:0px 0px 32px 0px;
  text-align: center;
}

/* ぱんくずリスト */
#ContainerSub .pankuzu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;/* 右寄せ */
  list-style: none;
  font-size: 116.7%; /* 14px */
  margin-left: 88px;
}
#ContainerSub .pankuzu li:not(:last-of-type)::after {
  content: "›";
  margin: 0 .6em; /* 記号の左右の余白 */
  color: #000000; /* 記号の色 */
}

#ContainerSub .pankuzu a{
  text-decoration: underline;
}

#ContainerSub .pankuzu li:first-child {
  background: url(../img/common/icon-home.png) top 4px left no-repeat;
  padding-left: 24px;
}

/* フォントサイズ */
.font75{
    font-size:75%; /* 12px */
}

/* フォントサイズ */
.font150{
    font-size:150%;  /* 18px */
}

/* 改行（PCでは無効・SPのみ有効） */
.SP-br{
    display: block;
}


/* ▼▼▼フォーム▼▼▼ */
/* 必須 */
#ContainerSub .indispensable {
  background-color: #e54c2e;
  padding: 0px 4px;
    font-size:66.7%; /* 8px */
  color: #fff;
  margin-left: 8px;
  display: inline-block;
  margin-bottom: 8px;
  vertical-align: bottom;
}

/* 任意*/
#ContainerSub .any {
  background-color: #1886b8;
  padding: 0px 4px;
    font-size:66.7%; /* 8px */
  color: #fff;
  margin-left: 8px;
  display: inline-block;
  margin-bottom: 8px;
  vertical-align: bottom;
}
/* 任意（白）*/
#ContainerSub .any-white {
  background-color: #3e7d31;
  padding: 0px 4px;
    font-size:66.7%; /* 8px */
  color: #fff;
  margin-left: 8px;
  display: inline-block;
  margin-bottom: 8px;
  vertical-align: bottom;
  border: 1px solid #fff;
}



/* ▼▼▼ボタン▼▼▼ */
/* ボタンデザイン（標準：オレンジ矢印） */
.BT-orange {
   position: relative;
    background-color: #e5ba2d;
    color: #000; 
    padding: 15px 32px 15px 40px; 
    text-align: center; 
    text-decoration: none;
    display: inline-block; 
    font-size: 133.3%; 
    margin: 4px 2px; 
    cursor: pointer; 
    border: none; 
    border-radius: 5px; 

    box-shadow: 2px 2px 4px gray;
    white-space: nowrap;
    /* width: 100%; */
}
.BT-orange::before { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px; /* ②棒が長くなった分、右へ7px移動 */
  width: 8px;
  height: 8px;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  transform: rotate(45deg);
}
.BT-orange::after { /* 棒の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  width: 20px; /* ①棒の長さを15⇒20pxに変更 */
  height: 3px;
  background: #000;
}

.BT-orange:hover {
  opacity: 0.5;

}

.BT-orange:disabled {
  opacity: 0.5;
}

/* ボタンデザイン（解約系：ブルー矢印） */
.BT-blue {
   position: relative;
    background-color: #006897;
    color: #fff; 
    padding: 15px 32px 15px 32px; 
    text-align: center; 
    text-decoration: none;
    display: inline-block; 
    font-size: 133.3%; 
    margin: 4px 2px; 
    cursor: pointer; 
    border: none; 
    border-radius: 5px; 
    box-shadow: 2px 2px 4px gray;
    white-space: nowrap;
}
.BT-blue:hover {
  opacity: 0.5;
}


/* ボタンデザイン（抽出：グリーン矢印） */
.BT-green {
   position: relative;
    background-color: #3e7d31;
    color: #fff; 
    padding: 8px 32px 8px 32px; 
    text-align: center; 
    text-decoration: none;
    display: inline-block; 
    font-size: 133.3%; 
    margin: 4px 2px; 
    cursor: pointer; 
    border: none; 
    border-radius: 5px; 
    box-shadow: 2px 2px 4px gray;
    white-space: nowrap;
}
.BT-green:hover {
  opacity: 0.5;
}





/* チェックボックスがonの時押せるボタン */
.interlock{ /* チェックを入れてないとき */
  pointer-events: none; /*クリックをキャンセル*/
  color: #000; 
  opacity: 0.5;
}
#Check-ONOFF:checked ~  .interlock {  /* チェックを入れたとき */
  pointer-events: auto; /*キャンセルを解除*/
  opacity: 1;
}
.Check-ONOFFbox a,.Check-ONOFFbox span {
   font-size: 150%;  /* 18px */
    margin-bottom: 16px;
    display: inline-block;
    margin-left: 8px;
    margin-top: 2px;
}
.Check-ONOFFbox input[type=checkbox] {
  transform: scale(1.2);
}
.Check-ONOFFbox {
  border: none;
}



/* 戻るボタンデザイン */
.BT-back {
   position: relative;
    background-color: #ffedb3;
    color: #000; 
    padding: 15px 32px 15px 48px; 
    text-align: center; 
    text-decoration: none;
    display: inline-block; 
    font-size: 133.3%; 
    margin: 4px 2px; 
    cursor: pointer; 
    border: none; 
    border-radius: 5px; 
    box-shadow: 2px 2px 4px gray;
    white-space: nowrap;
    width: auto;
}
.BT-back::before { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px; /* ②棒が長くなった分、右へ7px移動 */
  width: 8px;
  height: 8px;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  transform: translateX(25%) rotate(-135deg);
}
.BT-back::after { /* 棒の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  width: 20px; /* ①棒の長さを15⇒20pxに変更 */
  height: 3px;
  background: #000;
}
.BT-back:hover {
  opacity: 0.5;

}



/* 閉じるボタンデザイン */
.BT-close {
  /* display: block; */
   position: relative;
   background-color: #f2f2f2;
   color: #000; 
   padding: 15px 32px 15px 48px; 
   text-align: center; 
   text-decoration: none;
   display: inline-block; 
   font-size: 133.3%; 
   margin: 4px 2px; 
   cursor: pointer; 
   border: none; 
   border-radius: 5px; 
   box-shadow: 2px 2px 4px gray;
   white-space: nowrap;

}
.BT-close::before, .BT-close::after { 
  content: "";
  position: absolute;
  top: 50%;
  left: 20%;
  width: 3px; /* 棒の幅（太さ） */
  height: 16px; /* 棒の高さ */
  background: #333;
}
.BT-close::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
 
.BT-close::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}
.BT-close:hover {
  opacity: 0.5;
}

.BT-red {
	position: relative;
	background-color: #ff6200;
    color: #000; 
    padding: 15px 32px 15px 40px; 
    text-align: center; 
    text-decoration: none;
    display: inline-block; 
    font-size: 133.3%; 
    margin: 4px 2px; 
    cursor: pointer; 
    border: none; 
    border-radius: 5px; 
    box-shadow: 2px 2px 4px gray;
    white-space: nowrap;
}

.BT-red::before {
	content: "";
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 20px;
	width: 8px;
	height: 8px;
	border-top: 3px solid #000;
	border-right: 3px solid #000;
	transform: rotate(45deg);
}

.BT-red::after {
	content: "";
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 12px;
	width: 20px;
	height: 3px;
	background: #000;
}

.BT-red:hover {
	opacity: 0.5;
}

.BT-red:disabled {
	opacity: 0.5;
}

/* ▼▼▼ボタンの並べ方パターン▼▼▼ */
/* ①複数ボタン最初だけ左寄せ、その他は右寄せに */
.ButtonCenter{
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.frameLeft{
  margin-right:auto;
}
.ButtonCenter .BT-orange {
  width: 100%;  /* 数が多い時は横幅いっぱい表示 */
}



/* ②戻るともう1つの時（ボタン×2）用 */
.ButtonBoth{
  display: flex;
  justify-content: flex-end;
  align-items: flex-start
}
.frameLeft{
  margin-right:auto;
}

/* ③センター揃え */
.Button-a-Center{
  text-align: center;
}


/* ▼▼▼pagetopボタン▼▼▼ */
/* learningフォルダ内の横幅をautoに上書き */
.btnTop {
  width: auto;
  margin: 7px auto;
  text-align: right;
}





/******************************

no04.html～no07.html 用css

******************************/

/* #ContainerSub .ContractBox{
  margin-left: 0px;
} */

/* ▼▼▼ご契約プラン／価格（税込）▼▼▼ */
.annotation {
    margin-bottom: 60px;
	color: #585858;
	font-size: 126%;
	text-align: center;
}

.FlexPlan{
  display: block;
  margin-bottom: 20px;
}
.FlexPlan .plan{
  width: 100%;
  height: 104px;
  background-color: #fff;
  border: 1px solid #b3b3b3;
  position: relative;
  margin-bottom: 16px;

  /* 上下左右中央寄せ */
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.FlexPlan .price{
  width: 100%;
  height: 104px;
  background-color: #fff;
  border: 1px solid #b3b3b3;
  position: relative;
  margin-bottom: 16px;

  /* 上下左右中央寄せ */
  display: flex;
  align-items: center;
  justify-content: center;
}

.price_value_text {
  margin-bottom: 35px;
}

/*価格説明*/
.price_explain,
.price_explain_update {
  position: absolute;
  bottom: 4px;
  left: 8px;
  font-weight: normal !important;
  font-size: 100%;
  color: #585858;
}

.FlexPlan .plan h2,.FlexPlan .price h2{
  position: absolute;
  top: 0;
  /* left: 40%; */
  font-size: 150%;  /* 18px */
  font-weight: bold;
  padding: 0 16px;
  margin: 0;
  background-color: #FFFFFF;
  transform: translateY(-50%) translateX(0);
}
.FlexPlan .plan p, .FlexPlan .price p{
  font-size: 150%;  /* 18px */
  color: #3e7d31;
  padding: 0 8px;
  font-weight: bold;
}



/* ▼▼▼利用開始日▼▼▼ */
.StartBox {
  background-color: #ebebeb;
  padding: 15px 15px 15px 15px;
  margin-bottom: 30px;
}
.StartBox p{
  font-size: 150%;  /* 18px */
    font-weight: bold;
}
.StartBox .textbox {
    width: 110px;
    padding: 10px 8px;
    border: 1px solid #969da3;
    border-radius: 3px;
    color: #3e7d31;
    text-align: center;
    font-size: 150%;  /* 18px */
    margin-bottom: 8px;
}
.StartBox .textbox::placeholder {
    color: #999;
}
.StartBox span{
  font-size: 150%;  /* 18px */
}
/* 入力済のグレーボックス */
.StartBox .Entered{
  background-color: #ebebeb;
}

/* ▼▼▼利用人数▼▼▼ */
.PeopleBox {
  background-color: #ebebeb;
  padding: 15px 15px 15px 15px;
  height: auto;
  margin-bottom: 30px;
}
.PeopleBox p{
  font-size: 150%;  /* 18px */
    font-weight: bold;
}
.PeopleBox .textbox {
    width: 90px;
    padding: 10px 10px;
    border: 1px solid #969da3;
    border-radius: 3px;
    color: #3e7d31;
    text-align: center;
    font-size: 150%;  /* 18px */
}
.PeopleBox .textbox::placeholder {
    color: #999;
}

.PeopleBox span{
    font-size: 133.3%; /* 16px */
    vertical-align: bottom;
}
/* 入力済のグレーボックス */
.PeopleBox .Entered{
  background-color: #ebebeb;
}


/* ▼▼▼決済方法▼▼▼ */
.PayBox {
  background-color: #ebebeb;
  padding: 15px 15px 15px 15px;
  /* width: 60%; */
  height: auto;
  margin-bottom: 30px;
}
.PayBox p{
    font-size: 150%;  /* 18px */
    font-weight: bold;
}
.PayBox .radiobt label{
  margin-right: 4px;
  font-size: 150%;  /* 18px */
  margin-top: 2px;
}

.PayBox fieldset{
  border: none;
}



/* ▼▼▼個人情報入力欄▼▼▼ */
/* 入力済のグレーボックス */
.PersonalBox .Entered{
  background-color: #ebebeb;
}

/* 通常の入力ボックス */
.PersonalBox p{
    font-size: 150%;  /* 18px */
    font-weight: bold;
}
.PersonalBox .textbox {
    width: 96%;
    padding: 10px 2%;
    border: 1px solid #969da3;
    border-radius: 3px;
    font-size: 150%;  /* 18px */
    margin-bottom: 30px;
    min-height: 30px;
}

.PersonalBox .selectbox {
    max-width: 350px;
    padding: 2px 1%;
	margin-left: 10px;
}

.PersonalBox .textbox::placeholder {
    color: #999;
}


/* アコーディオン */
.PersonalBox .accordion {
    width: 100%;/* max-width: 920px; */
    background-color: #f2f2f2;
    margin-bottom: 64px;
}

.PersonalBox .accordion:not([open]) {
    margin-bottom: 64px;
}

.PersonalBox .accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    border-radius: 5px;
    background-color: #cbe5c6;
    color: #000000;
    font-weight: bold;
    cursor: pointer;
    font-size: 150%;  /* 18px */
}
.PersonalBox .accordion span{
    margin: 0 auto;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.PersonalBox .accordion summary::before,
.PersonalBox .accordion summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: #000;
    content: '';
}

.PersonalBox .accordion summary::before {
    position: absolute;
    right: 2em;
    rotate: 90deg;
}

.accordion summary::after {
    transition: rotate .3s;
}

.PersonalBox .accordion[open] summary::after {
    rotate: 90deg;
}

.PersonalBox .accordion p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1em 2em 2em 2em;
    color: #000;
    transition: transform .5s, opacity .5s;
    font-size: 133.3%; /* 16px */
    font-weight: normal;
}

.PersonalBox .accordion[open] p {
    transform: none;
    opacity: 1;
}

.PersonalBox .nextChargeAccordion {
    width: 100%;/* max-width: 920px; */
    background-color: #f2f2f2;
    margin-bottom: 30px;
}

.PersonalBox .nextChargeAccordion:not([open]) {
    margin-bottom: 30px;
}

.PersonalBox .nextChargeAccordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    border-radius: 5px;
    background-color: #cbe5c6;
    color: #000000;
    font-weight: bold;
    cursor: pointer;
    font-size: 166.7%;  /* 20px */
}

.PersonalBox .nextChargeAccordion span{
    margin: 0 auto;
}

.nextChargeAccordion summary::-webkit-details-marker {
    display: none;
}

.PersonalBox .nextChargeAccordion summary::before,
.PersonalBox .nextChargeAccordion summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: #000;
    content: '';
}

.PersonalBox .nextChargeAccordion summary::before {
    position: absolute;
    right: 2em;
    rotate: 90deg;
}

.nextChargeAccordion summary::after {
    transition: rotate .3s;
}

.PersonalBox .nextChargeAccordion[open] summary::after {
    rotate: 90deg;
}

.PersonalBox .nextChargeAccordion p {
    font-size: 166.7%;  /* 20px */
    font-weight: bold;
}

.PersonalBox .nextChargeAccordion[open] p {
    transform: none;
    opacity: 1;
}

.PersonalBox .nextChargeAccordion .nextChargeContent{
    margin: 30px
}

.PersonalBox .nextChargeAccordion .fromTo {
    padding: 10px 2%;
    font-size: 150%;  /* 18px */
    margin-bottom: 30px;
    min-height: 30px;
}

/* チェックボックス */
.PersonalBox .checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: .5em 2em;
    border: none;
    font-size: 133.3%; /* 16px */
    margin-bottom: 40px;
}

.PersonalBox .checkbox label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;

    margin: 0 auto;

}

.PersonalBox .checkbox label::before {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 2px solid #d6dde3;
    content: '';
}

.PersonalBox .checkbox label:has(:checked)::after {
    position: absolute;
    top: 5px;
    left: 7px;
    transform: rotate(45deg);
    width: 5px;
    height: 10px;
    border: solid #1886b8;
    border-width: 0 3px 3px 0;
    content: '';
}

.PersonalBox .checkbox input {
    display: none;
}

.PayBox input[type="radio"] ,
.PersonalBox input[type="radio"] {
    margin-right: 5px;
}




/******************************

no08.html～no09.html 用css

******************************/
/* #ContainerSub .ControlBox{
  margin-left: 0px;
} */

/* 学習パス概要／得られるスキル／スキルポイント　大枠 */
#ContainerSub .Learn{
  background-color: #edf5eb;
  position: relative;
  padding: 48px 24px;
  margin-bottom: 24px;

}

/* 大枠中央の飾り用（緑ライン） */
#ContainerSub .Learn:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 3px;
  background-color: #3e7d31;
}

/* ▼▼▼基本設定▼▼▼ */
/* 見出し */
#ContainerSub .Learn h2{
  font-size: 166.7%;  /* 20px */
  font-weight: bold;
}
/* 本文 */
#ContainerSub .Learn p{
  font-size: 133.3%; /* 16px */ 
  margin-bottom: 40px; 
}

/* ▼▼▼トータル学習時間▼▼▼ */
/* トータル学習時間大枠 */
.TotalTime{
  background-color: #fff;
  width: auto;
  height: auto;
  margin-bottom: 80px;
  display: flex;
  font-size: 150%;  /* 18px */
  justify-content: flex-end;
}

/* トータル学習時間／学習時間ボックス */
.TotalTime ul{
  width: 100%;
  height: auto;
  text-align: center;
  padding: 32px;
}
.TotalTime li:nth-child(1){
  font-weight: bold;
}
.TotalTime li:nth-child(2){
  font-weight: bold;
  color: #3e7d31;
}


/* ▼▼▼構成のボックス内▼▼▼ */
/* 構成①～③ */
.LearnBox{
  margin-bottom: 80px;
}
.LearnBox:last-child{
  margin-bottom: 0px;
}


/* 見出し */
.LearnBox h2{
  background-color: #3e7d31;
  color: #fff;
  padding: 8px 24px;
}

.LearnBox .inner{
  background-color: #fff;
  padding: 40px 24px 48px 24px;
}

.LearnBox h3{
  font-size: 150%;  /* 18px */
  font-weight: bold;
}

.LearnBox p{
  padding-bottom: 8px;
  border-bottom: 1px solid #d9d9d9;
}


/* トータル学習時間／学習時間ボックス　色だけ変える */
.LearnBox .TotalTime{
  margin-top: 40px;
  background-color: #f0f0f0;
  margin-bottom: 0px;
}





/* ▼▼▼受講完了目標日▼▼▼ */
.LearnGoal{
  border: 1px solid #3e7d31;
  padding: 24px;
  margin: 0 0 16px 0;
  width: auto;
}
.LearnGoal .textbox {
    width: 96%;
    padding: 16px 2%;
    border: 1px solid #969da3;
    border-radius: 3px;
    font-size: 150%; /* 18px */
    color: #3e7d31;
}
.LearnGoal .textbox::placeholder {
    color: #999;
}



/* ▼▼▼コーチへの進捗共有▼▼▼ */
.LearnCoach{
  border: 1px solid #3e7d31;
  padding: 24px;
  margin: 0 0 16px 0; 
  width: auto;
  display: flex;
}
.LearnCoach h2{
  margin-right: 8px;
  white-space: nowrap;
}



/* ▼▼▼フォロー設定▼▼▼ */
.LearnFollow{
  border: 1px solid #3e7d31;
  padding: 24px;
  display: flex;
}
.LearnFollow h2{
  margin-right: 8px;
  display: inline;
}

.FollowInput{
  font-size: 150%;  /* 18px */
  margin-top: 24px;
}

.PlusBT{
  padding:4px 10px;
  margin: 4px 4px;
  border: 1px solid #b3b3b3;
  border-radius: 4px;
  background-color: #f2f2f2;
  color: #000;
}

.PlusBT a{
  color: #000;
  vertical-align: baseline;
}

.LearnFollow .textbox{
    width: 10%;
    padding: 16px 2%;
    border: 1px solid #969da3;
    border-radius: 3px;
    color: #3e7d31;
    margin-bottom: 16px;
}

.LearnFollow .textbox::placeholder {
    color: #999;
}

.LearnFollow .submit{
  padding:10px 24px;
  margin: 4px 4px;
  border: 1px solid #b3b3b3;
  border-radius: 4px;
  background-color: #f2f2f2;
  color: #000;
  display: block;
  margin: 0 auto;
}
.LearnFollow .submit:hover{
  opacity: 0.5;
}





/******************************

下層共通css
no2-02.html～no2-09.html 用css

******************************/
.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}

.text-center{
    text-align: center;
}

.text-red{
  color: #e54c2e;
}


/* ▼▼▼ページャー▼▼▼ */
.ResultBox{
  padding: 0 24px;
  margin-bottom: 16px;
}

.PagerLink{
  position: relative; 
  overflow: hidden; /* スクロールバー防止 */
}
.PagerLink ul{
  position: relative;
  left: 50%; /* リスト全体であるul要素を右に50%移動（中央へ） */
  float: left;
}

.PagerLink li{
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  width: 40px;
  height: 24px;
  text-align: center;
  padding: 2px 0 0 0;
  border: solid 1px #d9d9d9;
  border-radius: 100px;
  color: #777777;
  background-color: #fff;
  margin-left: 4px;

  position: relative;
  left: -50%; /* 左に50%移動 */
  float: left;

}

/* 表示ページ/総件数部分 */
.PagerLink li.page{
  width: auto; /* 表示ページの桁数が可変のため */
  padding: 2px 5px 0 5px;
}

.PagerLink li a{
  display: block;
  width: 100%;
  color: #777777;
}
.ResultBox .Page-Width{
  width: 80px;
  font-weight: bold;
  cursor: default;
}


/* ▼▼▼抽出結果とチェックボックスの横並び▼▼▼ */
.Result-R{
  text-align: center;
}

/* チェックボタン　未申込/申込済み */
.Result-R dd{
  font-size: 133.3%; /* 16px */
  margin: 16px 24px 8px 0;
  display: inline-block;
}

.Result-R dd input{
  margin-right: 8px;
}

.Result-R p{
  margin-right: 8px;
  display: inline-block;
}

.icon-vertical{
  border-right:solid 1px #ccc;
  padding-right: 24px;
}

/* 表示切替ボタン */
.DisplaySwitch{
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  width: 104px;
  height: 20px;
  text-align: center;
  padding: 2px 0 0 0;
    border:solid 1px #3e7d31;
  border-radius: 100px;
  color: #000;
  background-color: #fff;

  margin-bottom: 24px;
}
.DisplaySwitch:hover {
  opacity: 0.5;
}
.DisplaySwitch:active {
  opacity: 0.5;
}





/******************************

no2-02.html 用css

******************************/
/* ▼▼▼通知一覧▼▼▼ */
#NoticeBox{
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #b3b3b3;
  margin-bottom: 32px;
}


/* ▼▼▼既読状態のチェックボックス部分▼▼▼ */
#NoticeBox .ReadBox{
  background-color: #ebebeb;
  border-radius: 8px 8px 0px 0px;
  padding: 16px 0;
  margin-bottom: 16px;
  text-align: center;
}
.ReadBox dl{
  display: flex;
  justify-content:center; 
}

.ReadBox dt{
  font-size: 150%;  /* 18px */
  font-weight: bold;
  margin-right: 24px;
}
.ReadBox dd{
  font-size: 133.3%; /* 16px */
  margin-right: 16px;
}

.ReadBox dd input{
  margin-right: 8px;
}



/* ▼▼▼抽出された結果一覧▼▼▼ */
.ResultBox{
  padding: 0 16px;
}


/* ▼▼▼ 抽出結果とページャーの横並び  ▼▼▼ */
/* 抽出結果 */
#NoticeBox .ResultBox .Result{
  font-size: 116.7%; /* 14px */
  font-weight:bold;
  text-decoration: none;
  width:166px;
  height: 24px;
  text-align: center;
  padding: 2px 0 0 0;
  border: solid 1px #d9d9d9;
  border-radius: 100px;
  color: #777777;
  background-color: #fff;
  /* margin:0px 24px 24px 32px; */

}

#NoticeBox .ResultBox .Result {
  margin: 0 auto;
  margin-bottom: 16px;
}

/* 「抽出結果」の下を明ける　※SPのみ */
.ResultBox #pagerArea_info1{
  margin-bottom: 8px;
}


/* 元々存在していたcssを流用する為、レスポンシブ用に上書き追記 */
.ResultBox .pagerArea{
    width:auto;
  border:none;
  margin-bottom: 16px;
  padding: 0;
}

.ResultBox .pagerArea ul{
    width:auto;
    margin-left: 0;
    margin-right: 0;
  display: inline-block;
}
.ResultBox #page_select1{
  text-align: center;  
}

/* 幅の狭いSPの為にページャーのサイズを変更 */
.ResultBox .pagerArea li.page{
    width:auto !important;
    width:80px;
    min-width:80px;
}


/* ▼▼▼抽出一覧▼▼▼ */
/* ボックスデザイン */
.ResultBox .CourseBox{
  background-color: #edf5eb;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}

.ResultBox .CourseBox .title{
  border-bottom:solid 1px #d9d9d9;
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.TitleFlex{
  /* width: 90%; */
  display: flex;
  justify-content: space-between;
  /* 縦位置を中央に */
  align-items:center; 
}

.ResultBox .CourseBox .title span{
  /* font-size: 116.7%; 14px */
  width: auto;
  height: 20px;
  text-align: center;
  padding: 4px 16px;
  border: solid 1px #3e7d31;
  border-radius: 100px;
  color: #3e7d31;
  background-color: #fff;
  margin: 0 16px 0 0;
  display: inline-block;
}

.ResultBox .CourseBox .title h2{
  font-size: 150%;  /* 18px */
  font-weight: bold;
  margin-top: 8px;
  line-height: 1.4em;
  word-break: break-all;
}

.ResultBox .CourseBox .headLine{
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.ResultBox .CourseBox .headLine p{
  font-size: 116.7%; /* 14px */
}

.ResultBox .CourseBox .headLine #postingTermStart{
  align-self: flex-end;
  color: #595959;
  font-size: 100%; /* 12px */
}

.ResultBox .CourseBox strong{
  font-size: 133.3%; /* 16px */
  font-weight: bold;
  color: #3e7d31;
}




/******************************

no2-04.html 用css

******************************/
/* ▼▼▼タブメニュー▼▼▼ */

#TabMenu{
  display: flex;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 32px;
  padding-top: 64px;
}

#TabMenu ul{
  display: flex;
}

#TabMenu li{
  background-color: #ebebeb;
  /* width: 184px; */
  height: 56px;
  margin-right: 8px;
  font-size: 116.7%; /* 14px */ 
  border-radius: 6px 6px 0 0;
  font-weight: bold;
  text-align: center;
  /* 上下を中央に */
  line-height: 56px;

  padding: 0 8px;
}

#TabMenu li a{
  color: #333333;
  display: block;
  height: 100%;
  width: 100%;
}

#TabMenu .current{
  color: #3e7d31;  
  background-color: #edf5eb;
  border-top: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  border-bottom: 1px solid #edf5eb;  
  border-radius: 6px 6px 0 0;
  
  padding: 0 8px;
  margin-left: -8px;
}

#TabMenu button{
  appearance: none;
  min-width: 128px;
  height: 2.8em;
  border: 1px solid #d0d0d0;
  border-radius: 7px;
  background-color: #0058a2;
  color: #fff;
  font-size: 1em;
  cursor: pointer;
  margin-left: auto;
  position: relative;
  top: 10px;
}

#TabMenu button:hover{
  background-color: #1473c4;
}

/* ▼▼▼コースタグから選ぶ▼▼▼ */
/* 大枠のカラム */
.CourseBox-Subtop .CourseTag{
  width: 96%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 32px;
}

.CourseTag-L{
  width: 8%;
}

.CourseTag-C{
  display: flex;
  flex-wrap: wrap;
  width: 84%;
  padding-left: 8px;
}

.CourseTag-R{
  width: 8%;
}

/* 全コース表示ボタン／全学習パス表示ボタン */
.BT-CourseTag{
  display: flex;
  flex-direction: column;
  width: 44%;
  height: auto;  
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  text-align: center;
  padding: 4px 4px 0 4px;
  border:solid 1px #3e7d31;
  border-radius: 100px;
  color: #000;
  background-color: #fff;
  margin:0 4px 8px 0;
  min-width: 10em;
}
.BT-CourseTag:hover {
  opacity: 0.5;
}
.BT-CourseTag:active {
  opacity: 0.5;
}


/* ▼▼▼「コースタグから選ぶ」の更に下層ページ▼▼▼ */
/* ぱんくずボタン */
#ContainerSub .CourseBox-Subtop .PankuzuBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 左寄せ */
  list-style: none;
  margin-left: 24px;

  align-items: center;  
  margin-top: 16px;
}
#ContainerSub .CourseBox-Subtop .PankuzuBox li:nth-of-type(2n)::after {
  content: "›";
  margin: 0 .6em; /* 記号の左右の余白 */
  color: #000000; /* 記号の色 */
  
}

/* 全コース表示ボタン／全学習パス表示ボタン */
.BT-pankuzu{
  /* display: flex; */
  flex-direction: column;
  /* width: 18%; */
  height: auto;  
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  text-align: center;
  padding: 4px 8px;
    border:solid 1px #3e7d31;
  border-radius: 100px;
  color: #619556;
  background-color: #edf5eb;
  min-width: 10em;
  /* margin:0 4px 8px 0; */
}
.BT-pankuzu:hover {
  opacity: 0.5;
}
.BT-pankuzu:active {
  opacity: 0.5;
}

.CourseBox-Subtop .MoreDown{
  border-bottom: 1px solid #cccccc;
  padding: 16px 0 24px 0;
}

/* 「全コース表示」のみfloatで左寄せ */
.AllCourse-L{
  float: right;
  /* margin: 0; */
  padding: 0;
}
.AllCourse-L .AllCourse{
  margin: 0 24px 0 0;
}



/* ▼▼▼コース名から検索▼▼▼ */
/* 大枠のカラム */
.CourseBox-Subtop .CourseSearch{
  margin: 0 auto;
  margin-top: 16px; 
  margin-bottom: 32px;
  padding: 0 32px;
}

/* 検索ボックス */
.CourseBox-Subtop .CourseSearch .search_container{
  position: relative;
  box-sizing: border-box;
}
.CourseBox-Subtop .CourseSearch .search_container input[type="text"]{
  border: none;
  height: 1.8em;
  width: 100%;
}
.CourseBox-Subtop .CourseSearch .search_container input[type="text"]:focus {
  outline: 0;
}
.CourseBox-Subtop .CourseSearch .search_container{
    border:solid 1px #b3b3b3;
    /* width: 46%; */
    height: 44px;
    padding: 8px 16px;
    border-radius: 100px; 
}
.CourseBox-Subtop .CourseSearch .search_container .courseSearchButton{
  cursor: pointer;
  border: none;
  background: #333333;
  color: #fff;
  position: absolute;
  width: 100px;
  height: 44px;
  right:0px;
  top: 0px;
  outline : none;

  border-radius: 0 100px 100px 0; 
  background-image:url("../img/common/icon-coursesearch.png");
  background-repeat: no-repeat;
  background-position:50% 50%;

}




/******************************

no2-05.html 用css

******************************/
/* ▼▼▼ぱんくず▼▼▼ */
/* ぱんくずリスト */
#ContainerSub .ContractBox .PankuzuList {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-weight:bold;
  font-size: 116.7%; /* 14px */
}
#ContainerSub .ContractBox .PankuzuList li:not(:last-of-type)::after {
  content: "›";
  margin: 0 .6em; /* 記号の左右の余白 */
  color: #000000; /* 記号の色 */
}
#ContainerSub .ContractBox .PankuzuList a{
  text-decoration: underline;
}


/* セレクトボックス（月選択） */
#ContainerSub .ContractBox .Month-Select {
    display: inline-flex;
    align-items: center;
    position: relative;
}
#ContainerSub .ContractBox .Month-Select:after {
    position: absolute;
    right: 16px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}
#ContainerSub .ContractBox .Month-Select select {
    appearance: none;
    min-width: 128px;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    background-color: #fff;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}


/* ぱんくず、月選択横並び */
.SkillPankuzu-L{
  margin-bottom: 8px;
}

.SkillPankuzu-R{
  margin-bottom: 16px;
  text-align: right;
}


/* ▼▼▼テーブル▼▼▼ */
/* テーブル */
#ContainerSub .SkillTable{
    width:100%;
    border-collapse:collapse;
    border: 1px #d9d9d9 solid;
     /* font-size: 133.3%;16px */
  margin-bottom: 48px;
}
#ContainerSub .SkillTable th{
    background:#f2f2f2;
    border-collapse:collapse;
    border: 1px #d9d9d9 solid;
    padding: 8px 8px;
    text-align: center;
}
#ContainerSub .SkillTable td{
    border-collapse:collapse;
    border: 1px #d9d9d9 solid;
    padding: 8px 8px;
    text-align: center;
    word-break: break-all;
}

#ContainerSub .SkillTable .SkillTitleWidth{
  width: 160px;
}
#ContainerSub .SkillTable .SkillWidth{
  width: 30px;
}

/* グラフ */
.skill-w{
  background-color: #3e7d31;
}


/******************************

no2-06.html 用css

******************************/
/* ▼▼▼ボタンの横幅を合わせる▼▼▼ */
/* スキルから選択 */
/* アセスメント結果から選択 */
.ButtonSize .BT-orange{
  width: 200px;
}





/******************************

コース一覧画面

******************************/
/* 2カラムボックス */
.PassColumnBox{
  /* display: flex; */
  padding: 16px;
  border: 1px solid #e6e6e6;  
  border-radius: 8px;
  margin: 0 24px 16px 0;
  color: #585858 !important;
}

.PassColumnBox img{
  width: 100%;
  border: 1px solid #e6e6e6;  
  border-radius: 8px;
  margin: 0 16px 16px 0;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.PassColumnBox dt{
  font-size: 166.7%;  /* 20px */
  font-weight:bold;
  word-break: break-all;
}

.PassColumnBox dd{
  font-size: 133.3%; /* 16px */
}

.contentTop{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1em;
}

.backLearning{
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  width: 84px;
  height: 20px;
  padding: 2px 0 0 0;
  border:solid 1px #3e7d31;
  border-radius: 100px;
  color: #000 !important;
  background-color: #fff;
  position: absolute;
  top: 15px;
  right: 24px;
}

.backLearning:hover {
  opacity: 0.5;
}

.backLearning:active {
  opacity: 0.5;
}

.backLearning2{
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  width: 84px;
  height: 20px;
  padding: 2px 0 0 0;
  border:solid 1px #3e7d31;
  border-radius: 100px;
  color: #000 !important;
  background-color: #fff;
  margin-left: auto;
}

.backLearning2:hover {
  opacity: 0.5;
}

.backLearning2:active {
  opacity: 0.5;
}

/* 日付と指定受講の横並び */
.inner .PassColumnBox ul{
  display: block;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  }

/******************************

no2-08.html 用css
no2-09.html 用css

******************************/
/*コースタイトル*/
.TitleCourseName{
    width:auto; 
  border-radius: 4px;
  border: solid 1px #3e7d31;
  font-size: 150%;  /* 18px */
  font-weight: bold;
  padding: 8px 8px 8px 48px;
  margin-bottom: 24px;
  color: #3e7d31;
  background: url("../img/common/icon-course-bt.png") 8px 10px no-repeat;
  background-color: #edf5eb;
  min-height:30px;
}

.TitleCourseName span{
	word-break: break-all;
}

/*別ウィンドウ表示画面エラー表示*/
.winErrorBox{
  width:auto; 
  border:solid 3px #e60f0f;
  font-size:116.7%; /* 14px */
  padding: 8px;
  margin-bottom: 30px;
  color:#e40000;
  text-align:center;
  line-height:1.5;
}

/* フレックスボックス（このページのみ） */
#ContainerSub .BoxtypeB .flexBox{
    display: flex;
    justify-content:space-between;
    gap:20px;
}

/* フレックスボックス（誕生日） */
#ContainerSub .birthFlexBox{
    display: block;
    gap:10px;
    align-items: center;
}

/* グロナビをグリーンに変更 */
.gNav-Green {
  background: #3e7d31;
}

.gNav-Green ul {
    background: none !important;
    background-color: #3e7d31 !important;
}

.gNav-Green li:hover {
    background: #009c4c;
}

.gNav-Green .gNavIn li {
    background: #009c4c;
}

.gNav-Green .gNavIn li a {
    background: url(../img/common/ico_arrow-right.png) 15px center no-repeat #009c4c;
}

.gNav-Green .gNavIn li a:hover {
    background: url(../img/common/ico_arrow-right.png) 15px center no-repeat #007a3d;
}


/* ▼▼▼ カラムA（通常の2カラム）  ▼▼▼ */
/* テーブル */
#ContainerSub .BoxtypeA{
    width:100%;
    margin-bottom: 24px;
  font-size: 116.7%; /* 14px */
  table-layout: fixed;
}
#ContainerSub .BoxtypeA th{
  width: auto;
  border-radius: 6px 6px 0 0;
  background-color: #e1f5dc;
  font-weight: bold;
  padding: 16px;
  color: #000;
  border: solid 2px #fff;

  display: block;
  border-bottom:none;

  vertical-align: top;
}

#ContainerSub .BoxtypeA td{
  width: auto;
  border-radius: 0 0 6px 6px;  
  background-color: #f0f0f0;
  padding: 16px;
  color: #000;
  border: solid 2px #fff;
    text-align: left;

  display: block;
  border-bottom:none;
}

/*エラー表現（背景色変更）*/
#ContainerSub .BoxtypeA td.error,
#ContainerSub .BoxtypeA td.error div {
  background: #ffe7e7;
}

/*エラー表現（文字色指定）※WYSIWYGのエディタ上は除く*/
td.error p:not(.note-editable *){
    color:#f33232;
    line-height:1.5;
}

/* ▼▼▼ カラムB（見出し2つの3カラム）  ▼▼▼ */
/* テーブル */
#ContainerSub .BoxtypeB{
    width:100%;
    margin-bottom: 16px;
}
#ContainerSub .BoxtypeB th{
  width: 33.3%;
  border-radius: 8px 0 0 8px;
  background-color: #e1f5dc;
  font-weight: bold;
  padding: 16px;
  color: #000;
  border: solid 2px #fff;
  vertical-align: top;
}

#ContainerSub .BoxtypeB td{
  width: 33.3%;
  background-color: #f0f0f0;
  padding: 8px 8px;
  color: #000;
  border: solid 2px #fff;
  text-align: center;
  word-break: break-all;
}

#ContainerSub .BoxtypeB .TH-head1{
  background-color: #2e5c24;
  font-weight: bold;  
  padding: 8px 8px;
  color: #fff;
  border: solid 2px #fff;
  text-align: center;
  border-radius: 8px 0 0 0;    
}


#ContainerSub .BoxtypeB .TH-head2{
  background-color: #2e5c24;
  font-weight: bold;  
  padding: 8px 8px;
  color: #fff;
  border: solid 2px #fff;
  text-align: center;
  border-radius: 0 8px 0 0;  
}

/* 角丸（右下） */
#ContainerSub .BoxtypeB tr:last-child td:last-child{
  border-radius: 0 0 8px 0;
}

#ContainerSub .BoxtypeB .TD-delete{
  background-color: #fff;
}



/* ▼▼▼ カラムC（通常の2カラム縦幅狭めver）  ▼▼▼ */
/* テーブル */
#ContainerSub .BoxtypeC{
  width:100%;
  margin-bottom: 16px;
  font-size: 116.7%; /* 14px */
}

#ContainerSub .BoxtypeC th{
  width: auto;
  border-radius: 8px 8px 0 0;
  background-color: #e1f5dc;
  font-weight: bold;
  padding: 16px;
  color: #000;
  border: solid 2px #fff;
  vertical-align: top;

  display: block;
  border-bottom:none;
  vertical-align: top;
}

#ContainerSub .BoxtypeC td{
  width: auto;
  background-color: #f0f0f0;
  padding: 16px;
  color: #000;
  border: solid 2px #fff;
  text-align: left;
  display: block;
  border-bottom:none;
}

/* 角丸（右下） */
#ContainerSub .BoxtypeC tr:last-child td{
  border-radius: 0 0 8px 8px;
}


/* ▼▼▼ アコーディオン（色などのみ変更）  ▼▼▼ */
.ApplicationBox .PersonalBox .accordion {
  border: solid 1px #b3b3b3;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 32px;
}

.ApplicationBox .PersonalBox .accordion summary {
  background-color: #fff;
}

.ApplicationBox .PersonalBox .accordion summary span {
  margin: 0;
}



/* ▼▼▼  アコーディオン内の編集 ▼▼▼ */
/* tableの横幅調整 */
#ContainerSub .ApplicationBox .PersonalBox .accordion table {
  width: 94%;
  margin: 0 auto;
  margin-bottom: 8px;
}

#ContainerSub .ApplicationBox .PersonalBox .accordion table:last-child {
  margin-bottom: 32px;
}

.ApplicationBox .PersonalBox .accordion:not([open]) {
    margin-bottom: 32px;
}

/* アイコン＋テキスト */
#ContainerSub .BoxtypeC dl{
  display: flex;
}
#ContainerSub .BoxtypeC dt{
  vertical-align:middle;
  margin-right: 8px;
  word-break: break-all;
}
#ContainerSub .BoxtypeC dd{
  margin: 4px 0 0 8px;
  word-break: break-all;
}


/* ▼▼▼  入力情報（フォーム） ▼▼▼ */
/* tableの横幅調整 */
#ContainerSub .CourseBox-Subtop .BoxtypeA {
  width: 94%;
  margin: 0 auto;
}
#ContainerSub .CourseBox-Subtop .BoxtypeA:last-child {
  margin-bottom: 32px;
}


/* フォーム：テキストボックス */
.BoxtypeA .textbox {
    width: 50%;
    padding: 8px;
    border: 1px solid #969da3;
    text-align: center;
}

.BoxtypeA .textbox::placeholder {
    color: #999;
}

/* フォーム：日付テキストボックス */
.BoxtypeA .datetextbox {
    min-height:40px;
    padding-left:8px;
    border: 1px solid #969da3;
}

#ContainerSub .BoxtypeA .indispensable {
  background-color: #e54c2e;
  padding: 0px 4px;
  font-size: 83.3%;  /*10px*/
  color: #fff;
  margin-left: 8px;
  display: inline-block;
  margin-bottom: 4px;
  vertical-align: bottom;
}

/* フォーム：ラジオボタン */
#ContainerSub .CourseBox-Subtop .BoxtypeA .radiobt label {
  margin-right: 24px;
}

/* フォロー設定 */
#ContainerSub .CourseBox-Subtop .BoxtypeA .FollowCount{
  border: 1px solid #fff;
  padding: 16px;
  margin: 8px 0 8px 0;
}

#ContainerSub .CourseBox-Subtop .BoxtypeA .FollowCount .textbox{
  width: 40px;
  text-align: center;
}


/* フォロー設定用「追加ボタン」 */
#ContainerSub .CourseBox-Subtop .BoxtypeA .BT-orange {
  font-size: 100%; 
}

/* ▼▼▼ モーダルウィンドウ  ▼▼▼ */
.modal-wrapper {
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px 10px;
  text-align: center;
}

.modal-button {
   position: relative;
    background-color: #006897;
    color: #fff; 
    padding: 15px 32px 15px 32px; 
    text-align: center; 
    text-decoration: none;
    display: inline-block; 
    font-size: 133.3%; 
    margin: 4px 2px; 
    cursor: pointer; 
    border: none; 
    border-radius: 5px; 
    box-shadow: 2px 2px 4px gray;
    white-space: nowrap;

}


/* モーダルを消す */
.modal-wrapper:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.modal-wrapper:target {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s, visibility .4s;
}

.modal-wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -.05em;
  vertical-align: middle;
  content: ""
}

.modal-wrapper .modal-window {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 90% !important;
  max-width: 800px !important;
  padding: 16px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  vertical-align: middle;
  border-radius: 8px;
}

.modal-wrapper .modal-window .modal-content {
  max-height: 80vh;
  overflow-y: auto;
  text-align: left
}

.modal_title {
  font-size: 1.5em;
    position: relative;
    overflow: hidden;
  padding: 0;
}

.modal_title::before,
.modal_title::after{
    content: "";
    position: absolute;
    bottom: 0;
}

.modal-overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8)
}

.modal-wrapper .modal-close {
  z-index: 20;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 35px;
}

.modal-wrapper .modal-close:hover {
  color: #2b2e38 !important
}


/* モーダル表示の時の文字デザイン */
.ModalTitle{
  font-size:183.3%; /* 22px */
  text-align: center;
  margin-bottom: 24px;
  margin-top: 32px;
  font-weight:bold;
}

.ModalText{
  font-size: 150%;  /* 18px */
  text-align: center;
  margin-bottom: 32px;
}




/******************************

no2-09.html 用css

******************************/

/* ▼▼▼ 抽出結果とページャーの横並び  ▼▼▼ */
/* 抽出結果 */
.ApplicationBox .accordion .Result{
  font-size: 116.7%; /* 14px */
  font-weight:bold;
  text-decoration: none;
  width:166px;
  height: 24px;
  text-align: center;
  padding: 2px 0 0 0;
  border: solid 1px #d9d9d9;
  border-radius: 100px;
  color: #777777;
  background-color: #fff;
}

.ApplicationBox .accordion .Result-L {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}


/* ▼▼▼ 必須（配色：ピンク）  ▼▼▼ */
/* 必須 */
.MustPinkbox{
  border: solid 1px #ffab9a;
  margin: 0 16px 32px 16px;
  padding: 32px 0 0 0;
  border-radius: 8px;
}

.MustPinkbox .Must{
  font-size: 133.3%; /* 16px */
  font-weight:bold;
  text-decoration: none;
  width:88px;
  height: auto;
  text-align: center;
  padding: 2px;
  border-radius: 100px;
  color: #fff;
  background-color: #e54c2e;
  margin:0 0 8px 16px;
}

/* カラムAとカラムBの配色のみ変更 */
#ContainerSub .ApplicationBox .MustPinkbox .BoxtypeA th {
  background-color: #ffe9e5;
}

#ContainerSub .ApplicationBox .MustPinkbox .BoxtypeB th {
  background-color: #ffe9e5;
}

#ContainerSub .ApplicationBox .MustPinkbox .BoxtypeB .TH-head1 {
  background-color: #ffab9a;
}

#ContainerSub .ApplicationBox .MustPinkbox .BoxtypeB .TH-head2 {
  background-color: #ffab9a;
}


/* ▼▼▼ 任意（配色：ブルー）  ▼▼▼ */
/* 任意 */
.MustBluebox{
  border: solid 1px #1886b8;
  margin: 0 16px 32px 16px;
  padding: 32px 0 0 0;
  border-radius: 8px;
}

.MustBluebox .Any{
  font-size: 133.3%; /* 16px */
  font-weight:bold;
  text-decoration: none;
  width:88px;
  height: auto;
  text-align: center;
  padding: 2px;
  border-radius: 100px;
  color: #fff;
  background-color: #1886b8;
  margin:0 0 8px 16px;
}

/* カラムAとカラムBの配色のみ変更 */
#ContainerSub .ApplicationBox .MustBluebox .BoxtypeA th {
  background-color: #dcedf5;
}

#ContainerSub .ApplicationBox .MustBluebox .BoxtypeB th {
  background-color: #dcedf5;
}

#ContainerSub .ApplicationBox .MustBluebox .BoxtypeB .TH-head1 {
  background-color: #73c1e5;
}

#ContainerSub .ApplicationBox .MustBluebox .BoxtypeB .TH-head2 {
  background-color: #73c1e5;
}

/* ▼▼▼フォロー設定行▼▼▼ */
/* テーブル本体 */
.follow-table {
  border-spacing: 0;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}

/* 行（tr） */
.follow-row {
  margin: 0;
  padding: 0;
  border: none;
}

/* 最初の行に上のボーダー */
.follow-row-first {
  border-top: 3px solid #fff;
}

/* td セル */
.follow-td {
  padding: 0 !important;
  margin: 0 !important;
  text-align: center;
  border: none !important;
}

/* ラッパー div */
.follow-wrapper {
  width: 100%;
  border: 3px solid #fff;
  padding: 0 0px 0 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  box-sizing: border-box;
  border-top: none;
}

/* 入力欄 */
.follow-input {
  width: 15%;
  max-width: 60px;
  height: 26px;
  padding: 4px;
  border: 1px solid #999;
  border-radius: 3px;
  font-size: 13px;
}

/* 入力グループのボックス */
.follow-input-box {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

/* 閉じるボタン用のボックス */
.follow-close-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  border-left: 3px solid #fff;
  height: 60px;
}

/* 閉じるボタン */
.follow-close-btn {
  cursor: pointer;
  box-sizing: border-box;
  margin: 5px;
  margin-left: auto; 
}
/******************************

contract_application.html 用css

******************************/
.ApplyBox {
	margin-top: 40px;
	width: 100%;
	height: auto;
}

/* 申込内容、メールアドレス */
.ApplyDetailBox > p, .EmailBox > p {
	font-size: 150%;
	/* 18px */
	padding: 2%;
	font-weight: bold;
}

/* 入力項目 */
#applyDetailInput, #emailInput {
	padding: 2%;
	flex-direction: column;
	width: 100%;
}

/* 入力項目 ラジオボタン */
#applyDetailInput .RadioBox span {
	font-size: 150%;
	/* 20px */
	vertical-align: middle;
}

/* 入力項目 ラジオボタン */
#applyDetailInput .RadioBox label {
	display: block;
}

/* 入力項目 テキスト */
#emailInput .textbox {
	padding: 16px 2%;
	border: 1px solid #969da3;
	border-radius: 3px;
	font-size: 150%;
	/* 18px */
	margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* プレースホルダー */
#emailInput .textbox::placeholder {
	color: #999;
}

/* 入力項目 エラーメッセージ */
#applyDetailInput p, #emailInput p {
	font-size: 166.7%;
}


/*エラー表現（背景色変更）*/
.ApplyBox .error{
	background:#ffe7e7;
}

/*エラー表現（文字色指定）*/
.ApplyBox .error p{
	color:#f33232;
	line-height:1;
}

#applyDetailInput .RadioBox{
	margin-bottom: 20px;
}

.ApplyBox .EmailBox, .ApplyBox .ApplyDetailBox {
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
}

/* 説明文エリア */
.ExplainBox {
	padding: 16px 2%;
	width: 100%;
	margin-bottom: 30px;
}

/* 説明文 */
.ExplainBox p {
	color: #e40000;
	font-size: 125%;
	/* 12px */
	font-weight: bold;
}

.customerSupport {
  padding: 0px 2%;
  font-size: 125%;
}

/*************************************

contract_application_terms.html 用css

******************************/
#contract_terms {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

.contract-application-terms .terms-decimal-list {
  list-style-type: decimal;
  margin: 0;
  padding-left: 1.3em;
}

.contract-application-terms .terms-decimal-list > li {
	margin: 0;
	padding-left: 0;
}

.contract-application-terms .paren-list {
  list-style: none;
  padding-left: 0;
}

.contract-application-terms .paren-list > li {
  margin: 0;
  padding-left: 0;
}

/* 説明 */
.explain{
    font-size:95%;  /* 16px */
    margin-bottom: 30px;
}

/* 支払い説明 */
.paymentExplain{
    font-size:95%;  /* 16px */
   margin-top: -5px;
   position: relative;
} 

/*エラー表現（セル色変更＆文字色指定）*/
div.error p{
    color:#f33232;
    line-height:1;
    margin-bottom: 30px;
    font-weight: normal !important;
    font-size:95% !important;  /* 16px */
}

/*エラー表現（姓名のエラー）*/
div.error .line{
	display:block;
	margin-bottom:8px;
}

/*エラー表現（セル色変更＆文字色指定）*/
.errorId .textbox,
.ErrorTextbox .password-input{
    background-color: #ffe7e7;
}

#password_confirm_div.error p,
#company_cd_div.error p{
    margin-bottom: 8px !important; /* エラー時に打ち消す */
}

/*エラー表現（セル色変更＆文字色指定）*/
.PersonalBox .ErrorTextbox {
    width: 96%;
    padding: 10px 2%;
    border: 1px solid #969da3;
    border-radius: 3px;
    font-size: 150%;  /* 18px */
    margin-bottom: 8px !important; /* エラー時に打ち消す */
    background-color: #ffe7e7 !important;
}

/*文字色赤*/
.red{
    color:#f33232;
}

/*マジンの幅調整*/
.PersonalBox .marginTextbox {
    width: 96%;
    padding: 10px 2%;
    border: 1px solid #969da3;
    border-radius: 3px;
    font-size: 150%;  /* 18px */
    margin-bottom: 8px;
}

.PersonalBox .marginTextbox::placeholder {
    color: #999;
}


/* 支払いエラー */
#payment_method_div{
   margin-top: 30px;
   position: absolute;
   margin-left: -14px;
    } 

/* 利用人数エラー */
#id_num_div{
   margin-top: 25px;
   position: absolute;
   margin-left: -14px;
    }
    
.errorId .PeopleBox,
.errorId .PayBox{
    margin-bottom: 45px !important;
}


.errContentsTitArea {
  position: relative;
  height: 652px;
}

.btnCenter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 20px;
  text-align: center;
}

.errContentsTitArea h1 {
  font-size: 166.7%;  /* 20px */
    font-weight: bold;
    color: #000;
    padding: 10px;
}

.errExplain {
    font-size: 133.3%; /* 16px */
    font-weight: normal;
    color:#f33232;
    padding: 20px 20px 20px 20px;
    line-height: 1.72;
    border:solid 1px #e60f0f;
    height:auto;
    margin: 15px 15px 70px 15px;
}

.password-wrapper {
  position: relative;
  width: 96%;
}

.password-input {
  width: 100%;
}

.toggle-password-button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-icon {
  width: 20px;
  height: 20px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.toggle-password-button:hover .password-icon {
  opacity: 1;
}

/* Edge/Chromeのデフォルト表示アイコン非表示 */
.password-input::-ms-reveal,
.password-input::-ms-clear,
.password-input::-webkit-credentials-auto-fill-button {
  display: none !important;
  appearance: none;
}

/*おすすめコース一覧*/
.BT-CourseTag-Recommend{
  display: flex;
  flex-direction: column;
  width: 18%;
  height: auto;  
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  text-align: center;
  padding: 4px 4px 0 4px;
  border:solid 1px #3e7d31;
  border-radius: 100px;
  color: #000;
  background-color: #fff;
  margin:0 4px 8px 0;
  min-width: 10em;
}
.BT-CourseTag-Recommend:hover {
  opacity: 0.5;
}
.BT-CourseTag-Recommend:active {
  opacity: 0.5;
}

.BT-pankuzu-Recommend{
  display: flex; 
  flex-direction: column;
  width: 18%;
  height: auto;  
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  text-align: center;
  justify-content: center;
  padding: 4px 8px;
  border:solid 1px #3e7d31;
  border-radius: 100px;
  color: #619556;
  background-color: #edf5eb;
  min-width: 10em;
}
.BT-pankuzu-Recommend:hover {
  opacity: 0.5;
}
.BT-pankuzu-Recommend:active {
  opacity: 0.5;
}

.messageDisplay{
	font-size: 150%;
	margin-top: 80px;
}
.agreeCheck {
	display: flex;
	justify-content: center;
}
.agreeCheckLabel {
	display: flex;
	justify-content: center;
	gap: 3px;
}
.subscriptionChange{
	background-color: #ff0000;
	font-size: 133.3%;
	font-weight: bold;
	line-height: 1.1;
	width: 96%;
	height: 45px;
	padding: 0 34px;
	color: #fff;
	margin: 10px auto;
}
.subscriptionChange:hover {
  opacity: 0.5;
}
.subscriptionChange:active {
  opacity: 0.5;
}
.subscriptionChange:disabled {
  opacity: 0.5;
  cursor:default;
}
.messageDisplayComplete{
	font-size: 150%;
	margin: 160px 20px 80px;
	border: solid 1px #1886b7;
    background: #e9f6ff;
    padding: 14px 16px;
    color: #025aa4;
}
.btnHeight{
	min-height: 78px;
}
.nextContractMessage{
	position: relative;
    bottom: 10px;
    font-size: 113.3%;
}
.autoPaymentSettingTbl{
	width:100%;
	border-collapse:separate;
	border-spacing:0;
	border-right:none;
	color:#646464;
	table-layout:auto;
}
.autoPaymentSettingTbl tr.first th{
	border-top:solid 1px #1986b8;
}
.autoPaymentSettingTbl tr.first td{
	border-top:solid 1px #dadada;
}
.autoPaymentSettingTbl tr.last th{
	border-bottom:solid 1px #1986b8;
}
.autoPaymentSettingTbl th{
	font-size:133.3%;
	color:#fff;
	text-align:center;
	width:222px;
	padding: 12px 10px;
	background:#1986b8;
	height: auto;
	border-left: 1px solid #dadada;
	border-right: 1px solid #dadada;
	border-top: 1px solid #1986b8;
	border-bottom: 1px solid #fff;
}
.autoPaymentSettingTbl td{
	font-size:133.3%;
	padding:12px 14px;
	word-wrap:break-word;
	border-right: 1px solid #dadada;
	border-left: 1px solid #dadada;
	border-bottom: 1px solid #dadada;
	border-top: none;

}

.autoPaymentSettingTbl,
.autoPaymentSettingTbl tbody,
.autoPaymentSettingTbl tr,
.autoPaymentSettingTbl th,
.autoPaymentSettingTbl td {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.autoPaymentSettingTbl label {
    margin-right: 19px;
	display: inline-flex;
	align-items: center;
	margin-bottom: 0;
}
.autoPaymentSettingTbl input[type="radio"] {
    margin-right: 6px;
}
.BT-autoPaymentSetting {
	position: relative;
	background-color: #e5ba2d;
    color: #000; 
    text-align: center; 
    text-decoration: none;
    display: inline-block; 
    margin: 4px 2px; 
    cursor: pointer; 
    border: none; 
    border-radius: 5px; 
    box-shadow: 2px 2px 4px gray;
    white-space: nowrap;
    height: 35px;
    font-size: 120%;
}
.BT-autoPaymentSetting:hover {
  opacity: 0.5;
}
.contractFormChangeNote{
	color: #dd1d1d;
}
.autoPaymentSettingContents{
	width: 90%;
	margin: 0 19px;
}
.cardEditBtnArea{
	text-align: right;
}
.autoPaymentSettingContents .btnBox{
	background:none;
}
.autoPaymentSettingContents .flexBox{
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
.contentsTit{
    float: left;
    font-size: 183.3%;
    font-weight: bold;
    color: #0058a2;
    line-height: 1;
    padding: 6px 0 0 13px;
    border-left: solid 9px #0058a2;
    margin: 14px 0 60px;
 }