@charset "UTF-8";

/* common
-------------------------------------------- */

:root {
  --color-background: #ffffff;
  --color-foreground: #142850;
  --color-primary: #0088CC;
  --gradation-primary: linear-gradient(90deg, rgba(16, 54, 117, 1) 0%, rgba(35, 96, 154, 1) 70%, rgba(0, 159, 232, 1) 100%);
  --color-blue-100:#EFF5F9;
  --color-blue-200:#CFE1E8;
  --color-blue-300:#879CAB;
  --color-accent:#FE5B13;
  --color-warning:#CC3D3D;
  --color-white: #ffffff;
  --color-gray-100:#F7F7F7;
  --color-gray-200:#F2F2F2;
  --color-gray-300:#D9D9D9;
  --color-gray-400:#B3B3B3;
  --color-gray-500:#808080;
  --color-gray-600:#666666;
  /* コーステーマカラー */
  --color-ai-basic: #2A9E2C;     /* 生成AI入門コース */
  --color-business: #243796;          /* ビジネス業務改善コース */
  --color-marketing: #F87C00;    /* マーケティングコース */
  --color-ai-engineer: #0C8E66;  /* 生成AIエンジニアコース */
  --color-frontend: #137CD4;     /* フロントエンド開発コース */
  --color-web-application: #DEAC25;       /* アプリ開発コース */
  --color-saas: #D64949;         /* SaaSアプリ開発コース */
  --color-data-science: #8434A2;      /* データサイエンス入門コース */
}

html{
  font-size: 0.625rem;
   scroll-padding-top:9rem;
}
@media screen and (max-width: 1024px) {
  html{
     scroll-padding-top:7rem;
  }
}
@media screen and (max-width: 414px) {
  html{
     scroll-padding-top:6rem;
  }
}
@media screen and (max-width: 390px) {
  html{
     scroll-padding-top:5.9rem;
  }
}
body {
  font-size: clamp(1.4rem, 4vw, 1.5rem);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", yugothic, "Yu Gothic", "メイリオ", meiryo, sans-serif;
  color: var(--color-foreground);
  background-color: var(--color-background);
  line-height: 1.6;
}

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

em,
dt{
  font-style: normal;
  font-weight: normal;
}

mark {
  font-style: normal;
  font-weight: normal;
  background-color: unset;
  color: inherit;
}

