@charset "utf-8";
/***************************************************
information
  filename : body_contents_index.css;
***************************************************/
@media screen and (max-width:540px){
}


/* 共通 */
.con_det #main{
  width: 90%;
}
.con_det #contents{
  padding-top: 84px;
}
#main .con_title{
  margin-top: 0;
}
h1.conTitle {
    font-size: 2.7rem;
    line-height: 1.5;
    margin-left: 0;
}
@media screen and (max-width: 540px) {
  h1.conTitle {
      font-size: 2.0rem;
      padding-left: 0;
  }
}
.con_det .widget h2 {
    display:none;
}
.articleBox p{
  padding: 2.0rem 0.2rem;
}

/* サイドナビ PC*/
.con_det .widget nav{
  margin-top:60px;
}
@media screen and (max-width:800px){
  .con_det .widget nav{
    margin-top:0px;
  }
}
.con_det .widget li {
    border:  none;
}
.con_det .widget li a {
    background-color: transparent;
    display:flex;
    align-items:center;
    gap:10px;
}
.con_det .widget li a::before{
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    background-color:var(--app-main-cr);
    border-radius:50vh;
}
.con_det .widget li a.crt {
    color:var(--app-main-cr);
}

/* サイドナビモバイル */
.sp_cateNav{
  border:1px solid var(--app-main-cr);
  border-radius: 30px;
  margin:16px 20px;
}
.sp_cateNav .con_det .widget nav{
  margin-top:0;
}

.sp_cateNav_clickMenu{
  color:var(--app-main-cr);
  margin:auto;
  position:relative;
  padding:16px;
}
.sp_cateNav_clickMenu:after{
  position:absolute;
  content:'';
  background:var(--app-main-cr);
  width:10px;
  height:1px;
  top:50%;
  right:20px;
  transform:translateY(-50%);
  transition:0.4s ease;
}
.sp_cateNav_clickMenu:before{
  position:absolute;
  content:'';
  background:var(--app-main-cr);
  width:1px;
  height:10px;
  top:50%;
  right:24px;
  transform:translateY(-50%);
  transition:0.4s ease;
}
.sp_cateNav_clickMenu.open:after{
  opacity:0;
  transition:0.4s ease;
}
.sp_cateNav_clickMenu.open:before{
  transform:translateY(-50%)rotate(90deg);
  transition:0.4s ease;
}
.sp_cateNav_closekMenu{
  height:0;
  opacity:0;
  transition:0.1s ease;
  padding: 0px 16px;
}
.sp_cateNav_closekMenu.open{
  height:100%;
  opacity:1;
  transition:0.4s ease;
  padding: 0px 16px 16px;

}
@media screen and (max-width:1100px){
  .spmode#sys_list_blok_sp5{
    padding: 0;
  }
}

/* 埋め込みフォーム */
.contactBox{
  border: 1px solid var(--app-main-cr1);
  box-shadow: none;
  padding: 0px 32px 32px;
}
.contactBox .contactBoxInn{
  border:none;
  padding-top:0px;
  padding-bottom:0px;
}
.contactBox .contactTtitle{
  opacity: 0;
}
.contactBox .InputForm dl{
  display:block;
  padding:0px;
  border-bottom:none;
}
.contactBox .InputForm dt{
  width:100%;
  background:#F0F0F0;
  border-radius:8px;
  padding:12px 20px;
  margin:30px 0 16px;
  font-size:18px;
  text-align: left;
  border:none;
}
.contactBox .InputForm dd{
  width:100%;
}
.con_course .BtM button.contactRegBt{
  background:var(--app-main-cr-c);
}

.popup .con_form .BtM button.closePuBt{
  background: none;
  color: var(--app-main-cr);
  border: 1px solid var(--app-main-cr);
  width:87%;
  margin:auto;
}
@media screen and (max-width:540px){
  .InputForm dt,.contactBox .InputForm dt{
    padding:10px 16px;
    font-size:14px;
    border-radius:4px;
  }
  .reg_det .NewRegBoxInn .InputForm dt{
    padding:4px 1rem !important;
  }

}

.con_det .con_form .conFormArea{
  padding: 16px 32px;
}
@media screen and (max-width:540px){
  .con_det .con_form .conFormArea{
    padding: 16px 0;
  }

}

/* 完了画面 */
.formThanks{
  text-align: center;
}
.formThanks__img img{
  width: 50%;
}
.formThanks h2{
  text-align: center;
  color:var(--app-main-cr);
  margin:10px auto;
}
@media screen and (max-width:540px){
  .formThanks__img img{
    width: 70%;
  }
}


