@charset "UTF-8";
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.tb,
.tbpc,
.pc {
  display: none;
}

.fadein {
  opacity: 0;
  transition:
    opacity 1s ease,
    transform 1s ease;
  transition-delay: 0s;
}

.fadein.scrollin {
  opacity: 1;
}

:root {
  /* root color */
  --bg_gray: #f2f2f2;
  --black: #252525;
  --red: #af1d3b;
  --tab_yellow: #fcf99c;
  --hash_yellow: #e7a603;
  --tab_blue: #bfe5ff;
  --hash_blue: #1991f1;
  --tab_pink: #ffdae3;
  --hash_pink: #f66086;
  --beige: #f6f4ea;
  --cream: #f4f0dd;

  /* root font-weight */
  --font_black: 700;
  --font_bold: 600;
  --font_medium: 500;
  --font_regular: 400;
}

/*  color setting */
.bg_grid {
  background-color: #fff;
  background-image:
    linear-gradient(#cce1ef 0.5px, transparent 0.5px),
    linear-gradient(90deg, #cce1ef 0.5px, transparent 0.5px);
  background-size: 16.5px 16.5px;
}

.font_white {
  color: #fff;
}

.bg_white {
  background-color: #fff;
}

.bg_gray {
  background-color: var(--bg_gray);
}

.bg_black {
  background: var(--black);
}

.bg_yellow {
  background-color: var(--tab_yellow);
}

.bg_blue {
  background-color: var(--tab_blue);
}

.bg_pink {
  background-color: var(--tab_pink);
}

.font_yellow {
  color: var(--hash_yellow);
}

.font_blue {
  color: var(--hash_blue);
}

.font_pink {
  color: var(--hash_pink);
}

.bg_beige {
  background-color: var(--beige);
}

.bg_red {
  background-color: var(--red);
}

.font_red {
  color: var(--red);
}

.bg_cream {
  background-color: var(--cream);
}

/* font setting */

.font_regular {
  font-weight: var(--font_regular);
}

.font_medium {
  font-weight: var(--font_medium);
}

.font_bold {
  font-weight: var(--font_bold);
}

.font_black {
  font-weight: var(--font_black);
}

.is_palt {
  font-feature-settings: 'palt' on;
}

.Afacad {
  font-family: 'Afacad', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.Alata {
  font-family: 'Alata', sans-serif;
  font-weight: 400;
}

small {
  font-size: 11px;
  line-height: 1.63;
  letter-spacing: 0.08em;
  display: block;
  font-weight: var(--font_regular);
}

sup {
  vertical-align: super;
  font-size: 0.6em;
  position: relative;
  top: 0.09em;
  letter-spacing: 0;
}

.marker {
  position: relative;
  z-index: 0;
  margin-inline: 0.04em;
}

.marker::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0.55em;
  bottom: 0;
  left: 0;
  background: #f1ea25;
  padding-inline: 0.15em;
  z-index: -1;
}

/* =====html setting===== */
html,
body {
  overscroll-behavior-y: none;
}

html {
  letter-spacing: 0.08em;
  font-size: 15px;
  height: auto;
  font-weight: var(--font_medium);
}

body {
  font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
  letter-spacing: 0.08em;
  color: var(--black);
  position: relative;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 70px;
  z-index: 2;
}

/* hero */
.hero_bg {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: clamp(680px, calc(401.342px + 103.968vw), 1200px);
}

.hero_bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/bg_hero_sp.svg');
  background-repeat: no-repeat;
  background-size: clamp(1716px, calc(911.239px + 206.349vw), 2496px);

  background-position: center 40%;
  transform-origin: center;
  z-index: 0;
}

.hero_inner {
  margin-top: clamp(
    100px,
    calc(117px + (172 - 117) * ((100vw - 390px) / (768 - 390))),
    172px
  );
  margin-inline: auto;
  width: clamp(260px, 80.77vw, 315px);
  z-index: 1;
  position: relative;
}

.hero_inner h1 {
  transition-delay: 0.3s;
}

.hero_copy_box {
  margin-top: clamp(
    72px,
    calc(84px + (103 - 84) * ((100vw - 390px) / (768 - 390))),
    103px
  );

  transition-delay: 0.6s;
}

.hero_copy_box p.hero_copy {
  text-align: center;
  font-size: clamp(
    12px,
    calc(13.5px + (20 - 13.5) * ((100vw - 390px) / (768 - 390))),
    20px
  );
  line-height: 2.13;
  letter-spacing: 0.08em;
}

.hero_copy_box p.hero_copy.waves {
  font-size: clamp(
    14px,
    calc(16px + (24 - 16) * ((100vw - 390px) / (768 - 390))),
    24px
  );
  line-height: 2.38;
  letter-spacing: 0.08em;
  font-weight: var(--font_bold);
  margin-block: 0.2em 0.8em;
}

span.wave {
  display: inline-block;
  position: relative;
}
span.wave::after {
  position: absolute;
  content: '';
  bottom: 0.17em;
  left: 50%;
  transform: translateX(-50%);
  background-image: url('../img/wave.svg');
  background-repeat: repeat-x;
  background-position: left calc(100% - 0.05em);
  background-size: 0.6em 0.5em;
  width: 92%;
  height: 0.6em;
}

.etc {
  font-size: clamp(
    12px,
    calc(13.5px + (20 - 13.5) * ((100vw - 390px) / (768 - 390))),
    20px
  );
}

/* sort */
#sort .sort_lead {
  text-align: center;
  padding-block: 52px 77px;
}

