@charset "utf-8";
/* CSS Document */
/* 20180313 作成　ver.1.0.0 */
/*-------------------
製品ページ　請求書セミナー一覧ページ用CSS
/seikyu/seminar/index.asp
-------------------*/
#seikyu {
  font-size: 16px; }
  #seikyu #seikyucontent * {
    box-sizing: border-box; }

.contents {
	width: 90%;
	max-width: 70em;
	margin: auto;
}

.contents ul,
#links ul,
.page_title .contents {
  width: 90%;
  max-width: 64em;
  margin: auto; }

.contents {
  overflow: hidden; }

.btn a:hover {
  opacity: .85;
  cursor: pointer; }

#btn_Pagetop {
  z-index: 3; }

#breadcrumbs ol li,
#breadcrumbs ol li a {
  color: #fff; }

/*-----------------
 *ページタイトル
-----------------*/
#seikyu .page_title {
  padding: 8em 0 0 0;
  background-color: #267C3A; }
  #seikyu .page_title .contents {
    overflow: hidden; }

#seikyu .page_title h1 {
  margin-bottom: 55px;
  font-size: 2em;
  font-weight: 700;
  line-height: 1.5em;
  text-align: left;
  color: #fff;
  position: relative; }
  #seikyu .page_title h1:after {
    content: "Seminars";
    opacity: 0.4;
    font-family: Arial, Helvetica, "sans-serif";
    font-size: 1rem;
    display: block;
    line-height: 1; }

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width: 48em) {
  #seikyu .page_title h1 {
    padding-left: 1rem; } }
/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width: 64em) {
  #seikyu .page_title {
    padding: 10em 0 0 0;
    position: relative;
	background-image: url(/web/jp/contract/seminar/images/seminarindex_main_v.png);
    background-repeat:no-repeat;
    background-position: -180% 56px;
    background-size: 125%;}
    #seikyu .page_title h1 {
      margin-top: 0;
      margin-bottom: 55px; } 
}

/*-----------------
 *Link
-----------------*/
#links {
  padding: 40px 0;
  background-color: #E3F9E3; }
  #links ul {
    display: flex;
    flex-direction: column;
    position: relative; }
    #links ul li {
      width: 100%;
      margin-bottom: 8px; }
      #links ul li a {
        padding: 15px 28px 15px 0;
        border-radius: 4px;
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        color: #267C3A;
        box-shadow: 0 3px 3px 0px rgba(152, 187, 150, 0.5);
        width: 100%;
        background-color: #fff;
        display: block;
        position: relative; }
        #links ul li a:after {
          content: url("/web/jp/seikyu/seminar/images/ic-circlebelow.png");
          position: absolute;
          right: 30px;
          top: 50%;
          transform: translateY(-50%) translateX(0%); }
        #links ul li a:hover {
          box-shadow: 0 3px 7px 1.5px rgba(152, 187, 150, 0.5); }

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width: 48em) {
  #links ul {
    flex-direction: row;
    justify-content: space-between; }
    #links ul li {
      width: 33%;
      margin-bottom: 0; } }

/*-----------------
 *H2
-----------------*/
.contents h2 {
  color: #267C3A;
  font-size: 32px;
  font-weight: 700;
  position: relative;
  text-align: center;
  line-height: 1.43;
  margin: 40px auto 75px; }
  .contents h2:before {
    content: "";
    display: block;
    background-color: #267C3A;
    width: 58px;
    height: 4px;
    border-radius: 4px;
    bottom: -14px;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    position: absolute; }
  .contents h2:after {
    opacity: 0.4;
    font-family: Arial, Helvetica, "sans-serif";
    font-size: 1rem;
    bottom: -52px;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    position: absolute;
    line-height: 1;
    text-align: center;
    display: block; }
.contents#seminars h2:after {
  content: "Seminar"; }
.contents#archives h2:after {
  content: "Archive"; }
.contents#webinars h2:after {
  content: "On Demand Seminar"; }


/*-----------------
 *sec-list
-----------------*/
#sec-list {
  padding: 0; }
  #sec-list .contents {
    padding-bottom: 24px; }
    #sec-list .contents#seminars, #sec-list .contents#archives {
      background-color: #fff; }
    #sec-list .contents#webinars {
      background-color: #E3F9E3; }

#sec-list .list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: wrap; }

#sec-list .list li {
  margin: 0 0 16px;
  width: 100%;
  height: 417px;
  list-style: none;
  position: relative;
  overflow: visible;
  border: solid 1px #ddd;
  border-radius: 6px;
