/*---------------------------------

  共通

---------------------------------*/
h2 {
  margin-bottom: 64px;
}


.flex_co {
  display: flex;
  flex-direction: column;
}
.txt {
  color: var(--text);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 27.2px */
}
.flex_area {
  gap: 55px;
}
.flex_item_col2 {
  flex: 0 0 calc((100% - 55px) / 2);
}
.flex_item_col4 {
  flex: 0 0 calc((100% - 60px) / 4);
}

/* ページ内リンク */
.page_inner_nav {
  padding: 80px 0 71px;
}
.page_inner_nav ul {
  justify-content: flex-start;
}
.page_inner_nav ul li {
  position: relative;
  margin: 0 75px 20px 0;
}
.page_inner_nav ul li:last-child::after{
  content: none;
}
.page_inner_nav ul li::after {
  content: "";
  background-color: var(--text);
  position: absolute;
  top: 7px;
  right: -50px;
  width: 1px;
  height: 16px;
}
.page_inner_nav ul li a{
  display: block;
  color: var(--main);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 27.2px */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  position: relative;
}
.page_inner_nav ul li a::after{
  content: "";
  background-color: var(--main);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  right: -34px;
  width: 24px;
  height: 24px;
  background-image: url(/wp-content/themes/cuse/img/common/arrow_r_w.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  transform: rotate(90deg); /* 矢印を45度回転 */
}

@media screen and (max-width:1023px){
  .flex_item_col4 {
    flex: 0 0 calc((100% - 30px) / 2);
  }
}
@media screen and (max-width:767px){
  .title {
    font-size: 50px;
  }
  .title span {
    font-size: 20px;
  }
  .flex_item_col2,
  .flex_item_col4{
    flex: 0 0 auto;
  }
  .txt {
    font-size: 14px;
  }
  .page_inner_nav {
    padding: 50px 0 31px;
  }
  .page_inner_nav ul li {
    margin-right: 50px;
  }
  .page_inner_nav ul li::after {
    content: none;
  }
}

/*---------------------------------

  bloc_dsp_01

---------------------------------*/

.bloc_dsp_01{
    padding: 90px 0 160px;
}
.bloc_dsp_01 .title_basic {
  margin-bottom: 48px;
}
.bloc_dsp_01 .title_basic span{
    display: block;
    font-size: 24px;
}
.dsp_01_area {
  flex-direction: column;
  flex-wrap: nowrap;
}
.dsp_01_area .data {
  align-items: flex-start;
  gap: 32px;
}
.dsp_01_area .data ul li {
  list-style: inside;
}
.dsp_img {
  display: flex;
  justify-content: center;
}
.dsp_img img {
  width: 100%;
  max-width: 1000px;
}
/* @media screen and (max-width:767px){
  .dsp_01_area {
    flex-direction: column;
  }
} */
/*---------------------------------

  bloc_dsp_02
  ピックアップ授業

---------------------------------*/

.bloc_dsp_02{
    padding: 160px 0;
}
.dsp_02_wrap {
  gap: 80px;
}
.dsp_02_item {
  gap: 32px;
}
.dsp_02_item .point {
  padding: 24px 20px;
  border: 1px solid var(--main);
  color: var(--main);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%; /* 22px */
}
@media screen and (max-width:767px){
  .dsp_02_area {
    flex-direction: column;
  }
  .dsp_02_item .point {
    font-size: 18px;
  }
}
/*---------------------------------

  bloc_dsp_03

---------------------------------*/

.bloc_dsp_03{
    padding: 160px 0;
}
@media screen and (max-width:767px){
  .dsp_03_area {
    flex-direction: column;
  }
}

/*---------------------------------

  bloc_dsp_04

---------------------------------*/

.bloc_dsp_04{
    padding: 160px 0;
}
.dsp_04_area {
    position: relative;
  gap: 20px;
}
.dsp_04_item {
    position: relative;
  height: 524px;
  background-size: cover;
  background-repeat: no-repeat;
    cursor: pointer;
}
.dsp_04_item::before{
    content: '';
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: block;
    width: 56px;
    height: 56px;
    background: #fff;
    border-radius: 50%;

}
.overlay.open2{
    visibility: visible;
    cursor: pointer;
    background: rgba(0,0,0,.7);
    z-index: 100000;
}
.dsp_04_item + .desc{
    position: absolute;
    top: calc(50% - 50px);
    left: 10%;
    display: none;
    width: 80%;
    min-height: 100px;
    padding: 30px;
    background: #fff;
    border-radius: 15px;
    font-size: 18px;
    line-height: 2;
    z-index: 1;
}
.dsp_04_item.active + .desc{
    display: block;
    z-index: 100001;
}

.dsp_04_item01 {
  background-image: url(/wp-content/themes/cuse/img/dsp/dsp_keyword_01.jpg);
}
.dsp_04_item02 {
  background-image: url(/wp-content/themes/cuse/img/dsp/dsp_keyword_02.jpg);
}
.dsp_04_item03 {
  background-image: url(/wp-content/themes/cuse/img/dsp/dsp_keyword_03.jpg);
}
.dsp_04_item04 {
  background-image: url(/wp-content/themes/cuse/img/dsp/dsp_keyword_04.jpg);
}
.dsp_04_txt {
    position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
    width: 100%;
    height: 100%;
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}
.dsp_04_txt::before{
    content: '';
    position: absolute;
    bottom: 46px;
    right: 38px;
    display: block;
    width: 20px;
    height: 1px;
    background: var(--main);
    z-index: 1;
}
.dsp_04_txt::after{
    content: '';
    position: absolute;
    bottom: 46px;
    right: 38px;
    display: block;
    width: 20px;
    height: 1px;
    background: var(--main);
    z-index: 1;
    transform: rotate(90deg);
    transition: .3s;
}

@media screen and (max-width:1023px){
  .dsp_04_item {
    height: 200px;
  }
    .dsp_04_item::before{
        content: '';
        position: absolute;
        bottom: 20px;
        right: 20px;
        display: block;
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 50%;
    }
    .dsp_04_txt::before {
        bottom: 38px;
        right: 33px;
        width: 14px;
    }
    .dsp_04_txt::after{
        bottom: 38px;
        right: 33px;
        width: 14px;
    }
}
@media screen and (max-width:767px){
  .dsp_04_area {
    flex-direction: column;
  }
  .dsp_04_txt {
    font-size: 20px;
  }
    .dsp_04_item.active{
        height: 80px;
    }
    .dsp_04_item + .desc{
        position: relative;
        display: none;
        width: 80%;
        min-height: 100px;
        padding: 30px;
        font-size: 16px;
        line-height: 1.6;
        z-index: 1;
    }
}
  /*---------------------------------

  bloc_dsp_05

---------------------------------*/

.bloc_dsp_05{
    padding: 160px 0;
}
.dsp_05_box {
  gap: 32px;
}
.dsp_05_item {
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}
.pickup_area {
  width: 68%;
  max-width: 984px;
  margin: 0 auto;
  margin-top: 56px;
}
.pickup_area h3 {
  color: var(--text);
  font-size: 64px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 76.8px */
  margin-bottom: 16px;
}
.pickup_box {
  padding: 56px 80px;
  border: 1px solid var(--main);
  gap: 23px;
}
.pickup_box h4 {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 26.4px */
  color: var(--main);
}
.pickup_item {
  gap: 24px;
  flex: 0 0 calc((100% - 23px) / 2);
}
@media screen and (max-width:767px){
  .dsp_05_area,
  .pickup_box {
    flex-direction: column;
  }
  .pickup_box {
    padding: 45px 30px;
  }
  .dsp_05_item {
    font-size: 30px;
  }
  .pickup_area h3 {
    font-size: 50px;
  }
  .pickup_box h4 {
    font-size: 20px;
  }
}
/*---------------------------------

  bloc_dsp_06

---------------------------------*/

.bloc_dsp_06{
    padding: 160px 0;
}
.dsp_06_area {
  gap: 32px;
}
.dsp_06_item {
  flex: 0 0 calc((100% - 128px) / 5);
  gap: 10px;
}
.dsp_06_item p {
  text-align: center;
  color: var(--main);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 24px */
}
@media screen and (max-width:767px){
  .dsp_06_item {
    flex: 0 0 calc((100% - 32px) / 2);
  }

  .dsp_06_item p {
    font-size: 16px;
  }
}