@charset "utf-8";

/* ↓↓↓ common ↓↓↓ */
* {
  margin: 0;
  box-sizing: border-box;
}

.dir-under .wrap {
  position: relative;
  background: url(../images/main-under-bg.jpg) repeat-y;
  background-size: 100% auto;
  background-position: top center;
}

@media screen and (max-width: 768px) {
  .dir-under .wrap {
    background: url(../images/main-under-bg_sp.jpg) no-repeat;
    background-size: 100% auto;
    background-position: bottom center;
  }
}

.dir-under .wrap::before {
  content: '';
  position: absolute;
  translate: -50% 0;
  top: 0;
  left: 50%;
  max-width: 1280px;
  width: 100%;
  height: 100%;
  background: url(../images/deco-under-bg.png) repeat-y;
  background-size: 100% auto;
}

@media screen and (max-width: 768px) {
  .dir-under .wrap::before {
    background: url(../images/deco-under-bg_sp.png) repeat-y;
    background-size: 100% auto;
  }
}

.title-group {
  position: relative;
}

.title-group .deco01 {
  position: absolute;
  left: 466px;
  bottom: 8px;
  width: 51px;
}

@media screen and (max-width: 768px) {
  .title-group .deco01 {
    left: initial;
    right: 7px;
    bottom: -95px;
    width: 38px;
  }
}

.title-group .page-title {
  position: relative;
  font-size: clamp(5rem, calc(64/1280*100vw), 6.4rem);
  font-weight: 400;
  font-family: var(--rammetto);
  letter-spacing: 0.048em;
  color: #fff;
  -webkit-text-stroke: 2px #000;
  filter: drop-shadow(8px 8px 0 #55D6C2);
  padding-bottom: 8px;
  margin: 0;
  overflow: hidden;
  opacity: 0;
}

@media screen and (max-width: 768px) {
  .title-group .page-title {
    text-align: center;
    font-size: 4rem;
  }
}

.title-group .page-title span {
  translate: 0 200%;
  display: inline-block;
}

.title-group .sub-title {
  position: relative;
  display: block;
  width: max-content;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--zenKakuAntique);
  text-align: center;
  line-height: 1;
  border: 2px solid #000;
  border-radius: 40px;
  padding: 11px 30px;
  margin: 0 0 20px;
  background-color: #fff;
  z-index: 0;
}

@media screen and (max-width: 768px) {
  .title-group .sub-title {
    margin: 0 auto 20px;
  }
}

.title-group .sub-title::before {
  content: '';
  position: absolute;
  translate: 0 100%;
  bottom: 0;
  left: 35px;
  width: 22px;
  height: 15px;
  clip-path: polygon(20% 0, 0% 100%, 100% 0);
  background-color: #000;
}

.title-group .sub-title::after {
  content: '';
  position: absolute;
  translate: 0 100%;
  bottom: 1px;
  left: 38px;
  width: 18px;
  height: 12px;
  clip-path: polygon(20% 0, 0% 100%, 100% 0);
  background-color: #fff;
}

.category-0,
a.category-0 {
  background-color: #55D6C2;
  color: #231F20;
}

.category-1,
a.category-1 {
  background-color: #FC9041;
  color: #fff;
}

.category-2,
a.category-2 {
  background-color: #5CB7E6;
  color: #fff;
}

.category-3,
a.category-3 {
  background-color: #F49097;
  color: #231F20;
}

.category-4,
a.category-4 {
  background-color: #FF0A2D;
  color: #fff;
}

.category-5,
a.category-5 {
  background-color: #75D053;
  color: #231F20;
}

.category-6,
a.category-6 {
  background-color: #577FFF;
  color: #fff;
}

.category-7,
a.category-7 {
  background-color: #F46442;
  color: #fff;
}

.category-8,
a.category-8 {
  background-color: #F4C608;
  color: #231F20;
}

.category-9,
a.category-9 {
  background-color: #DFB2F4;
  color: #231F20;
}

.category-10,
a.category-10 {
  background-color: #39C373;
  color: #fff;
}

.category-11,
a.category-11 {
  background-color: #A983FF;
  color: #fff;
}

.category-all,
a.category-all {
  background-color: #fff;
}
/* ↑↑↑ common ↑↑↑ */

/* ↓↓↓ fv-area ↓↓↓ */
.fv-area {
  position: relative;
  max-width: calc(1080px + 70px * 2);
  margin: 0 auto;
}

.fv-area .inner {
  padding: 42px 70px 0;
}

@media screen and (max-width: 768px) {
  .fv-area .inner {
    padding: 37px 15px 0;
  }
}
/* ↑↑↑ fv-area ↑↑↑ */

/* ↓↓↓ catch-area ↓↓↓ */
.catch-area {
  position: relative;
  max-width: calc(1080px + 70px * 2);
  margin: 35px auto 0;
}

@media (max-width: 768px) {
  .catch-area {
    margin: 24px auto 0;
  }
}

.catch-area .deco01 {
  position: absolute;
  top: -13px;
  left: 0%;
  width: 125px;
}

@media (max-width: 768px) {
  .catch-area .deco01 {
    top: -25px;
    left: 3px;
    width: 50px;
  }
}

.catch-area .deco02 {
  position: absolute;
  bottom: -45px;
  right: 100px;
  width: 64px;
}

@media (max-width: 768px) {
  .catch-area .deco02 {
    bottom: -60px;
    right: 30px;
    width: 48px;
    z-index: 2;
  }
}

.catch-area .inner {
  position: relative;
  padding: 0 70px 56px;
  z-index: 1;
}