#sort .lead_list {
  display: flex;
  flex-direction: column;
  gap: 0.78em;
  font-size: 17.5px;
  font-weight: var(--font_regular);
  line-height: normal;
  letter-spacing: 0.05em;
  text-align: center;
  align-items: center;
}

#sort .lead_list p.lead_list_content {
  padding: 0.47em 1.05em 0.57em 0.95em;
  border-radius: 2em;
  border: 1px solid var(--black);
}

#sort .lead_list_content span.hash {
  font-weight: var(--font_bold);
  letter-spacing: 0em;
}

#sort .lead_list_content:last-child {
  position: relative;
}

#sort .lead_list_content:last-child span.de {
  position: absolute;
  font-size: 20px;
  line-height: 1.75;
  letter-spacing: 0.08em;
  top: 0.2em;
  right: -1.6em;
}

.sort_lead .lead_text {
  font-size: 20px;
  line-height: 1.75;
  letter-spacing: 0.08em;
  margin-top: 1em;
}

.sort_content {
  width: 100%;
  padding-top: 50px;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  position: relative;
}

.sort_content h2.sort_title_tab {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  width: 243.5px;
  height: 35px;
  border-radius: 0.5em 0.5em 0 0;
  text-align: center;
  line-height: 1.79;
  letter-spacing: 0.1em;
  padding-top: 0.25em;
}

/*tagTabs*/
.tagTabs {
  display: flex;
  width: 340px;
  height: auto;
  align-items: center;
  gap: 0.5em;
  margin-inline: auto;
  flex-wrap: wrap;
  justify-content: center;
}

.tagTabs label {
  font-size: 12px;
  font-weight: var(--font_regular);
  line-height: 1;
  letter-spacing: 0.08em;
  height: 2.45em;
  padding: 0.65em 0.8em 0.6em 0.75em;
  border-radius: 1.87em;
  border: 0.75px solid var(--black);
}

.tagTabs label span,
.hash {
  font-weight: var(--font_bold);
  letter-spacing: 0.15em;
}

/* labels transition */

#all:checked ~ .tagTabs label[for="all"],
/*yellow*/
#law:checked ~ .tagTabs label[for="law"],
#management:checked ~ .tagTabs label[for="management"],
#economics:checked ~ .tagTabs label[for="economics"],
#foreign_lang:checked ~ .tagTabs label[for="foreign_lang"],
#humanities:checked ~ .tagTabs label[for="humanities"],
#urban_info:checked ~ .tagTabs label[for="urban_info"],
#info_engineer:checked ~ .tagTabs label[for="info_engineer"],
#science_engineer:checked ~ .tagTabs label[for="science_engineer"],
#agriculture:checked ~ .tagTabs label[for="agriculture"],
#pharmacy:checked ~ .tagTabs label[for="pharmacy"],
#exclusive:checked ~ .tagTabs label[for="exclusive"],
#multiple:checked ~ .tagTabs label[for="multiple"],
/*blue*/
#grades:checked ~ .tagTabs label[for="grades"],
#stem_enrollment:checked ~ .tagTabs label[for="stem_enrollment"],
#inquiry_activities:checked ~ .tagTabs label[for="inquiry_activities"],
#fieldwork:checked ~ .tagTabs label[for="fieldwork"],
#english_certification:checked ~ .tagTabs label[for="english_certification"],
#boki_certification:checked ~ .tagTabs label[for="boki_certification"],
#math_certification:checked ~ .tagTabs label[for="math_certification"],
#social_certification:checked ~ .tagTabs label[for="social_certification"],
#jmo:checked ~ .tagTabs label[for="jmo"],
#suken:checked ~ .tagTabs label[for="suken"],
#community_service:checked ~ .tagTabs label[for="community_service"],
#collaborative_projects:checked ~ .tagTabs label[for="collaborative_projects"],
#urban_research:checked ~ .tagTabs label[for="urban_research"],
#tourism_research:checked ~ .tagTabs label[for="tourism_research"],
#programming_contest:checked ~ .tagTabs label[for="programming_contest"],
#software_dev:checked ~ .tagTabs label[for="software_dev"],
#science_conference:checked ~ .tagTabs label[for="science_conference"],
#external_research:checked ~ .tagTabs label[for="external_research"],
/*pink*/
#discussion:checked ~ .tagTabs label[for="discussion"],
#presentation:checked ~ .tagTabs label[for="presentation"],
#essay:checked ~ .tagTabs label[for="essay"],
#accounting:checked ~ .tagTabs label[for="accounting"],
#certification_achievements:checked ~ .tagTabs label[for="certification_achievements"] {
  background-color: #252525;
  color: #fff;
}

/* cards transition */