background-color: #FFFFFF;}

#sec-list #webinars .list li {
  height: 198px; }
  #sec-list #webinars .list li a {
    height: 198px;
    border: none;
    box-shadow: 0 0px 2px 1px rgba(152, 187, 150, 0.5); }
    #sec-list #webinars .list li a:hover {
      box-shadow: 0 3px 10px 1.5px rgba(152, 187, 150, 0.5); }

#sec-list .list li a {
  border-radius: 6px;}
  #sec-list .list li a.seminar_open {
    box-shadow: 0 0px 2px 1px rgba(152, 187, 150, 0.5);
}
#sec-list .list li a.seminar_ond_new {
    box-shadow: 0 0px 2px 1px rgba(152, 187, 150, 0.5);
}
    #sec-list .list li a.seminar_open:hover {
      box-shadow: 0 3px 10px 1.5px rgba(152, 187, 150, 0.5); }
  #sec-list .list li a.seminar_close:hover {
    box-shadow: none; }

#sec-list .list li span.seminar_reminder {
  background-color: #F64545; }

#sec-list .afte_end,
#sec-list .seminar_content {
  width: 100%;
  height: 100%; }

#sec-list .list li a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2; }

#sec-list .list li.note {
  width: 100%;
  box-shadow: none;
  border: solid 1px #ddd;
  height: auto;
  padding: 43px;
  text-align: center; }
  #sec-list .list li.note P {
    font-size: 14px;
    color: #333; }
    #sec-list .list li.note P.title {
      font-size: 24px;
      color: #267C3A;
      line-height: 1.35;
      margin-bottom: 11px; }

#sec-list .seminar_content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; }

#sec-list .list li figure.img {
  width: 100%;
  height: auto;
  min-height: 198px;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 6px 6px 0 0; }

#sec-list #webinars .list li figure.img {
  border-radius: 6px; }

#sec-list .list li figure.img::before {
  background-color: rgba(255, 255, 255, 0.7);
  display: block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 0; }

#sec-list .list li .tx {
  padding: 21px 30px 50px;
  height: 217px;
  box-sizing: border-box;
  position: absolute;
  top: 198px;
  left: 0; }

#sec-list .list li .cat_flag {
  position: relative; }

#sec-list .list li .cat_category {
  position: relative; }

#sec-list .list li .flag {
  width: 75px;
  padding: 9px;
  text-align: center;
  line-height: 1;
  display: inline-block;
  font-size: 14px;
  color: #fff;
  position: absolute;
  z-index: 1;
  top: -32px; }
  #sec-list .list li .flag.seminar_open {
    background-color: #FDAF03; }
  #sec-list .list li .flag.seminar_close {
    background-color: #777; }
  #sec-list .list li .flag.seminar_ond_new {
	font-weight: bold;
    background-color: #FF0000; }

#sec-list .list li .category {
  width: 75px;
  padding: 9px;
  text-align: center;
  line-height: 1;
  display: inline-block;
  font-size: 14px;
  color: #fff;
  position: absolute;
  z-index: 1;
  left: 85px;
  top: -32px; }
  #sec-list .list li .category.seminar_open {
    background-color: #FDAF03; }
  #sec-list .list li .category.seminar_close {
    background-color: #777; }
　#sec-list .list li .flag.seminar_ond_new {
    background-color: #FF0000; }


#sec-list .list li .tx .ttl {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.35;
  height: 81px; }

#sec-list .list li .tx .place_date {
  font-size: 18px;
  font-weight: 700;
  color: #267C3A;
  margin-bottom: 24px; }

#sec-list .list li .tx .misc {
  font-size: 12px;
  font-weight: 700;
  color: #267C3A;
  border: solid 1px #267C3A;
  border-radius: 11px;
  padding: 4px 13px;
  display: inline-block; }

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width: 48em) {
  #sec-list .contents {
    margin-bottom: 40px; }
  #sec-list .list {
    flex-direction: row; }
    #sec-list .list li {
      width: 49%;
      margin-right: 6px; } }
/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width: 64em) {
  #sec-list .list li {
    width: 33%;
    margin-right: 3px;
	background-color: #FFFFFF;} }

/* スマホ縦サイズ 375px以下*/
@media screen and (max-width: 375px){
#sec-list .list li .tx .ttl{
    font-size: 14px; }
.br-sp {display: none; }

}

/* ヘッダーボタンの背景色変更 20180718 */
a.cv_btn_header{ background-color: #2d67a3;}