@media screen and (min-width: 769px) {
  .is-pc {
    display: block;
  }
  .is-sp {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .is-pc {
    display: none;
  }
  .is-sp {
    display: block;
  }
}

.center{
  text-align: center;
}
.bold{
  font-weight: bold;
}
.red{
  color: var(--color-warning);
}

.bg-foreground{
  background-color: var(--color-foreground);
  color:var(--color-white);
}
.bg-blue-100{
  background-color: var(--color-blue-100);
}
.text-smaller{
  font-size: 0.8em;
}
.text-larger{
  font-size: 1.4em;
  line-height: 1;
}
.text-1 {
  font-size: 10px;
}

.text-2 {
  font-size: 13px;
}

.text-3 {
  font-size: 14px;
}

.text-4 {
  font-size: 15px;
}

.text-5 {
  font-size: 16px;
}

.text-6 {
  font-size: 18px;
}

.text-7 {
  font-size: 20px;
}

.text-8 {
  font-size: 24px;
}

.mt-1 {
  margin-top: 6px;
}

.mt-2 {
  margin-top: 12px;
}

.mt-3 {
  margin-top: 24px;
}

.mt-4 {
  margin-top: 36px;
}

.mt-5 {
  margin-top: 48px;
}

.mt-6 {
  margin-top: 60px;
}

.mb-1 {
  margin-bottom: 6px;
}

.mb-2 {
  margin-bottom: 12px;
}

.mb-3 {
  margin-bottom: 24px;
}

.mb-4 {
  margin-bottom: 36px;
}

.mb-5 {
  margin-bottom: 48px;
}

.mb-6 {
  margin-bottom: 60px;
}
.flexbox {
  display: flex;
  align-items: center;
  gap: 2rem;
}

li.list-highlight{
    background-color: var(--color-blue-100);
    margin-bottom: 0.8rem;
    max-width: 32rem;
    padding: 0.2rem;
    margin-inline: auto;
}
ol li{
  list-style: none;
}
ol.items{
  counter-reset: li-num;
}
ol.items li.item{
  position: relative;
  padding-left: 2.8rem;
  margin-block: 0.6rem;
}
ol.items > li.item{
  margin-block: 1.2rem;
}
ol li.item:before{
  position: absolute;
  top: 0;
  left: 0;
}
ol.items > li.item:before{
  counter-increment: li-num;
  content: counter(li-num)'.';
}
ol.items > li.item > li.item:before{
  counter-increment: li-num;
  content: '('counter(li-num)')';
}

ol.items-katakana {
  counter-reset: li-jp;
}
ol.items-katakana li.item-katakana{
  position: relative;
  padding-left: 2.8rem;
  margin-block: 0.6rem;
}
ol.items-katakana li.item-katakana:before{
  counter-increment: li-jp;
  content: counter(li-jp, katakana);
  position: absolute;
  top: 0;
  left: 0;
}
/*  text decoration style
-------------------------------------------- */
.text-deco--bracket{
    display: inline-block;
    position: relative;
}
.text-deco--bracket:before,
.text-deco--bracket:after{
    position: relative;
    display: inline-block;
    content: "";
    background: var(--color-foreground);
    width: 0.1rem;
    height: 1.5em;
    margin: 0 0.8em;
    margin-top: -.2em;
    vertical-align: middle;
}
.text-deco--bracket:before{
    transform: rotate(-30deg);
}
.text-deco--bracket:after{
    transform: rotate(30deg);
}
.text-deco--line{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.text-deco--line:before,
.text-deco--line:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color:var(--color-blue-200);
}
.text-deco--balloon{
  background: var(--color-white);
  display: inline-block;
  padding: 1rem;
  border-radius: 0.4rem;
  position: relative;
}
.text-deco--balloon:after{
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 1.8rem solid transparent;
  border-left: 0;
  border-top: 1.4rem solid var(--color-white);
  border-bottom: 0;
  position: absolute;
  left: 2rem;
  bottom: 0;
  transform: translateY(100%) translateX(50%);
}
.text-deco--gradient{
  display: inline-block;
  font-weight: bold;
  background: var(--gradation-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-deco--skew  {
    color: var(--color-white);
}
.text-deco--skew {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    position: relative;
    z-index: 0;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
}
.text-deco--skew:before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    transform: skewX(-5deg);
    z-index: -1;
    border-radius: 0;
}
.text-deco--skew:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 1.2rem solid transparent;
    border-left: 0;
    border-top: 1.2rem solid var(--color-white);
    border-bottom: 0;
    position: absolute;
    right: 3.6rem;
    bottom: 1px;
    transform: translateY(100%) translateX(50%);
}
.has-arrow-circle{
    position: relative;
}
.has-arrow-circle:after{
    content: '';
    width: 2rem;
    height: 2rem;
    display: inline-block;
    margin-left: 0.5rem;
    background: url(../../assets/images/icon-arrow-circle.svg) center / cover no-repeat;
    vertical-align: sub;
}
.icon-check{
  position: relative;
  padding-left: 3rem;
}
.icon-check:before{
  content: '';
  background: url(../../assets/images/icon-check.svg) center / cover;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}
.icon-clock{
    position: relative;
}
.icon-clock:before{
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    background: url(../../assets/images/icon-clock.svg) center / cover no-repeat;
    vertical-align: middle;
    margin-right: 0.5rem;
    opacity: 0.5;
}
.icon-externallink:after{
    content: '';
    background: url(../../assets/images/icon-external-link.svg) center / contain no-repeat;
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
    filter: invert(11%) sepia(54%) saturate(1543%) hue-rotate(194deg) brightness(99%) contrast(94%);
    margin-left: 0.4rem;
    vertical-align: baseline;
}
.icon-required-text:after{
    content: '必須';
    background: var(--color-warning);
    color: var(--color-white);
    font-size: 1.2rem;
    padding: 0.2rem 0.4rem;
    display: inline-block;
    margin: 0.2rem;
    position: absolute;
    right: 1rem;
}
.text-link{
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: none;
    text-underline-offset: 4px;
    text-decoration-color: var(--color-gray-400);
}
@media (hover: hover) and (pointer: fine) {
  .text-link:hover{  
    opacity: 0.7;
  }
}
/* heading style
-------------------------------------------- */
.section_ttl_wrap{
    padding-block: 5rem 4rem;
    text-align: center;
    padding-inline: 1rem;
}
.section_ttl{
    font-size: clamp(2.4rem,5vw,3.6rem);
    font-weight: bold;
    padding-bottom: 2rem;
    position: relative;
    line-height: 1.4;
}
.section_ttl:after{
    content: '';
    height: 0.4rem;
    width: 10rem;
    position: absolute;
    background: red;
    margin-inline: auto;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--color-primary);
}
.section_ttl .text-smaller{
    font-size:0.6em;
}
.heading-2{
  position: relative;
  padding-left: 1.5rem;
  padding-block: 0.5rem 0;
  margin-bottom: 2.4rem;
  font-size: clamp(1.5rem,4vw,1.8rem);
  font-weight: bold;
}
.heading-2:before{
  content: '';
  width: 0.5rem;
  height: 100%;
  position: absolute;
  left: 0;
  background-color: var(--color-primary);
  border-radius: 0.5rem;
}
.heading-3{
  background-color: var(--color-foreground);
  color: var(--color-white);
  font-weight: bold;
  font-size: clamp(1.6rem, 4vw, 2rem);
  padding: 1.8rem 2rem;
  margin-bottom: 2.4rem;
}
@media screen and (max-width: 768px) {
  .heading-3{
    padding: 1rem 2rem;
  }
}
/* 下層ページヘッダー
-------------------------------------------- */
.content_header {
    background: linear-gradient(90deg, rgba(16, 54, 117, 1) 0%, rgba(35, 96, 154, 1) 75%, rgba(0, 159, 232, 1) 100%);
    padding-block:clamp(4rem,6vw,5.5rem);
    margin-bottom: 6rem;
}
.content_header .inner{
    width: min(100% - 4rem, 1000px);
    margin-inline: auto;
}
.content_header .ttl{
    color: var(--color-white);
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: bold;
    line-height:1.4;
}
.content_header .ttl .ttl-block{
  display: block;
}
.content_header .ttl .item-course-name{
  margin-right: 0.4rem;
}
.content_header .ttl .item-plan-name{
    border-radius: 0.3rem;
    border: 0.1rem solid #ffffff40;
    padding: 0.65rem 1.2rem;
    margin-bottom: 0.5em;
    font-size: 1.5rem;
    vertical-align: middle;
    display: inline-block;
}
/* button
-------------------------------------------- */
.btn{
  border:0.1rem solid var(--color-foreground);
  padding: 1.2rem;
  font-weight: bold;
  text-align: center;
  border-radius: 0.2rem;
  width:100%;
  max-width:35rem;
  font-size: 1.6rem;
  display: block;
  margin-inline: auto;
  background-color: var(--color-foreground);
  color: var(--color-white);
}
.btn[class*="theme-"]{
  background-color: var(--color-white);
}
.btn:has(.cta-btn-balloon){
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover{
    transition: 0.2s ease-in-out;
    background-color: var(--color-white);
    color: var(--color-foreground);
    cursor: pointer;
    border-radius: 0.2rem;
  }
}
.btn.has-arrow{
  position:relative;
}
.btn.has-arrow:before{
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid var(--color-foreground);
  border-right: 0;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) translateX(0);
}
@media (hover: hover) and (pointer: fine) {
  .btn.has-arrow:hover:before{
    border-left-color:var(--color-white);
  }
}
.btn.btn_colored{
  border:0.1rem solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-white);
}
.btn.btn_colored:disabled{
  background-color: initial;
}