/*yellow*/
#law:checked ~ .cards_wrapper .cards .card:not(.law),
#management:checked ~ .cards_wrapper .cards .card:not(.management),
#economics:checked ~ .cards_wrapper .cards .card:not(.economics),
#foreign_lang:checked ~ .cards_wrapper .cards .card:not(.foreign_lang),
#humanities:checked ~ .cards_wrapper .cards .card:not(.humanities),
#urban_info:checked ~ .cards_wrapper .cards .card:not(.urban_info),
#info_engineer:checked ~ .cards_wrapper .cards .card:not(.info_engineer),
#science_engineer:checked ~ .cards_wrapper .cards .card:not(.science_engineer),
#agriculture:checked ~ .cards_wrapper .cards .card:not(.agriculture),
#pharmacy:checked ~ .cards_wrapper .cards .card:not(.pharmacy),
#exclusive:checked ~ .cards_wrapper .cards .card:not(.exclusive),
#multiple:checked ~ .cards_wrapper .cards .card:not(.multiple),
/*blue*/
#grades:checked ~ .cards_wrapper .cards .card:not(.grades),
#stem_enrollment:checked ~ .cards_wrapper .cards .card:not(.stem_enrollment),
#inquiry_activities:checked ~ .cards_wrapper .cards .card:not(.inquiry_activities),
#fieldwork:checked ~ .cards_wrapper .cards .card:not(.fieldwork),
#english_certification:checked ~ .cards_wrapper .cards .card:not(.english_certification),
#boki_certification:checked ~ .cards_wrapper .cards .card:not(.boki_certification),
#math_certification:checked ~ .cards_wrapper .cards .card:not(.math_certification),
#social_certification:checked ~ .cards_wrapper .cards .card:not(.social_certification),
#jmo:checked ~ .cards_wrapper .cards .card:not(.jmo),
#suken:checked ~ .cards_wrapper .cards .card:not(.suken),
#community_service:checked ~ .cards_wrapper .cards .card:not(.community_service),
#collaborative_projects:checked ~ .cards_wrapper .cards .card:not(.collaborative_projects),
#urban_research:checked ~ .cards_wrapper .cards .card:not(.urban_research),
#tourism_research:checked ~ .cards_wrapper .cards .card:not(.tourism_research),
#programming_contest:checked ~ .cards_wrapper .cards .card:not(.programming_contest),
#software_dev:checked ~ .cards_wrapper .cards .card:not(.software_dev),
#science_conference:checked ~ .cards_wrapper .cards .card:not(.science_conference),
#external_research:checked ~ .cards_wrapper .cards .card:not(.external_research),
/*pink*/
#discussion:checked ~ .cards_wrapper .cards .card:not(.discussion),
#presentation:checked ~ .cards_wrapper .cards .card:not(.presentation),
#essay:checked ~ .cards_wrapper .cards .card:not(.essay),
#accounting:checked ~ .cards_wrapper .cards .card:not(.accounting),
#certification_achievements:checked ~ .cards_wrapper .cards .card:not(.certification_achievements) {
  display: none;
}

/*cards*/
.cards_wrapper {
  margin-inline: auto;
  width: 300px;
  margin-bottom: 50px;
}

.cards {
  display: grid;
  width: 100%;
}

.cards article.card {
  width: 300px;
  min-width: 300px;
  height: 890px;
  border: 1px solid var(--black);
  background: #fff;
  box-shadow: 7px 7px 0 0 rgba(0, 0, 0, 0.15);
  margin-top: 40px;
  position: relative;
}

.card_inner {
  width: 250px;
  margin: 30px auto 26px;
  display: grid;
  place-items: center;
}

.card_tags {
  display: flex;
  width: 240px;
  gap: 0.47em 0.43em;
  flex-wrap: wrap;
}

.card07 .card_tags {
  gap: 0.47em 0.4em;
}

.card_tags .tag {
  font-size: 10px;
  font-weight: var(--font_regular);
  letter-spacing: 0.05em;
  height: 2.2em;
  padding: 0.5em 0.75em 0.5em 0.55em;
  border-radius: 20px;
  border: 0.75px solid var(--black);
}

.card01 .card_tags .tag:nth-child(2),
.card01 .card_tags .tag:nth-child(3),
.card02 .card_tags .tag:nth-child(2) {
  margin-right: 10em;
}

.tagTabs label.kana {
  letter-spacing: 0em;
}

.card_tags .tag.kana {
  letter-spacing: -0.04em;
}

.card_sub_title {
  margin-block: 21px 19px;
  text-align: center;
  font-weight: var(--font_bold);
  font-size: 13px;
  line-height: 1.54;
  letter-spacing: 0.08em;
}

