@charset "utf-8";

/*****************************************
*
* 体験する
*
******************************************/

/*------------------------------------------*/
/* contents
/*------------------------------------------*/

.activity-contents .box {
  position: relative;
}

@media screen and (min-width: 768px), print {
  .activity-contents .box {
    display: flex;
  }

  .activity-contents .box .cont {
    width: 100%;
  }

  .activity-contents.reverse .box {
    flex-direction: row-reverse;
  }
}

/* 画像 --------------------------------*/
.activity-contents figure img {
  width: 100%;
  border-radius: 20px 100px 20px 20px;
}

.activity-contents figure {
  overflow: hidden;
}

.activity-contents.reverse figure img {
  border-radius: 100px 20px 20px 20px;
}

@media screen and (min-width: 768px), print {
  .activity-contents figure img {
    border-radius: 20px 100px 20px 20px;
  }

  .activity-contents.reverse figure img {
    border-radius: 100px 20px 20px 20px;
  }

  .activity-contents figure {
    flex-shrink: 0;
    width: calc(calc(500 / 1400) * 100vw);
    margin-right: calc(calc(60 / 1400) * 100vw);
  }

  .activity-contents.reverse figure {
    margin-right: 0;
    margin-left: calc(calc(60 / 1400) * 100vw);
  }
}

@media screen and (min-width: 834px), print {
  .activity-contents figure img {
    border-radius: 20px 200px 20px 20px;
  }

  .activity-contents.reverse figure img {
    border-radius: 200px 20px 20px 20px;
  }

  .activity-contents figure {
    width: calc(calc(600 / 1400) * 100vw);
    margin-right: calc(calc(100 / 1400) * 100vw);
  }

  .activity-contents.reverse figure {
    margin-right: 0;
    margin-left: calc(calc(100 / 1400) * 100vw);
  }
}

@media screen and (min-width: 1400px), print {
  .activity-contents figure {
    width: 600px;
    margin-right: 100px;
  }

  .activity-contents.reverse figure {
    margin-right: 0;
    margin-left: 100px;
  }
}


/* 見出し --------------------------------*/
.activity-contents .activity-heading {
  display: inline-block;
  background: var(--color-main);
  color: white;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.1;
}

@media screen and (max-width: 767px) {
  .activity-contents .activity-heading {
    margin-top: 40px;
  }
}

@media screen and (min-width: 768px), print {
  .activity-contents .activity-heading {
    font-size: calc(calc(38 / 1400) * 100vw);
    text-align: left;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    -webkit-text-orientation: upright;
    text-orientation: upright;
    position: absolute;
    top: 0;
    right: 0;
  }

  .activity-contents.reverse .activity-heading {
    right: auto;
    left: 0;
  }
}

@media screen and (min-width: 1400px), print {
  .activity-contents .activity-heading {
    font-size: 2.4rem;
  }
}

/* 吹き出し --------------------------------*/
.activity-contents .balloon-type-cloud {
  width: 280px;
}

@media screen and (min-width: 768px), print {
  .activity-contents .balloon-type-cloud {
    width: calc(calc(340 / 1400) * 100vw);
  }

  .activity-contents .balloon-type-cloud.balloon-1 {
    position: absolute;
    top: calc(calc(40 / 1400) * 100vw);
    right: calc(calc(460 / 1400) * 100vw);
  }

  .activity-contents .balloon-type-cloud.balloon-2 {
    position: absolute;
    bottom: calc(calc(40 / 1400) * 100vw);
    right: calc(calc(140 / 1400) * 100vw);
  }

  .activity-contents .balloon-type-cloud.balloon-3 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(calc(140 / 1400) * 100vw);
  }
}

@media screen and (min-width: 834px), print {
  .activity-contents .balloon-type-cloud.balloon-1 {
    right: calc(calc(400 / 1400) * 100vw);
  }
}