.btn.btn_colored.has-shadow{
  border: solid 0.2rem var(--color-accent);
  box-shadow: 0 0.2rem inset rgb(255 255 255 / 50%), 0 0.2rem 0 rgba(0, 0, 0, 0.2);
  transition: 0.2s;
}
.btn.btn_colored.has-shadow:after{
    opacity: 0;
    content: '';
    background: pink;
    width: 100%;
    height: 3rem;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.2s;
    background: linear-gradient(180deg, rgba(254, 91, 20, 0) 0%, rgba(254, 181, 17, 1) 100%);
    transition: opacity 0.2s ease;
    z-index: -1;
}
@media (hover: hover) and (pointer: fine) {
  .btn.btn_colored.has-shadow:hover{
    transform: translateY(-0.25rem);
    box-shadow: 0 0.2rem inset rgb(255 255 255 / 50%), 0 0.4rem 1rem rgba(0, 0, 0, 0.3);
    position: relative;
  }
  .btn.btn_colored.has-shadow:hover:after{
    opacity: 0.8;
  }
}

.btn.btn_colored.has-arrow:before{
  border-left-color:var(--color-white);
}
.btn:disabled{
  cursor: default;
  pointer-events: none;
  border-color: var(--color-gray-400);
  color:var(--color-gray-400);
}