.card06 .card_sub_title,
.card07 .card_sub_title {
  margin-block: 15px 6px;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.card07 .card_sub_title {
  letter-spacing: 0em;
}

.card_title {
  text-align: center;
  padding-block: 6px 13px;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  position: relative;
  width: 240px;
}

.card_title span.new_badge {
  font-size: 14.5px;
  line-height: 1;
  padding-left: 0.1em;
  letter-spacing: 0.08em;
  font-weight: var(--font_medium);
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  position: absolute;
  top: -17px;
  right: -7px;
  border: 1px solid var(--black);
}

.card_title .type {
  font-size: 15px;
  line-height: 1.66;
  letter-spacing: 0.08em;
  font-weight: var(--font_bold);
}

.card_title h3 {
  font-size: 22px;
  line-height: 1.36;
  letter-spacing: 0.08em;
  margin-block: 22px 27.5px;
}

.card_title h3.is_multiline {
  margin-block: 6px 13px;
}

.card_title .target {
  width: 240px;
  height: 30px;
  padding-top: 2px;
  font-size: 15px;
  font-weight: var(--font_medium);
  line-height: 1.66;
  letter-spacing: 0.08em;
}

.exam_steps {
  display: grid;
  gap: 15px;
  text-align: center;
  margin-top: 23px;
}

.exam_steps .exam_step {
  width: 240px;
  height: 30px;
  padding: 3.5px;
  background: #dfdfdf;
  font-size: 13px;
  line-height: 1.76;
  letter-spacing: 0.08em;
}

.exam_steps .exam_step_content {
  font-size: 14px;
  line-height: 1.57;
  letter-spacing: 0.07em;
}

.exam_steps .exam_step_content span.exam_method {
  display: block;
  margin-top: 5px;
}

.exam_steps .exam_step_content .tracking {
  letter-spacing: 0.03em;
}

.exam_steps .exam_step_content small {
  margin-top: 15px;
  letter-spacing: 0.02em;
}

.card_box {
  margin-block: 30px 0px;
  width: 240px;
  height: auto;
  padding: 15px;
  text-align: justify;
}

.card04 .card_box {
  text-align: left;
}

.card03 .card_box {
  margin-block: 17px 0;
  padding: 10px 15px 11px;
}

.card08 .card_box {
  margin-block: 23px 0px;
}

.card_box .card_box_text {
  font-size: 13px;
  line-height: 1.53;
  letter-spacing: 0.08em;
  margin-bottom: 0.5em;
}

.card_box small {
  line-height: 1.55;
  letter-spacing: 0.07em;
}

.card_box small .tracking {
  letter-spacing: 0.01em;
}

.card03 .card_box small {
  line-height: 1.66;
  letter-spacing: 0.02em;
}

.card_box small span.add {
  line-height: 1.64;
  display: block;
  margin-top: 0.5em;
  letter-spacing: 0em;
}

.card .white_box {
  margin-top: 10px;
  border: 1px solid #8a8a8a;
  padding: 5px;
  width: 210px;
}

.card.card08 .white_box {
  margin-top: 21px;
  width: 240px;
}

.card .white_box .white_box_text {
  font-size: 11px;
  text-align: center;
  line-height: 1.36;
  letter-spacing: 0.08em;
  font-weight: var(--font_regular);
}

.card_image {
  position: absolute;
  width: 240px;
  height: 195px;
  bottom: 91px;
}

.card a.card_cta {
  width: 100%;
  height: 65px;
  padding: 22px 30px 11px 30px;
  font-size: 15px;
  line-height: 1.53;
  letter-spacing: 0.1em;
  position: absolute;
  display: block;
  bottom: 0;
}

.card a.card_cta::after,
.recommendation_cta::after,
.footer_nav a::after {
  content: '';
  width: 24px;
  height: 24px;
  background: url('../img/ex_link.svg') no-repeat center / contain;
  top: 50%;
  transform: translateY(-50%);
  right: 30px;
  position: absolute;
}

/* vision */

section#vision {
  position: relative;
  overflow: hidden;
}

section#vision::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/bg_vision_sp.svg') no-repeat center 50%/ 780px auto;
  z-index: 0;
}

.vision_inner {
  width: 320px;
  margin-inline: auto;
  z-index: 1;
  position: relative;
}

.vision_leads {
  margin-block: 50px 45px;
  text-align: center;
}

.vision_leads .sub_text {
  letter-spacing: 0.03em;
}

#vision h2 {
  margin-block: 25px;
  font-size: 22px;
  line-height: 1.91;
  letter-spacing: 0.1em;
}

#vision .vision_leads .lead_text {
  font-size: 15px;
  line-height: 2.13;
  letter-spacing: 0.07em;
}

.vision_contents .career_route {
  width: 260px;
  margin-inline: auto;
}

.vision_contents .career_route h3 {
  font-size: 19.5px;
  font-weight: var(--font_bold);
  line-height: 1.47;
  letter-spacing: 0.06em;
  margin-bottom: 1.2em;
  text-align: left;
}
.vision_contents .career_route h3 span {
  position: relative;
  text-align: left;
  display: inline-block;
  padding-left: 1.65em;
}

.vision_contents .career_route.route01 h3 span {
  padding-left: 1.7em;
}

.vision_contents .career_route h3 span::before {
  content: '';
  width: 1.45em;
  height: 1.46em;
  background: url('../img/blue_ribbon.svg') no-repeat center / contain;
  top: 0.1em;
  left: 0;
  position: absolute;
}

.vision_arrows_wrap {
  position: relative;
  margin-bottom: 229px;
}

.chevrons {
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
  width: 248px;
}

.chev {
  position: relative;
  height: 250px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 18px;
  line-height: 1.94;
  letter-spacing: 0.05em;
  padding-block: 10px 25px;
}

