/* Scss Document */
img {
  vertical-align: bottom;
}

.h2 {
  color: #008585;
  margin-bottom: 20px;
}

.title_wrap {
  flex-wrap: wrap;
  grid-gap: 0;
}
.title_wrap .text {
  width: 100%;
}

.cont_head_wrap .cont_head_logo {
  height: 74px;
  border-top: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.cont_head_wrap .cont_head_logo .logo {
  width: 123px;
  height: 57px;
}
.cont_head_wrap .cont_head_logo .logo .icon {
  background-image: url("../images/common/logo_sss01.svg");
}
.cont_head_wrap .cont_head_navi {
  height: 48px;
  background-color: #008585;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cont_head_wrap .cont_head_navi .btns {
  justify-content: space-between;
  grid-gap: 0;
}
.cont_head_wrap .cont_head_navi .a {
  color: #FFF;
  text-decoration: none;
}
@media (min-width: 960px) {
  .cont_head_wrap .cont_head_navi .btns {
    justify-content: center;
    grid-gap: 46px;
  }
}

section[key=mv] {
  background: linear-gradient(95deg, #97E5E5 0%, #FCFFE8 100%);
  padding: 30px 0 30px;
}
section[key=mv] .archive {
  background-color: #FCFBF8;
  border-radius: 12px;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.13);
  display: flex;
  flex-wrap: wrap;
  position: relative;
  grid-gap: 40px;
  padding: 30px 40px;
  flex-direction: column-reverse;
}
section[key=mv] .archive .tags {
  display: none;
}
@media (min-width: 960px) {
  section[key=mv] .archive {
    padding: 30px 40px;
    grid-gap: 40px;
    align-items: center;
    flex-direction: row;
  }
}
@media (min-width: 1280px) {
  section[key=mv] .archive {
    grid-gap: 100px;
  }
}
section[key=mv] .archive > a {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 960px) {
  section[key=mv] .archive > a {
    --gap: 40px;
    --imageWidth: 220px;
    --imageHight: 192px;
    grid-gap: var(--gap);
    align-items: center;
  }
}
@media (min-width: 1280px) {
  section[key=mv] .archive > a {
    --gap: 100px;
    --imageWidth: 311px;
    --imageHight: 192px;
  }
}
@media (min-width: 960px) {
  section[key=mv] .archive > a .info {
    width: calc(100% - var(--imageWidth) - var(--gap));
  }
}
section[key=mv] .archive > a .info .data .date {
  display: none;
}
section[key=mv] .archive > a .info > .text {
  display: none;
}
section[key=mv] .archive > a .info .ex_data {
  display: flex;
  align-items: flex-start;
  color: #888;
}
section[key=mv] .archive > a .info .ex_data .date {
  margin: 0 10px 0 0;
}
section[key=mv] .archive > a .info .ex_data .tag span:not(:last-child) {
  margin-right: 10px;
}
section[key=mv] .archive .photo {
  width: 100%;
}
section[key=mv] .archive .photo:after {
  display: none;
}
@media (min-width: 960px) {
  section[key=mv] .archive .photo {
    width: var(--imageWidth);
  }
}
@media (min-width: 1280px) {
  section[key=mv] .archive .photo {
    height: var(--imageHeight);
    position: static;
  }
}
section[key=mv] .slideshow .cuts .slick-track {
  padding-bottom: 40px;
}
section[key=mv] .slideshow .cuts .slick-slide {
  margin-right: 15px !important;
  margin-left: 15px !important;
}
section[key=mv] .slideshow .cuts .slick-dots {
  display: flex;
  grid-gap: 14px;
  justify-content: center;
}
section[key=mv] .slideshow .cuts .slick-dots li {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 133, 133, 0.3);
  border-radius: 4px;
}
section[key=mv] .slideshow .cuts .slick-dots li button {
  background: none;
  font-size: 0;
}
section[key=mv] .slideshow .cuts .slick-dots li.slick-active {
  background-color: rgb(0, 133, 133);
}
section[key=mv] .slideshow .cuts .slick-arrow {
  background-color: none;
  background-color: transparent;
  background-image: url("../images/sss/slidearrow.png");
  background-size: contain;
  width: 27px;
  height: 27px;
  font-size: 0;
  position: absolute;
  bottom: -7px;
}
section[key=mv] .slideshow .cuts .slick-arrow.slick-prev {
  left: calc(50% - 27px - 58px);
}
section[key=mv] .slideshow .cuts .slick-arrow.slick-next {
  transform: rotate(180deg);
  right: calc(50% - 27px - 58px);
}
section[key=mv] .slideshow .cuts .cut {
  background-color: #FCFBF8;
  border-radius: 12px;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.13);
}
section[key=mv] .slideshow .cuts .cut .inner {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 40px;
  padding: 40px 20px;
  position: relative;
  flex-direction: column-reverse;
}
section[key=mv] .slideshow .cuts .cut .inner .text_box {
  width: 100%;
}
section[key=mv] .slideshow .cuts .cut .inner .text_box .category {
  margin-bottom: 14px;
}
section[key=mv] .slideshow .cuts .cut .inner .text_box .title {
  font-size: 1.7rem;
  line-height: 1.6;
  margin-bottom: 20px;
}
section[key=mv] .slideshow .cuts .cut .inner .text_box .data {
  color: #888;
  display: flex;
  align-items: center;
}
section[key=mv] .slideshow .cuts .cut .inner .img_box {
  width: 100%;
}
@media (min-width: 960px) {
  section[key=mv] .slideshow .cuts .cut .inner {
    padding: 30px 40px;
    grid-gap: 40px;
    align-items: center;
    flex-direction: row;
  }
  section[key=mv] .slideshow .cuts .cut .inner .text_box {
    width: calc(100% - 220px - 40px);
  }
  section[key=mv] .slideshow .cuts .cut .inner .img_box {
    width: 220px;
  }
}
@media (min-width: 1280px) {
  section[key=mv] .slideshow .cuts .cut .inner {
    grid-gap: 100px;
  }
  section[key=mv] .slideshow .cuts .cut .inner .text_box {
    width: calc(100% - 311px - 100px);
  }
  section[key=mv] .slideshow .cuts .cut .inner .img_box {
    width: 311px;
    height: 192px;
    position: static;
  }
}
section[key=concept].section_cont {
  padding: 114px 0 0;
}
section[key=concept] .img_box {
  width: 251px;
  height: 116px;
  margin: 0 auto;
  position: relative;
}
section[key=concept] .img_box:after {
  content: "";
  display: block;
  width: 300px;
  height: 1000vh;
  background-color: #FFF;
  position: absolute;
  top: calc((116px - 1000vh) / 2);
  z-index: -1;
  left: -24.5px;
  transform: skewX(-40deg);
}
section[key=concept] .img_box .icon {
  background-image: url("../images/common/logo_sss01.svg");
}
section[key=concept] .photo .bg {
  background-image: url("../images/sss/bg_concept.jpg");
  padding-top: 30%;
}
section[key=concept] .columns {
  padding-bottom: 114px;
}
@media (min-width: 960px) {
  section[key=concept] .columns {
    --gap: 148px;
    align-items: center;
  }
  section[key=concept] .columns .text_box {
    width: calc(100% - 251px - 148px);
  }
  section[key=concept] .photo .bg {
    padding-top: 22%;
  }
}
section[key=activity].section_cont {
  padding: 108px 0 104px;
}
section[key=activity] .main {
  margin-bottom: 70px;
}
section[key=activity] .main .img_box {
  width: 364px;
  height: 403px;
  margin: 0 auto 30px;
}
section[key=activity] .main .img_box .icon {
  background-image: url("../images/sss/activity_main.png");
}
section[key=activity] .main .text_box .sub {
  color: #008585;
  font-size: 1.4rem;
  margin-bottom: 20px;
}
section[key=activity] .finely .column {
  border-radius: 12px;
  border: 1px solid #E0E0E0;
  background: #FFF;
  box-sizing: border-box;
  padding: 30px;
}
section[key=activity] .finely .column .img_box {
  margin: 0 auto 20px;
  height: 248px;
}
section[key=activity] .finely .column[key=consultation] .icon {
  background-image: url("../images/sss/activity_consultation.png");
}
section[key=activity] .finely .column[key=session] .icon {
  background-image: url("../images/sss/activity_session.png");
}
section[key=activity] .finely .column[key=program] .icon {
  background-image: url("../images/sss/activity_program.png");
}
section[key=activity] .finely .text_box .head {
  font-size: 1.35rem;
  margin-bottom: 20px;
}
@media (min-width: 960px) {
  section[key=activity] .main .columns {
    align-items: center;
    --gap: 145px;
  }
  section[key=activity] .main .columns .img_box {
    margin: 0;
  }
  section[key=activity] .main .columns .text_box {
    width: calc(100% - 364px - 145px);
  }
  section[key=activity] .finely .columns {
    --gap: 14px;
  }
  section[key=activity] .finely .columns.column3 .column {
    width: calc((100% - var(--gap) * 2) / 3);
    padding: 0 30px 30px;
  }
}
section[key=youtube].section_cont {
  padding: 0 0 130px;
}
section[key=youtube] .to_link {
  justify-content: flex-start;
  margin: 0;
}
section[key=youtube] .section_title_wrap {
  margin-bottom: 70px;
}
section[key=youtube] .section_title_wrap .columns .link .a:after {
  transform: rotate(-45deg);
}
@media (min-width: 960px) {
  section[key=youtube] .section_title_wrap .columns {
    --gap: 248px;
  }
  section[key=youtube] .section_title_wrap .columns .text_box {
    width: calc(100% - 240px - var(--gap));
  }
  section[key=youtube] .section_title_wrap .columns .link {
    width: 180px;
  }
  section[key=youtube] .section_title_wrap .columns .link .a {
    width: 180px;
  }
}
section[key=alignment].section_cont, section[key=support_company].section_cont {
  padding: 0 0 140px;
}
section[key=alignment] .to_link, section[key=support_company] .to_link {
  justify-content: flex-start;
  margin: 20px 0 0;
}
section[key=alignment] .to_link .a, section[key=support_company] .to_link .a {
  width: 150px;
}
section[key=alignment] .img_box, section[key=support_company] .img_box {
  height: 65px;
}
section[key=alignment] .img_box .a, section[key=support_company] .img_box .a {
  transition: 0.33s;
}
section[key=alignment] .img_box .a:hover, section[key=support_company] .img_box .a:hover {
  opacity: 0.6;
}
section[key=alignment] .img_box .icon, section[key=support_company] .img_box .icon {
  background-image: url("../images/sss/alignment.svg");
}
@media (min-width: 960px) {
  section[key=alignment] .columns, section[key=support_company] .columns {
    --gap: 134px;
    align-items: flex-end;
  }
  section[key=alignment] .columns .text_box, section[key=support_company] .columns .text_box {
    width: calc(100% - 522px - 134px);
  }
  section[key=alignment] .columns .img_box, section[key=support_company] .columns .img_box {
    width: 522px;
  }
}
section[key=support_company] .to_link .a {
  width: 240px;
}
section[key=support_company] .img_box {
  height: auto;
  aspect-ratio: 51/47;
}
section[key=support_company] .img_box .icon {
  background-image: url("../images/sss/support_company.png");
}
@media (min-width: 960px) {
  section[key=support_company] .columns {
    align-items: center;
  }
  section[key=support_company] .columns .text_box {
    width: calc(100% - 320px - 134px);
  }
  section[key=support_company] .columns .img_box {
    width: 320px;
  }
}
section[key=contents] {
  background-color: #FFFFFF;
}
@media (min-width: 768px) {
  section[key=contents] .section_title_wrap {
    margin-bottom: 40px;
  }
}
section[key=contents].section_cont {
  padding: 80px 0 100px;
}
section[key=coordinator].section_cont {
  padding: 100px 0 80px;
}
section[key=coordinator] .section_body_wrap .columns {
  margin-bottom: 40px;
}
section[key=coordinator] .columns {
  grid-gap: 0;
}
@media (min-width: 768px) {
  section[key=coordinator] .columns.column2 .column {
    width: 50%;
  }
}
section[key=access].section_cont {
  padding: 0 0 130px;
}
section[key=access] .section_title_wrap {
  margin-bottom: 20px;
}
section[key=access] .to_link {
  justify-content: flex-start;
}
section[key=access] .img_box {
  margin-bottom: 30px;
}
section[key=access] .text_box .head {
  font-size: 1.57rem;
  margin-bottom: 20px;
}
section[key=access] .columns {
  --gap: 60px;
}
section[key=news].section_cont {
  padding: 0 0 168px;
}
section[key=news] .section_title_wrap {
  margin-bottom: 20px;
}
section[key=foot] {
  border-top: 1px solid #008585;
  max-height: 320px;
}
section[key=foot].section_cont {
  padding: 60px 0 86px;
}
section[key=foot] .logo {
  width: 160px;
  height: 74px;
  margin: 0 auto 20px;
}
section[key=foot] .logo .icon {
  background-image: url("../images/common/logo_sss01.svg");
}
section[key=foot] .text {
  font-size: 0.92rem;
}

.cont_wrap {
  position: relative;
  overflow: hidden;
}
.cont_wrap.bottom:after {
  content: "";
  display: block;
  width: 300px;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: skewX(40deg);
  z-index: -1;
  margin: auto;
}