@charset "UTF-8";


/* =============================
   共通リセット・ベース
============================= */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP';
  color: var(--UI-Text-Main, #212121);
  background: var(--UI-BG-Light, #FAFAFA);
  box-sizing: border-box;
  line-height: 1.6;
}
section{
   display:block;
   unicode-bidi: isolate;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:root {
  --sds-size-icon-medium: 32px;
}


/* =============================
   ユーティリティ
============================= */
.text-center { text-align: center; }
.mb-4 { margin-bottom: 2rem; }

/* =============================
   ヘッダー・ナビゲーション
============================= */
.header{
   /* display: flex; */
background: var(--UI-BG-Light, #FAFAFA);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
position: fixed;
width: 1920px;
height: 90px;
/* justify-content: space-between; */
/* align-items: center; */
align-content: center;
/* flex-shrink: 0; */
top: 0;
left: 0;
z-index: 30;
}
.header__container{
display: flex;
padding: 0 48px;
justify-content: space-between;
align-items: center;
align-content: center;
flex-shrink: 0;
flex: 1 0 0;
margin: 0 auto;
}
.nav{
display: flex;
align-items: center;
gap: 64px;
}
.nav__list{
display: flex;
justify-content: center;
align-items: center;
gap: 64px;
}
.nav__link{
color: var(--UI-Text-Main, #212121);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.nav__item{
display: flex;
justify-content: center;
align-items: center;
}
.nav__logo{
width: 276px;
height: 36px;
flex-shrink: 0;
aspect-ratio: 23/3;
fill: url(<path-to-image>) lightgray 0px 0px / 100% 100% no-repeat;
}
.btngroup{
display: flex;
align-items: center;
gap: 32px;
}
.btngroup__list{
display: flex;
justify-content: center;
align-items: flex-start;
gap: 32px;
}
/* =============================
   ボタン
============================= */
.btn {
  display: inline-block;
  padding: 0.6em 1.5em;
  font-weight: bold;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn--cta{
padding: 24px 125px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 50px;
background: var(--UI-Text-Main, #212121);
color: var(--UI-BG-Light, #FAFAFA);
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.btn--present {
border-radius: 10px;
background: var(--UI-Text-Main, #212121);
color: var(--UI-BG-Light, #FAFAFA);
font-size: 22px;
padding: 16px 40px;
}

.btn__action{
color: var(--UI-BG-Light, #FAFAFA);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
border-radius: var(--sds-size-icon-medium);
}
.btn--login {
background: var(--Brand-Primary, #FF9100);
gap: 8px;
}
.btn--login:hover {
  background: var(--Brand-Primary-Hover, #E68100);
}
 .btn--trial {
background: var(--UI-Text-Main, #212121);
 }
.btn--trial:hover {
  opacity: 0.85;
}
/* =============================
   ファーストビュー
============================= */
main{
   padding-top: 90px;
   /* position:absolute; */
   width: 100%;
   height:100%;
}
.firstview{
   /* padding-top: 75px; */
/* position:absolute; */
width: 100%;
height: 627px;/* ← 697(firstview) - 70(header) */
/* overflow: hidden; */

}
.firstview__container{
   position:relative;
display: flex;
/* padding: 0 calc(100vw * 75 / 1366); */
flex-direction: column;
justify-content: center;
align-items: flex-start;
flex-shrink: 0;
height:100%;
margin: 75px 80px 0 80px;
/* overflow: hidden; */
/* width:100%; */
}
.firstview__orange{
  position: absolute;
  display: block;
  /* top: 165px;                   padding-top と同じ */
  left: 0;                   /* padding-left と同じ */
  right: 0;                  /* padding-right と同じ */
  bottom: 0;    
  width:100%; /* 幅を指定 */
  height: 100%;
  /* background-color: rgba(245, 245, 245, 0.9); 少し透明な白系の背景 */
  /* 右側を斜めに切り取る */
  /* clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); */
  /* border-radius: 30px; */
  z-index: 1;
   background-image: url('images/firstview__orange.png');
   object-fit: contain;
  /* background-position: center; */
  background-repeat: no-repeat;
  /* background-position: center; */
}

.firstview__img{
   background-image: url('images/firstview__img.png');
display: block;
/* transform: scale(-1, 1); */
/* border-radius: 30px; */
position: absolute;
/* top: 165px;                   padding-top と同じ */
  left: 0;                   /* padding-left と同じ */
  right: 0;                  /* padding-right と同じ */
  bottom: 0;    
  width:100%; /* 幅を指定 */
  height: 100%;
  /* object-fit: cover; 画像の比率を保ったまま全体をカバー */
  z-index: 0; /* 一番後ろに配置 */
  /* background-position: left; */
  object-fit: contain;
  background-repeat: no-repeat;
  /* background-position: center; */
}
.firstview__content{

z-index: 3; /* 重なり順：一番上 */
padding: 0 88px;
/* flex-direction: column;
align-items: flex-start; */
gap: 41px;
width: auto;
height: auto;

}
.firstview__title{

/* justify-content: center; */
/* align-items: center; */

/* flex-shrink: 0; */
font-size: 88px;
font-style: normal;
font-weight: 700;
line-height: 120%;
padding-bottom: 41px;
}
.firstview__title--highlight{
color: var(--Brand-Primary, #E68100);
}

.firstview--cta-highlight{
color: var(--Brand-Primary, #FF9100);
}


/* =============================
   特徴セクション
============================= */
.feature{
padding: 64px 0;

}
.feature__container{
max-width: 1106px;
margin-left: auto;
margin-right: auto;
justify-content: center;
align-items: center;
position: relative;
}
.feature__head{
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
align-self: stretch;
margin-bottom: 56px;
}
.feature__head-img{
width: 396.963px;
height: 528.984px;
}
/* .feature__head-content{

} */
.feature__title{
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 54px */
padding-bottom: 40px;
}
.feature__description{
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 170%; /* 34px */
}
.feature__cardgroup{

/* height: auto; */
display: flex;
/* grid-template-columns: auto; */
/* flex-direction: column; */
justify-content: center;
/* align-content: flex-start; */
flex-wrap: wrap;
gap: 85px;
/* overflow: hidden; */
/* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
 /* place-content: center;
  place-items: center; */
}
.feature__card{
padding: 24px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 36px;
border-radius: 10px;
background: #FFF;
box-shadow: 4px 4px 4px 0 rgba(160, 160, 160, 0.10);
}
.feature__card-img{
width: 250.935px;
height: 178.385px;
margin-bottom: 36px;
}
.feature__card-content{
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}

.feature__card-title{
   width: 264px;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
padding-bottom: 8px;
}
.feature__card-subtitle{
width: 264px;
height: 57px;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 8px;
}
.feature__card-spec{
   width: 264px;
flex-shrink: 0;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.feature__card-spec-title{
font-weight: 600;
}
.feature__card-spec-list{
list-style:inside;
}
/* .feature__card-spec-item{

} */
 /* =============================
   紹介ビデオ
============================= */
.aboutvideo{
padding: 64px 0;
max-width: 1106px; 
margin-left: auto;
margin-right: auto;
text-align: center;
}
.aboutvideo iframe{
width: 70%;
height: 100%;
aspect-ratio: 16/9;
}
/* =============================
   ポップアップバナー
============================= */
.popupbanner{
padding: 64px 0;
}
.popupbanner__bgcolor{
padding: 32px 0;
background-color: #FFE7C7;
margin-left: auto;
margin-right: auto;
}
.popupbanner__container{
   display: flex;
justify-content: center;
align-items: center;
gap: 24px;
align-self: stretch;
}
.popupbanner__content{
height: 187px;
gap: 36.998px;
}
.popupbanner__heading{
padding-bottom: 3px;
gap: 16px;
flex-shrink: 0;
padding-bottom: 37px;
}
.popupbanner__lead{
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.popupbanner__title{
   font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.popupbanner__btn{
justify-content: center;
align-items: center;
}
.popupbanner__photo{
   width: 403px;
height: 253px;
}
/* =============================
   コンセプト
============================= */
.concept{
padding: 64px 0;

}
.concept__container{
display: flex;
margin-left: auto;
margin-right: auto;
width: 1100px;
justify-content: space-between;
align-items: center;
}
.concept__heading{

}
.concept__heading-title{
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 54px */
padding-bottom: 48px;
}
.concept__heading-description{
width: 471px;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 28.8px */
}
.concept__content{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 40px;
}
.concept__content-title{
color: var(--Brand-Primary, #FF9100);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 36px */
}
.concept__list{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 40px;
}
.chatissue {
   position: relative;
border-radius: 0 23px 23px 23px;
background: #FFF;
box-shadow: 0 4px 4px 0 rgba(160, 160, 160, 0.10);
padding: 8px 32px;

display: inline-flex;
align-items: center;
gap: 26px;
}
.concept__item{
/* display: flex;
padding: 8px 32px;
align-items: center;
gap: 26px; */
}

.check{
   position: relative;
}

.check::after{
    content: '';
  display: block;
  position: absolute;
  top: -.3em;
  left: 0;
  width: 13px;
  height: 7px;
  border-left: 3px solid var(--Brand-Primary, #FF9100);
  border-bottom: 3px solid var(--Brand-Primary, #FF9100);
  transform: rotate(-45deg);
}
.concept__check{

}
.concept__text{

font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/* =============================
   学習システム
============================= */
.studysystem{
padding: 64px 0;
}
.studysystem__container{
width: 1111px;
margin-left: auto;
margin-right: auto;
gap: 60px;

}
.studysystem__heading{
padding-bottom: 60px;
}
.studysystem__title{
padding-bottom: 20px;
font-size: 36px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.studysystem__description{
padding-bottom: 10px;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 27px */
}
.studysystem__options{
display: flex;
justify-content: center;
align-items: center;
gap: 117px;
}
.studysystem__coursecard{
text-align: center;
}
.studysystem__coursecard-title{
padding-bottom: 24px;
font-size: 19px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.studysystem__coursecard-content{

}
.studysystem__coursecard-img{

}
.studysystem__price{
padding-top: 24px;
}
.studysystem__price-amount{
color: var(--Brand-Primary, #FF9100);
font-size: 64px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.studysystem__price-amount--blue{
color: var(--Brand-Secondary, #0062B1);
}
.studysystem__price-tax{
   font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.studysystem__price-detail{
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.studysystem__or{
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.studysystem__content{
margin: 0 auto;
padding-top: 90px;
}
.studysystem__card{
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 4px 0 rgba(68, 68, 68, 0.20);
width: 100%;
margin-bottom: 60px;
}
.studysystem__card--grey{
background: var(--UI-Border, #E0E0E0);
}
.studysystem__card--orange{
background: var(--Brand-Primary, #FF9100);
}
.studysystem__card--blue{
background: var(--Brand-Secondary, #0062B1);
}
.studysystem__card-title{
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
padding-bottom: 24px;
}
.studysystem__card-list{
/* list-style-position: inside;  */
list-style: inside;
display: flex;
flex-wrap: wrap;
  /* padding: 0; */
  margin: 0;
  padding-left: 20px;
}

.studysystem__card-item{
 /* アイテムの最小幅を設定 */
  flex-basis: 200px; 
  /* アイテムを均等に広げる */
  flex-grow: 1; 
  /* アイテムの間に余白を追加 */
  margin: 5px; 
}

.studysystem__card-item--whitefont ,.studysystem__card-title--whitefont{
color: var(--UI-BG-Light, #FAFAFA);
}
/* =============================
   学習フロー
============================= */
.studyflow{
padding: 64px 0;
}
.studyflow__container{
width: 1111px;
margin-left: auto;
margin-right: auto;
}
.studyflow__title{
padding-bottom: 60px;
}
.studyflow__heading{
font-size: 36px;
font-style: normal;
font-weight: 600;
line-height: 150%;
padding-bottom: 20px;
}
.studyflow__lead{
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 120%;
padding-bottom: 10px;
}
.studyflow__list{
padding: 0 22px;
}
.studyflow__item{
   position:relative;
display: flex;
padding-bottom: 128px;
  justify-content: flex-end;
align-items: center;
}
.studyflow__primary{
/* position:relative; */
display: flex;
/* height: 800px; */
justify-content: center;
align-items: flex-start;
}
.studyflow__numgroup{
   /* position:relative; */
/* text-align: center; */
 display: flex;
  /* flex-direction: column; 縦に並べる */
  align-items: center; /* 横方向の中央揃え（flex-direction: column;の場合） */
  justify-content: center; /* 縦方向の中央揃え */
  
  
  /* 縦線の長さを制御するために親の高さが必要 */
  height: auto; 
  margin-right: 63px;
  z-index:1;
}
.studyflow__num{
/* position:relative; */
display: flex;
  align-items: center;
  justify-content: center;
 width: 76px; /*同じ１ */
height: 76px; /*同じ１ */
border-radius: 50%;
border: 1px solid var(--Brand-Primary, #212121);
background-color: var(--UI-BG-Light, #FAFAFA);
/* text-align: center; */
/* line-height: 76px; 同じ１ */

font-size: 22px;
font-style: normal;
font-weight: 400;



}
.studyflow__num::after{
content: '';
display: block;
width: 1px;
height: 100%;
background-color: var(--Brand-Primary, #212121);
position: absolute;
  /* top: 0; */
  /* bottom: 0; */
bottom:-76px;/*  同じ１ */
/* left: 0; */
 /* transform: translateX(-50%); */
 /* transform: translateX(calc(63px + 76px / 2)); */
 z-index: 0;
}
/*
 * 最後の子要素であるli.studyflow__item内の
 * .studyflow__numの::afterを非表示にする
 */
.studyflow__item:last-child .studyflow__num::after {
  content: none;
}
.studyflow__content{
width: 711px;
}
.studyflow__text{
padding-bottom: 60px;
}
.studyflow__text-title{
font-size: 25px;
font-style: normal;
font-weight: 700;
line-height: normal;
padding-bottom: 30px;
}
.studyflow__text-lead{
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
}
.studyflow__thumb{

}
.studyflow__thumb-img{
/* width:100%; */
}
.studyflow__note{
position: relative;
/* text-align: center; */
/* display:flex;
justify-content: center;
align-items: center; */
margin-left: auto;
}
.studyflow__note::before{
content: '';
display: block;
width: 40%;
height: 1px;
 background: 
    repeating-linear-gradient(
      to right,
      var(--Brand-Primary, #212121) 0, /* 点の開始位置 */
      var(--Brand-Primary, #212121) 5px, /* 点の終了位置（これが点の大きさ） */
      transparent 1px, /* 透明部分の開始位置 */
      transparent 10px /* 透明部分の終了位置（これが間隔の大きさ） */
  );
/* 点の繰り返し間隔とサイズを調整 */
background-size: 10px 10px; /* 縦横の繰り返し間隔 */
position: absolute;
bottom:50%; 
left: -50%;  
/* transform: rotate(90deg); */
}
.studyflow__note-container{

}
.studyflow__note-title{
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;

text-align: center;
padding-bottom: 12px;
}
.studyflow__note-img{
/* text-align: center; */
    max-width: 100%;
    display: block;
    margin: 0 auto;
    padding-bottom: 12px;
}
.studyflow__note-detail{
/* text-align: center; */
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.studyflow__note-detail ul{
   list-style: inside;
}
/* =============================
   特徴リスト
============================= */
.featurelist{
padding: 64px 0;
background: var(--UI-Border, #E0E0E0);
}
.featurelist__container{
width: 1111px;
margin-left: auto;
margin-right: auto;
}
.featurelist__title{
padding-bottom: 60px;
}
.featurelist__title-text{
padding-bottom: 10px;
font-size: 36px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.featurelist__chatlist{

}
.featurelist__chatitem{
padding-bottom: 70px;
}
.featurelist__chatitem:last-child{
padding-bottom:0;
}
.featurelist__issue{
margin-bottom: 24px;
}


.featurelist__issue-check{

}
.featurelist__issue-text{
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.featurelist__solution{
display: flex;
justify-content: space-between;
padding: 46px 88px;
gap: 50px;

border-radius: 45px 0 80px 45px;
background: #FFF;
box-shadow: 0 4px 4px 0 rgba(160, 160, 160, 0.20);
}
.featurelist__solution-text{

}
.featurelist__solution-title{
padding-bottom: 16px;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 140%; /* 48px */
}
.featurelist__solution-description{
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.featurelist__solution-img{

}
/* =============================
   Footerbar
============================= */
.footerbar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.footerbar__tips {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* =============================
   フッター
============================= */
footer{
height: 244px;
padding: 48px 20px 62px 20px;
background: #F3F3F3;

}
.footer__inner{
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 45px;
max-width: 1252px;
/* justify-content: center; */
margin: 0 auto;
width: 100%;
}
.footer__left{

}
.footer__logo-link{
   display: block;
   padding-bottom: 39px;

}
.footer__logo{
height: 37px;

}
.sns{
padding-left: .6em;
display: flex;
gap: 40px;
}
.sns__item{

}
.sns__link{
display: block;
}
.sns__img{

}
.footer__right{

}
.footer__nav{
display: flex;
flex-wrap: wrap;
gap: 56px;
}
.footer__nav-item{
font-weight: 350;
}
.footer__nav-link{
font-size: 16px;
}
.footer__bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1252px;
margin: 0 auto;
}
.footer__legal{
display: flex;
gap: 24px;
padding-left: .4em;
}


.footer__legal-item{
font-weight: 350;
}
.footer__legal-link{

}
.footer__copyright{
font-size: 12px;
color: #525252;
}
/* =============================
   レスポンシブ
============================= */