.route02 .chev.chev03 {
  letter-spacing: 0em;
}

.chev + .chev {
  margin-top: -35px;
  padding-block: 35px;
}

.chev::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/chev01_sp.svg') no-repeat center / 248px auto;
}

.chev02.chev::before {
  background: url('../img/chev02_sp.svg') no-repeat center / 248px auto;
}

.chev03.chev::before {
  background: url('../img/chev03_sp.svg') no-repeat center / 248px auto;
}

.chev01 {
  z-index: 3;
}
.chev02 {
  z-index: 2;
}
.chev03 {
  z-index: 1;
}

.vision_arrows_wrap::after {
  position: absolute;
  bottom: -182px;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  width: 220px;
  height: auto;
  aspect-ratio: 1/1;
  background: url('../img/arrows01_circle.png') no-repeat center / contain;
  z-index: 4;
}

.route02 .vision_arrows_wrap::after {
  background: url('../img/arrows02_circle.png') no-repeat center / contain;
}

/* schedule */
.schedule_inner {
  width: 320px;
  margin-inline: auto;
  padding-block: 50px;
}

#schedule h2 {
  margin-block: 0px 40px;
  text-align: center;
}

#schedule h2 span.en {
  font-size: 30px;
  line-height: 1.25;
  position: relative;
  margin-bottom: 32px;
  display: inline-block;
  letter-spacing: 0.02em;
}

#schedule h2 span.en::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 2px;
  background: var(--black);
  bottom: -0.07em;
  left: 50%;
  transform: translateX(-50%);
}

#schedule h2 span.jp {
  display: block;
  font-size: 24px;
  line-height: 1.67;

  letter-spacing: 0.08em;
}

.schedule_table {
  width: 320px;
  margin: 0 auto;
  border: 1px solid var(--black);
  background: #fff;
  box-sizing: border-box;
}

.scheduleRow {
  display: grid;
  grid-template-columns: 40px 1fr;
  min-height: 150px;
}

.scheduleRow + .scheduleRow {
  border-top: 1px solid var(--black);
}

.scheduleLabel {
  background: #57aff4;
  border-right: 1px solid var(--black);
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: grid;
  place-items: center;
  letter-spacing: 0.35em;
  font-size: 16px;
}

.scheduleBody {
  place-items: center;
  text-align: center;
  padding: 20px;
  font-size: 19px;
  line-height: 1.75;
  letter-spacing: 0.1em;
  align-content: space-evenly;
  display: grid;
}

.scheduleRow:nth-child(1) .scheduleBody {
  padding-block: 43px;
}

.scheduleRow:nth-child(2) .scheduleBody {
  padding-block: 28px;
}

.subTitle {
  font-size: 15px;
  line-height: 1.66;
  letter-spacing: 0.1em;
}

.dateLine {
  font-size: 16px;
}

.pill {
  width: 197.5px;
  height: 32px;
  padding-top: 4px;
  font-size: 14px;
  line-height: 1.76;
  letter-spacing: 0.1em;
  background: #dfdfdf;
}

.midText {
  font-size: 17px;
  line-height: 1.49;
  letter-spacing: 0.1em;
  padding-block: 0.7em;
}

.bigDate {
  line-height: 1.34;
  margin-top: 0.6em;
}

.scheduleRow:last-child .bigDate.sep {
  margin-block: 0.7em;
}

.note {
  font-size: 13.7px;
  line-height: 1.85;
  letter-spacing: 0.1em;
  margin-top: 0.3em;
}

.schedule_box small {
  font-size: 12px;
  line-height: 1.92;
  letter-spacing: 0.06em;
  margin-top: 15px;
}

.recommendation {
  margin-block: 50px;
  place-items: center;
  display: grid;
}

.recommendation h3 {
  font-size: 24px;
  line-height: 1.67;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 30px;
}

.recommendation h3 span.dots {
  position: relative;
  display: inline-block;
}

.recommendation h3 span.dots::before {
  position: absolute;
  top: -1em;
  left: 0.6em;
  width: 100%;
  content: '● ● ●';
  font-size: 0.25em;
  letter-spacing: 1.4em;
  color: #f66086;
}
.recommendation h3 span.marker,
.recommendation h3 span.check {
  letter-spacing: 0.1em;
}

.recommendation p.lead_text {
  line-height: 2.13;
  letter-spacing: 0.07em;
  text-align: center;
  margin-bottom: 45px;
}