/* ワーク完了チェック */
.popupMytop.con_det .con_title{
  /* background: #f2f2f2; */
  border-radius:12px;
  padding-right:1.0em;
  padding-left:1.0em;
}
.popupMytop .contactBox .contactBoxInn{
  padding: 0px;
}
.popupMytop .contactBox .BtM button.contactRegBt,
.popupMytop .contactBox .BtM button.sbmCpBt{
  max-width:350px;
}
.popupMytop.popup .con_form .BtM button.closePuBt{
  max-width:350px;
}

/* お問合せページ */
.info_cnt .con_form{
  margin-top:-30px;
}
.info_cnt .contactBox p.contactTtitle{
  display:none;
}

/* ネクストバックボタン */
.con_nblink{
  max-width: 360px;
  margin: auto;
}
@media screen and (max-width: 912px){
  .con_nblink{
    margin-top: 30px;
  }
}
.con_det .NBNext{
  float:left;
  width: 160px;
  padding: 0px 4px;
}
.con_det .NBNext button{
  background: none;
  border:2px solid var(--app-main-cr);
  color:var(--app-main-cr);
}
.con_det .NBBack button.next::after{
  content:'';
  border:none;
  top: 50%;
  right: 10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 5px;
  border-color: transparent transparent transparent var(--app-main-cr1);
  transform: translateY(-50%);
  margin:0;
}
.con_det .NBBack{
  float:right;
  width: 160px;
  padding: 0px 4px;
}
.con_det .NBNext button{
  border:2px solid var(--app-main-cr);
}

.con_det .NBNext button.back::after {
  position: absolute;
  top: 50%;
  left: 10px;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 5px 7px 0px;
  border-color: transparent var(--app-main-cr1) transparent transparent;
  transform: translateY(-50%);
  margin:0;
}

/* 記事テンプレート */
.articleBox .videoMax {
    min-width: 100%;
    z-index: 0;
    position: relative;
    top: 0;
    left: 0px;
}

.articleBox .videoMax p {
    z-index: 100;
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}

.articleBox .videoMax iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.articleBox h2{
  background:#F0F0F0;
  border-radius:8px;
  padding:12px 20px;
  font-size:18px;
  text-align: left;
  border:none;
}

/* 関連記事 */
.con_kanren_title .systemMainTitle{
  border: none;
  text-align: left;
  font-size: 2.5rem;
  padding-left: 3.0rem;
  position: relative;
}
.con_kanren_title .systemMainTitle::after{
  position: absolute;
  content: "";
  background-image: url(../../images/icon_sub.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transition: transform .4s;
}
.kanren_list_001.ptWdIM .ptLayoutInn{
  margin: 0;
  width: 100%;
}
.kanren_list_001 .ListBox.ListType3 .sldTblock{
  display: flex;
  gap: 30px;
}
.kanren_list_001 .ListBox.ListType3 dl.clmDetail{
    margin: 0;
    padding: 0px;
    border:none;
    box-shadow: none;
    background: #fff;
    width: 50%;
}
.kanren_list_001 .ListBox.ListType3 dd.title_area{
  padding: 1.0rem 20px;
}
.kanren_list_001 .ListBox.ListType3 dd.title_area h2{
  position: relative;
}
.kanren_list_001 .ListBox.ListType3 dd.title_area h2::after{
  content: "";
  border-top: 2px solid var(--app-main-cr1);
  border-left: 2px solid var(--app-main-cr1);
  display: inline-block;
  width: 13px;
  height: 13px;
  transform: rotate(135deg) translateY(9px);
  position: absolute;
  top: 50%;
  right: 0;
  transition: transform .4s;
}
.kanren_list_001 .ListTSgle dd.title_area .ListMainTitle a{
  margin:0;
  font-size: 2.0rem;
}

/* 教材ページ */
.con_course .ClmblckArea.ClmRL .mainClnS{
  float:left;
}
.con_course .ClmblckArea.ClmRL .sideClnS{
  float:right;
}
@media screen and (max-width:800px){
  .con_course .sideClnS{
      display:block;
  }
}
.con_det .con_title{
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}
.con_det .con_detail,
.con_det .FlexblckArea{
  background-color: #fff;
}
@media screen and (max-width:800px){
  .con_det .articleBox{
    padding: var(--BgBox-pd);
    width:100%;
  }
}
.con_det .FlexblckArea .ptLayoutInn.FlexR{
  justify-content: space-between;
  width: 100%;
}
@media screen and (max-width: 540px) {
  .FlexblckArea .FlexR{
    flex-direction: column;
    justify-content: flex-start;
  }
}
.con_det #wrapper{
  background: transparent;
}
.ListBox.ListType3 dl.clmDetail .title_area::after{
  display: none;
}
.con_course .siteFavorite a{
  background:var(--app-main-cr-c);
  color:#fff;
  padding: 10px;
  width: 200px;
  text-align: center;
  border:none;
  border-radius: 30px;
}
.siteFavorite a.crt,
.siteFavorite a:hover{
  background:none;
  border:2px solid var(--app-main-cr-c);
  color:var(--app-main-cr-c);
}

