@charset "UTF-8";
/*--------------------------------------------

khb東日本放送 大腸セミナー
https://www.khb-tv.co.jp/event/asahi/index.html


---------------------------------------------*/
/*--------------------------------------------
   [00] 基本設定
---------------------------------------------*/
html {
  font-size: 62.5%;
  /*1rem=10px*/ }

body {
  font-size: 1.8rem;
  /*本文サイズ 1.8rem=18px*/
  line-height: 2;
  color: #33312b;
  font-family: 'Noto Sans JP', sans-serif; }

img {
  max-width: 100%;
  height: auto;
  text-align: center; }

a {
  transition: 0.4s;
  color: #56b85b;
  text-decoration-line: underline;
  word-break: break-all; }
  a:hover {
    transition: 0.4s;
    opacity: 0.7; }

::selection {
  background: #e3f7fc;
  color: #33312b; }

h1, h2, h3, h4, h5, th {
  font-weight: 700; }

main {
  width: 100%;
  overflow: hidden; }

.wrap {
  overflow: hidden; }

/*セクション設定-------------------------*/
.bg-fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1; }

section {
  padding: 50px 0; }

.w_limit_sp {
  width: 94%; }

.w_limit_1280 {
  max-width: 1280px;
  margin: 0 auto; }

.w_limit_1100 {
  max-width: 1100px;
  margin: 0 auto; }

.w_limit_1000 {
  max-width: 1000px;
  margin: 0 auto; }

.w_90per {
  width: 90%;
  margin-left: auto;
  margin-right: auto; }

.w_limit_900 {
  max-width: 900px;
  margin: 0 auto; }

h2 {
  line-height: 1;
  position: relative;
  margin-bottom: 40px;
  padding-bottom: 30px;
  display: block;
  font-size: 3.2rem;
  text-align: center;
  vertical-align: middle;
  z-index: 1; }
  h2::after {
    content: '';
    height: 5px;
    width: 80px;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    margin: auto;
    z-index: -1;
    background-size: auto auto;
    background-color: #5dc262; }

@media screen and (max-width: 1280px) {
  h2 {
    font-size: 2.8rem; } }
@media screen and (max-width: 600px) {
  section {
    padding: 25px 0; }

  body {
    font-size: 1.6rem; } }
/*--------------------------------------------
[03] メインビジュアル
---------------------------------------------*/
#Mainvisual {
  background: url("../images/bg.jpg");
  position: relative;
  z-index: 0;
  padding-top: 30px; }

.MV {
  text-align: center; }
  .MV::before {
    content: '';
    background: url("../images/mv_bg_02.png");
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    width: 100%; }

@media screen and (max-width: 1000px) {
  .MV::before {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background-size: 65% auto;
    background-position: center left -15%; } }
@media screen and (max-width: 600px) {
  #Mainvisual {
    padding-top: 25px; } }
/*--------------------------------------------
[03] ABOUT
---------------------------------------------*/
#About {
  padding: 50px 0; }
  #About .w_limit_1280 {
    position: relative;
    height: 100%; }

.about-container {
  text-align: center;
  padding-top: 0; }

.about-figBox {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  max-width: 980px;
  margin: 45px auto 0; }
  .about-figBox figure {
    width: calc(100%/3); }

@media screen and (max-width: 767px) {
  #About {
    padding: 25px 0; } }
/*--------------------------------------------
[05] 概要
---------------------------------------------*/
#Date table {
  width: 100%;
  border: solid 1px #56b85b; }
  #Date table th, #Date table td {
    padding: 15px; }
  #Date table th {
    font-weight: 500;
    background: #56b85b;
    color: #ffffff;
    width: 20%;
    border-bottom: solid 1px #ffffff;
    text-align: center; }
  #Date table td {
    width: 80%;
    border-bottom: solid 1px #56b85b;
    background-color: #ffffff; }
  #Date table ul {
    list-style-type: disc;
    padding-left: 3rem; }

#Date table tr:last-of-type th {
  border-bottom: solid 1px #56b85b; }

@media screen and (max-width: 767px) {
  #Date table {
    border: none; }
    #Date table th, #Date table td {
      display: block;
      width: 100%;
      text-align: center; }
    #Date table th {
      padding: 0px 15px; }
    #Date table td {
      padding: 10px 15px;
      margin-bottom: 20px;
      border: solid 1px #56b85b;
      border-top-color: #ffffff; }
    #Date table ul {
      text-align: left;
      margin-top: 15px; } }
/*--------------------------------------------
[05] 講演内容
---------------------------------------------*/
.programBox {
  background: #ffffff;
  border: solid 1px #23a1db;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
  padding: 40px 5%; }
  .programBox figure {
    width: 25%; }

.program-txt {
  width: 70%; }
  .program-txt h3 {
    border-bottom: solid 1px #23a1db;
    padding-bottom: 15px;
    margin-top: 15px;
    margin-bottom: 15px; }
  .program-txt .number {
    font-size: 26px; }
    .program-txt .number span {
      display: inline-block;
      color: #ffffff;
      position: relative;
      z-index: 1;
      padding: 0.5em;
      vertical-align: bottom;
      line-height: 1; }
      .program-txt .number span::before {
        content: '';
        width: 35px;
        height: 35px;
        background-color: #23a1db;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: -1;
        line-height: 1; }