/* tab style
-------------------------------------------- */
.tab-control {
    display: flex;
    gap: 0.25rem;
}
.tab-control li {
    text-align: center;
    flex-grow: 1;
    padding:2rem 1rem;
    cursor: pointer;
    border-width: 0.3rem 0.3rem 0 0.3rem;
    border-radius: 0.4rem 0.4rem 0 0;
    border-style: solid;
    border-color:var(--color-gray-300);
    background-color:var(--color-white);
    font-weight: 600;
    color: var(--color-gray-500);
    font-size: 1.6rem;
}
.tab-control li:not(.active) img{
    filter: grayscale(100%);
}
@media (hover: hover) and (pointer: fine) {
  .tab-control li:not(.active):hover{
      background-color: var(--color-gray-100);
  }
}
.tab-control li.active {
    border-color: var(--color-foreground);
    color: var(--color-primary);
    position: relative;
    padding-top: 2.3rem;
    margin-top: -0.8rem;
}
.tab-control li.active:after{
    content: '';
    width: 100%;
    height: 0.3rem;
    display: block;
    background: var(--color-white);
    bottom: -0.3rem;
    position: absolute;
    left: 0;
    z-index: 1;
}
.tab-control li img{
    vertical-align: middle;
    margin-right: 1rem;
}

.tab-contents{
    border-top: 0.3rem solid;
    border-left:0.1rem solid var(--color-blue-200);
    border-right:0.1rem solid var(--color-blue-200);
    border-bottom:0.1rem solid var(--color-blue-200);
}
.tab-content {
    display: none;
    padding: 2rem;
}

.tab-content.active {
    display: block;
    background-color: var(--color-white);
}

@media screen and (max-width: 768px) {
  section[class^=section-] > .inner:has(> ul.tab-control) {
    width: 100%;
  }
  .tab-control {
    overflow-x: scroll;
    padding-top: 2rem;
    overflow-x: scroll;
    position: relative;
    z-index: 2;
    overflow-y: hidden;
    padding-top: 2rem;
    padding-bottom: 0rem;
    padding-inline: 1rem;
  }
  .tab-control li {
    flex-shrink: 0;
    font-size: 1.4rem;
    padding-block: 1.5rem;
    padding-inline: 1.2rem;
    flex-grow: unset;
  }
  .tab-control li.active{
    padding-top: 1.5rem;
  }
  .tab-control li:not(.active){
    background: var(--color-gray-300);
    box-shadow: 0 -0.3rem 0 var(--color-foreground) inset;
    border: 0;
  }
  .tab-contents{
    border-top: 0;
    box-shadow: 0 -0.3rem 0 var(--color-foreground);
  }

}
/* header
-------------------------------------------- */
header {
  position: fixed;
  width: 100%;
  z-index: 5;
  top: 0;
  background: var(--color-background);
  box-shadow: 0 0 1rem rgb(50 50 50 / 20%);
}

header .globalnav-wrap {
  justify-content: space-between;
  flex-direction: row;
  height: 9rem;
}

header .logo_block {
  width: 35%;
  max-width: 23rem;
}

header .logo_block img {
  width: 95%;
  height: auto;
  max-width: 23rem;
  padding: 1rem 0rem 1rem 1rem;
}

main{
    margin-top:9rem;/* ヘッダーの高さ分だけコンテンツを下げる */
}
.calendar-area table thead{
  top: 9rem;/* ヘッダーの高さ分だけフォームのヘッダーを下げる */
}

@media screen and (max-width: 1024px) {
  main{
    margin-top:7rem;
  }
  .calendar-area table thead{
    top: 7rem;
  }
}