@media (max-width: 768px) {
  .catch-area .inner {
    padding: 0 32px 45px;
  }
}

.catch-area .image {
  border-radius: 100px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .catch-area .image {
    border-radius: 50px;
  }
}

.catch-area .catch-textgroup {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 60px;
}

@media (max-width: 768px) {
  .catch-area .catch-textgroup {
    font-size: 1.4rem;
    letter-spacing: 0;
    margin-top: 24px;
  }
}

.catch-area .catch-text + .catch-text {
  margin-top: 50px;
}

@media (max-width: 768px) {
  .catch-area .catch-text + .catch-text {
    margin-top: 40px;
  }
}

.catch-area .attention {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 10px;
  padding-left: 1em;
  text-indent: -1em;
}
/* ↑↑↑ catch-area ↑↑↑ */

/* ↓↓↓ overview ↓↓↓ */

/* ↑↑↑ overview ↑↑↑ */
.overview {
  position: relative;
}

.overview .inner {
  position: relative;
  padding: 0 70px;
}

@media (max-width: 768px) {
  .overview .inner {
    padding: 0 38px;
  }
}

.overview .inner .text-area {
  position: relative;
  max-width: 958px;
  margin: 0 auto;
  padding: 64px 7.971%;
  border: 2px solid #000;
  border-radius: 120px;
  background-color: #FFF;
}

@media (max-width: 768px) {
  .overview .inner .text-area {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 38px 22px;
    border-radius: 24px;
  }
}

.overview .inner .deco01 {
  position: absolute;
  width: 90px;
  height: max-content;
  top: 114px;
  left: -55px;
}

@media (max-width: 768px) {
  .overview .inner .deco01 {
    width: 46px;
    top: 154px;
    left: -28px;
  }
}

.overview .inner .deco02 {
  position: absolute;
  width: 128px;
  height: max-content;
  bottom: 5px;
  right: -55px;
}

@media (max-width: 768px) {
  .overview .inner .deco02 {
    position: absolute;
    width: 81px;
    height: max-content;
    bottom: 120px;
    right: -45px;
  }
}

.overview .inner .deco03 {
  position: absolute;
  width: 79px;
  height: max-content;
  bottom: -66px;
  left: 40px;
}

@media (max-width: 768px) {
  .overview .inner .deco03 {
    width: 54px;
    bottom: -34px;
    left: -5px;
  }
}

.overview .inner .text-area .intro {
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .overview .inner .text-area .intro {
    font-size: 1.6rem;
    letter-spacing: 0.01em;
  }
}

.overview .inner .text-area .intro .-yellow-line {
  display: inline;
  background: #FFFF00;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.overview .inner .text-area .text {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 40px;
  line-height: 2.5;
  text-align: justify;
  word-break: break-all;
}

@media (max-width: 768px) {
  .overview .inner .text-area .text {
    font-size: 1.4rem;
    margin-top: 16px;
    line-height: 1.8;
  }

  .overview .inner .text-area .text + .text {
    margin-top: 30px;
  }
}

.overview .inner .text-area .attention {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 5px;
}

@media (max-width: 768px) {
  .overview .inner .text-area .attention {
    font-size: 1.2rem;
    margin-top: 16px;
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1.6;
  }
}

.overview .inner .text-area .attention + .text {
  margin-top: 32px;
}

@media (max-width: 768px) {
  .overview .inner .text-area .attention + .text {
    margin-top: 16px;
  }
}
/* ↓↓↓ link-area ↓↓↓ */
.link-area {
  position: relative;
}

.link-area::before {
  content: 'Course';
  position: absolute;
  translate: -50% 0;
  bottom: 40px;
  left: 50%;
  text-align: center;
  font-family: var(--rammetto);
  font-size: clamp(13rem, calc(213 / 1280* 100vw), 21.3rem);
  color: transparent;
  -webkit-text-stroke: 2px #55D6C2;
  line-height: 1;
}

@media (max-width: 768px) {
  .link-area::before {
    bottom: -5px;
    font-size: 8rem;
  }
}

.link-area.summer {
  margin-top: 72px;
}

@media (max-width: 768px) {
  .link-area.summer {
    margin-top: 40px;
  }
}

.link-area.summer::before {
  display: none;
}

.link-area .deco01 {
  position: absolute;
  top: 465px;
  left: 85px;
  width: 85px;
}

@media (max-width: 768px) {
  .link-area .deco01 {
    left: 25px;
    width: 50px;
  }
}

.link-area .inner {  
  padding: 0 70px min(220px, 17.1473vw);
}

.link-area.summer .inner {
  padding: 0 70px min(100px, 7.8125vw);
}

@media (max-width: 768px) {
  .link-area .inner {
    padding: 0 32px 60px;
  }
  .link-area.summer .inner {
    padding: 0 32px 0;
  }
}

.link-area .open {
  position: relative;
  display: block;
  width: max-content;
  font-size: 2.0rem;
  font-weight: 700;
  font-family: var(--zenKakuAntique);
  text-align: center;
  line-height: 1;
  border: 2px solid #000;
  border-radius: 40px;
  padding: 14px 40px;
  margin: 0 auto 35px;
  background-color: #fff;
  z-index: 0;
}

@media (max-width: 768px) {
  .link-area .open {
    font-size: 1.4rem;
    padding: 10px 32px;
    margin: 0 auto 25px;
  }
}

.link-area .open::before {
  content: '';
  position: absolute;
  translate: 0 100%;
  bottom: 0;
  left: 70px;
  width: 22px;
  height: 15px;
  clip-path: polygon(20% 0, 0% 100%, 100% 0);
  background-color: #000;
}