.profile {
  background-color: #e3f7fc;
  padding: 15px 5%;
  margin-top: 25px; }
  .profile p {
    padding-left: 1em; }
  .profile ul {
    padding-left: 1em; }
    .profile ul li {
      padding-left: 2em;
      text-indent: -1em; }

@media screen and (max-width: 767px) {
  .name-matsutomi {
    margin-bottom: 15px; }
    .name-matsutomi span {
      display: block; } }
@media screen and (max-width: 600px) {
  .programBox {
    flex-direction: column; }
    .programBox figure {
      text-align: center;
      width: 75%;
      margin: auto; }

  .program-txt {
    width: 100%;
    margin-bottom: 25px; } }
/*--------------------------------------------
[05] 参加申し込み
---------------------------------------------*/
#Entry {
  background: #5dc262; }
  #Entry .w_limit_1280 {
    background-color: #ffffff;
    padding: 75px 5% 50px; }

#Entry h3 {
  border-bottom: solid 1px #c2c2c2;
  border-left: solid 8px #5dc262;
  padding: 0 15px;
  margin-bottom: 15px; }

.formBox {
  background-color: #fbfce5;
  text-align: center;
  padding: 35px 5%;
  max-width: 720px;
  margin: 0 auto 50px; }

.contact-btn {
  margin-top: 15px;
  display: block;
  text-align: center; }
  .contact-btn img {
    width: 448px;
    height: auto;
    filter: drop-shadow(5px 5px 5px rgba(104, 69, 18, 0.3)); }

.privacy p {
  font-size: 1.6rem;
  padding-left: 1em;
  margin: 0 auto; }

/*--------------------------------------------
[98] フッター
---------------------------------------------*/
footer {
  padding: 100px 0;
  position: relative;
  background-color: #e3f7fc; }
  footer table {
    background-color: #ffffff;
    width: 100%; }
    footer table tr {
      border-top: solid 1px #5dc262; }
      footer table tr:last-of-type {
        border-bottom: solid 1px #5dc262; }
    footer table th, footer table td {
      padding: 20px 15px;
      vertical-align: middle; }
    footer table th {
      text-align: center;
      width: 25%; }
    footer table td {
      width: 75%; }

.sponsor_flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center; }

.logo-khb {
  margin-right: 5%; }
  .logo-khb img {
    width: 220px;
    height: auto; }

.logo-relife img {
  width: 182px;
  height: auto; }

.logo-morinaga {
  padding-top: 10px;
  padding-bottom: 10px; }
  .logo-morinaga img {
    height: 38px;
    width: auto; }

small {
  display: block;
  font-size: 1.4rem;
  line-height: 1.5;
  background-color: #e3f7fc;
  padding: 15px 15px;
  text-align: center; }

#PageTop {
  display: block;
  position: fixed;
  bottom: 5%;
  right: 5%;
  width: 45px;
  height: 45px;
  background: #56b85b;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  z-index: 5; }
  #PageTop a {
    width: 100%;
    height: 100%;
    position: absolute; }
  #PageTop::before {
    content: '';
    border-style: solid;
    border-width: 4px 4px 0px 0px;
    border-color: #ffffff;
    transform: rotate(315deg);
    position: absolute;
    margin: auto;
    top: 7px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 12px;
    height: 12px; }