.con_det .con_blockArea{
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 800px){
  .con_det .con_blockArea{
    flex-wrap: wrap;
    flex-direction: column-reverse;
    align-items: center;
  }
}

.con_det .con_blockArea .con_blockArea_main{
  width: 65%;
}
@media screen and (max-width: 800px){
  .con_det .con_blockArea .con_blockArea_main{
    width: 100%;
  }
}

.con_det .con_blockArea .con_blockArea_main .ptWdM.ptWdIN{
  width: 100%;
}

.con_det .con_blockArea .con_blockArea_side{
  width: 25%;
}
@media screen and (max-width: 800px){
  .con_det .con_blockArea .con_blockArea_side{
    width: 100%;
  }
}

.con_det .con_blockArea .con_blockArea_side .con_side_navi{
  background: #f2f2f2;
  margin: 60px auto 0;
  padding: 40px 15px 15px;
  border-radius: 8px;
}
@media screen and (max-width: 800px){
  .con_det .con_blockArea .con_blockArea_side .con_side_navi{
    margin-top: 0px;
    margin-bottom: 60px;
  }
  .con_det .con_blockArea .con_blockArea_side .con_side_navi{
    padding: 40px 15px;
  }
  .con_det .con_blockArea .con_blockArea_side .con_side_navi.open{
    padding: 40px 15px 15px;
  }
}
.con_det .con_side_navi_title{
  margin-bottom: 16px;
}
.con_det .con_side_navi_title h2{
  color: #666;
  position: relative;
}
@media screen and (max-width: 800px){
  .con_det .con_side_navi_title{
    margin-bottom: 0;
  }
  .con_det .con_side_navi_title h2::after{
    content: "";
    border-top: 1px solid black;
    border-left: 1px solid black;
    display: inline-block;
    width: 15px;
    height: 15px;
    transform: rotate(-135deg) translateY(9px);
    position: absolute;
    right: 3%;
    top: 50%;
    transition: transform .4s;
  }
  .con_det .con_side_navi_item.con_list_001{
    padding: 0;
    margin-top: 0;
    position: relative;
    opacity: 0;
    height: 0;
    transition: line-height 0.4s, padding 0.4s, opacity 0.4s;
  }
  .con_det .con_side_navi_item.con_list_001.is-open{
    opacity: 1;
    height: auto;
    margin-top: 16px;
  }
}

.con_det .ListBox.ListType3.liwbg01 dl.clmDetail,
.con_det .ListBox.ListType5.liwbg01 .clmDetail{
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.con_det #contents .ListTSgle dd.title_area .ListMainTitle a{
  font-size: 16px;
  color: #3cb5d7;
  font-weight: normal;
}

.con_det .contactBox .BtM button,
.other_det .contactBox .BtM button{
  width: 300px;
  border-radius: 8px;
  margin: 10px auto;
  /* height: 50px; */
  padding: 16px;
}
@media screen and (max-width: 800px){
  .con_det .contactBox .BtM button,
  .other_det .contactBox .BtM button{
    width: 75%;
  }
}

.con_det .contactBox .BtM button::after{
  border-left-color: #fff;
}
.con_det .con_nblink .BtM button.NBLinkBt{
  background: transparent;
  border: 1px  solid var(--app-main-cr1);
  color: var(--app-main-cr1);
  padding: 15px;
  border-radius: var(--BtM-rod);
}

@media screen and (max-width: 800px){
  .con_det .con_blockArea_main,
  .con_det .con_blockArea_side{
    width: 100%;
  }
}

.con_det .con_detail .articleBox p iframe{
  display: inline-block;
  width: 100%;
  margin: 0 auto;
}