@media (max-width: 768px) {
  .link-area .open::before {
    left: 37px;
    width: 23px;
  }
}

.link-area .open::after {
  content: '';
  position: absolute;
  translate: 0 100%;
  bottom: 1px;
  left: 73px;
  width: 18px;
  height: 12px;
  clip-path: polygon(20% 0, 0% 100%, 100% 0);
  background-color: #fff;
} 

@media (max-width: 768px) {
  .link-area .open::after {
    left: 40px;
  }
}

.link-area .title-group .sub-title {
  font-size: 2rem;
  margin: 0 auto 30px;
  padding: 14px 40px;
}

@media (max-width: 768px) {
  .link-area .title-group .sub-title {
    font-size: 1.4rem;
    margin: 0 auto 20px;
    padding: 10px 32px;
  }
}

.link-area .link-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1107px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .link-area .link-block {
    max-width: 500px;
    gap: 18px;
  }

  .link-area.summer .link-block {
    width: 96.463022508%;
  }
}

.link-area .link-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc((100% - 24px* 2) / 3);
  border: 2px solid #000;
  border-radius: 32px;
  box-shadow: 6px 6px 0 #000;
  color: #fff;
  background-color: #fff;
  padding: 48px min(20px, calc(20 / 1280* 100vw)) 20px;
  z-index: 1;
}

.link-area.summer .link-box {
  padding: 54px min(14px, calc(14 / 1280* 100vw)) 20px;
}

@media screen and (min-width: 769px) {
  .link-area .link-box:hover {
    box-shadow: 0 0 0 #000;
    translate: 6px 6px;
  }
}

@media (max-width: 768px) {
  .link-area .link-box {
    width: 100%;
    padding: 24px 14px 18px;
    z-index: 1;
  }

  .link-area.summer .link-box {
    padding: 4px 42px 0px 24px;
  }
}

.link-area .link-box.producer {
  background-color: #F49097;
}

.link-area .link-box.creator {
  background-color: #55D682;
}

.link-area .link-box.journalist {
  background-color: #1F9BF5;
}

.link-area .link-box.announce {
  background-color: #DFB2F4;
}

.link-area.summer .link-box.producer {
  background-image: url(../images/internship/btn-bg-producer.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.link-area.summer .link-box.creator {
  background-image: url(../images/internship/btn-bg-creator.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.link-area.summer .link-box.journalist {
  background-image: url(../images/internship/btn-bg-journalist.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .link-area.summer .link-box.producer {
  background-image: url(../images/internship/btn-bg-producer_sp.jpg);
}

.link-area.summer .link-box.creator {
  background-image: url(../images/internship/btn-bg-creator_sp.jpg);
}

.link-area.summer .link-box.journalist {
  background-image: url(../images/internship/btn-bg-journalist_sp.jpg);
}
}

.link-area .link-box.closed,
.link-area .link-box.new,
.link-area .link-box.first {
  position: relative;
}

.link-area .link-box.closed::after {
  content: '';
  position: absolute;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  width: 66.193%;
  height: max-content;
  aspect-ratio: 231 / 157;
  background: url(../images/internship/closed-icon.svg) no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 2;
}

@media (max-width: 768px) {
  .link-area .link-box.closed::after {
    content: '';
    position: absolute;
    translate: -50% -50%;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 102px;
    aspect-ratio: unset;
    background: url(../images/internship/closed-icon.svg) no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 2;
  }
}

.link-area .link-box.closed::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(36, 36, 36, 0.8);
  border-radius: 30px;
  z-index: 1;
}

.link-area .link-box.new::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 30px;
  width: 24.07%;
  height: max-content;
  aspect-ratio: 84 / 54;
  background: url(../images/internship/new-icon.png) no-repeat;
  background-size: cover;
}

@media (max-width: 768px) {
  .link-area .link-box.new::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 30px;
    width: 59px;
    height: 38px;
    aspect-ratio: unset;
  }
}

.link-area .link-box.first::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 30px;
  width: 24.07%;
  height: max-content;
  aspect-ratio: 84 / 54;
  background: url(../images/internship/first-icon.png) no-repeat;
  background-size: cover;
}

@media (max-width: 768px) {
  .link-area .link-box.first::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 30px;
    width: 59px;
    height: 38px;
    aspect-ratio: unset;
  }
}

.link-area.summer .link-box .link-title {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .link-area.summer .link-box .link-title {
    width: 202px;
    max-width: unset;
    margin: 0 auto;
  }
}

.link-area .link-box .course-title {
  text-align: center;
  font-family: var(--zenKakuAntique);
  font-size: min(2.4rem, calc(24 / 1280* 100vw));
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .link-area .link-box .course-title {
    font-size: 1.6rem;
    margin: 0 auto;
    padding: 0 40px;
  }
}

.link-area .link-box .image {
  max-height: min(140px, calc(140 / 1280* 100vw));
  margin: 0 auto 15px;
}

@media (max-width: 768px) {
  .link-area .link-box .image {
    display: flex;
    justify-content: center;
    min-height: 64px;
    width: 100%;
    margin: 0 auto 10px;
  }
}

.link-area .link-box.announce .image img {
  translate: 10% 0;
}

@media (max-width: 768px) {
  .link-area .link-box.announce .image img {
    translate: 10px 0;
  }
}

.link-area .link-box .image img {
  width: auto;
  height: 100%;
}

.link-area .link-box .arrow {
  position: relative;
  width: min(40px, calc(40 / 1280* 100vw));
  aspect-ratio: 1 / 1;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F5E960;
  overflow: clip;
  margin: auto 0 0 auto;
  z-index: 1;
}