@media screen and (max-width: 414px) {
  main{
    margin-top:6rem;
  }
  .calendar-area table thead{
    top: 6rem;
  }
  header .logo_block{
    width: 45%;
  }
}

/* Modal nav 
-------------------------------------------- */

.globalnav {
  display: none;
}

.globalnav-wrap.open .globalnav {
    background-color: rgb(255 255 255 / 97%);
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  max-width: 100%;
  min-height: 40rem;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1;
}

.globalnav-bar{
    gap: 0;
    flex: 1;
}

.globalnav-bar .anchor-links a {
    height: 100%;
    display: block;
    padding: 2rem;
    box-sizing: border-box;
    transition: 0.1s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  .globalnav-bar .anchor-links a:hover,
  .globalnav div[class^="nav-links-"] a:not(.btn):hover {
      color: var(--color-primary);
  }
}
.globalnav-bar .btn{
    display: block;
    margin-right: 0;
    margin-left: auto;
    max-width: 20rem;
    white-space: nowrap;
}

/* open時 */
header .globalnav-wrap.open .logo_block img{
    padding-right: 5rem;
}
header .globalnav-wrap.open .globalnav-item a{
    display:block;
    letter-spacing: 0.1em;
    padding-block: 2rem;
    font-size: clamp(3rem,7vw,4.3rem);
    line-height: 1.4;
}
.nav-button-wrap {
    display: block;
    width: 9rem;
    height: 100%;
    z-index: 1000;
    cursor: pointer;
    background-color: var(--color-foreground);
    position: relative;
    flex-shrink: 0;
}

