@charset "UTF-8";



/*===============================================================

  basic

===============================================================*/

.post_content {
  line-height: 2;
  font-weight: lighter;
}

.post_content > * + *,
.post_content .col > * + *,
.post_content [class^="area-"] > * + *,
.post_content p br + img,
.post_content p img + br,
.post_content form > * + *,
.post_content form .col > * + *,
.post_content form [class^="area-"] > * + * {
  margin-top: 30px;
}

.post_content p img + br {
  display: block;
}

.post_content  iframe {
  width: 100% !important;
}

.post_content a:not(.btn),
.page .contents-main .post_content a:not(.btn) {
  color: var(--main-color);
}

.post_content a:hover,
.page .contents-main .post_content a:not(.btn):hover {
  opacity: .5;
}

.post_content strong {
  padding: 0 .25em;
  font-weight: 500;
  /*color: var(--primary-color);*/
  background-color: rgba(233, 66, 44, .1);
  position: relative;
  z-index: 1;
}

/*.post_content strong:after {
  content: '';
  width: 100%;
  height: 50%;
  background-color: var(--main-color);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  opacity: .25;
}*/

/*.post_content strong {
  padding: 0 .15em .15em;
  font-weight: 500;
  border-bottom: 3px double var(--black-color);
}*/

.post_content .bold {
  font-weight: 500;
}

.post_content small {
  margin-top: 1em !important;
  font-size: .875rem;
  color: var(--text-gray);
  line-height: 1.4;
  display: block;
}

.post_content small.primary {
  color: var(--primary-color);
  font-weight: normal;
}

.post_content img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.post_content .img_caption {
  margin-top: 10px;
  font-size: .875rem;
  color: var(--text-gray);
  font-weight: normal;
  line-height: 1.4;
}

.post_content [class*=" split-diff"].gcol:not(.valign-top) {
  align-items: center;
}

.post_content hr {
  margin-top: var(--margin) !important;
  margin-bottom: var(--margin) !important;
  border-top-color: var(--line-gray);
}

@media (max-width: 768px) {
  .post_content {
    font-size: 15px;
  }
  .post_content > * + *,
  .post_content .col > * + *,
  .post_content [class^="area-"] > * + *,
  .post_content p br + img,
  .post_content p img + br,
  .post_content form > * + *,
  .post_content form .col > * + *,
  .post_content form [class^="area-"] > * + *{
    margin-top: var(--margin);
  }
  
}


/*  btn
---------------------------------------------------------------*/

.post_content .btn {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
  font-weight: 500;
  display: block;
} 

.post_content .btn.type-login {
  max-width: none;
  margin-top: var(--margin-l);
}

.post_content .btn.type-login:after,
.post_content .btn.arrow:after {
  content: '\e901';
  padding-left: 1em;
  font-family: 'icomoon';
}

.post_content .btn.primary,
.post_content #download.btn,
.post_content .btn.type-primary {
  width: 40%;
  min-width: 16em;
  max-width: none;
  /*font-size: var(--font-m);*/
  margin-top: var(--margin-l);
  background-color: var(--main-color);
  border-color: var(--main-color);
}

@media (max-width: 768px) {
  .post_content .btn {
    width: 75%;
    padding: .5em 1em;
  }
  .post_content .btn.type-login,
  .post_content .btn.primary,
  .post_content #download.btn {
    width: 100%;
  }
  .post_content .col .btn.primary {
    margin-bottom: var(--margin) !important;
  }
}


/*---------------------------------------------------------------
  page
---------------------------------------------------------------*/

.page .post_content {
  margin-top: var(--padding-section);
}


/*  template-program
---------------------------------------------------------------*/

.page.template-program .main .thumbnail.type-billboard {
  max-width: 960px;
  margin-left: auto;
}

.page.template-program .main .section-header .title {
  padding-right: calc(var(--padding-section) * 1.5);
}

.page.template-program .main .section-header .title .label {
  padding-right: var(--margin);
}

.page.template-program .main .section-header .title:after {
  content: '';
  width: 100vw;
  padding-top: calc(var(--padding-section) * 2);
  padding-bottom: calc(var(--padding-section) * 3);
  background-color: var(--bg-gray);
  position: absolute;
  top: calc(-2 * var(--padding-section));
  right: calc(var(--padding-section) * 1.5);
  z-index: -1;
}