.link-area.summer .link-box .arrow {
  margin: -12px 0 0 auto;
}

.link-area.summer .link-box.no-summer .arrow {
  margin: auto 0 0 auto;
}

.link-area .link-box .arrow::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  translate: -50% -50%;
  scale: 0;
  top: 50%;
  left: 50%;
  z-index: 0;
  transition: scale ease .3s;
}

@media (min-width: 769px) {
  .link-area .link-box:hover .arrow::after {
    scale: 1;
  }
}

@media (max-width: 768px) {
  .link-area .link-box .arrow {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width:40px;
  }
}

.link-area .link-box .arrow img {
  position: relative;
  width: 7px;
  height: 4px;
  z-index: 1;
}

.link-area .entry-btn {
  position: relative;
  display: grid;
  place-content: center left;
  width: 71.875vw;
  max-width: 920px;
  height: 284px;
  color: #fff;
  border-radius: 32px;
  margin: 78px auto 0;
  padding: 30px min(7.231%, 88px);
  background-color: #F49097;
}

@media screen and (max-width: 768px) {
  .link-area .entry-btn {
    width: 100%;
    max-width: 500px;
    height: 172px;
    border-radius: 24px;
    margin-top: 40px;
    padding: 25px 20px;
  }
}

.link-area .entry-btn .copy {
  font-size: clamp(1.8rem, calc(24/1280*100vw), 2.4rem);
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .link-area .entry-btn .copy {
    font-size: 1.4rem;
    line-height: 1.5;
  }
}

.link-area .entry-btn .en {
  font-family: var(--rammetto);
  font-size: 6.4rem;
  font-weight: 400;
  line-height: 1;
  margin-top: 24px;
}

@media screen and (max-width: 768px) {
  .link-area .entry-btn .en {
    font-size: 3.7rem;
    margin-top: 10px;
  }
}

.link-area .entry-btn .arrow {
  position: absolute;
  translate: 0 -50%;
  top: 50%;
  right: 9%;
  width: 105px;
  aspect-ratio: 1 / 1;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F5E960;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .link-area .entry-btn .arrow {
    translate: 0 0;
    top: initial;
    bottom: 10px;
    right: 10px;
    width: 38px;
  }
}

.link-area .entry-btn .arrow::before {
  content: '';
  position: absolute;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  scale: 0;
  transition: scale 0.3s ease;
}

@media screen and (min-width: 769px) {
  .link-area .entry-btn:hover .arrow::before {
    scale: 1;
  }
}
  
.link-area .entry-btn .arrow img {
  position: relative;
  width: 18px;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .link-area .entry-btn .arrow img {
    width: 7px;
  }
}
/* ↑↑↑ link-area ↑↑↑ */

/* ↓↓↓ #detail ↓↓↓ */
/* ↓↓↓ intro-area ↓↓↓ */
#detail {
  .intro-area .intro-block {
    position: relative;
    max-width: calc(1080px + 70px * 2);
    padding: 42px 70px 48px;
    margin: 0 auto;
  }

  @media (max-width: 768px) {
    .intro-area .intro-block {
      padding: 20px 32px 28px;
    }
  }

  .intro-area .intro-block .deco01 {
    position: absolute;
    width: 64px;
    right: 8%;
    bottom: 0;
  }

  @media (max-width: 768px) {
    .intro-area .intro-block .deco01 {
      width: 43px;
    }
  }

  .intro-area .intro-block .page-title {
    position: relative;
    display: flex;
    align-items: center;
    font-family: var(--zenKakuAntique);
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
  }

  @media (max-width: 768px) {
    .intro-area .intro-block .page-title {
      font-size: 2.2rem;
    }
  }

  .intro-area .intro-block .page-title .old {
    display: block;
    font-size: 1.4rem;
    line-height: 1;
    margin-top: 10px;
  }

  @media (max-width: 768px) {
    .intro-area .intro-block .page-title .old {
      font-size: 1.2rem;
      margin-top: 5px;
    }
  }

  .intro-area .intro-block .page-title .icon {
    height: 60px;
    margin-right: 12px;
  }

  @media (max-width: 768px) {
    .intro-area .intro-block .page-title .icon {
      height: 42px;
      margin-right: 16px;
    }
  }

  .intro-area .intro-block .page-title .icon img {
    width: auto;
    height: 100%;
  }
  
  .intro-area .intro-block .cap {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 15px;
  }

  @media (max-width: 768px) {
    .intro-area .intro-block .cap {
      font-size: 1.4rem;
      margin-top: 22px;
    }
  }

  .intro-area .intro-logo {
    position: relative;
    padding: 52px 70px 28px;
  }

  @media (max-width: 768px) {
    .intro-area .intro-logo {
      padding: 64px 32px 24px;
    }
  }

  .intro-area .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 575px;
    overflow: hidden;
  }

  @media (max-width: 768px) {
    .intro-area .bg {
      height: 303px;
    }
  }

  .intro-area .bg img {
    object-fit: cover;
    object-position: center;
    height: 100%;
  }

  .intro-area .intro-logo .logo {
    position: relative;
    display: block;
    width: 666px;
    margin: 0 auto;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .intro-area .intro-logo .logo {
      width: 308px;
    }
  }
}

/* ↑↑↑ intro-area ↑↑↑ */

