@charset "utf-8";

/* =============================================
	system cmn
============================================= */
:root{
  --ict-red: #f72b2b;
  --ict-color: #ED5B52;
  --ict-btn: #008bc2; 
  --ict-btn-dark: #2b5473;
  --ict-btn-text: #fff;
  --ict-bg-color: #f6f6f4;
  --ict-bg-color-light: #f6f6f4;
  --ict-bg-color-dark: #EDEDE9;
}
.content__wrap{
  background-color: var(--ict-bg-color);
}

/* 時刻による表示・非表示 */
main .js-time_limited,
main .tag-box span.js-time_limited{
  display: none;
}

/*
 「募集中/終了」などで入れ替える場合のレイアウトシフト防止
 switching-box 内に配置
*/
main .switching-box{
  display: grid;
  grid-template-rows: 1fr;
	grid-template-columns: 1fr;
  margin-top: 25px; 
}
main .switching-box .js-time_limited{
  display: block;
  visibility: hidden;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
main .switching-box .js-time_limited.btn-cont,
main .switching-box .js-time_limited.btn-cont .btn-link{
  margin-top: 0;
  margin-bottom: 0;
}

/* 表示 */
main .js-time_limited_fire,
main .content__wrap .switching-box .js-time_limited_fire{ 
  display: block;
  visibility: visible;
}
main .js-time_limited_fire.limited--inline,
main .tag-box span.js-time_limited_fire{
  display: inline-block;
}

/* --- イベント関連マーク -- */
.tag-sys{
  background-color: #fff;
}
.tag-sys span{
  margin-right: 10px;
}
.tag-box{
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding-top: 5px;
  margin-top: auto;
}
.tag-box > span,
.tag{
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding: 3px 10px;
  margin: auto 0 0;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--ict-btn-dark);
  border: 1px solid #9ab1df;
  border-radius: 3px;
}
.tag-box > span.tag-close{
  color: #fff;
  background-color: #7e858b;
}

/* --- スマホ版　開閉ナビゲーション内調整 --- */
.content-nav{
  padding: 25px;
  margin: 0;
  background-color: #fff;
}
.content-nav__course-name{
  border-bottom: 1px solid #ccc;
}
.content-nav__course-name a::before{
  content: none;
}
.content-nav .current a{
  color: var(--nikken-red);
}
.content_nav_box .sys-btm-nav__list > li{
  flex-basis: 100%;
}
.content_nav_box .sys-btm-nav__list > li ul{
  display: none;
}
.content_nav_box .sys-btm-nav__list > li ul:has(.current){
  display: block;
}
.content_nav_box a,
.content_nav_box .sys-btm-nav__list a,
.content_nav_box .sys-btm-nav__list span{
  position: relative;
  display: flex;
  align-items: center;
  padding: 5px 0;
  font-size: 1.5rem;
  text-align: left;
}
.content_nav_box .sys-btm-nav a.current{
  color: var(--nikken-red);
}
.content_nav_box .sys-btm-nav a::before{
  width: 5px;
  height: 5px;
  margin: 0 5px 0 0;
  content: ' ';
  border-top: 1px solid #1b314f;
  border-left: 1px solid #1b314f;
  transform: rotate(135deg);
}
.content_nav_box .sys-btm-nav li li{
  margin-left: 2em;
}
.content_nav_box .dire br{
  display: none;
}


/* */
.sys-content-box__wrap{
  padding: 40px 0 0;
  background: url(../img/bg.png) no-repeat left top;
}
.sys-content-box{
  padding-bottom: 50px;
  margin: 0;
  background: url(../img/bg2.png) no-repeat right bottom;
}
.sys-content-box__header{
  margin: 0 0 20px;
  text-align: center;
}
.sys-content-box__ttl{
  margin: 0 0 20px;
  font-size: clamp(2.0rem, calc(0.578rem + 2.96vw), 2.8rem);
  font-weight: 900;
  color: #ED5B52;
  text-align: center;
}
.sys-content-box__ttl span{
  position: relative;
  display: inline-block;
}
.sys-content-box__ttl span::before{
  position: absolute;
  right: 0;
  bottom: -15px;
  left: 0;
  width: 100%;
  height: 2px;
  margin: 0 auto ;
  content: ' ';
  background-color: #ed5b52;
}
.sys-content-box__ttl--lv2{
  margin: 40px 0 20px;
  font-size: 2.4rem;
  color: #333;
  text-align: center;
}
.sys-content-box__ttl + p{
  margin: 50px 0;
  font-size: 1.8rem;
}
.sys-content-info{
  font-size: 1.5rem;
}
.sys-content-ico img{
  width: auto;
  max-width: 1000px;
  height: 310px;
  margin: 0 0 -168px;
  vertical-align: top;
  border: none;
  border-radius: 0;
}
.sys-content-box.inquiry{
  padding:50px 0 60px;
}

/* お問い合せ */
.inquiry-box__wrap{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 15px;
}
.inquiry-box{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #fff;
}
.inquiry-box .callcenter_cont{
  flex-direction: column;
  margin: 0;
}
.inquiry-box > a,
.inquiry-box > div{
  display: block;
  width: 100%;
  padding: 20px;
}
p.inquiry__info{
  margin: 40px 0 0;
}
.place-info a{
  display: block;
  width: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.88 7.88"><path d="m1.35.22-.82.82 2.83 2.84L.53 6.71l.82.82L5 3.88 1.35.22z" style="fill:rgb(43, 84, 115)"/></svg>');
  background-repeat: no-repeat;
  background-position: 98% center;
  background-size: 12px 16px;
}
.place-info a h3{
  display: inline-block;
  width: 100%;
  padding:0 20px 0 0;
  font-size: 2.6rem;
  transition: all 0.2s ease;
}
.place-info a:hover{
  opacity: 0.7;
}
.catalog-request{
  margin: 0 0 30px;
}
.catalog-request .btn-link a{
  display: flex;
  gap: 1px;
  align-items: center;
  justify-content: center;
}

/* ===========================================
	MediaQueries
=========================================== */

/* スマホ----------------------------- */
@media screen and (width <= 767px){
  .sys-content-box__header p{
    margin-top: 30px;
    font-size: 1.4rem;
    text-align: left;
  }
  .inquiry-box > a,
  .inquiry-box > div{
    border: 1px solid #eaeae6;
  }
  .content-nav .sys-btm-nav__list br{
    display: none;
  }
}

/* PC----------------------------- */
@media screen and (width >= 768px){
  .content-range{
    width: 90%;
    max-width: 1300px;
    padding: 0 10px;
    margin: 0 auto;
  }
  .content-nav .sys-btm-nav__list{
    width: 100%;
    max-width: none;
  }
  .sys-content-index__header > * {
    width: 90%;
    max-width: 1300px;
    margin-right: auto;
    margin-left: auto;
  }
  .sys-content-box__header p{
    font-size: 1.6rem;
  }
  .inquiry-box__wrap{
    grid-template-columns: repeat(2, 1fr);
  }
  .inquiry-box__wrap{
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media screen and (width >= 1024px){
  .br_middle{
    display: none;
  }
}