.nav-button,
.nav-button span {
  display: inline-block;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.nav-button {
    z-index: 20;
    width: 2.5rem;
    height: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.nav-button span {
    position: absolute;
    left: 0;
    width: 2.5rem;
    height: 0.3rem;
    background-color: var(--color-white);
}

.nav-button span:nth-of-type(1) {
  top: 0;
}

.nav-button span:nth-of-type(2) {
  top: 46%;
}

.nav-button span:nth-of-type(3) {
  bottom: 0;
}

.nav-button-wrap.active .nav-button span:nth-of-type(1) {
  -webkit-transform: translateY(0) rotate(-45deg);
  -ms-transform: translateY(0) rotate(-45deg);
  transform: translateY(0) rotate(-45deg);
  top: 50%;
}

.nav-button-wrap.active .nav-button span:nth-of-type(2) {
  opacity: 0;
}

.nav-button-wrap.active .nav-button span:nth-of-type(3) {
  -webkit-transform: translateY(0) rotate(45deg);
  -ms-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
  top: 50%;
}

.globalnav > .flexbox{
    align-items: flex-start;
    width: min(90% - 2rem, 1200px);
    margin-inline: auto;
    padding-block: 3rem;
    padding-right: 9rem;
}
.nav-links-courses .links-ttl{
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 2rem;
}
.globalnav div[class^="nav-links-"] a:not(.btn){
    display: block;
    padding-block: 1.2rem;
}
.globalnav .nav-links-courses{
    flex:0.6;
    border-right: 0.1rem solid var(--color-blue-200);
}
.globalnav .nav-links-main{
    flex:0.4;
    padding-inline: 4rem 0;
}
.globalnav .nav-links-courses .items{
    display: grid;
    gap: 1rem;
    max-width: 58rem;
    margin-left: auto;
}
.globalnav .nav-links-courses .item ul{
    margin-left: 1rem;
}
.globalnav .nav-links-courses .item:nth-child(1){
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.globalnav .nav-links-courses .item:nth-child(2){
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.globalnav .nav-links-courses .item:nth-child(3){
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}
.globalnav .nav-links-courses .course-ttl{
    color: var(--color-blue-300);
    font-weight: bold;
    font-size:1.4rem;
    margin-block: 1.2rem;
}
.globalnav .nav-links-courses .course-ttl img{
    margin-right: 0.5rem;
    vertical-align: middle;
}

.globalnav .nav-links-main ul{
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 2.4rem;
}
.globalnav .nav-links-main ul.flexbox li{
    width: 50%;
}
.globalnav .nav-links-form .btn{
    margin-left: 0;
    margin-bottom: 2rem;
}

@media screen and (max-width: 1024px) {
  body.open {
      overflow: hidden;
      position: fixed;
      width: 100%;
  }
  body.open .globalnav {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      height: 100vh;
  }
  header .globalnav-wrap{
    height: 7rem;
  }
  .nav-button-wrap{
    width: 7rem;
    padding-block: 1rem;
  }
  .globalnav-bar .anchor-links{
    display: none;
  }
  .globalnav > .flexbox{
    flex-direction: column;
    padding-right: 0;
  }
  .globalnav .nav-links-courses,
  .globalnav .nav-links-main{
    width: 100%;
  }
  .globalnav .nav-links-courses{
    border-right: 0;
    border-bottom: 0.1rem solid var(--color-blue-200);
  }
  .globalnav .nav-links-courses .items{
    max-width: 100%;
    margin-left: 0; 
  }
  .globalnav .nav-links-main{
    padding-left: 0;
  }
}
@media screen and (max-width: 768px) {
  header .globalnav-wrap.open .globalnav{
    text-align: left;
    padding-inline:1rem;
    padding-bottom: 12vh;
  }
  header .globalnav-wrap.open .globalnav-item a{  
    text-align: center;
  }
}
@media screen and (max-width: 600px) {
  header .globalnav .nav-links-courses .items{
    display: block;
  }
  header .globalnav .nav-links-courses .item{
    margin-bottom: 3.6rem;
  }
}
@media screen and (max-width: 414px) {
  header .globalnav > .flexbox{
    width: calc(100% - 2rem);
  }
  header .globalnav-wrap{
    height: 6rem;
  }
  .globalnav-bar .btn{
    display: none;
  }
}


/* セクションスタイル
-------------------------------------------- */
section{
  padding-bottom: 4rem;
}
section[class^=section-] > .inner{
    width: min(100% - 4rem, 1000px);
    margin-inline: auto;
}

/* パンクズ
-------------------------------------------- */
nav.breadcrumbs{
  background: var(--gradation-primary);
  color: var(--color-white);
  font-size: 1.2rem;
  padding-block: 1rem;
}
nav.breadcrumbs .inner{
  width: min(100% - 4rem, 1000px);
  margin-inline: auto;
  display: flex;
}
nav.breadcrumbs .inner li{

}
nav.breadcrumbs .inner li span{
}
nav.breadcrumbs .inner li a{
  text-decoration-line: underline;
  text-decoration-thickness: 0.5px;
  text-decoration-skip-ink: none;
  text-underline-offset: 2px;
  margin-right: 0.5rem;
  position: relative;
  padding-right: 1.2rem;
  margin-right: 0.8rem;
}
@media (hover: hover) and (pointer: fine) {
  nav.breadcrumbs .inner li a:hover{
    opacity: 0.9;
  }
}
nav.breadcrumbs .inner li a:before{
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-top: solid 0.1rem #ffffff;
  border-left: solid 0.1rem #ffffff;
  transform: rotate(135deg);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* テーブルスタイル
-------------------------------------------- */
.table_style{
  width: 100%;
  border-block-start: 1px solid var(--color-gray-300);
}
.table_style .table_tr{
  display: flex;
  width: 100%;
  border-block-end: 1px solid var(--color-gray-300);
}
.table_style .table_tr .table_th{
    width: 25%;
    background-color: var(--color-gray-100);
    padding-inline: 2rem;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    display: flex;
    min-height: 7rem;
}
.table_style .table_tr:has(.icon-required-text) .table_th{
    padding-right: 5.5rem;
}

.table_style .table_tr .table_th.icon-required-text{
    position: relative;
}
.table_style .table_tr .table_td{
    width: 80%;
    padding: 1.2rem 2rem;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
@media screen and (max-width: 768px) {
  .table_style .table_tr{
    flex-direction: column;
  }
  .table_style .table_tr .table_th,
  .table_style .table_tr .table_td{
    width: 100%;
  }
  .table_style .table_tr .table_th{
      min-height: initial;
      padding: 1rem;
  }
  .table_style .table_tr .table_td{
    padding:1.5rem 2rem 2.4rem 0rem;
  }
}

/* サンクスページ
-------------------------------------------- */
.section-thanks{
  min-height: 50vh;
  padding-bottom: 10rem;
}
.section-thanks .btn {
    margin-left: 0;
    margin-bottom: 3.6rem;
}

/* プライバシーポリシー・利用規約・特定商取引法に基づく表記
-------------------------------------------- */
.section-retailcommerce a.text-link,
.section-privacy a.text-link,
.section-teamsofservice a.text-link{
  color: var(--color-primary);
}
.section-privacy .wrap ol.items,
.section-teamsofservice .wrap ol.items{
  padding-left: 4rem;
}
@media screen and (max-width: 414px) {
  .section-privacy .wrap ol.items,
  .section-teamsofservice .wrap ol.items{
    padding-left:0;
  }
}

/* キャンペーンバナー
-------------------------------------------- */
.banner_area.campaign_banner{
  margin-block: 2rem;
}
.banner_area.campaign_banner .inner{
    margin-inline: auto;
    width: min(100% - 4rem, 1000px);
}
.section-form .campaign_block{
    margin-bottom: 6rem;
}
.section-form .campaign_block .ttl {
    font-size: clamp(2rem, 4vw, 2.2rem);
    margin-bottom: 1rem;
}
.section-form .campaign_lead{
  display: block;
  font-size: 0.8em;
  color: var(--color-warning);
}
.section-form .campaign_lead.text-deco--bracket:before,
.section-form .campaign_lead.text-deco--bracket:after{
  background-color: var(--color-warning);
}
.section-form .tab-control li:has(.campaign_lead){
  padding-block: 0.5rem 1rem;
}
/* キャンペーン追尾バナー*/
.scroll_banner {
    position: fixed;
    bottom: 0;
    right: 0;
    width: clamp(40rem,7vw,50rem);
    z-index: 99;
    display: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.scroll_banner button.close{
    margin-inline: auto 0.8rem;
    text-align: right;
    display: block;
    color: #888;
    border-radius: 2rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.scroll_banner.fadeIn {
    display: block;
    bottom: 0;
}
.scroll_banner a {
    display: block;
}
.scroll_banner a img{
  border-radius: 0.4rem;
}
.scroll_banner.fadeIn.hidden {
    display: block;
    bottom: -160px;
}
@media screen and (max-width: 414px) {
  .scroll_banner {
    width: 100%;
  }
}
/* CTA
-------------------------------------------- */
.cta-area .inner{
    width: min(100% - 4rem, 1000px);
    margin-inline: auto;
    background: url(../../assets/images/cta-image-bg.png) center / cover no-repeat;
    margin-block: 3rem;
    display: grid;
    grid-template-columns: 28rem 1fr;
    padding-inline: 2rem;
    border-radius: 0.8rem;
    position: relative;
}
.cta-area .inner:before{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 8rem;
    background: rgb(20 40 80 / 50%);
}
.cta-area .block-image{
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    position: relative;
}
.cta-area .block-image img{
    width: 140%;
    position: absolute;
    bottom: 0;
    max-width: 140%;
    z-index: 1;
}
.cta-area .block-ttl {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    text-align: center;
    position: relative;
}
.cta-area .block-ttl .text-deco--balloon{
    background: var(--color-white);
    display: inline-block;
    padding: 0rem 5% 1.2rem;
    font-weight: bold;  
    margin-bottom: 3rem;
    border-radius: 0 0 0.4rem 0.4rem;
}
.cta-area .block-desc{
    text-align: center;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
.cta-area .block-desc p{
    font-weight: bold;
    color:var(--color-white);
}
.cta-area .btn_wapper{
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    z-index: 1;
    padding-inline: 2rem;
}
.cta-btn-balloon{
    position: absolute;
    top: -2rem;
    font-size: 1.2rem;
    text-align: center;
    display: inline-block;
    margin-inline: auto;
    background: var(--color-white);
    color: var(--color-foreground);
    border-radius: 0.2rem;
    padding: 0.25rem 0.5rem;
    border: solid 0.2rem var(--color-foreground);
}
.cta-area .text-deco--gradient{
    font-size: clamp(2rem,3.5vw,3.6rem);
    margin-block: auto;
    line-height: 1.4;
}

.cta-btn-footer{
    color: var(--color-white);
    margin-top: 0.8rem;
    font-size: 1.4rem;
}
@media screen and (max-width: 1000px) {
    .cta-area .inner{
        grid-template-columns: 20rem 1fr;
    }
    .cta-area .block-image img{
        left: -3rem;
    }
}

@media screen and (max-width: 768px) {
    .cta-area .inner{
        display: block;
    }
    .cta-area .inner:before{
        display: none;
    }
    .cta-area .block-ttl img{
        width: min(10rem, 100%);
        z-index: 1;
        left: -3rem;
        margin-top: -5%;
        margin-left: -2rem;
    }
    .cta-area .block-ttl .text-deco--balloon{
        padding: 0rem 1rem 0;
        margin-bottom: 2rem;
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .cta-area .text-deco--balloon:after{
        right: 0;
        left: 0;
        margin-inline: auto;
    } 
    .cta-area .text-deco--gradient{
        padding-bottom: 1rem;
    }
    .cta-area .block-desc{
        margin-bottom: 2rem;
    }
    .cta-area .text-deco--balloon:after{
        border-right-width: 1rem;
        border-top-width:1rem;
    }
    .cta-area .btn_wapper{
        width: calc(100% + 4rem);
        margin-left: -2rem;
        background: rgb(20 40 80 / 50%);
        margin-block: auto;
        border-radius: 0 0 0.8rem 0.8rem;
        padding-block: 3.6rem 1.5rem;
    }
}
@media screen and (max-width: 414px) {
    .cta-area .text-deco--gradient{
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
}
/* footer
-------------------------------------------- */
footer .footer-inner{
    width: min(100% - 4rem,1366px);
    margin-inline: auto;
    padding-block: 7rem 10rem;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4rem;
}
footer .nav-links-main{
    margin-top: -2rem;
}
footer .nav-links-courses{
    align-items: flex-start;
}
footer .nav-links-main a,
footer .nav-links-courses a{
    display: block;
    padding-block: 1rem;
}
footer .nav-links-main .logo_block{
  max-width: 24rem;
}

footer .nav-links-courses .course-ttl{
    opacity: 0.6;
    margin-bottom:1.4rem;
}

footer .nav-links-externals ul{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
footer .nav-links-externals a{
    box-shadow: 0 0 0.1rem var(--color-blue-100);
    display: block;
    border-radius: 0.4rem;
    padding: 1.2rem 1.5rem;
    width: 23rem;
    font-weight: bold;
    position: relative;
}
footer .nav-links-externals a:before{
    content: '';
    background:url(../../assets/images/icon-external-link.svg) center / contain no-repeat;
    width: 1.4rem;
    height: 1.4rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-block;
    filter: invert(35%) sepia(61%) saturate(252%) hue-rotate(165deg) brightness(97%) contrast(92%);
}
/* footer コピーライト */
footer .footer-info{
    background-color: #0D1C39;
    color:var(--color-gray-300);
    font-size: 1.2rem;
}
footer .footer-info > .flexbox{
    justify-content: space-between;
    flex-direction: row-reverse;
    min-height: 5rem;
    width: min(100% - 4rem,1366px);
    margin-inline: auto;
}
footer .footer-info .footer-info-links a{
    padding-inline:0.25rem;
    display: inline-block;
}
footer .footer-info .footer-info-links a:not(:last-child):after{
    content: '/';
    opacity: 0.5;
    padding-left: 0.5rem;
}
@media (hover: hover) and (pointer: fine) {
  footer a:hover{
      opacity: 0.8;
  }
}
@media screen and (max-width: 1024px) {
  footer .footer-inner{
    display: grid;
    gap: 6rem 4rem;
    padding-block: 5rem 8rem;
  }
  footer .nav-links-main{
        grid-column: 1 / 2;
        grid-row: 1 / 2;
  }
  footer .nav-links-courses{
        grid-column: 2 / 3;
        grid-row: 1 / 2;
  }
  footer .nav-links-externals{
        grid-column: 1 / 3;
        grid-row: 2 / 3;
  }
  footer .nav-links-externals ul{
      flex-direction: row;    
  }
}

@media screen and (max-width: 768px) {
  footer .footer-inner{
    display: flex;
    flex-direction: column;
  }
  footer .nav-links-courses{
    justify-content: space-between;
    width: 100%;
  }
  footer .nav-links-externals ul,
  footer .nav-links-courses{
    flex-direction: column;
  }
  footer .footer-info > .flexbox{
    padding-block:2rem;
    align-items: flex-start;
    gap: 1rem;
    flex-direction: column;
  }
}