/* ↓↓↓ internship-area ↓↓↓ */
#detail {
  .internship-area {
    position: relative;
    z-index: 1;
  }

  .internship-area .inner {
    padding: 0 70px;
  }

  @media screen and (max-width: 768px) {
    .internship-area .inner {
      padding: 0 32px;
    }
  }

  .internship-area .internship-block {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding: 104px min(75px, 6.58%);
    border-radius: 120px;
    border: 2px solid #000;
    background-color: #fff;
  }

  @media screen and (max-width: 768px) {
    .internship-area .internship-block {
      padding: 40px 24px;
      border-radius: 24px;
    }
  }

  .internship-area .internship-block .deco01 {
    position: absolute;
    width: 101px;
    top: 17%;
    left: -85px;
  }

  @media screen and (max-width: 768px) {
  .internship-area .internship-block .deco01 {
      width: 58px;
      top: 22%;
      left: -38px;
    }
  }

  .internship-area .internship-block .deco02 {
    position: absolute;
    width: 87px;
    top: 32%;
    right: -60px;
  }

  @media screen and (max-width: 768px) {
    .internship-area .internship-block .deco02 {
      width: 70px;
      top: 40%;
      right: -42px;
    }
  }

  .internship-area .internship-block .deco03 {
    position: absolute;
    transform: rotateY(180deg);
    width: 92px;
    top: 78%;
    left: -65px;
  }

  @media screen and (max-width: 768px) {
    .internship-area .internship-block .deco03 {
      width: 65px;
      top: 82%;
      left: -32px;
      z-index: 1;
    }
  }

  .internship-area .internship-box + .internship-box,
  .internship-area .internship-box + .schedule-box {
    margin-top: 112px;
  }

  @media screen and (max-width: 768px) {
    .internship-area .internship-box + .internship-box,
    .internship-area .internship-box + .schedule-box {
      margin-top: 64px;
    }
  }

  .internship-area .internship-block .lead {
    position: relative;
    text-align: center;
    width: max-content;
    font-family: var(--zenKakuAntique);
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    padding: 4px 26px;
    margin: 0 auto 40px;
    z-index: 1;
  }

  @media screen and (max-width: 768px) {
    .internship-area .internship-block .lead {
      font-size: 1.8rem;
      padding: 2px 15px;
      margin: 0 auto 26px;
    }
  }

  .producer .internship-area .internship-block .lead {
    background-color: #F49097;
  }

  .creator .internship-area .internship-block .lead {
    background-color: #55D682;
  }
    
  .journalist .internship-area .internship-block .lead {
    background-color: #1F9BF5;
  }
    
  .announce .internship-area .internship-block .lead{
    background-color: #DFB2F4;
  }

  .internship-area .internship-block .copy {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0;
  }

  @media screen and (max-width: 768px) {
    .internship-area .internship-block .copy {
      font-size: 1.6rem;
    }
  }

  .internship-area .text {
    font-size: 1.6rem;
    line-height: 2.2;
    font-weight: 700;
  }

  @media screen and (max-width: 768px) {
    .internship-area .text {
      font-size: 1.4rem;
    }
  }

  .internship-area .copy + .text,
  .internship-area .copy + .point,
  .internship-area .text + .text {
    margin-top: 40px;
  }

  @media screen and (max-width: 768px) {
    .internship-area .copy + .text,
    .internship-area .text + .text {
      margin-top: 30px;
    }
  }

  .internship-area  .attention {
    font-size: 1.4rem;
    font-weight: 700;
    padding-left: 1em;
    text-indent: -1em;
  }

  @media screen and (max-width: 768px) {
    .internship-area  .attention {
      font-size: 1.2rem;
      line-height: 1.5;
    }
  }

  .internship-area .text + .attention {
    margin-top: 25px;
  }

  .internship-area .-yellow-line {
    display: inline;
    background: #FFFF00;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .internship-area .-white-line {
    display: inline;
    background: #fff;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .internship-area .-wave {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #000;
    text-underline-offset: 4px;
  }

  .internship-area .point-group {
    padding: 24px;
  }

  @media screen and (max-width: 768px) {
    .internship-area .point-group {
      padding: 32px 22px;
    }
  }

  .internship-area p + .point-group {
    margin-top: 40px;
  }

  .producer .internship-area .point-group {
    background-color: #F49097;
  }

  .creator .internship-area .point-group {
    background-color: #DDF7E8;
  }
  
  .journalist .internship-area .point-group {
    background-color: #DEF5FF;
  }
    
  .announce .internship-area .point-group {
    background-color: #F7ECFC;
  }

  .internship-area .point {
    font-size: 2rem;
    font-weight: 700;
  }
  
  @media screen and (max-width: 768px) {
    .internship-area .point {
      font-size: 1.6rem;
      line-height: 1.5;
    }

    .internship-area .point-group .point {
      font-size: 1.8rem;
      line-height: 1.5;
    }
  }

  .internship-area .about-list {
    margin-top: 40px;
    border-bottom: 1px dashed #000;
    padding: 0;
  }

  @media screen and (max-width: 768px) {
    .internship-area .about-list {
      margin-top: 0;
    }
  }

  .internship-area .about-list .item {
    display: flex;
    list-style: none;
    padding: 32px 0;
    border-top: 1px dashed #000;
  }

  @media screen and (max-width: 768px) {
    .internship-area .about-list .item {
      flex-direction: column;
      padding: 24px 0 32px;
    }
  }
  
  .internship-area .about-list .heading {
    text-align: center;
    min-width: max(140px, 21.835%);
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.2em;
    padding-top: 10px;
  }

  @media screen and (max-width: 768px) {
    .internship-area .about-list .heading {
      min-width: initial;
      font-size: 1.6rem;
      margin-bottom: 14px;
      padding-top: 0;
    }
  }

  .producer .internship-area .about-list .heading {
    color: #F49097;
  }

  .creator .internship-area .about-list .heading {
    color: #55D682;
  }

  .journalist .internship-area .about-list .heading {
    color: #1F9BF5;
  }

  .announce .internship-area .about-list .heading {
    color: #DFB2F4;
  }

  .internship-area .about-list strong {
    text-decoration: underline;
    display: inline-block;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0;
  }

  .internship-area .about-list strong.indent {
    padding-left: 6em;
    text-indent: -6em;
    line-height: 1.4;
  }

  @media screen and (max-width: 768px) {
    .internship-area .about-list strong.indent {
      padding-left: 0;
      text-indent: 0;
    }
  }

  .internship-area .about-list p + strong {
    margin-top: 40px;
  }

  @media screen and (max-width: 768px) {
    .internship-area .about-list strong {
      font-size: 1.6rem;
      line-height: 1.5;
    }

    .internship-area .about-list p + strong {
      margin-top: 20px;
    }

    .internship-area .about-list strong .-week {
      font-size: 1.1rem;
    }
  }

  @media screen and (max-width: 768px) {
    .internship-area .about-list .item .text {
      line-height: 1.5;
    }
  }

  .internship-area .about-list .cap {
    font-size: 1.4rem;
    font-weight: 700;
  }

  @media screen and (max-width: 768px) {
    .internship-area .about-list .cap {
      font-size: 1.2rem;
      line-height: 1.5;
    }
  }

  .internship-area .about-list .text + .cap {
    margin-top: 10px;
  }

  .internship-area .schedule-box {
    position: relative;
    padding: 64px 5.241%;
    border-radius: 32px;
  }

  @media screen and (max-width: 768px) {
    .internship-area .schedule-box {
      padding: 40px 18px;
      border-radius: 24px;
    }
  }

  .producer .internship-area .schedule-box {
    background-color: #FCE5E7;
  }

  .creator .internship-area .schedule-box {
    background-color: #DDF7E8;
  }
  
  .journalist .internship-area .schedule-box {
    background-color: #DEF5FF;
  }
    
  .announce .internship-area .schedule-box {
    background-color: #F7ECFC;
  }

  .internship-area .schedule-group {
    position: relative;
    border-radius: 32px;
    padding: 40px;
    background-color: #fff;
  }

  @media screen and (max-width: 768px) {
    .internship-area .schedule-group {
      border-radius: 20px;
      padding: 32px 12px;
    }
  }

  .internship-area .schedule-group .deco04 {
    position: absolute;
    width: 123px;
    top: -100px;
    right: 45px;
  }

  @media screen and (max-width: 768px) {
    .internship-area .schedule-group .deco04 {
      width: 43px;
      top: -12px;
      right: 15px;
    }
  }

  .internship-area .schedule-group strong {
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
  }

  @media screen and (max-width: 768px) {
    .internship-area .schedule-group strong {
      font-size: 1.6rem;
      letter-spacing: 0;
    }
  }

  .internship-area .schedule-group p + strong {
    margin-top: 40px;
  }
  
  .internship-area .schedule-group .date {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.3;
    padding-left: 3em;
    text-indent: -3em;
    margin: 5px 0;
  }

  @media screen and (max-width: 768px) {
    .internship-area .schedule-group .date {
      font-size: 1.4rem;
      letter-spacing: 0;
    }
    .internship-area .schedule-group .date .-week {
      font-size: 1.1rem;
    }
  }

  .producer .internship-area .schedule-group .date {
    color: #F49097;
  }
    
  .creator .internship-area .schedule-group .date {
    color: #55D682;
  }
      
  .journalist .internship-area .schedule-group .date {
    color: #1F9BF5;
  }
      
  .announce .internship-area .schedule-group .date {
    color: #DFB2F4;
  }

  .internship-area .schedule-group + .lead {
    margin-top: 80px;
  }

  @media screen and (max-width: 768px) {
    .internship-area .schedule-group + .lead {
      margin-top: 40px;
    }
  }

  .internship-area .flow-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 0;
    padding: 0;
    counter-reset: listnum;
  }

  .internship-area .flow-list li {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .internship-area .flow-list li:not(:last-of-type):after {
    content: '';
    position: absolute;
    translate: -50% 100%;
    bottom: -12px;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 16px 0px 16px;
  }

  .producer .internship-area .flow-list li::after {
    border-color: #F49097 transparent transparent transparent;
  }

  .creator .internship-area .flow-list li::after {
    border-color: #55D682 transparent transparent transparent;
  }

  .journalist .internship-area .flow-list li::after {
    border-color: #1F9BF5 transparent transparent transparent;
  }
  
  .announce .internship-area .flow-list li::after {
    border-color: #DFB2F4 transparent transparent transparent;
  }

  .internship-area .flow-list .flow {
    display: flex;
    min-height: 118px;
    border-radius: 32px;
    background-color: #fff;
  }

  @media screen and (max-width: 768px) {
    .internship-area .flow-list .flow {
      flex-direction: column;
      min-height: 157px;
      border-radius: 20px;
    }
  }

  .internship-area .flow-list .flow .step-group {
    position: relative;
    display: grid;
    place-content: center right;
    min-width: 145px;
    padding-right: 40px;
    color: #fff;
    border-radius: 32px 0 0 32px;
    overflow: hidden;
  }

  .internship-area .flow-list .flow .step-group::before {
    content: '';
    position: absolute;
    translate: 0 -50%;
    top: 50%;
    right: 5px;
    height: 140%;
    aspect-ratio: 1/1;
    border-radius: 50%;
  }

  @media screen and (max-width: 768px) {
    .internship-area .flow-list .flow .step-group {
      place-content: center;
      min-width: initial;
      width: 158px;
      height: 65px;
      padding-right: 0;
      border-radius: 0;
      margin: 0 auto;
    }
  
    .internship-area .flow-list .flow .step-group::before {
      translate: -50% 0;
      bottom: 0;
      left: 50%;
      top: initial;
      right: initial;
      height: 158px;
    }
  }

  .producer .internship-area .flow-list .flow .step-group::before {
    background-color:#F49097;
  }

  .creator .internship-area .flow-list .flow .step-group::before {
    background-color:#55D682;
  }

  .journalist .internship-area .flow-list .flow .step-group::before {
    background-color: #1F9BF5;
  }
  
  .announce .internship-area .flow-list .flow .step-group::before {
    background-color: #DFB2F4;
  }

  .internship-area .flow-list .flow .step {
    position: relative;
    text-align: center;
    width: max-content;
    height: max-content;
    font-family: var(--montserrat);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    z-index: 1;
  }

  .internship-area .flow-list .flow .step .num::before {
    counter-increment: listnum;
    content: counter(listnum, decimal-leading-zero);
    font-style: italic;
    font-size: 3.8rem;
    line-height: 1;
  }

  @media screen and (max-width: 768px) {
    .internship-area .flow-list .flow .step {
      font-size: 1.2rem;
    }
  
    .internship-area .flow-list .flow .step .num::before {
      font-size: 2.6rem;
    }
  }

  .internship-area .flow-list .flow .text-group {
    padding: 30px 30px 30px 36px;
  }

  @media screen and (max-width: 768px) {
    .internship-area .flow-list .flow .text-group {
      padding: 12px 14px 28px;
    }
  }

  .internship-area .flow-list .flow .text-group .attention {
    margin-top: 0px;
  }
  
  .internship-area .flow-list .flow .do {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    line-height: 1.3;
  }

  .internship-area .flow-list .flow .do.-large {
    font-size: 2.4rem;
  }

  @media screen and (max-width: 768px) {
    .internship-area .flow-list .flow .do {
      text-align: center;
      font-size: 1.6rem;
      letter-spacing: 0.1em;
      margin-bottom: 8px;
    }

    .internship-area .flow-list .flow .do.-large {
      font-size: 2.2rem;
    }

    .internship-area .flow-list .flow .text {
      text-align: center;
      line-height: 1.5;
    }
  }

  .producer .internship-area .flow-list .flow .do {
    color:#F49097;
  }

  .creator .internship-area .flow-list .flow .do {
    color:#55D682;
  }
  
  .journalist .internship-area .flow-list .flow .do {
    color:#1F9BF5;
  }

  .announce .internship-area .flow-list .flow .do {
    color:#DFB2F4;
  }

  .internship-area .flow-list .held {
    border-radius: 32px;
    padding: 56px 32px;
  }

  @media screen and (max-width: 768px) {
    .internship-area .flow-list .held {
      border-radius: 20px;
      padding: 34px 10px;
    }
  }

  .producer .internship-area .flow-list .held {
    background-color:#F49097;
  }

  .creator .internship-area .flow-list .held {
    background-color:#55D682;
  }
  
  .journalist .internship-area .flow-list .held {
    background-color:#1F9BF5;
  }

  .announce .internship-area .flow-list .held {
    background-color:#DFB2F4;
  }

  .internship-area .flow-list .held strong {
    display: block;
    text-align: center;
    font-size: 2.4rem;
    margin-bottom: 15px;
  }

  @media screen and (max-width: 768px) {
    .internship-area .flow-list .held strong {
      font-size: 1.4rem;
      line-height: 1.7;
      letter-spacing: 0;
      margin-bottom: 7px;
    }
  }

  .internship-area .flow-list .held .date {
    text-align: center;
    font-size: clamp(2.4rem, calc(40/1280*100vw), 4rem);
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
  }

  @media screen and (max-width: 768px) {
    .internship-area .flow-list .held .date {
      font-size: 1.7rem;
      line-height: 1.2;
    }
  }
  
  .internship-area .flow-list .held .date .-week {
    font-size: clamp(1.8rem, calc(32/1280*100vw), 3.2rem);
  }

  @media screen and (max-width: 768px) {
    .internship-area .flow-list .held .date .-week {
      font-size: 1.4rem;
    }
  }

  .internship-area .flow-list .held .date + .attention {
    margin-top: 20px;
  }

  @media screen and (max-width: 768px) {
    .internship-area .flow-list .held .date + .attention {
      margin-top: 10px;
    }
  }

  .internship-area .flow-list .held .attention {
    text-align: center;
  }

  @media screen and (max-width: 768px) {
    .internship-area .flow-list .held .attention {
      text-align: justify;
    }
  }

  @media screen and (max-width: 768px) {
    .internship-area .flow-list .held .attention +.attention {
      margin-top: 5px;
    }
  }
}

