ul { list-style: none; }
p { margin: 10px auto; }
a {
  color: var(--black);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
a:hover {
  color: var(--main-color);
}
/*20210621*/
label{
  display:block;
}
/*ボタンの装飾*/
label span{
  display:block;
  background-color:#01b6ed;
  color:#fff;
  width:200px;
  line-height:40px;
  border-radius:4px;
  text-align:center;
}
label span:hover{
  cursor:pointer;
}
input[type="checkbox"]{
  display:none;
}
/*checkboxがチェックの状態になったらpopupを表示させる*/
input[type="checkbox"]:checked + #popup{
  display:block;
}
#popup{

  display:none;

}
video { width: 400px; }
/*20210621*/

.seminar-img-top { margin-top: 95px; }
/*--- seminar form start ---*/
.important-mark { color: #fd0909; }
.area-input {
  margin: 30px auto;
  text-align: center;
  width: 90%;
}
.area-input div {
  margin-bottom: 30px;
}
.area-input div > label {
  width: 20%;
  display: inline-block;
  text-align: left;
  vertical-align: top;
  font-size: 16px;
}
.area-input div > input {
  width: 77.5%;
  display: inline-block;
  height: 30px;
}
.area-input div > select {
  width: 78.4%;
  display: inline-block;
  height: 38px;
  font-size: 12px;
}
.area-input div > textarea {
  width: 77.7%;
  display: inline-block;
  height: 150px;
}
.input-textarea, .input-textarea label { height: 150px; }
.area-input div > div { display: flex; }
.area-input div > div span {
  width: 50%;
  margin: 0;
}
.area-input div > div span:nth-child(1) { margin-right: 10px; }
.area-input div > div span:nth-child(1) > div.error, .area-input div > div span:nth-child(3) > div.error {
  text-align: left;
  padding-left: 190px;
  margin: 0;
  position: absolute;
  font-size: 14px;
  color: #fd0909;
}
.area-input div > div.error {
  text-align: left;
  padding-left: 190px;
  margin: 0;
  position: absolute;
  font-size: 14px;
  color: #fd0909;
}
.area-input div > div span > label {
  width: 40.3%;
  display: inline-block;
  text-align: left;
  font-size: 16px;
}
.area-input div > div span > input {
  width: 54.5%;
  display: inline-block;
  height: 30px;
  font-size: 12px;
}
.confirm { margin: 30px auto; }
.confirm th { background-color: #f6f6f6; }
p.txt-thanks {
  text-align: center;
  border-bottom: 1px solid #000;
  padding-bottom: 30px;
}
.block-error { display: none; }
div.blockMsg {
  width: 20%;
  top: 30%;
  left: 40%;
  text-align: center;
  background-color: #f00;
  border: 1px solid #ddd;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  -moz-opacity:.70;
  opacity:.70;
  padding: 15px;
  color: #fff;
}
#sendMassage { display: none; }
#double { cursor: pointer; }
/*--- seminar form end ---*/
th { background-color: #fff; }
.seminar-list { margin: 30px auto; }
.seminar-list tr > th > p:nth-child(2) {
  width: 100px;
  height: 24px;
  border: 1px solid #ccc;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  line-height: 2;
  background-color: #f6f6f6;
}
.seminar-list tr > td > h3 > a > span { font-size: 12.8px; }
.seminar-list a {
  color: #fd0909;
  border-bottom: 1px solid #fd0909;
}
.seminar-list a:hover {
  color: #a7a6ff;
  border-bottom: 1px solid #a7a6ff;
}
.download {
  display: flex;
  margin: 30px auto;
  width: 100%;
}
.download li { width: 50%; }
.download a {
  color: #000;
  border-bottom: 0;
}
.download a:hover {
  color: #fd0909;
  border-bottom: 1px solid #fd0909;
}
.play {
  font-size: 15px;
  position: relative;
  width: 1.4em;
  height: 1.4em;
  border: 0.1em solid #fd0909;
  border-radius: 100%;
  display: inline-block;
  vertical-align: top;
}
/* マーク */
.play::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0.5em;
  width: 0;
  height: 0;
  border-top: 0.4em solid transparent;
  border-left: 0.6em solid #fd0909;
  border-bottom: 0.4em solid transparent;
}
.form-header {
  width:100%;
  height:auto;
  text-align: center;
  position: relative;
}
.form-header a:hover { border: 0; }
.form-header img { margin: 10px auto; }
.finish {
  width: 100%;
  background-color: #8f8c8c;
  color: #fff;
  text-align: center;
  margin: 50px auto 0;
  border-radius: 5px;
  font-size: 36px;
}
.information {
  margin: 30px auto 0;
  text-align: center;
  color: #fd0909;
  font-size: 20px;
}
.seminar-h1 {
  margin: 30px auto;
  font-size: 24px;
}
.seminar-h1 > span {
  font-size: 16px;
}
.date01 {
  text-align: right;
  font-size: 14px;
}
.date02 {
  text-align: center;
  font-size: 18px;
  margin: 30px auto;
}
.txt-important {
  color: #fd0909;
  font-size: 22px;
}
.program {
  width: 100%;
  background-color: #ccc;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 0px 20px;
}
.staff {
  display: flex;
  margin: 30px auto;
}
.staff span:nth-child(1) {
  width: 20%;
  text-align: center;
}
.staff span:nth-child(2) { width: 80%; }
.staff span:nth-child(1) > p {
  margin: 10px auto;
  font-size: 12px;
  letter-spacing: -1px;
}
.staff span:nth-child(2) > p {
  margin: 0;
  padding-left: 20px;
  width: 100%;
}
.staff span:nth-child(2) > p > span {
  font-size: 18px;
  font-weight: bold;
}
.flag-finish {
  text-align: center;
  margin: 30px auto;
}
.flag-finish span {
  width: 300px;
  height: 50px;
  background-color: #bd001e;
  color: #fff;
  display: inline-block;
  border-radius: 5px;
  line-height: 3;
}
.download-pdf {
  margin: 30px auto;
  width: 100%;
}
.download-pdf td {
  padding: 0px 15px;
}
.download-pdf td:nth-of-type(1) {
  width: 80%;
}
.download-pdf td:nth-of-type(1) > p > span { font-size: 12px; }
.download-pdf td:nth-of-type(2) {
  width: 100px;
}
.area-btn > a:hover { border: 0; }
td.dl {
  width: 100px;
  min-width: 100px;
  margin: 0px auto;
  text-align: center;
}
.dl a {
  padding: 5px 15px;
  color: #fff;
  background-color: #4947b4;
  border-radius: 20px;
  border-bottom: none;
  display: inline-block;
  font-size: 14px;
}
.dl a:hover {
  border: none;
  opacity: .5;
}
/*=============================== ここからタブレット===============================*/
@media all and (min-width: 415px) and (max-width: 1023px) {
  .seminar-img-top { margin-top: 58px; }
  .form-header img { width: 35%; }
  .seminar-h1 { font-size: 16px; }
  .finish { font-size: 20px; }
  .staff { display: block; }
  .staff span:nth-child(1), .staff span:nth-child(2) {
    width: 100%;
    display: block;
  }
  .staff span:nth-child(2) > p > span {
    font-size: 16px;
    text-align: left;
  }
  .program, .staff span:nth-child(2) > p {
    padding: 0;
    font-size: 14px;
  }
  .download {
    display: block;
    margin: 15px auto;
  }
  .download li {
    width: 100%;
    margin: 15px auto;
  }
  .inner > p { font-size: 14px; }
  .area-input div > div {
    display: block;
    margin-bottom: 30px;
  }
  .area-input div > div span:nth-child(1), .area-input div > div span:nth-child(3) {
    margin-right: 0px;
    width: 100%;
  }
  .area-input div > div span > label {
    width: 100%;
    display: block;
    text-align: center;
  }
  .area-input div > div span > input { width: 100%; }
  .area-input div > label {
    width: 100%;
    display: block;
    text-align: center;
  }
  .area-input div {
    margin-bottom: 30px;
  }
  .area-input div > input, .area-input div > textarea {
    width: 100%;
    display: block;
  }
  .area-input div > select {
    width: 101%;
    display: block;
  }
  .input-textarea label { height: 24px; }
  .area-input div > div span:nth-child(1) > div.error, .area-input div > div span:nth-child(3) > div.error, .area-input div > div.error {
    padding-left: 0px;
    font-size: 14px;
    position: relative;
  }
  .margin-btn button { margin: 10px auto; }
}
/*=============================== ここまでタブレット===============================*/
/*=============================== ここからスマホ===============================*/
@media all and (max-width: 414px) {
  .seminar-img-top { margin-top: 58px; }
  .form-header img { width: 65%; }
  .seminar-h1 { font-size: 16px; }
  .finish { font-size: 20px; }
  .staff { display: block; }
  .staff span:nth-child(1), .staff span:nth-child(2) {
    width: 100%;
    display: block;
  }
  .staff span:nth-child(2) > p > span {
    font-size: 16px;
    text-align: left;
  }
  .program, .staff span:nth-child(2) > p { padding: 0; }
  .flag-finish span { line-height: 3.5; }
  .download {
    display: block;
    margin: 15px auto;
  }
  .download li {
    width: 100%;
    margin: 15px auto;
  }
  .inner > p { font-size: 14px; }
  .area-input div > div {
    display: block;
    margin-bottom: 30px;
  }
  .area-input div > div span:nth-child(1), .area-input div > div span:nth-child(3) {
    margin-right: 0px;
    width: 100%;
  }
  .area-input div > div span > label {
    width: 100%;
    display: block;
    text-align: center;
    font-size: 14px;
  }
  .area-input div > div span > input { width: 100%; }
  .area-input div > label {
    width: 100%;
    display: block;
    text-align: center;
    font-size: 14px;
  }
  .area-input div {
    margin-bottom: 30px;
  }
  .area-input div > input, .area-input div > textarea {
    width: 100%;
    display: block;
  }
  .area-input div > select {
    width: 101%;
    display: block;
  }
  .input-textarea label { height: 24px; }
  .area-input div > div span:nth-child(1) > div.error, .area-input div > div span:nth-child(3) > div.error, .area-input div > div.error {
    padding-left: 0px;
    position: relative;
  }
  .margin-btn button { margin: 10px auto; }
  ul li span {
    display: inline-block;
  }
  p.thanks-txt { letter-spacing: -1px; }
}
/*=============================== ここまでスマホ===============================*/
:root {
  --main-color:#ff0025;
  --sub-color:#F18F01;
  --bkg-color:#fafafa;
  --line-color:#d1d1d1;
  --black:#333;
  --grey01:#727171;
  --grey02:#ececec;
  --white:#fff;
}
body,p,ul,ol,h1,h2,h4 {
  margin: 0;
  padding: 0;
}

.cmn-btn {
  display: inline-block;
  width: 240px;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  outline: none;
  color: var(--main-color);
  background-color: var(--white);
  position: relative;
  font-weight: 700;
  letter-spacing: .1rem;
  border: solid 1px var(--main-color);
  transition: color 0.5s ease;
}
/* section */
.wrap-summary {
  margin-bottom: 32px;
  font-weight: 700;
  font-size: 20px;
  color: var(--main-color);
}
.cmn-list01 li {
  line-height: 2.4em;
  border-bottom: var(--line-color) 1px solid;
}
.cmn-list02 li {
  line-height: 1.6em;
  padding-bottom: 16px;
}
.cmn-table01, .cmn-table02 {
  width: 100%;
}
.cmn-table01 tr, .cmn-table02 tr {
  line-height: 2rem;
}
.cmn-table01 th, .cmn-table01 td, .cmn-table02 th, .cmn-table02 td {
  padding: 16px;
  border-bottom: 1px solid var(--line-color);
}
.cmn-table01 th, .cmn-table02 th {
  text-align: left;
  background-color: var(--grey02);
}
.cmn-table01 td, .cmn-table02 td {
  background-color: var(--white);
}
.wrap-picture {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
}
.wrap-picture > img {
  width: 24%;
  height: auto;
}
.wrap-picture > img.img-vertical {
  width: 16%;
}
.wrap-picture img { padding:5px; }
.text { margin: 40px 0; }
.text a {
  border-bottom: 1px solid var(--grey01);
}
.text a:hover {
  border-bottom: 1px solid var(--main-color);
}
.wrap-img-c {
  text-align: center;
}
.wrap-img-Large, .wrap-img-M {
  text-align: center;
  margin: 0 auto;
}
.wrap-img-Large {
  width: 80%;
}
.wrap-img-M {
  width: 50%;
  min-width: 360px;
}
.wrap-img-Large img, .wrap-img-M img {
  width: 100%;
  margin: 8px 0;
}
.btn-b {
  text-align: center;
}
 /*=============================== ここからタブレット===============================*/
 @media screen and (min-width: 415px) and (max-width: 1023px) {
  .cmn-table01 tr {
    display: flex;
    flex-direction: column;
  }
}
/*=============================== ここからスマホ===============================*/
@media all and (max-width: 414px) {
  .cmn-table01 tr {
    display: flex;
    flex-direction: column;
  }
}