@charset "utf-8";

/**
数|番目|序数|基数|
|--|--|--|--|
|1|primary|first|one|
|2|secondary|second|two|
|3|tertiary|third|three|
|4|quaternary|fourth|four|
|5|quinary|fifth|five|
|6|senary|sixth|six|
|7|septenary|seventh|seven|
|8|octonary|eighth|eight|
|9|novenary|ninth|nine|
|10|decenary|tenth|ten|
**/

/*
 * Base
 */
:root {
  --window_innerWidth: 1280;
  --page_contentWidth: 768;
  --page_contentWidth_fixed: 768;

  --baseFontSize_sp:  calc((100 / var(--page_contentWidth) * 100) * 1vw);
  --baseFontSize_pc:  calc(((100 / var(--window_innerWidth) * var(--page_contentWidth_fixed)) / 10) * 1vw);
  --baseFontSize_fx:  calc(((var(--page_contentWidth_fixed) / var(--page_contentWidth) * 100)) * 1px);

  /* 基本色 */
  --color-base-primary: #f2f1ee;
  --color-base-secondary: #eb5f1e;
  --color-base-tertiary: #000000;
  --color-main-primary: #ff88f0;
  --color-main-secondary: #fcee00;
  --color-accent-primary: #fff;

  /* 基本色(RGB) */
  --color-base-primary-rgb: 242, 241, 238;
  --color-base-secondary-rgb: 235, 95, 30;
  --color-base-tertiary-rgb: 0, 0, 0;
  --color-main-primary-rgb: 255, 136, 240;
  --color-main-secondary-rgb: 252, 238, 0;
  --color-accent-primary-rgb: 255, 255, 255;
  
  /* テキスト色 */
  --text-primary: #333;

  /* テキスト色(RGB) */
  --text-primary-rgb: 51, 51, 51;
}

html {
	height: -webkit-fill-available;
	height: -moz-available;
	height: fill-available;
	font-size: var(--baseFontSize_sp);
}

@media (min-width: 768px) {
  html { font-size: var(--baseFontSize_fx); }
}

@media (min-width: 1536px) {
  html { font-size: var(--baseFontSize_fx); }
}

/*
 * Modules
 */
 .heading {
  background-color: var(--color-base-tertiary);
  box-sizing: content-box;
  max-width: 5.5rem;
  padding: .08rem .55rem .08rem .4rem;
  position: relative;
  width: 100%;
}

.heading.--about-company {
  max-width: 4.94rem;
}

.heading-image {
  position: relative;
  width: 100%;
  z-index: 2;
}

.heading-image.--timeschedule {
  max-width: 1.47rem;
}
.heading-image.--works {
  max-width: 3.43rem;
}
.heading-image.--place {
  max-width: 1.6rem;
}
.heading-image.--send {
  max-width: 1.57rem;
}

.button {
  -webkit-appearance: none;
  background-color: var(--color-base-primary);
  border: none;
  border-radius: .4rem;
  display: flex;
  justify-content: center;
  outline: none;
  transition: all 0.4s ease-out;
  list-style: 1;
  padding: .14rem 0;
  text-align: center;
  width: 100%;
}

.button:hover {
  background-color: var(--color-base-tertiary);
}

.button-image {
  background-color: var(--color-base-tertiary);
  display: inline-block;
  height: .23rem;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  width: 100%;
}

.button-image.--company {
  mask-image: url(../images/fresh2027/opencompany/about_nav_company.svg);
  -webkit-mask-image: url(../images/fresh2027/opencompany/about_nav_company.svg);
}

.button-image.--people {
  mask-image: url(../images/fresh2027/opencompany/about_nav_people.svg);
  -webkit-mask-image: url(../images/fresh2027/opencompany/about_nav_people.svg);
}

.button-image.--project {
  mask-image: url(../images/fresh2027/opencompany/about_nav_project.svg);
  -webkit-mask-image: url(../images/fresh2027/opencompany/about_nav_project.svg);
}