/* ↑↑↑ internship-area ↑↑↑ */

/* ↓↓↓ entry-area ↓↓↓ */
#detail {
  .entry-area {
    margin-top: 96px;
  }
  
  .entry-area .inner {
    padding: 0 70px;
  }

  @media screen and (max-width: 768px) {
    .entry-area .inner {
      padding: 0 32px;
    }
  }
  
  .entry-area .entry-block {
    max-width: 920px;
    margin: 0 auto;
  }

  .entry-area .entry-block .lead {
    text-align: center;
    width: max-content;
    font-family: var(--zenKakuAntique);
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    padding: 4px 26px;
    margin: 0 auto 40px;
  }

  @media screen and (max-width: 768px) {
    .entry-area .entry-block .lead {
        font-size: 1.8rem;
        padding: 2px 15px;
        margin: 0 auto 26px;
    }
  }

  .producer .entry-area .entry-block .lead {
    background-color: #F49097;
  }

  .creator .entry-area .entry-block .lead {
    background-color: #55D682;
  }
  
  .journalist .entry-area .entry-block .lead {
    background-color: #1F9BF5;
  }
  
  .announce .entry-area .entry-block .lead {
    background-color: #DFB2F4;
  }

  .entry-area .entry-block .contact-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
  }

  @media screen and (max-width: 768px) {
    .entry-area .entry-block .contact-group {
      flex-direction: column;
      gap: 8px;
    }
  }

  .entry-area .entry-block .contact-group .adress {
    position: relative;
    font-size: clamp(1.6rem, calc(20/1280*100vw), 2rem);
    font-weight: 700;
  }

  @media screen and (max-width: 768px) {
    .entry-area .entry-block .contact-group .adress {
      font-size: 1.8rem;
      text-align: center;
    }
  }

  .entry-area .entry-block .contact-group .adress::after {
    content: '';
    position: absolute;
    translate: 0 -50%;
    top: 50%;
    right: -32px;
    width: 1px;
    height: 32px;
    background-color: #000;
  }

  @media screen and (max-width: 768px) {
    .entry-area .entry-block .contact-group .adress::after {
      display: none;
    }
  }

  .entry-area .entry-block .contact-group .mail-link {
    display: flex;
    align-items: center;
    font-size: clamp(1.6rem, calc(20/1280*100vw), 2rem);
    font-weight: 700;
  }

  @media screen and (max-width: 768px) {
    .entry-area .entry-block .contact-group .mail-link {
      text-decoration: underline;
      font-size: 1.8rem;
    }
  }

  .entry-area .entry-block .contact-group .mail-link i {
    position: relative;
    display: grid;
    place-content: center;
    width: 64px;
    height: 64px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 50%;
    margin-left: 10px;
    padding-left: 3px;
  }

  @media screen and (max-width: 768px) {
    .entry-area .entry-block .contact-group .mail-link i {
      width: 38px;
      height: 38px;
      margin-left: 8px;
      padding-left: 2px;
    }
  }

  .entry-area .entry-block .contact-group .mail-link i::before {
    content: '';
    position: absolute;
    translate: -50% -50%;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    scale: 0;
    border-radius: 50%;
    background-color: #F5E960;
    transition: scale 0.3s ease;
  }

  @media screen and (min-width: 769px) {
    .entry-area .entry-block .contact-group .mail-link:hover i::before {
      scale: 1;
    }
  }

  .entry-area .entry-block .contact-group .mail-link i img {
    position: relative;
    width: 26px;
    z-index: 1;
  }

  @media screen and (max-width: 768px) {
    .entry-area .entry-block .contact-group .mail-link i img {
      width: 16px;
    }
  }

  .entry-area .entry-block .entry-btn {
    position: relative;
    display: grid;
    place-content: center left;
    height: 284px;
    color: #fff;
    border-radius: 32px;
    margin-top: 32px;
    padding: 30px 9%;
  }

  @media screen and (max-width: 768px) {
    .entry-area .entry-block .entry-btn {
      height: 172px;
      border-radius: 24px;
      margin-top: 40px;
      padding: 25px 20px;
    }
  }

  .producer .entry-area .entry-block .entry-btn {
    background-color: #F49097;
  }
  
  .creator .entry-area .entry-block .entry-btn {
    background-color: #55D682;
  }
  
  .journalist .entry-area .entry-block .entry-btn {
    background-color: #1F9BF5;
  }
  
  .announce .entry-area .entry-block .entry-btn {
    background-color: #DFB2F4;
  }

  .entry-area .entry-block .entry-btn .copy {
    font-size: clamp(1.8rem, calc(24/1280*100vw), 2.4rem);
    font-weight: 700;
  }

  @media screen and (max-width: 768px) {
    .entry-area .entry-block .entry-btn .copy {
      font-size: 1.4rem;
      line-height: 1.5;
    }
  }
  
  .entry-area .entry-block .entry-btn .en {
    font-family: var(--rammetto);
    font-size: 6.4rem;
    font-weight: 400;
    line-height: 1;
    margin-top: 24px;
  }

  @media screen and (max-width: 768px) {
    .entry-area .entry-block .entry-btn .en {
      font-size: 3.7rem;
      margin-top: 10px;
    }
  }

  .entry-area .entry-block .entry-btn .arrow {
    position: absolute;
    translate: 0 -50%;
    top: 50%;
    right: 9%;
    width: 105px;
    aspect-ratio: 1 / 1;
    border: 1px solid #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F5E960;
    overflow: hidden;
  }

  @media screen and (max-width: 768px) {
    .entry-area .entry-block .entry-btn .arrow {
      translate: 0 0;
      top: initial;
      bottom: 10px;
      right: 10px;
      width: 38px;
    }
  }

  .entry-area .entry-block .entry-btn .arrow::before {
    content: '';
    position: absolute;
    translate: -50% -50%;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    scale: 0;
    transition: scale 0.3s ease;
  }

  @media screen and (min-width: 769px) {
    .entry-area .entry-block .entry-btn:hover .arrow::before {
      scale: 1;
    }
  }
  
  .entry-area .entry-block .entry-btn .arrow img {
    position: relative;
    width: 18px;
    z-index: 1;
  }

  @media screen and (max-width: 768px) {
    .entry-area .entry-block .entry-btn .arrow img {
      width: 7px;
    }
  }
}

/* ↑↑↑ entry-area ↑↑↑ */
/* ↑↑↑ #detail ↑↑↑ */