﻿/* リクル－ト
---------------------------------------------- */
.recruit-seminar-wrapper {
  position: relative;
  background-color:#f8f8f8;
  color:#3f3f3f;
  padding-bottom:0px;
}

@media screen and (min-width: 900px) {
.recruit-seminar-wrapper {
  padding-bottom:0px;
}
}

/*教育カリキュラム
-------------------------------------------- */
.step-contaner {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  padding:30px 5vw 30px;
}
@media screen and (min-width: 768px) {
.step-contaner {
  padding:30px 30px 30px;
}
}
/*
-------------------------------------------- */
.select-koushuu-midashi {
  position: relative;
  margin: 0px auto 20px;
  aspect-ratio: 2.2 /1 ;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  background-image: url(../images/seminar/eraberu.svg);
}
/*
-------------------------------------------- */
.select-koushuu-text {
  position: relative;
  margin: 0px auto 60px;
  font-size: 1.6rem;
  line-height: 2;
  padding:0px 0;
}
@media screen and (min-width: 768px) {
.select-koushuu-text {
  padding:0px 0px;
}
}
.marker {
  background: linear-gradient(transparent 75%, #ffff7f 75%);
  background: linear-gradient(transparent 60%, #ffff7f 60%);
}

/*
-------------------------------------------- */
.step-box {
  position: relative;
  text-align: right;
  margin: 0px auto 30px;
  font-size: 1.3rem;
  line-height: 1.8;
  background-color:#fff;
 border:1px solid #ccc;
}
/*
-------------------------------------------- */
.step-box-left {
  position: relative;
  height: 100px;
  background-color:#3284AD;
  border-radius:2px 2px 0 0;
}
/*
-------------------------------------------- */
.step-box-left-text {
  position: absolute;
  width:100%;
  left:0;
  top:50%;
  transform: translate(0, -50%);
  text-align: center;
  font-size: 2.6rem;
  line-height: 1;
  color: #fff;
}


/*
-------------------------------------------- */
.step-box-right {
  position: relative;
  padding: 30px 5vw;
}
@media screen and (min-width: 600px) {
.step-box-right {
  padding: 30px 30px;
  border:1px solid #ddd;
  border-top:none;
}
}
/* 
--------------------------------------*/
.step-image {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width:calc((100% / 3) - 10px);
  aspect-ratio: 1 /1 ;
  margin:0 5px 10px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 50%;
}
@media screen and (min-width: 500px) {
.step-image {
  width:calc((100% / 6) - 10px);
}
}
.step-image.img01 {
  background-image: url(../images/seminar/01.jpg);
}
.step-image.img02 {
  background-image: url(../images/seminar/02.jpg);
}
.step-image.img03 {
  background-image: url(../images/seminar/03.jpg);
}
.step-image.img04 {
  background-image: url(../images/seminar/04.jpg);
}
.step-image.img05 {
  background-image: url(../images/seminar/05.jpg);
}
.step-image.img06 {
  background-image: url(../images/seminar/06.jpg);
}
.step-image.img07 {
  background-image: url(../images/seminar/07.jpg);
}
.step-image.img08 {
  background-image: url(../images/seminar/08.jpg);
}
.step-image.img09 {
  background-image: url(../images/seminar/09.jpg);
}
.step-image.img10 {
  background-image: url(../images/seminar/10.jpg);
}
.step-image.img11 {
  background-image: url(../images/seminar/11.jpg);
}
.step-image.img12 {
  background-image: url(../images/seminar/12.jpg);
}

/*
-------------------------------------------- */
.koushuu-midashi-box {
  position: relative;
  text-align: left;
  letter-spacing: 0rem;
  margin-bottom:20px;
}
/*
-------------------------------------------- */
.koushuu-midashi {
  position: relative;
  font-size:4rem;
  letter-spacing: -.1rem;
  line-height:1;
  font-family: 'Josefin Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  margin-bottom:0px;
  color:#3284AD;
}
/*
-------------------------------------------- */
.koushuu-midashi-text {
  position: relative;
  font-size:1.6rem;
}
/*
-------------------------------------------- */
.step-contents {
  position: relative;
  margin: 0px auto 30px;
  text-align: left;
}
.step-contents:last-of-type{
  margin: 0px auto 0px;
}
/*
-------------------------------------------- */
.step-midashi {
  position: relative;
  width: 100px;
  margin: 0;
  background-color:#3284AD;
  line-height: 1;
  padding:8px 10px;
  text-align: center;
  border-radius:30px;
  font-size:1.6rem;
  color:#fff;
}
.step-honbun {
  position: relative;
  line-height: 1.8;
  padding: 10px 10px 25px;
  text-align: left;
  border-bottom:1px dotted #3284AD;
  font-size:1.4rem;
}
.step-contents:last-of-type .step-honbun{
  border-bottom:none;
}
/*
-------------------------------------------- */
.debut{
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  aspect-ratio: 2.2 /1 ;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/seminar/debut2.svg);
}


/* ▼早期育成プログラム
--------------------------------------*/
.dailyBox {
  position: relative;
  position: relative;
  padding: 30px 5vw;
}
@media screen and (min-width: 600px) {
.dailyBox {
  padding: 30px 30px;
  border:1px solid #ddd;
  border-top:none;
}
}

/*
---------------------------------*/
.souki-midashi-box {
  position: relative;
  margin: 0 auto 30px;
  max-width: 700px;
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 1.8;
  letter-spacing:-10rem;
  font-size: 0rem;
}
/*
---------------------------------*/
.souki-midashi {
  position: relative;
  margin: 0 auto 10px;
  letter-spacing:0rem;
  font-size: 1.6rem;
}
.souki-midashi-sub {
  position: relative;
  letter-spacing:0rem;
  font-size: 1.4rem;
}

/* 
--------------------------------------*/
.koushuu-goal {
  position: relative;
  max-width: 400px;
  margin: 30px auto 10px;
  aspect-ratio: 2.2 /1 ;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/seminar/debut1.svg);
}
.goal-text {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  padding:0 10px;
  font-size: 1.4rem;
  text-align:left;
}
/* 
--------------------------------------*/
.photo {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 50%;
}
.photo:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.areaBox01 .photo {
   border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
.areaBox01 .photo:after {
  position: absolute;
  width:100%;
  height:100%;
  content:"";
  top:0;
  left:0;
  border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  transform: translate(5px,5px) rotate(0deg);
  border:1px solid #ddd;
}
.areaBox02 .photo {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
.areaBox02 .photo:after {
  position: absolute;
  width:100%;
  height:100%;
  content:"";
  top:0;
  left:0;
  border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  transform: translate(5px,5px) rotate(0deg);
  border:1px solid #ddd;
}
.areaBox03 .photo {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
.areaBox03 .photo:after {
  position: absolute;
  width:100%;
  height:100%;
  content:"";
  top:0;
  left:0;
  border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  transform: translate(5px,5px) rotate(0deg);
  border:1px solid #ddd;
}
.areaBox04 .photo {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
.areaBox04 .photo:after {
  position: absolute;
  width:100%;
  height:100%;
  content:"";
  top:0;
  left:0;
  border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  transform: translate(5px,5px) rotate(0deg);
  border:1px solid #ddd;
}
.areaBox05 .photo {
   border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
.areaBox05 .photo:after {
  position: absolute;
  width:100%;
  height:100%;
  content:"";
  top:0;
  left:0;
  border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  transform: translate(5px,5px) rotate(0deg);
  border:1px solid #ddd;
}
.areaBox06 .photo {
   border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
.areaBox06 .photo:after {
  position: absolute;
  width:100%;
  height:100%;
  content:"";
  top:0;
  left:0;
  border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  transform: translate(5px,5px) rotate(0deg);
  border:1px solid #ddd;
}
/* 
--------------------------------------*/
.txtBox {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  padding: 0px 10px;
}
.txtBox .time {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  margin-right:3px;
  font-family: 'Josefin Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: .8;
  color:#78959f;
}
@media screen and (min-width: 768px) {
.txtBox .time {
  font-size: 5rem;
}
}
.txtBox .timeNote {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  font-family: 'Josefin Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color:#78959f;
}
/*
--------------------------------------*/
.txtBox .note {
  position: relative;
  display: block;
  vertical-align: bottom;
  font-size: 1.4rem;
  font-weight: 600;
}
.txtBox p {
  font-size: 1.4rem;
}


/* エリア01
--------------------------------------*/
.areaBox01 {
  position: relative;
  margin:0;
  text-align: left;
  letter-spacing:-10rem;
  font-size:0;
}
.area01 {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: left;
}
.dailyBox .area01 .photo {
  width: 160px;
}
.dailyBox .area01 .photo {
  background-image: url(../images/seminar/01.jpg);
}
.dailyBox .area01 .txtBox {
  width:calc(100% - 160px);
  letter-spacing:0rem;
}
@media screen and (min-width: 600px) {
.area01 {
  width: 90%;
}
.dailyBox .area01 .photo {
  width: 25%;
}
.dailyBox .area01 .txtBox {
  width: 75%;
}
}
/* エリア02
--------------------------------------*/
.areaBox02 {
  position: relative;
  text-align: right;
  letter-spacing:-10rem;
  font-size:0;
}
.area02 {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 100%;
}
.dailyBox .area02 .photo {
  width: 160px;
}
.dailyBox .area02 .photo {
  background-image: url(../images/seminar/03.jpg);
}
.area02 .txtBox {
  width: calc(100% - 160px);
  letter-spacing:0rem;
}
@media screen and (min-width: 600px) {
.area02 {
  text-align: left;
  width: 70%;
}
.dailyBox .area02 .photo {
  width: 30%;
}
.area02 .txtBox {
  width: 70%;
}
}
/* エリア03
--------------------------------------*/
.areaBox03 {
  position: relative;
  text-align: right;
  letter-spacing:-10rem;
  font-size:0;
}
.area03 {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 100%;
}
.dailyBox .area03 .photo {
  width: 180px;
}
.dailyBox .area03 .photo {
  background-image: url(../images/seminar/04.jpg);
}
.area03 .txtBox {
  width:calc(100% - 180px);
  letter-spacing:0rem;
}
@media screen and (min-width: 600px) {
.area03 {
  width: 90%;
}
.dailyBox .area03 .photo{
  width: 36%;
}
.area03 .txtBox {
  width: 64%;
}
}
/* エリア04
--------------------------------------*/
.areaBox04 {
  position: relative;
  text-align: right;
  letter-spacing:-10rem;
  font-size:0;
}
.area04 {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 100%;
}
.dailyBox .area04 .photo {
  width: 130px;
}
.dailyBox .area04 .photo {
  background-image: url(../images/seminar/05.jpg);
}
.area04 .txtBox {
  width:calc(100% - 130px);
  letter-spacing:0rem;
}
@media screen and (min-width: 600px) {
.area04 {
  width: 60%;
}
.dailyBox .area04 .photo {
  width: 40%;
}
.area04 .txtBox {
  width: 60%;
}
}
/* エリア05
--------------------------------------*/
.areaBox05 {
  position: relative;
  margin-top:5px;
  text-align: left;
  letter-spacing:-10rem;
  font-size:0;
}
.area05 {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 100%;
}
.dailyBox .area05 .photo {
  width: 140px;
}
.dailyBox .area05 .photo {
  background-image: url(../images/seminar/06.jpg);
}
.area05 .txtBox {
  width: calc(100% - 140px);
  letter-spacing:0rem;
}
@media screen and (min-width: 600px) {
.area05 {
  width: 80%;
}
.dailyBox .area05 .photo {
  width: 40%;
}
.area05 .txtBox {
  width: 60%;
}
}
/* エリア06
--------------------------------------*/
.areaBox06 {
  position: relative;
  margin-top:10px;
  text-align: right;
  letter-spacing:-10rem;
  font-size:0;
}
.area06 {
  position: relative;
  display: inline-block;
  text-align:left;
  width: 100%;
}
.dailyBox .area06 .photo {
  width: 160px;
}
.dailyBox .area06 .photo {
  background-image: url(../images/seminar/07.webp);
}
.area06 .txtBox {
  width: calc(100% - 160px);
  letter-spacing:0rem;
}
@media screen and (min-width: 600px) {
.area06 {
  width: 90%;
}
.dailyBox .area06 .photo {
  width: 40%;
}
.area06 .txtBox {
  width: 60%;
}
}


/*
-------------------------------------------- */
.step-box-right-text{
  position: relative;
  font-size: 1.4rem;
  letter-spacing: 0rem;
  padding-bottom: 20px;
  text-align:left;
}
/* 
--------------------------------------*/
.step-image-box {
  position: relative;
  margin-bottom:20px;
  text-align: center;
  letter-spacing:-10rem;
  font-size:0;
}

/*
---------------------------------------------------------------------------*/
.jikannaigai-box {
  position: relative;
  width: 98%;
  max-width: 650px;
  margin: 0px auto 30px;
  font-size: 0rem;
  letter-spacing:-10rem;
  text-align:center;
}
/*
---------------------------------------------------------------------------*/
.jikannai-image,
.jikangai-image {
  position: relative;
  display:inline-block;
  vertical-align: top;
  width: calc((100% / 1) - 0px);
  max-width:350px;
  aspect-ratio:1 / 1.02;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.jikannai-image {
  background-image: url(../images/seminar/hisshuu.svg);
  margin: 0 0 20px;
}
.jikangai-image {
  background-image: url(../images/seminar/sentaku.svg);
  margin: 0 0 0px;
}

@media screen and (min-width: 600px) {
.jikannai-image,
.jikangai-image {
  width: calc((100% / 2) - 20px);
  max-width:none;
}
.jikannai-image {
  margin: 0 20px 0 0;
}
.jikangai-image {
  margin: 0 0 0 20px;
}
}



