@charset "utf-8";

/*============================
受講生専用
=============================*/
/*---------------------------------------------
	TOP
---------------------------------------------*/
:root{
  --participant-color: #215087;
  --participant-color2: #d3dde9;
}
.base-frame{
  margin: 0 15px 70px;
}
.prep_box p{
  font-size: 1.5rem;
}
.prep_box p.box-note{
  margin-bottom: 10px;
  font-size: 1.4rem;
}
.prep_box p .check-img{
  margin: 0;
  width: 100%;
  height: auto;
}
/* ログイン */
.box__wrap{
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 0;
}
#loginpanel h2{
  margin: 0 0 20px;
  padding: 20px;
  border: none;
  background-color: #455464;
  color: #fff;
}
.login_btn a{
  margin: 0 0 15px;
  padding: 25px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--participant-color);
  background: #fff url(../img/login_arrow.png) no-repeat right 10px center;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  color: #215087;
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.login_box:first-child .login_btn a{
  padding: 25px 20px 25px 53px;
}
  .login_btn a:hover{
  opacity: 0.7;
  text-decoration: none;
}
#login_btn a{
  background-image: url(../img/login.png),
  url(../img/login_arrow.png);
  background-position: left 10px center, right 10px center;
}
#info_btn a{
  padding: 25px 20px 25px 53px;
  background-image: url(../img/info.png),
  url(../img/login_arrow.png);
  background-position: left 10px center, right 10px center;
  font-size: 1.9rem;
  line-height: 1.3;
}
/* 受講前に */
#preppanel{
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 15px;
}
#preppanel h2{
  margin: 0 0 15px;
  padding: 0 0 15px;
  border-bottom: 1px dotted var(--participant-color);
  color: var(--participant-color);
  font-size: 1.8rem;
  text-align: center;
}
.prep_box{
  margin-top: -1px;
  padding: 20px;
  border: 1px solid var(--participant-color2);
  background-color: #f7fafd;
}
.prep_box a{
  margin: 0 0 5px;
  display: block;
  font-size: 1.6rem;
  line-height: 1.5;
  transition: all  0.2s ease;
}
.prep_box a:hover{
  opacity: 0.7;
}
.link_list li{
  padding-left: 1em;
}
.link_list li::before{
  position: absolute;
  top: 0.7em;
  left: 0;
}
.prep_box .link_arrow{
  padding-left: 0.8em;
}
.prep_box .link_arrow::before{
  position: absolute;
  top: 0.7em;
  left: 0;
}
/* リンク矢印 */
/* .prep_box .link_list li{
	margin: 5px 0 0;
	padding-left: 10px;
	line-height: 1.3;
}
.link_list li:before{
	margin: 0;
	top: 0.4em;
} */
/* お知らせ */
#news{
  margin: 50px 0 0;
  clear: both;
}
#news dl{
  margin: 0 0 50px;
  padding: 0;
}
#news dt{
  margin: 15px 0 5px;
  padding-left: 8.5em;
  font-size: 1.4rem;
  font-weight: bold;
}
#news dt .date{
  margin: 0 0 0 -8.5em;
  display: inline-block;
  width: 8.5em;
  font-weight: normal;
}
#news dd{
  padding: 0 0 10px 9em;
  border-bottom: 1px solid #ddd;
  line-height: 1.5;
}
#news dt .important{
  margin: 0 5px 0 0;
  padding: 2px 5px;
  display: inline-block;
  border: 1px solid #ff3636;
  color: #ff3636;
  font-size: 1.3rem;
}
.inquiry_cont p{
  font-size: 1.6rem;
}
.callcenter-simple{
  text-align: center;
}
.callcenter-simple img{
  margin: -1px 5px 0 0;
  width: 1.70em;
  height: auto;
  vertical-align: middle;
}
.inquiry_cont p.callcenter-simple{
  margin: 10px 0 0;
  font-size: 2.4rem;
}
.inquiry_cont p.callcenter-simple span:nth-child(3){
  display: inline-block;
  font-size: 1.6rem;
}
/*****
バナーエリア
*****/
.bn_area a{
  transition: all  0.2s ease;
}
.bn_area a:hover{
  opacity: 0.8;
}
.first-time a{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.first-time a > div{
  width: 45%;
}
.first-time a > p{
  flex: 1;
}
/* ===========================================
	MediaQueries
=========================================== */
/* スマホ----------------------------- */
@media screen and (max-width: 767px){

}
/* PC----------------------------- */
@media screen and (min-width: 768px){
  /* ログイン */
  .box__wrap{
    margin: 40px 0 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  /* 受講前に */
  .prep_box__wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .login_btn,
  .login_btn a{
    height: 100%;
  }
  .inquiry_cont{
    text-align: center;
  }

  /* .inquiry_cont p.callcenter-simple span{
    padding-left: 15px;
    display: inline-block;
    font-size: 1.6rem;
  } */
}