.point_lists {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.point_lists li {
  background-color: var(--beige);
  aspect-ratio: 300/150;
  width: 300px;
  height: auto;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  border: 1px solid var(--black);
  padding-top: 0.5em;
}

.point_lists li p.point_label {
  position: absolute;
  background-color: var(--black);
  color: #fff;
  font-family: 'Alata', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 2.17;
  border-radius: 15px;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 30px;
  letter-spacing: 0.04em;
  padding-left: 0.2em;
}

.point_content {
  font-size: 17px;
  font-weight: var(--font_bold);
  line-height: 1.76;
  letter-spacing: 0.1em;
}

li.point05 small {
  margin-top: -1.8em;
  font-size: 12px;
}

.recommendation_cta {
  line-height: 1.53;
  letter-spacing: 0.1em;
  border-radius: 35px;
  width: 280px;
  height: 70px;
  padding: 12px 30px 11px 35px;
  position: relative;
  display: block;
  margin-top: 50px;
}

.recommendation_cta::after {
  width: 24px;
  height: 24px;
}

.precaution {
  width: 320px;
  height: auto;
  aspect-ratio: 320/104;
  padding: 13px 10px;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.precaution img {
  width: 40px;
  height: 40px;
}

.precaution p {
  font-size: 12px;
  line-height: 1.58;
  letter-spacing: 0.1em;
}

/* footer */
footer {
  padding-block: 50px 40px;
}

footer .nav_group {
  width: 280px;
  margin-inline: auto;
}
.footer_nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer_nav a {
  border: 1px solid #fff;
  width: 280px;
  height: 69px;
  padding: 0px 30px;
  position: relative;
  display: grid;
  align-items: center;
  line-height: 1.53;
  letter-spacing: 0.1em;
}

.nav_group a.footer_logo {
  width: auto;
  display: block;
  margin-block: 15px;
}
.nav_group a.footer_logo img {
  width: 200px;
  height: 81.9px;
  margin-inline: auto;
}

footer small {
  text-align: center;
}

@media (min-width: 390px) and (max-width: 767.98px) {
  .hero_inner {
    width: clamp(315px, calc(54.2328vw + 103.4921px), 520px);
  }
}

@media (min-width: 768px) {
  .sp {
    display: none;
  }

  .tb,
  .tbpc {
    display: block;
  }
  /* hero */

  .hero_bg {
    height: 1200px;
  }

  .hero_bg::before {
    background-size: 2496px auto;
    background-position: center 42%;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
  }

  .hero_inner {
    margin-top: 152px;
    width: 520px;
  }

  .hero_copy_box {
    margin-top: 126px;
  }

  .hero_copy_box p.hero_copy,
  .etc {
    font-size: 20px;
  }

  .hero_copy_box p.hero_copy.waves {
    font-size: 24px;
  }

  span.wave::after {
    background-image: url('../img/wave_tb.svg');
    bottom: 0.17em;
    background-size: 0.5em 7px;
    height: 8px;
  }

  /* sort */
  #sort .lead_list {
    flex-direction: row;
    font-size: 14px;
    justify-content: center;
    margin-left: -1.5em;
    gap: 0.5em;
  }

  #sort .lead_list_content:last-child span.de {
    font-size: 14px;
  }

  .sort_lead .lead_text {
    font-size: 16.5px;
    line-height: 1.55;
    letter-spacing: 0.06em;
  }

  /*tagTabs*/
  .tagTabs {
    width: 650px;
  }

  .tagTabs label {
    font-size: 14px;
  }

  /*cards*/

  .cards_wrapper {
    width: 630px;
  }

  .cards {
    gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    margin-top: 50px;
  }

  .cards article.card {
    flex: 0 0 300px;
    max-width: 300px;
    margin-top: 0px;
  }

  /* vision */

  section#vision::before {
    background: url('../img/bg_vision_tb.svg') no-repeat center top/ 1420.8px
      auto;
  }

  .vision_inner {
    width: 650px;
    margin-bottom: 77px;
  }

  .vision_leads .sub_text {
    font-size: 14px;
    line-height: 1.79;
  }

  #vision h2 {
    line-height: 1.55;
    font-size: 21px;
    letter-spacing: 0.09em;
  }

  .marker::after {
    width: 101%;
    height: 0.45em;
  }
  .vision_leads {
    margin-block: 50px 58px;
  }

  #vision .vision_leads .lead_text {
    line-height: 1.86;
  }

  .vision_contents .career_route {
    width: 650px;
  }

  .vision_contents .career_route h3 {
    font-size: 15px;
    line-height: 1.35;
    text-align: left;
    margin-bottom: 0.8em;
  }

  .vision_contents .career_route h3 span::before {
    width: 1.3em;
    height: 1.3em;
  }

  .vision_arrows_wrap {
    margin-bottom: 50px;
  }

  .vision_arrows_wrap::after {
    width: 100px;
    bottom: 109px;
    left: auto;
    right: 15px;
  }

  .chevrons {
    width: 650px;
    flex-direction: row;
  }

  .chev {
    height: 140px;
    width: 239px;
    font-size: 14px;
    line-height: 1.78;
    padding-block: 25px;
  }

  .chev + .chev {
    margin-top: 0px;
    padding-block: 25px;
    margin-left: -34px;
  }

  .route02 .chev + .chev.chev02 {
    padding-block: 23px;
  }

  .chev::before {
    background: url('../img/chev01_tb.svg') no-repeat left center / 239px auto;
  }

  .chev02.chev::before {
    background: url('../img/chev02_tb.svg') no-repeat left center / 240px auto;
  }

  .chev03.chev::before {
    background: url('../img/chev03_tb.svg') no-repeat left center / 239px auto;
  }

  /* schedule */
  .schedule_inner {
    width: 650px;
  }

  #schedule h2 {
    margin-block: 0px 30px;
  }

  #schedule h2 span.en {
    font-size: 20px;
    margin-bottom: 16px;
  }

  #schedule h2 span.jp {
    font-size: 20px;
  }

  .schedule_table {
    width: 650px;
    height: 180px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 1fr;
    overflow: hidden;
  }

  .scheduleRow {
    display: contents;
  }

  .scheduleLabel {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    border-bottom: 1px solid var(--black);
    grid-row: 1;
    font-size: 11px;
    line-height: 1.56;
    letter-spacing: 0.1em;
    height: 29.5px;
  }

  .scheduleRow:nth-of-type(4) .scheduleLabel,
  .scheduleRow:nth-of-type(4) .scheduleBody {
    border-right: 0;
  }

  .scheduleBody {
    grid-row: 2;
    border-right: 1px solid var(--black);
    padding: 14px;
    min-height: 150px;
    font-size: 11.5px;
    line-height: 1.9;
  }

  .scheduleRow:nth-child(3) .scheduleBody,
  .scheduleRow:last-child .scheduleBody {
    align-content: start;
  }

  .scheduleRow:nth-child(1) .scheduleBody {
    padding-block: 51px;
  }

  .scheduleRow:nth-child(2) .scheduleBody {
    padding-block: 39px;
  }

  .mainTitle {
    font-size: 13px;
  }

  .subTitle {
    font-size: 11px;
  }
  .dateLine {
    font-size: 9.5px;
  }
  .pill {
    width: 134px;
    height: 21.5px;
    font-size: 9.5px;
    padding-top: 0.25em;
  }

  .midText {
    font-size: 11.5px;
  }

  .note {
    font-size: 9.5px;
    letter-spacing: 0.07em;
  }

  .scheduleRow:nth-of-type(1) .scheduleLabel,
  .scheduleRow:nth-of-type(1) .scheduleBody {
    grid-column: 1;
  }

  .scheduleRow:nth-of-type(2) .scheduleLabel,
  .scheduleRow:nth-of-type(2) .scheduleBody {
    grid-column: 2;
  }

  .scheduleRow:nth-of-type(3) .scheduleLabel,
  .scheduleRow:nth-of-type(3) .scheduleBody {
    grid-column: 3;
  }

  .scheduleRow:nth-of-type(4) .scheduleLabel,
  .scheduleRow:nth-of-type(4) .scheduleBody {
    grid-column: 4;
  }

  .scheduleRow + .scheduleRow {
    border-top: 0;
  }

  .schedule_box small {
    font-size: 10px;
    margin-top: 8px;
    text-align: right;
  }

  .recommendation h3 {
    font-size: 20px;
  }

  .recommendation p.lead_text {
    line-height: 1.86;
    margin-bottom: 55px;
  }

  .point_lists {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 20px;
  }

  .point_lists li {
    aspect-ratio: 260 / 130;
    width: 260px;
  }

  .point_lists li p.point_label {
    font-size: 12px;
    width: 75.5px;
    height: 26px;
  }

  .point_content {
    font-size: 15.6px;
    line-height: 1.66;
  }

  li.point05 small {
    font-size: 10px;
  }

  .recommendation_cta {
    font-size: 13px;
    width: 350px;
    height: 60px;
    padding: 20px 30px 11px 30px;
  }

  .recommendation_cta::after {
    width: 20.5px;
    height: 20.5px;
  }

  .precaution {
    width: 650px;
    aspect-ratio: auto;
    padding: 10px 0;
  }

  .precaution img {
    width: 25px;
    height: 25px;
  }

  .precaution p {
    letter-spacing: 0.08em;
    font-size: 11.5px;
  }

  /* footer */
  footer .nav_group {
    width: 500px;
  }

  .footer_nav {
    flex-direction: row;
  }

  .footer_nav a {
    font-size: 13px;
    width: 241.5px;
    height: 59.5px;
    padding: 0px 26px;
  }

  .footer_nav a::after {
    width: 20.5px;
    height: 20.5px;
    right: 25px;
  }

  footer small {
    font-size: 10px;
  }
}
@media (min-width: 1000px) {
  .sptb,
  .tb {
    display: none;
  }

  .pc {
    display: block;
  }

  .hero_bg {
    aspect-ratio: auto;
    height: 1554px;
  }

  .hero_bg::before {
    background-image: url('../img/bg_hero_pc.svg');
    background-size: 3125px auto;
    background-position: center bottom;
  }

  header {
    width: 100px;
    height: 100px;
  }

  /* hero */
  .hero_inner {
    margin-top: 275px;
    width: 830px;
  }

  .hero_copy_box {
    margin-top: 221px;
  }

  .hero_copy_box p.hero_copy,
  .etc {
    font-size: 22px;
  }

  .hero_copy_box p.hero_copy.waves {
    font-size: 27px;
  }
  span.wave::after {
    background-size: 0.55em 8px;
    height: 9px;
  }

  /* sort */
  .sort_content {
    padding-top: 70px;
  }

  #sort .lead_list,
  #sort .lead_list_content:last-child span.de {
    font-size: 21px;
  }

  .sort_lead .lead_text {
    font-size: 25px;
  }

  .sort_content h2.sort_title_tab {
    font-size: 21px;
    width: 320px;
    height: 46px;
    top: -46px;
    letter-spacing: 0.08em;
    padding-top: 0.17em;
  }

  /*tagTabs*/
  .tagTabs {
    width: 880px;
    gap: 1em;
  }

  .tagTabs label {
    font-size: 16px;
  }

  /*cards*/
  .cards {
    margin-top: 80px;
  }

  .cards_wrapper {
    width: 960px;
    margin-bottom: 100px;
  }

  /* vision */
  section#vision::before {
    background: url('../img/bg_vision_pc.svg') no-repeat center top/ 2880px auto;
  }

  .vision_inner {
    width: 960px;
    margin-bottom: 102px;
  }

  .vision_leads {
    margin-block: 74px 65px;
  }

  .vision_leads .sub_text {
    font-size: 21px;
  }

  #vision h2 {
    font-size: 31px;
  }

  #vision .vision_leads .lead_text {
    font-size: 19px;
  }

  .vision_contents .career_route {
    width: 960px;
  }

  .vision_contents .career_route h3 {
    font-size: 21px;
  }

  .vision_arrows_wrap {
    margin-bottom: 70px;
  }

  .vision_arrows_wrap::after {
    width: 129px;
    bottom: 110px;
    left: auto;
    right: 40px;
  }

  .chevrons {
    width: 960px;
  }

  .chev {
    height: 143.5px;
    width: 353px;
    font-size: 16px;
    line-height: 1.87;
  }

  .chev + .chev {
    margin-left: -49px;
  }

  .chev::before {
    background: url('../img/chev01_pc.svg') no-repeat left center / 353px auto;
  }

  .chev02.chev::before {
    background: url('../img/chev02_pc.svg') no-repeat left center / 353px auto;
  }

  .chev03.chev::before {
    background: url('../img/chev03_pc.svg') no-repeat left center / 353px auto;
  }

  /* schedule */
  .schedule_inner {
    width: 960px;
    padding-block: 60px;
  }

  #schedule h2 {
    margin-block: 0px 50px;
  }

  #schedule h2 span.en {
    font-size: 30px;
    margin-bottom: 22px;
  }
  #schedule h2 span.jp {
    font-size: 31px;
  }

  .schedule_table {
    width: 960px;
    height: 265px;
  }

  .scheduleLabel {
    font-size: 16px;
    height: 43.5px;
  }

  .scheduleBody {
    padding: 21px;
    min-height: 222px;
    font-size: 17px;
  }

  .scheduleRow:nth-child(1) .scheduleBody {
    padding-block: 78px;
  }

  .scheduleRow:nth-child(2) .scheduleBody {
    padding-block: 64px;
  }

  .mainTitle {
    font-size: 19px;
  }

  .subTitle {
    font-size: 16px;
  }

  .dateLine {
    font-size: 15px;
  }

  .pill {
    width: 198px;
    height: 31.7px;
    font-size: 14px;
    padding-top: 0.25em;
  }

  .midText {
    font-size: 17px;
  }
  .note {
    font-size: 14px;
  }

  .schedule_box small {
    font-size: 11px;
  }

  .recommendation {
    margin-block: 70px;
    margin-bottom: 55px;
  }

  .recommendation h3 {
    font-size: 31px;
  }

  .recommendation p.lead_text {
    font-size: 19px;
    margin-bottom: 60px;
  }

  .point_lists {
    gap: 50px 40px;
  }

  .point_lists li {
    aspect-ratio: 251 / 150;
    width: 251px;
  }

  .point_lists li p.point_label {
    font-size: 14px;
    width: 84px;
    height: 30px;
  }

  .point_content {
    font-size: 15px;
    line-height: 1.93;
    margin-top: 0.5em;
  }

  li.point05 small {
    font-size: 11px;
  }

  .recommendation_cta {
    font-size: 18px;
    width: 454px;
    height: 70px;
    padding: 20px 30px 11px 33px;
  }

  .recommendation_cta::after {
    width: 24px;
    height: 24px;
  }

  .precaution {
    width: 960px;
  }

  .precaution img {
    width: 37px;
    height: 37px;
  }

  .precaution p {
    font-size: 17px;
  }

  /* footer */
  footer {
    padding-block: 62px 54px;
  }

  footer .nav_group {
    width: 960px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
  }

  .nav_group a.footer_logo {
    margin-block: 0px;
  }

  .nav_group a.footer_logo img {
    width: 232px;
    height: 95px;
  }

  .footer_nav a {
    font-size: 15px;
    width: 280px;
    height: 69px;
    padding: 0px 30px;
  }

  .footer_nav a::after {
    width: 24px;
    height: 24px;
    right: 30px;
  }
}
@media (hover: hover) and (pointer: fine) {
  a:hover {
    opacity: 0.7;
  }

 header a:hover {
    opacity: 1;
  }

  header a img {
    content: url('../img/h_logo.svg');
  }

  header a:hover img {
    content: url('../img/h_logo_hover.svg');
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
  }
  .tagTabs label:hover {
    background-color: var(--black);
    color: #fff;
  }

  .card a.card_cta:hover {
    opacity: 1;
    background-color: var(--red);
  }

  .recommendation_cta:hover {
    opacity: 1;
    background-color: var(--black);
  }
}