.button:hover .button-image {
  background-color: var(--color-base-primary);
}

@media (min-width: 768px) {
  .heading.--recruit::before {
    background: var(--color-base-tertiary);
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: calc(-50vw - 6.45rem);
    width: calc(50vw + 6.45rem);
    z-index: 1;
  }
  
  .button-image {
    height: .15rem;
  }
}

/*
 * Layout
 */
.--landscape,
.--portrait {
  display: none;
}

.internship-wrapper {
  overflow: visible;
}

.internship-wrapper img {
  height: auto;
  max-width: 100%;
}

.internship-mv {
  height: calc(100vh - 50px);
  overflow: hidden;
  width: 100%;
}

.internship-mv-container {
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
}

.internship-mv-cover {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.internship-mv-logo {
  margin: 0 auto;
  max-width: 1.83rem;
}

.internship-mv-lead {
  margin: .36rem auto 0;
  max-width: 5.2rem;
}

.internship-mv-scrollTo {
  height: 30vh;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
}

.internship-mv-scrollTo-line {
  animation: moveY 3s linear infinite;
  background-color: var(--color-accent-primary);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.internship-section {
  background: var(--color-base-primary);
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  border-radius: 1em 1em 0 0;
  height: 100%;
  margin-top: -0.5rem;
  min-height: 100vh;
  overflow: hidden;
  padding-bottom: 0.5rem;
  position: relative;
}

.internship-section.--message {
  background-color: var(--color-base-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: auto;
  z-index: 1;
}
.internship-section.--about {
  background-color: var(--color-base-secondary);
  min-height: auto;
  z-index: 2;
}
.internship-section.--program {
  background-color: var(--color-base-tertiary);
  z-index: 3;
}
.internship-section.--speakers {
  background-color: var(--color-base-primary);
  min-height: auto;
  z-index: 4;
}
.internship-section.--recruit {
  background-color: var(--color-base-secondary);
  min-height: auto;
  padding-bottom: 0;
  z-index: 5;
}
.internship-section.--contact {
  border-radius: 0;
  margin-top: 0;
  min-height: auto;
  z-index: 6;
}

.internship-section.--message::before {
  background-color: var(--color-accent-primary);
  content: "";
  height: 120%;
  position: absolute;
  top: -10%;
  left: 55%;
  transform: rotate(20deg);
  width: 1.8rem;
}

.internship-message {
  padding-bottom: .7rem;
  position: relative;
}

.internship-message-heading-small {
  margin: 0 auto;
  max-width: .52rem;
  padding-top: .55rem;
  position: relative;
  width: 100%;
}

.internship-message-heading {
  margin: .19rem auto 0;
  max-width: 6.15rem;
  position: relative;
  width: 100%;
}

.internship-message-text {
  margin: .68rem auto 0;
  max-width: 5.45rem;
  position: relative;
  width: 100%;
}

.internship-about-images {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

.internship-about-image {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  height: 3rem;
  overflow: hidden;
}

.internship-about-image.--image-1 {
  background: url(../images/fresh2027/opencompany/about_bg_01.png) center/cover no-repeat;
}

.internship-about-image.--image-2 {
  background: url(../images/fresh2027/opencompany/about_bg_02.png) center/cover no-repeat;
}

.internship-about-image.--image-3 {
  background: url(../images/fresh2027/opencompany/about_bg_03.png) center/cover no-repeat;
}

.internship-about-image.--image-2,
.internship-about-image.--image-3 {
  display: none;
}

.internship-about-image-src {
  object-fit: cover;
}

.internship-about-content {
  padding-bottom: .65rem;
}

.internship-about-lasengle {
  box-sizing: content-box;
  line-height: 1;
  padding-top: .26rem;
  padding-left: .4rem;
  padding-bottom: .04rem;
  max-width: 1.06rem;
  width: 100%;
}

.internship-about-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: .2rem;
  margin: .4rem .4rem 0;
}

.internship-about-nav-column {
  grid-row: 1 / 2;
}

.internship-about-nav-column.--column-1 {
  grid-column: 1 / 2;
}

.internship-about-nav-column.--column-2 {
  grid-column: 2 / 3;
}

.internship-about-nav-column.--column-3 {
  grid-column: 3 / 4;
}

.internship-about-contents {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  padding: .38rem .4rem 0;
}

.internship-about-contents-column {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  position: relative;
  z-index: 2;
}

.internship-about-heading-company {
  max-width: 2.15rem;
}

.internship-about-pragraph {
  color: var(--color-accent-primary);
  font-size: .24rem;
  line-height: 2;
}

.internship-about-pragraph:last-child {
  margin-top: 1em;
}

.internship-about-data {
  display: flex;
  color: var(--color-accent-primary);
  font-size: .24rem;
  position: relative;
}

.internship-about-data:first-of-type {
  margin-top: 1em;
}

.internship-about-data-title {
  width: 1.6rem;
  position: relative;
}

.internship-about-data-title::after {
  content: "：";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.internship-about-data-disc {
  flex: 1;
}

.internship-program {
  padding-top: .64rem;
  padding-bottom: .7rem;
}

.internship-program-heading {
  margin: 0 auto;
  max-width: 5.8rem;
  width: 100%;
}

.internship-program-group {
  display: grid;
  gap: .95rem;
  padding: 1.16rem .4rem 0;
}

.internship-program-group-column {
  grid-column: 1 / 2;
  position: relative;
}

.internship-program-group-column.--column-1 {
  grid-row: 1 / 2;
}

.internship-program-group-column.--column-2 {
  grid-row: 2 / 3;
}

.internship-program-group-column.--column-3 {
  grid-row: 3 / 4;
}

.internship-program-attention {
  color: white;
  font-size: .24rem;
  padding: .38rem .4rem 0;
}

.internship-program-content {
  align-items: center;
  background-color: var(--color-accent-primary);
  border-radius: .2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: .42rem;
}

.internship-program-center {
  align-items: center;
  display: flex;
}

.internship-program-content-figure {
  margin: 0 auto 0;
  max-width: 2.3rem;
  position: absolute;
  top: -.8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.internship-program-content-heading {
  align-items: center;
  display: flex;
  padding: 2.12rem .32rem 0;
}

.internship-program-content-heading-image {
  width: 100%;
}

.internship-program-content-heading-image.--heading-1 {
  max-width: 1.76rem;
}

.internship-program-content-heading-image.--heading-2 {
  max-width: 2.92rem;
}

.internship-program-content-heading-image.--heading-3 {
  max-width: 2.13rem;
}

.internship-program-content-heading::before {
  content: "";
  display: block;
  margin-right: .25rem;
}

.internship-program-content-heading.--no-1::before {
  background: url(../images/fresh2027/opencompany/program_num_01.svg) top left/contain no-repeat;
  height: .57rem;
  width: .85rem;
}

.internship-program-content-heading.--no-2::before {
  background: url(../images/fresh2027/opencompany/program_num_02.svg) top left/contain no-repeat;
  height: .58rem;
  width: .91rem;
}

.internship-program-content-paragraph {
  font-size: .24rem;
  line-height: 1.5;
  padding: .46rem .32rem 0;
}

.internship-timeschedule {
  margin: 0 auto;
  max-width: 7.7rem;
  padding-top: .5rem;
}

.internship-works {
  margin: 0 auto;
  max-width: 7.7rem;
  padding-top: .5rem;
}

.internship-place {
  margin: 0 auto;
  max-width: 7.7rem;
  padding-top: .5rem;
}

.internship-send {
  margin: 0 auto;
  max-width: 7.7rem;
  padding-bottom: .5rem;
}

.internship-timeschedule-date {
  max-width: 5.64rem;
  width: 100%;
}

.internship-timeschedule-text {
  color: var(--color-accent-primary);
  font-size: .24rem;
  padding-top: .5em;
}

.internship-timeschedule-image {
  padding-top: .34rem;
  max-width: 5.21rem;
  width: 100%;
}

.internship-timeschedule-note {
  max-width: 10.4rem;
  padding: .42rem .42rem 0;
}

.internship-timeschedule-paragraph {
  color: var(--color-accent-primary);
  font-size: .24rem;
}

.internship-works-category {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: .38rem;
}

.internship-works-category-column {
  padding: .12rem;
  width: 50%;
}

.internship-works-name {
  text-align: center;
  width: 100%;
}

.internship-works-name-image {
  display: inline-block;
  width: 100%;
}

.internship-works-conditions {
  padding: .4rem .4rem 0;
}

.internship-works-conditions-column {
  padding: .18rem 0;
}

.internship-works-terms {
  list-style: none;
  margin: 0;
  padding: 0
}

.internship-works-terms-text {
  color: var(--color-accent-primary);
  font-size: .24rem;
  line-height: 1.5;
  margin-left: 1em;
  text-indent: -1em;
}

.internship-place-address {
  padding-top: .16rem;
  padding-left: .4rem;
}

.internship-place-address-text {
  padding-top: .12rem;
  width: 100%;
}

.internship-place-address-text.--text-1 {
  max-width: 4.6rem;
}

.internship-place-address-text.--text-2 {
  max-width: 3.4rem;
}

.internship-place-map {
  padding: .4rem;
}

.internship-place-googleMap {
  position: relative;
  width: 100%;
  padding-top: 75%;
  height: 0;
}

.internship-place-googleMap-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.internship-place-paragraph {
  color: var(--color-accent-primary);
  font-size: .24rem;
  padding-top: .16rem;
  line-height: 1.5;
}

.internship-send-date {
  padding-top: .27rem;
  padding-left: .42rem;
  max-width: 6.07rem;
  width: 100%;
}

.internship-send-note {
  padding: .12rem .42rem 0;
}

.internship-send-step {
  list-style: none;
  margin: 0;
  padding: 0;
}

.internship-send-step-text {
  color: var(--color-accent-primary);
  font-size: .24rem;
  margin-left: 1em;
  text-indent: -1em;
}

.internship-contact-form {
  padding: .65rem 0;
}

.internship-contact-form-button {
  text-align: center;
  width: 100%;
}

.internship-contact-form-send {
  display: inline-block;
  max-width: 6.7rem;
  transition: opacity 0.4s ease;
  width: 100%;
}

.internship-contact-form-send:hover {
  opacity: 0.6;
}

.internship-contact-shere {
  background: var(--color-base-secondary);
  padding-bottom: 1.2rem;
  text-align: center;
}

.internship-contact-shere-x {
  display: inline-block;
  max-width: 1.04rem;
  transform: translateY(-.2rem);
  transition: opacity 0.4s ease;
}

.internship-contact-shere-x:hover {
  opacity: 0.6;
}

.internship-footer {
  margin-top: -1.25rem;
  position: relative;
}

.internship-footer-btn {
  margin-top: 0;
}

@media (min-width: 768px) {
  .internship-section {
    min-height: 100vh;
  }

  .internship-section.--message {
    min-height: 100vh;
  }

  .internship-section.--program {
    align-items: center;
    display: flex;
    justify-content: center;
  }

  .internship-message-text {
    max-width: 7.24rem;
  }

  .internship-about {
    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0 auto;
    max-width: 11rem;
  }

  .internship-about-image.--image-1 {
    background: url(../images/fresh2027/opencompany/about_bg_01_pc.png) center/cover no-repeat;
  }
  
  .internship-about-image.--image-2 {
    background: url(../images/fresh2027/opencompany/about_bg_02_pc.png) center/cover no-repeat;
  }
  
  .internship-about-image.--image-3 {
    background: url(../images/fresh2027/opencompany/about_bg_03_pc.png) center/cover no-repeat;
  }

  .internship-about-images {
    width: 4.7rem;
  }

  .internship-about-content {
    width: calc(11rem - 4.7rem);
  }

  .internship-about-pragraph {
    font-size: .16rem;
    padding-top: 0;
  }

  .internship-about-data {
    font-size: .16rem;
  }

  .internship-about-data-title {
    width: 1.1rem
  }

  .internship-about-image {
    height: 100%;
  }

  .internship-about-lasengle {
    padding-top: .7rem;
  }

  .internship-about-heading {
    margin-left: -.35rem;
    padding-left: .75rem;
    position: relative;
    z-index: 2;
  }

  .internship-about-tabGroup {
    width: 6.3rem;
  }

  .internship-program-group {
    gap: .16rem;
    margin: 0 auto;
    max-width: 10.4rem;
    padding-right: 0;
    padding-left: 0;
  }

  .internship-program-group-column {
    position: relative;
  }
  
  .internship-program-group-column.--column-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  
  .internship-program-group-column.--column-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  
  .internship-program-group-column.--column-3 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  .internship-program-attention {
    font-size: .15rem;
    padding-left: 0;
    padding-right: 0;
  }

  .internship-program-content-heading {
    padding-top: 1.86rem;
  }

  .internship-program-content-heading-image.--heading-1 {
    max-width: 1.13rem;
  }
  
  .internship-program-content-heading-image.--heading-2 {
    max-width: 1.9045rem;
  }

  .internship-program-content-heading.--no-1::before {
    height: .4rem;
    width: .6rem;
  }
  
  .internship-program-content-heading.--no-2::before {
    height: .41rem;
    width: .66rem;
  }
  
  .internship-program-content-heading.--no-3::before {
    height: .41rem;
    width: .64rem;
  }

  .internship-program-content-paragraph {
    font-size: .16rem;
    padding-top: .22rem;
  }

  .internship-timeschedule-date {
    max-width: 4.96rem;
  }

  .internship-timeschedule-image {
    max-width: 16.2rem;
    padding: .4rem .4rem 0;
  }

  .internship-timeschedule-note {
    max-width: 16.2rem;
  }

  .internship-works-category {
    gap: .24rem;
    justify-content: center;
    max-width: 6.9rem;
  }

  .internship-works-category-column {
    padding: 0;
    width: 3.3rem;
  }

  .internship-works-conditions {
    max-width: 10.4rem;
  }

  .internship-timeschedule-paragraph,
  .internship-timeschedule-text,
  .internship-works-paragraph,
  .internship-send-paragraph,
  .internship-works-terms-text,
  .internship-send-step-text {
    font-size: .16rem;
  }

  .internship-place-googleMap {
    margin: 0 auto;
    max-width: 100%;
    padding-top: 56.25%;
  }

  .internship-place-paragraph {
    font-size: .16rem;
  }

  .internship-contact-form-send {
    max-width: 9rem;
  }
}

@media (orientation: landscape) {
  .--landscape {
    display: block;
  }
}

@media (orientation: portrait) {
  .--portrait {
    display: block;
  }  
}

@media (min-width: 768px) and (min-height: 992px) {
  .internship-section.--message,
  .internship-section.--about,
  .internship-section.--program {
    position: sticky;
    top: 0;
    left: 0;
  }

  .internship-section.--about,
  .internship-section.--program {
    top: .8rem;
  }
}

@media (max-width: 768px) and  (orientation: landscape) {
  .internship-section {
    min-height: 100vw;
    position: relative;
  }
}

@media (max-width: 768px) and  (orientation: portrait) {
  .internship-mv-video {
    height: 100vh;
    width: auto;
  }
}

@keyframes moveY {
  0% {
    transform: translateY(-100%);
  }

  33% {
    transform: translateY(0%);
  }

  66%,100% {
    transform: translateY(105%);
  }
}


/*
 * State
 */
.is-hidden {
  opacity: 0;
  border-inline-start: hidden;
  z-index: 0;
}

.is-button-hover {
  background-color: var(--color-base-tertiary);
}

.is-button-hover-image {
  background-color: var(--color-base-primary);
}