@media (max-width: 768px) {
  .page.template-program .main .thumbnail.type-billboard {
    margin-top: calc(-1 * var(--padding-section)) !important;
    margin-left: calc(-1 * var(--margin));
    margin-right: calc(-1 * var(--margin));
  }
  .page.template-program .main .section-header .title,
  .page.template-program .main .section-header .title .label {
    padding-right: 0;
  }
  .page.template-program .main .section-header .title:after {
    display: none;
  }
}



/*===============================================================

  heading

===============================================================*/

.post_content h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.4;
}

/*  h2
---------------------------------------------------------------*/

.post_content h2 {
  padding: .8em 10px;
  font-size: var(--font-m);
  border-top: 1px solid var(--black-color);
  border-bottom: 1px solid var(--black-color);
  position: relative;
}

.post_content *:not(input) + h2 {
  margin-top: var(--padding-section);
}


.post_content h2:before {
  content: ''attr(data-subtitle)'';
  font-size: .875rem;
  text-align: center;
  line-height: 2.4;
  color: var(--white-color);
  background-color: var(--black-color);
  position: absolute;
  bottom: 100%;
  left: 0;
}

.post_content h2.braces {
  padding: .5em 1.5em;
  border: none;
}

.post_content h2.braces:before,
.post_content h2.braces:after {
  content: '';
  width: 1em !important;
  height: 1em !important;
  font-size: 1em;
  background-color: transparent;
  position: absolute;
}

.post_content h2.braces:before {
  border-top: 3px double var(--black-color);
  border-left: 3px double var(--black-color);
  top: 0;
  left: 0;
}

.post_content h2.braces:after {
  border-bottom: 3px double var(--black-color);
  border-right: 3px double var(--black-color);
  bottom: 0;
  right: 0;
}


/*  h3
---------------------------------------------------------------*/

.post_content h3 {
  padding: .6em 10px;
  font-size: 1.25rem;
  background-color: var(--line-gray);
}

.post_content * + h3 {
  margin-top: calc(var(--margin) * 1.5);
}

/*  h4
---------------------------------------------------------------*/

.post_content h4 {
  margin-top: var(--margin);
  font-size: 1.125rem;
  padding-left: 10px;
  border-left: 5px solid var(--black-color);
}

/*  h5
---------------------------------------------------------------*/

.post_content h5 {
  padding-left: calc(1.25rem + 10px);
  position: relative;
}

.post_content h5:before {
  content: '';
  width: 1.25rem;
  height: 2px;
  background-color: var(--black-color);
  position: absolute;
  top: .7em;
  left: 0;
}

/*  h6
---------------------------------------------------------------*/

.post_content h6 {
  text-align: center;
  position: relative;
}

.post_content h6:before {
  content: ''attr(data-subtitle)'';
  width: 100%;
  margin-bottom: .5em;
  color: var(--main-color);
  font-weight: normal;
  text-align: center;
  font-size: .875rem;
  display: block;
}

.post_content h6 + * {
  margin-top: 1em !important;
}

.post_content h6 span {
  position: relative;
  display: inline-block;
}

.post_content h6 span:before,
.post_content h6 span:after {
  content: '';
  width: 1.25em;
  vertical-align: middle;
  border-top: 2px solid var(--black-color);
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
}

.post_content h6 span:before {
  margin-right: 10px;
}

.post_content h6 span:after {
  margin-left: 10px;
}


/*===============================================================

  list

===============================================================*/

.post_content ul,
.post_content ol {
  padding-left: 20px;
  font-weight: normal;
  border-left: 10px solid var(--line-gray);
}

.post_content li {
  position: relative;
}

.post_content li {
  padding-left: calc(.5em + 10px);
}

.post_content ul li:before {
  content: '';
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background-color: var(--black-color);
  display: inline-block;
  position: absolute;
  top: .5em;
  left: 0;
}

.post_content li + li {
  margin-top: 10px;
}


.post_content ol {
  counter-reset: count; 
}

.post_content ol li:before {
  counter-increment: count;
  content: counter(count)'.';
  position: absolute;
  left: 0;
}

.post_content li ol {
  margin-top: var(--margin-xs);
  padding: 20px;
  border-left: none;
  background-color: var(--bg-gray);
}

.terms .post_content li {
  font-weight: 100;
}

/*---------------------------------------------------------------
  point
---------------------------------------------------------------*/

.post_content ul.point {
  padding: var(--margin-s);
  border: 1px solid var(--line-gray);
  background-color: var(--bg-gray);
}

.post_content ul.point li {
  padding-left: calc(.75em + 10px);
}