/* 教材サイドfaq */
.con_course .kanren_list_001 .faq_list_title{
  position: relative;
  z-index:2;
}
.con_course .kanren_list_001 .faq_list_title p{
  text-align: center;
  font-weight:bold;
  position:relative;
  font-size:18px;
  padding:40px 0px;
}
.con_course .kanren_list_001 .faq_list_title p::after{
  position:absolute;
  content:'';
  background:#D9EFDF;
  width:70px;
  height:70px;
  border-radius: 50%;
  z-index:-1;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
@media screen and (max-width: 540px) {
  .con_course .kanren_list_001 .faq_list_title p{
    margin-top:20px;
  }
}

.con_course .kanren_list_001 .ListTSgle dd.title_area .ListMainTitle a{
  font-size:14px;
  padding-left:16px;
  display: block;
  position:relative;
  line-height: 1.5;
}
.con_course .kanren_list_001 .ListTSgle dd.title_area .ListMainTitle a::before{
    content:"";
    position: absolute;
    width:6px;
    height:6px;
    background-color:var(--app-main-cr);
    border-radius:50vh;
    top:50%;
    left:0;
    transform:translateY(-50%);
}
@media screen and (max-width: 540px) {

}

/* よくある質問 */
.con_faq .con_title {
    background-color: #fff;
    font-size:20px;
}
.con_faq h1.conTitle{
  padding:32px 32px 32px 80px;
  position:relative;
  border-bottom:1px solid #F5F9F6;
}
.con_faq h1.conTitle::before {
  position:absolute;
  content: "";
  height:40px;
  width:40px;
  background-image: url(../../images/contents/faq_icon_q.png);
  background-size:contain;
  top:50%;
  left:24px;
  transform:translateY(-50%);
}
@media screen and (max-width: 540px) {
  .con_faq .con_title {
      font-size:14px;
  }
  .con_faq h1.conTitle{
    padding:24px 16px 16px 60px;
  }
  .con_faq h1.conTitle::before {
    height:30px;
    width:30px;
    left:16px;
  }
}
.con_faq .con_detail{
  background-color: #fff;
}
.con_faq .articleBox{
  position:relative;
  padding:16px 32px 16px 80px;
}
.con_faq .articleBox:before{
  position:absolute;
  content: "";
  height:40px;
  width:40px;
  background-image: url(../../images/contents/faq_icon_a.png);
  background-size:contain;
  top:32px;
  left:24px;
}
@media screen and (max-width: 540px) {
  .con_faq .articleBox{
    width:100%;
    padding:16px 16px 16px 60px;
  }
  .con_faq .articleBox:before{
    height:30px;
    width:30px;
    left:16px;
  }
}

@media screen and (max-width: 700px) {
    .articleBox .videoMax {
        min-width: calc(100% + 40px);
        z-index: 0;
        position: relative;
        top: 0;
        left: -20px;
    }
}

/* お知らせ */
.con_news .con_title {
    background-color: #fff;
    font-size:20px;
    padding:16px 32px;
    border-bottom:1px solid #F5F9F6;
}
.con_news h1.conTitle{
  position:relative;
  padding:0px;
}
@media screen and (max-width: 540px) {
  .con_news .con_title {
      font-size:14px;
      padding:16px 24px;
  }
  .con_news h1.conTitle{
    padding:0px;
  }
}
.con_news .con_detail{
  background-color: #fff;
}
.con_news .articleBox{
  position:relative;
  padding:32px;
}

@media screen and (max-width: 540px) {
  .con_news .articleBox{
    width:100%;
    padding:16px;
  }
}

/* イベントカレンダー */
/* .googlecal{text-align: center;}
.googlecal iframe{
  margin:30px auto;
} */
.cal_wrapper {
max-width: 960px; /* 最大幅 */
min-width: 300px; /* 最小幅 */
margin: 2.0833% auto;
}
.googlecal {
position: relative;
padding-bottom: 100%; /* 縦横比 */
height: 0;
}
.googlecal iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/* 画面幅が768px以上の場合の縦横比の指定 */
@media only screen and (min-width: 768px) {
.googlecal { padding-bottom: 75%; }
}


/* いいね・お気に入り */
.con_det .con_blockArea .con_blockArea_main .ptWdM.ptWdIN.con_site_share{
  width: 300px;
}
@media screen and (max-width: 540px) {
  .con_det .con_blockArea .con_blockArea_main .ptWdM.ptWdIN.con_site_share{
    width: 100%;
  }
}
.con_det .NBLink,
.other_det .NBLink{
  width: auto;
  margin-right: 0;
}
@media screen and (max-width: 540px) {
  .con_det .NBLink{
    margin: 0 auto;
  }
}
.siteShareBox{
  margin-right: 0;
}
@media screen and (max-width: 540px) {
  .siteShareBox{
    margin-right: auto;
    margin-left: 0;
  }
}
.con_det .siteShareBox a,
.other_det .siteShareBox a{
  background: url(../../images/icon_save.png) 6px center no-repeat #fff;
  background-size: 15px 15px;
  font-size: 1.6rem;
}
.con_det .siteShareBox a.crt,
.con_det .siteShareBox a:hover,
.other_det .siteShareBox a.crt,
.other_det .siteShareBox a:hover{
  background: url(../../images/icon_saved.png) 6px center no-repeat var(--app-main-cr1);
  background-size: 15px 15px;
  border: 1px solid var(--app-main-cr1);
}
.con_det .siteFavoriteBox,
.other_det .siteFavoriteBox{
  margin-left: 0;
  padding: 0;
}
@media screen {
  .con_det .siteFavoriteBox{
    margin: 0 auto;
  }

}
.con_det .siteFavoriteBox a,
.other_det .siteFavoriteBox a{
  background: var(--app-main-cr1);
  border: 1px solid var(--app-main-cr1);
  color: #fff;
  padding: 15px;
  font-size: 1.6rem;
  width: 200px;
  text-align: center;
}
.con_det .siteFavoriteBox a.crt,
.other_det .siteFavoriteBox a.crt{
  background: url(../../images/icon_check.png) 6px center no-repeat #acacac;
  background-size: 15px 15px;
  border: 1px solid #acacac;
  background-position-x: 45px;
}
.con_det .con_nbnlckArea{
  display: flex;
  align-items: center;
  padding: 16px 32px;
  padding-bottom: 60px;
}
@media screen and (max-width: 540px) {
  .con_det .con_nbnlckArea{
    flex-direction: column;
    justify-content: center;
    padding: 16px 0;
  }
}
.con_det .con_nbnlckArea .FlexR{
  margin: auto;
  margin-left: 0;
}

/* コメント */
.con_det .conCommentArea,
.other_det .conCommentArea{
  padding: 16px 32px;
}
@media screen and (max-width: 540px) {
  .con_det .conCommentArea,
  .other_det .conCommentArea{
    padding: 16px 0;
  }
}
.con_det .commentBox,
.other_det .commentBox{
  box-shadow: none;
  width: 100%;
}
.con_det .commentBox input.txt,
.other_det .commentBox input.txt,
.con_det .commentBox textarea.txt,
.other_det .commentBox textarea.txt{
  background-color: #f2f2f2;
  border: 1px dotted #acacac;
  font-size: 16px;
  padding: 1.5rem;
}

/* 添削履歴 */
.con_workhistory {
  background:#D9EFDF;
}
.con_workhistory section.mainTi{
  border-bottom:0px;
  padding-top:40px;
}
.mywork_det .mypageBoxDet,
.con_workhistory .mypageBoxDet{
  background:none;
  padding:0px;
}
.mywork_det .mypageOrdBox,
.con_workhistory .mypageOrdBox{
  background:#fff;
  margin:16px;
  border:none;
  border-radius: 8px;
}
.mywork_det .mypageOrdBoxInn,
.con_workhistory .mypageOrdBoxInn{
  border:none;
  padding:0px 30px;
}
.mywork_det .mypageBoxDet dl,
.mypageOrdBox dl,
.con_workhistory .mypageOrdBox dl,
.con_workhistory .mypageBoxDet dl{
  border:none;
}
.mywork_det .mypageBoxDet dt,
.con_workhistory .mypageOrdBox dt{
  min-width: 80px;
}

@media screen and (max-width: 540px) {
  .con_workhistory{
    margin-top:30px;
  }

  .mywork_det .mypageOrdBoxInn,
  .con_workhistory .mypageOrdBoxInn{
    padding:0px 16px;
  }

  .con_workhistory section.mainTi h1.mainTiInn{
    font-size: 18px;
  }

}


/****************** 個別ページ ******************/
.other_det h1.conTitle {
  background: transparent;
}
.other_det #main .ptWdM{
  width: 100%;
}
.other_det .con_detail{
  background: #fff;
  padding: 24px 32px 16px;
  margin-bottom: 0;
}
.other_det .con_form {
  background: #fff;
  padding-bottom: 32px;
  padding: 16px 32px 40px;
}

@media screen and (max-width:540px){
  .other_det #main{
    width: 100%;
  }
  .other_det .con_detail{
    padding: 30px 32px 8px;
  }

  .other_det .con_form {
    padding-bottom: 32px;
    padding: 8px 32px 48px;
  }

}



/****************** サブページ ******************/
.sub_det #main .ptWdM{
  width: 100%;
}