@media screen and (min-width: 1400px), print {
  .activity-contents .balloon-type-cloud {
    width: 340px;
  }

  .activity-contents .balloon-type-cloud.balloon-1 {
    top: 40px;
    right: 400px;
  }

  .activity-contents .balloon-type-cloud.balloon-2 {
    bottom: 40px;
    right: 140px;
  }

  .activity-contents .balloon-type-cloud.balloon-3 {
    left: 140px;
  }
}

/* テキスト --------------------------------*/
.activity-contents .text {
  display: inline-block;
  text-align: left;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1em;
}

@media screen and (min-width: 768px), print {
  .activity-contents .text {
    font-size: calc(calc(20 / 1400) * 100vw);
  }
}

@media screen and (min-width: 1400px), print {
  .activity-contents .text {
    font-size: 1.1rem;
  }
}


/*------------------------------------------*/
/* challenge contents
/*------------------------------------------*/

.activity-challenge__contents {
  position: relative;
  padding: 0;
  margin-top: 40px;
}

.activity-challenge__contents .box {
  overflow: hidden;
  border-radius: 20px;
}

@media screen and (min-width: 768px), print {
  .activity-challenge__contents .box {
    display: flex;
    align-items: flex-start;
  }

  .activity-challenge__contents .cont {
    width: 100%;
  }

  .activity-challenge__contents.reverse .box {
    flex-direction: row-reverse;
  }
}

@media screen and (min-width: 834px), print {
  .activity-challenge__contents {
    margin-top: 100px;
  }

  .activity-challenge__contents .box {
    border-radius: 40px;
  }
}

/* 画像 --------------------------------*/
.activity-challenge__contents figure img {
  width: 100%;
}

.activity-challenge__contents figure {
  overflow: hidden;
}

@media screen and (min-width: 768px), print {
  .activity-challenge__contents figure {
    flex-shrink: 0;
    width: calc(calc(500 / 1400) * 100vw);
  }
}

@media screen and (min-width: 834px), print {
  .activity-challenge__contents figure {
    width: calc(calc(460 / 1400) * 100vw);
  }
}

@media screen and (min-width: 1400px), print {
  .activity-challenge__contents figure {
    width: 460px;
  }
}


/* 吹き出し --------------------------------*/
.activity-challenge__contents.reverse .balloon-type-cloud {
  padding-top: 0.5em;
}

@media screen and (max-width: 767px) {
  .activity-challenge__contents .balloon-type-cloud {
    margin-top: -40px;
  }
}

@media screen and (min-width: 768px), print {
  .activity-challenge__contents .balloon-type-cloud {
    position: absolute;
    top: calc(calc(80 / 1400) * -100vw);
    left: calc(calc(80 / 1400) * -100vw);
  }

  .activity-challenge__contents.reverse .balloon-type-cloud {
    left: auto;
    right: calc(calc(80 / 1400) * -100vw);
  }
}

@media screen and (min-width: 1400px), print {
  .activity-challenge__contents .balloon-type-cloud {
    top: -80px;
    left: -100px;
  }

  .activity-challenge__contents.reverse .balloon-type-cloud {
    left: auto;
    right: -100px;
  }
}


/* テキスト --------------------------------*/
.activity-challenge__contents .text {
  font-size: 1rem;
  font-weight: 500;
  line-height: 2;
  padding: 20px 20px 40px 20px;
}

@media screen and (min-width: 768px), print {
  .activity-challenge__contents .text {
    padding: 40px;
  }
}

@media screen and (min-width: 834px), print {
  .activity-challenge__contents .text {
    font-size: 1.1rem;
    padding: 60px;
  }
}

@media screen and (min-width: 1400px), print {
  .activity-challenge__contents .text {
    padding: 90px;
  }
}


/* 地図 --------------------------------*/
.page-activity .map_wrapper {
  margin-top: 40px;
}

@media screen and (min-width: 834px), print {
  .page-activity .map_wrapper {
    margin-top: 60px;
  }
}


/*------------------------------------------*/
/* workshop contents
/*------------------------------------------*/