.post_content ul.point li:before {
  content: '\e906';
  width: auto;
  height: auto;
  font-family: 'icomoon';
  color: var(--main-color);
  border-radius: 0;
  background-color: transparent;
  top: 0;
  transform: scale(1.25);
}

/*---------------------------------------------------------------
  point
---------------------------------------------------------------*/

.post_content ul.detail {
  padding: var(--margin-s);
  font-weight: 300;
  border: 1px solid var(--line-gray);
  background-color: var(--bg-gray);
}

.post_content ul.detail li {
  padding-left: calc(6em + 20px);
  line-height: 2;
}

.post_content ul.detail li + li {
  margin-top: var(--margin-s);
}

.post_content ul.detail li:before {
  content: ''attr(title)'';
  width: 6em;
  height: 100%;
  padding-right: 20px;
  text-align: right;
  font-weight: 500;
  border-right: 5px solid var(--line-gray);
  border-radius: 0;
  background-color: transparent;
  top: 0;
}



/*===============================================================

  seminar info

===============================================================*/

.post_content .date {
  font-family: 'din-1451-lt-pro-engschrift';
  font-size: var(--font-xl);
  text-align: center;
  line-height: 1;
}

.post_content .date.jp {
  font-size: var(--font-l);
  font-family: 'Noto Sans JP','Helvetica Neue','Lucida Grande','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',Meiryo,'メイリオ',sans-serif;
  font-weight: 500;
}

.post_content .date .primary {
  font-size: 1.75em;
  color: var(--primary-color);
}

.post_content .date + *,
.post_content .time + h6 {
  margin-top: 0 !important;
}

.post_content .time {
  padding: var(--margin-s) var(--margin-s) calc(var(--margin-s) / 2);
  font-family: 'din-1451-lt-pro-engschrift','Noto Sans JP','Helvetica Neue','Lucida Grande','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',Meiryo,'メイリオ',sans-serif;
  font-size: var(--font-xl);
  text-align: center;
  line-height: 1;
  font-weight: 500;
  border: 1px solid var(--line-gray);
  background-color: var(--white-color);
  display: block;
}

.post_content h6 + .time {
  margin-top: var(--margin-s) !important;
}

/*.post_content .price {
  margin-top: 0 !important;
  padding: .75em;
  text-align: center;
  font-size: var(--font-m);
  font-weight: 500;
  color: var(--white-color);
  line-height: 1.4;
  background-color: var(--black-color);
}*/

.post_content .price {
  margin-top: 0 !important;
  padding: .4em;
  text-align: center;
  font-size: var(--font-m);
  font-weight: 500;
  line-height: 1.4;
  border-top: 3px double var(--black-color);
  border-bottom: 3px double var(--black-color);
}


/*===============================================================

  group_course

===============================================================*/

.group_course > :last-child {
  width: 100% !important;
  margin-left: 0 !important;
}


/*===============================================================

  attention

===============================================================*/

.post_content .area-attention {
  margin-top: var(--padding-section);
  margin-bottom: calc(-1 * var(--padding-section)) !important;
  position: relative;
}