@media screen and (max-width: 767px) {
  footer {
    padding: 50px 0; }
    footer table {
      background-color: transparent; }
      footer table tr {
        border: none; }
        footer table tr:last-of-type {
          border: none; }
      footer table th, footer table td {
        display: block;
        background-color: #ffffff; }
      footer table th {
        text-align: center;
        width: 100%;
        padding: 5px 15px;
        border-top: solid 1px #5dc262;
        border-bottom: solid 1px #5dc262; }
      footer table td {
        width: 100%;
        margin-bottom: 30px;
        text-align: center; }

  .sponsor_flex {
    flex-direction: column; }

  .logo-khb {
    margin-bottom: 30px; }

  a.PageTop {
    bottom: 0px;
    right: 3%; }

  small {
    padding-bottom: 100px; } }
/*--------------------------------------------
 [99] 標準機能
---------------------------------------------*/
.fc-lightBlue {
  color: #23a1db; }

/*
  微調整用
---------------------------------------------*/
.fz-12 {
  font-size: 1.2rem; }

.fz-14 {
  font-size: 1.4rem; }

.fz-15 {
  font-size: 1.5rem; }

.fz-16 {
  font-size: 1.6rem; }

.fz-18 {
  font-size: 1.8rem; }

.fz-21 {
  font-size: 2.1rem; }

.fz-24 {
  font-size: 2.4rem; }

.fz-26 {
  font-size: 2.6rem; }

.fz-28 {
  font-size: 2.8rem; }

.fz-32 {
  font-size: 3.2rem; }

@media screen and (max-width: 600px) {
  /**/
  .fz-18 {
    font-size: calc(1.8rem * 0.9); }

  .fz-21 {
    font-size: calc(2.1rem * 0.9); }

  .fz-24 {
    font-size: calc(2.4rem * 0.9); }

  .fz-28 {
    font-size: calc(2.8rem * 0.8); }

  .fz-32 {
    font-size: calc(3.2rem * 0.8); } }
.fw-400 {
  font-weight: 400; }

.fw-600 {
  font-weight: 600; }

.fw-700 {
  font-weight: 700; }

.fc-normal {
  color: #33312b; }

.fc-white {
  color: #ffffff; }

.fc-white a {
  color: #ffffff; }

.fc-red {
  color: #ba1c20; }

.fc-yellow {
  color: #FCCF00; }

.mgl-1em {
  margin-left: 1em; }

.mgr-1em {
  margin-right: 1em; }

.mgt-0 {
  margin-top: 0 !important; }

.mgt-15 {
  margin-top: 15px; }

.mgt-20 {
  margin-top: 20px; }

.mgt-30 {
  margin-top: 30px; }

.mgt-40 {
  margin-top: 40px; }

.mgt-50 {
  margin-top: 50px; }

.mgb-0 {
  margin-bottom: 0 !important; }

.mgb-10 {
  margin-bottom: 10px; }

.mgb-15 {
  margin-bottom: 15px; }

.mgb-20 {
  margin-bottom: 20px; }

.mgb-30 {
  margin-bottom: 30px; }

.mgb-40 {
  margin-bottom: 40px; }

.mgb-50 {
  margin-bottom: 50px; }

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

.ta-right {
  text-align: right; }

.ta-left {
  text-align: left; }

.indent-kome {
  padding-left: 1em;
  text-indent: -1em; }

@media screen and (max-width: 600px) {
  .ta-center-600 {
    text-align: center !important; } }
/*レスポンシブ改行
-------------------------------*/
.br_480, .br_600, .br_768, .br_1280 {
  display: none; }

@media screen and (max-width: 1280px) {
  .br_1280 {
    display: inline; }

  .br_pconly {
    display: none; } }
@media screen and (max-width: 768px) {
  .br_768 {
    display: inline; }

  .block-768 {
    display: block; } }
@media screen and (max-width: 600px) {
  .block-600 {
    display: block; }

  .br_600 {
    display: inline; } }
@media screen and (max-width: 480px) {
  .br_480 {
    display: inline; } }
/*
  背景パターン
---------------------------------------------*/
.bg-white {
  background: #ffffff; }

.bg-gray {
  background: #eaeaea; }

.bg-shasen {
  background-size: auto auto;
  background-color: white;
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 5px, whitesmoke 5px, whitesmoke 10px); }

.bg-shasen-bold {
  background-size: auto auto;
  background-color: #0056a9;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 15px, #004ba0 15px, #004ba0 30px); }

.bg-hougan {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 14px, #e7e7e7 16px), linear-gradient(90deg, rgba(255, 255, 255, 0) 14px, #e7e7e7 16px);
  background-size: 16px 16px; }

/*rgba(218, 250, 227, 0.6)*/
.bg-dot-naname {
  background-color: #ffffff;
  background-image: radial-gradient(rgba(186, 226, 248, 0.2) 22%, rgba(255, 255, 255, 0) 22%), radial-gradient(rgba(186, 226, 248, 0.2) 22%, rgba(255, 255, 255, 0) 22%);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px; }

.bg-dot-hougan {
  background-color: #ffffff;
  background-image: radial-gradient(#e6e6e6 1px, rgba(255, 255, 255, 0) 1px);
  background-size: 12px 12px; }

.bg-gradation {
  background: #6ca861;
  background: linear-gradient(45deg, #6ca861 0%, #379e8e 100%); }

.bg-stripe {
  background-size: auto auto;
  background-color: white;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 15px, #ebca0e 15px, #ebca0e 30px); }

/*
  ボタン
---------------------------------------------*/
a.Btn {
  font-size: 21px;
  font-weight: 600;
  text-decoration-line: none;
  max-width: 400px;
  height: 80px;
  line-height: 76px;
  border-radius: 80px;
  background: #23a1db;
  color: #ffffff;
  vertical-align: middle;
  position: relative;
  display: block;
  border: solid 2px rgba(255, 255, 255, 0);
  margin: auto; }
  a.Btn::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 25px;
    margin: auto;
    width: 11px;
    height: 11px;
    border-style: solid;
    border-width: 2px 2px 0 0;
    border-color: #ffffff;
    transform: rotate(45deg);
    transition: 0.6s; }
  a.Btn:hover {
    background: #ffffff;
    color: #23a1db;
    border: solid 2px #23a1db; }
    a.Btn:hover::before {
      border-color: #23a1db;
      transition: 0.6s; }

/*
  スクロールアニメーション
    (スクロールしたら表示してほしいところにjs-animationをつける)
---------------------------------------------*/
.js-animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s; }
  .js-animation.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px); }
  .js-animation.js-ani-nomove {
    transform: translateY(0px);
    transition: all 1.2s; }
    .js-animation.js-ani-nomove.is-show {
      transform: translateY(0px); }