.activity-workshop__main.section-back {
  position: relative;
  padding-top: 0;
}

.activity-workshop__main-image img {
  width: 100%;
  border-radius: 20px 20px 0 0;
}

.activity-workshop__main-image {
  width: calc(100% + 40px);
  margin: 0 -20px;
}

@media screen and (min-width: 768px), print {
  .activity-workshop__main-image {
    --wrap-padding: calc(calc(60 / 1400) * 100vw);
    width: calc(100% + var(--wrap-padding) * 2);
    margin: 0 calc(var(--wrap-padding) * -1);
  }
}

@media screen and (min-width: 834px), print {
  .activity-workshop__main-image img {
    border-radius: 40px 40px 0 0;
  }
}

@media screen and (min-width: 1240px), print {
  .activity-workshop__main-image {
    --wrap-padding: calc(calc(90 / 1400) * 100vw);
    width: calc(100% + var(--wrap-padding) * 2);
    margin: 0 calc(var(--wrap-padding) * -1);
  }
}

@media screen and (min-width: 1400px), print {
  .activity-workshop__main-image {
    width: calc(100% + 180px);
    margin: 0 -90px;
  }
}


/* 吹き出し --------------------------------*/

@media screen and (max-width: 767px) {
  .activity-workshop__catchcopy .balloon-type-cloud {
    margin-top: -40px;
  }
}

@media screen and (min-width: 768px), print {
  .activity-workshop__catchcopy .balloon-type-cloud {
    position: absolute;
    top: calc(calc(80 / 1400) * -100vw);
    left: calc(calc(80 / 1400) * -100vw);
  }
}

@media screen and (min-width: 1400px), print {
  .activity-workshop__catchcopy .balloon-type-cloud {
    top: -80px;
    left: -100px;
  }
}

/* 2列 --------------------------------*/
.activity-workshop__sub {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 30px;
}

.activity-workshop__sub figure img {
  width: 100%;
  border-radius: 10px;
}

@media screen and (max-width: 833px) {
  .activity-workshop__sub figure {
    max-width: 400px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 834px), print {
  .activity-workshop__sub {
    grid-template-columns: 1fr calc(calc(400 / 1400) * 100vw);
    row-gap: 0;
    column-gap: calc(calc(100 / 1400) * 100vw);
  }

  .activity-workshop__sub figure img {
    border-radius: 20px;
  }
}

@media screen and (min-width: 1400px), print {
  .activity-workshop__sub {
    grid-template-columns: 1fr 400px;
    column-gap: 100px;
  }
}

/* 各種教室 --------------------------------*/
.activity-workshop__others {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 20px;
}

.activity-workshop__others .box {
  position: relative;
}

.activity-workshop__others figure img {
  width: 100%;
  border-radius: 10px;
}

@media screen and (max-width: 767px) {
  .activity-workshop__others figure {
    max-width: 460px;
    margin: 0 auto;
    margin-bottom: 60px;
  }
}

@media screen and (min-width: 768px), print {
  .activity-workshop__others {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
    column-gap: 40px;
  }

  .activity-workshop__others figure {
    margin-bottom: calc(calc(80 / 1400) * 100vw);
  }
}

@media screen and (min-width: 834px), print {
  .activity-workshop__others figure img {
    border-radius: 20px;
  }

  .activity-workshop__others figure {
    margin-bottom: 80px;
  }
}

/* 吹き出し ---*/
.activity-workshop__others .balloon-type-cross {
  position: absolute;
  bottom: 0;
  right: 10px;
}

.activity-workshop__others .balloon-type-cross.two-rows {
  padding-top: 0.8em;
}

@media screen and (min-width: 768px), print {
  .activity-workshop__others .balloon-type-cross {
    right: calc(calc(30 / 1400) * 100vw);
  }
}

@media screen and (min-width: 1400px), print {
  .activity-workshop__others .balloon-type-cross {
    right: 30px;
  }
}