.post_content .area-attention:after {
  content: '';
  width: 100vw;
  height: 100%;
  background-color: var(--bg-gray);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.post_content .area-attention li {
  font-weight: 300;
}


/*===============================================================

  write-info

===============================================================*/

.post_content .writer-info {
  padding-top: 0;
  padding-bottom: 0;
}

.post_content .writer-info .col {
  width: auto !important;
  flex: 1;
}

.post_content .writer-info > :first-child {
  width: 300px !important;
  flex: initial !important;
}

.post_content .round + h6 {
  margin-top: 1em;
}


@media (max-width: 768px) {
  .post_content .writer-info .col {
    width: 100% !important;
  }
  .post_content .round {
    width: 100px;
    height: 100px;
  }
}

/*===============================================================

  form

===============================================================*/

.post_content .form.type-label {
  display: inline;
}


/*===============================================================

  attention

===============================================================*/

.post_content .area-attention > :first-child {
  margin-top: 0 !important;
}

.post_content .area-attention * + p,
.post_content .area-attention h5 + ul {
  margin-top: .5em;
}

.post_content .area-attention * + h4 {
  margin-top: var(--padding-section);
}

.post_content .area-attention img {
  display: inline-block;
}


/* ==================================================================

  document snippet
  
================================================================== */

.document-snippet a {
  padding: var(--margin-xs);
  border: 1px solid var(--line-gray);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.document-snippet a:after {
  content: '資料をダウンロード';
  font-size: 12px;
  color: var(--text-gray);
  position: absolute;
  bottom: var(--margin-xs);
  right: var(--margin-xs);
}

.document-snippet a .thumbnail {
  width: calc( 30% - var(--margin-xs) );
}

.document-snippet a .document-info {
  width: 70%;
  margin: 0;
  padding: 1em 0;
  color: var(--black-color);
}

@media (max-width: 768px) {
  .document-snippet a {
    align-items: flex-start;
  }
  .document-snippet a .document-info {
    padding: 0;
  }
  .document-snippet a .title {
    font-size: var(--font-s);
  }
  .document-snippet a:after {
    font-size: 10px;
  }
  .document-snippet a .description {
    display: none;
  }
  
}

/* ==================================================================

  インタビュー記事用
  .interview：サムネありのインタビュー記事
  .interview.nothumb：サムネなしのインタビュー記事

================================================================== */

.post_content .interview {
  position: relative;
  display: block;
}
.post_content .interview + .interview {
  margin-top: 2.5em;
}

/* サムネイル */
.post_content .interview:not(.nothumb) {
  padding-left: 96px;
}
.post_content .interview > .thumbnail {
  width: 72px;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}
.post_content .interview > .thumbnail::before {
  content: '';
  width: 72px;
  height: 72px;
  border: 1px solid var(--line-gray);
  background-color: transparent;
  background-image: url("../_images/interview/weblife.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
  display: inline-block;
  position: static;
  opacity: 1;
}
.post_content .interview > .thumbnail::after {
  padding: 0;
}

/* 名前表示 */
.post_content .interview::before {
  content: 'WEBLIFE Staff：';
  color: #1f65d9;
  margin-bottom: .5em;
  font-size: 1em;
  font-weight: bold;
  text-align: left;
  display: block;
}

/* ds */
.post_content .interview > .thumbnail.ds:before {
  background-image: url("../_images/interview/weblife.jpg");
}
.post_content .interview.ds:before {
  content: 'WEBLIFE Staff：';
}

/* kou */
.post_content .interview.kou > .thumbnail:before {
  background-image: url("../_images/interview/kou.png");
}
.post_content .interview.kou:before {
  content: 'コウ：';
}

/* nitabaru */
.post_content .interview.nitabaru > .thumbnail:before {
  background-image: url("../_images/interview/nitabaru.png");
}
.post_content .interview.nitabaru:before {
  content: 'ニタバル：';
}

/* okabe */
.post_content .interview.okabe > .thumbnail:before {
  background-image: url("../_images/interview/okabe.png");
}
.post_content .interview.okabe:before {
  content: 'オカベ：';
}

/* omoto */
.post_content .interview.omoto > .thumbnail:before {
  background-image: url("../_images/interview/omoto.png");
}
.post_content .interview.omoto:before {
  content: 'オモト：';
}

/* iwamoto */
.post_content .interview.iwamoto > .thumbnail:before {
  background-image: url("../_images/interview/iwamoto.png");
}
.post_content .interview.iwamoto:before {
  content: 'あい：';
}

/* shiga */
.post_content .interview.shiga > .thumbnail:before {
  background-image: url("../_images/interview/shiga.png");
}
.post_content .interview.shiga:before {
  content: 'シガ：';
}

/* fujisawa */
.post_content .interview.fujisawa > .thumbnail:before {
  background-image: url("../_images/interview/fujisawa.png");
}
.post_content .interview.fujisawa:before {
  content: 'フジサワ：';
}

/* inoue */
.post_content .interview.inoue > .thumbnail:before {
  background-image: url("../_images/interview/inoue.png");
}
.post_content .interview.inoue:before {
  content: 'イノウエ：';
}

/* nahospital */
.post_content .interview.nahospital > .thumbnail:before {
  background-image: url("../_images/interview/nahospital.png");
}
.post_content .interview.nahospital:before {
  content: '松岡氏：';
}

/* yamaoka */
.post_content .interview.yamaoka > .thumbnail:before {
  background-image: url("../_images/interview/yamaoka.png");
}
.post_content .interview.yamaoka:before {
  content: 'ヤマオカ：';
}

/* kumazaki */
.post_content .interview.kumazaki > .thumbnail:before {
  background-image: url("../_images/interview/kumazaki.png");
}
.post_content .interview.kumazaki:before {
  content: 'クマザキ：';
}

/* akaba */
.post_content .interview.akaba:before {
  content: 'アカバ：';
}