@charset "utf-8";

strong, span, p, em, b, a, small, br, li
{
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    font-family: inherit;
    line-height: inherit;
}
a
{
   text-decoration: none;
}
img
{
   max-width: 100%;
}
/*アイキャッチ*/
#EYECATCH
{
   background-image: url(../img/eyecatch_pc.png);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}
#EYECATCH_WIDTH
{
   max-width: 700px; 
   margin: 0 auto;
}
.eyecatch_catchcopy_whitebox
{
   background-color: #FFF;
   border: 2px solid #333;
   border-radius: 0 0 30px 30px;
}
.eyecatch_catchcopy_wrap
{
   background-image: url(../img/eyecatch_catchcopy_bg.svg);
   max-width: 100%;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: top right;
   margin-top: -20px;
   padding: 50px 150px 30px 50px;
}
#EYECTCH_IILUST
{
   max-width: 250px;
   margin-top: -400px;
}
.eyecatch_catchcopy
{
   max-width: 658px;
   width: 100%;
   margin-top: 15px;
}
.catchcopy
{
   background-color: #FFF61B;
   display: inline-block;
   border: 2px solid #333;
   padding: 5px 20px;
}
.subcatchcopy_item
{
   font-weight: bold;
   color: #FFFFFF;
   background-color: #3381DC;
   padding: 5px 5px;
}
.subcatchcopy_item:nth-child(2), 
.subcatchcopy_item:nth-child(3)
{
   margin-left: 2px;
}
#EYECTCH_IILUSTWRAP::before
{
   position: absolute;
   content: ' ';
   background-image: url(../img/eyecatch_comment.svg);
   background-repeat: no-repeat;
   background-size: contain;
   width: 250px;
   height: 125px;
   display: block;
   top: -50px;
   right: 150px;
}
/*CTA*/
#CTABACKGROUND
{
   background: url(../img/cta_background.jpeg);
   background-size: cover;
}
.cta_wrap
{
   background-color: #ffffff;
   border: 2px solid #364C7D;
}
.cta_bottom
{
   background-color: #E7F0FD;
}
.cta_ttlwrap
{
   display: inline-block;
	transform: skewX(-30deg);
	padding: .8em 1.2em;
   margin-top: -50px;
}
.cta_ttl
{
   display: inline-block;
	transform: skewX(30deg);
}
.cta_circle
{
   position: relative;
   display: inline-block;
   width: 110px;
   height: 110px;
   border-radius: 50%;
   background: #ffffff;
}
.cta_circle_text
{
   position: absolute;
   display: inline-block;
   left: 0;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   width :110px;
   text-align:center;
   line-height: 1.5rem;
}
.cta_abouttxt::after
{
   position: absolute;
   content: url(../img/cta_mark.png);
   top: -10px;
   right: -20px;
}
.cta_link
{
   background: linear-gradient(to bottom, #4FACFE, #B490CA);
   padding: 5px 20px;
   border-radius: 10px;
   transition: all 0.3s ease 0s;
}
.cta_link:hover
{
   opacity: 0.5;
}
.cta_link::after
{
   content: "";
  display: inline-block;
  width: 20px;
  height: 22px;
  margin: -3px 0 0 5px;
  background: url("../img/cta_link.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.areaA
{
   grid-row: 1 / 3;
   grid-column: 1 / 2;
}
.areaB
{
   grid-row: 1 / 2;
   grid-column: 2 / 4;
}
.areaC
{
   grid-row: 2 / 3;
   grid-column: 2 / 4;
}
/*sec01*/
#SEC01
{
   background-image: url(../img/sec01_background.png);
   background-size: cover;
}
#TROUBLE_LIST li
{
   position: relative;
   display: inline-block;
	transform: skewX(-30deg);
	padding: .8em 1.2em;
   margin-bottom: 10px;
}
#TROUBLE_LIST li::before
{
   position: absolute;
   content: '';
   background-image: url(../img/trouble_listmark.png);
   background-repeat: no-repeat;
   padding-bottom: 5px;
   width: 35px;
   height: 35px;
	transform: skewX(30deg);
   bottom: 5px;
}
#TROUBLE_LIST li span
{
   display: inline-block;
	transform: skewX(30deg);
   margin-left: 50px;
}
/*sec02*/
#SEC02_BOTTOM::after
{
   content: '';
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   height: 50px;
   width: 150px;
   background: #63C5EC;
   clip-path: polygon(0 0, 50% 100%, 100% 0);
}
/*sec03*/
#SEC03
{
   background-image: url(../img/ruled_linebg.png);
}
#SEC03_TEXT
{
   background-color: #ffffff;
   border: 2px solid #364C7D;
   padding: 5px 10px;
   box-shadow: 5px 5px 10px gray;
}
#SEC03_TABLE
{
   max-width: 500px;
   width: 100%;
   text-align: left;
   border-collapse: collapse;
   border-spacing: 0;
   margin-left: auto;
   margin-right: auto;
}
#SEC03_TABLE th
{
   border: 1px solid #333;
   padding-left: 10px;
}
#SEC03_TABLE td
{
   border: 1px solid #333;
   border-bottom: 1.5px dotted #ccc;
   padding-left: 10px;
}
/*sec04*/
#SEC04
{
   background: linear-gradient(70deg, #ffffff, #CBD7F1);
}
.question_sp
{
   display: none;
}
/*sec05*/
#SEC05::before
{
   position: absolute;
   content: "";
   background-image: url(../img/5stepbg_top.png);
   width: 570px;
   height: 430px;
   top: 0;
   right: 0;
   z-index: -10;
}
#SEC05::after
{
   position: absolute;
   content: "";
   background-image: url(../img/5stepbg_bottom.png);
   width: 570px;
   height: 430px;
   bottom: 0;
   left: 0;
   z-index: -10;
}
.about_5step
{
   grid-template-columns: repeat(3, auto);
   gap: 20px;
}
/*sec06*/
#SEC06
{
   background: url(../img/navigatorbg.png);
   background-repeat: no-repeat;
   background-size: cover;
   margin-top: -10px;
}
/*sec07*/
.interview_wrap
{
   max-width: 550px;
   border: 1px solid #333;
   box-shadow: 5px 5px 10px gray;
}
#INTERVIEW_GRID
{
   grid-template-columns: 1fr 1fr;
   justify-items: center;
}
.video
{
   width: 100%;
}
.interview_text::after
{
   background-color: #FFB100;
   border-radius: 5px;
   bottom: -10px;
   content: "";
   height: 1px;
   left: 0;
   margin-inline: auto;
   position: absolute;
   right: 0;
   width: 80px;
}
/*sec08*/
#SEC08
{
   background: url(../img/consultingbg.png);
   background-repeat: no-repeat;
   background-size: cover;
}
#ACHIEVEMENT_TTL
{
   position: relative;
   display: inline-block;
   transform: skewX(-30deg);
   padding: .5em 1.2em;
}
#ACHIEVEMENT_TTL span
{
   display: inline-block;
   transform: skewX(30deg);
}
.achievement_list
{
   position: relative;
   background-color: #ffffff;
   padding: 10px 10px;
   width: 95%;
   border: 2px solid #364C7D;
}
.achievement_list_num
{
   margin-top: -20px;
}
#ACHIEVEMENT_LIST li:nth-child(odd)
{
   margin-top: 30px;
   margin-bottom: 30px;
}
/*sec09*/
#SEC09
{
   background: url(../img/summarybg.png);
   background-repeat: no-repeat;
   background-size: cover;
}
.summary_datettl
{
   display: inline-block;
   transform: skewX(-30deg);
   padding: .8em 1.2em;
   margin-top: -50px;
}
.summary_datettl span
{
   display: inline-block;
   transform: skewX(30deg);
}
#SUMMARY_TABLE
{
   border-collapse: separate;
   border-spacing: 0;
}
#SUMMARY_TABLE th
{
   color: #ffffff;
   background-color: #3381DC;
   border: 1px solid #333;
   padding: 10px 0;
}
#SUMMARY_TABLE tr:nth-child(odd)
{
   background-color: #E7F0FD;
}
#SUMMARY_TABLE th:nth-child(1)
{
   border-radius: 10px 0 0 0;
}
#SUMMARY_TABLE th:nth-child(3)
{
   border-radius: 0 10px 0 0;
}
#SUMMARY_TABLE td
{
   border: 1px solid #333;
   padding: 5px 0;
}
#TRIANGLE
{
   margin       : auto;
   overflow     : hidden;
   position     : relative;
   width        : 60px;
   height       : 50px;
}
#TRIANGLE::after
{
   content      : "";
   position     : absolute;
   width        : 40px;
   height       : 40px;
   background   : linear-gradient(45deg, #364c7d, #4facfe);
   top          : -28px;
   left         : 11px;
   transform    : scaleY(1.6)
                  rotate(45deg);
 }
/*sec10*/
#SEC10
{
   background: url(../img/teacherbg.png);
   background-repeat: no-repeat;
   background-size: cover;
}
/*sec11*/
#SEC11_H2::before
{
   content: "";
   position: absolute;
   background: linear-gradient(to right, #77ADEF, #51DAE9);
   opacity: 0.5;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   top: -5%;
   left: -20%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   z-index: -1;
}
#CLOSING_IMG
{
   max-width: 210px;
}
#CLOSING_TXT
{
   background-color: #F2F2F2;
   border-radius: 10px;
   padding: 10px 20px
}
#SEC11_BORDER:after
{
   content: "";
   display: block;
   border-bottom: 1px solid #d6d6d6;
   position: absolute;
   bottom: -50px;
   width: 100%;
}
.box3-9
{
	margin: 5em auto;
	position: relative;
	background: #fff9d1;
	padding: 3em 0 2em;
   box-shadow: 5px 5px 10px gray;
}

.box3-9::before
{
	position: absolute;
	content: "";
	width: 85%;
	height: 10px;
	top: 0.5em;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	border-top: dotted 15px #fff; /*ドットの形・大きさ・色*/
}


/* ----------------------------------------------------------------------------- */
/* 1200px以下 */
/* ----------------------------------------------------------------------------- */
@media screen and (max-width : 1200px)
{
    .width_minus_40
    {
       width: calc(100% - 40px);
    }
    .margin_bottom150
    {
       margin-bottom: 50px;
    }
    .margin_top100
    {
        margin-top: 50px;
    }
    .font_size_120
    {
       font-size: 5.2rem;
    }
    .font_size_100
    {
       font-size: 5rem;
    }
    .font_size_80
    {
       font-size: 4rem;
    }
    .font_size_50
    {
       font-size: 2.4rem;
    }
    .font_size_32
    {
        font-size: 1.5rem;
     }
    .font_size_36
    {
        font-size: 1.6rem;
     }
     .font_size_40
    {
        font-size: 1.8rem;
     }
    .font_size_24
    {
        font-size : 1.3rem;
     }
    h3.font_size_24
    {
        font-size: 1.3rem;
     }
     .font_size_21
    {
        font-size : 1.2rem;
     }
     .font_size_18
    {
        font-size : 1.1rem;
    }
    .cta_hukidashi
    {
      width: 80px;
    }
}

/* ----------------------------------------------------------------------------- */
/* 768px以下 */
/* ----------------------------------------------------------------------------- */
@media screen and (max-width : 768px)
{
    .font_size_100
    {
       font-size: 5rem;
    }
    .font_size_80
    {
       font-size: 3.1rem;
    }
    .font_size_50
    {
       font-size: 2rem;
    }
     .font_size_40
    {
        font-size: 1.5rem;
     }
    .font_size_14
    {
       font-size: 0.85rem;
    }
    .font_size_12
    {
       font-size: 0.65rem;
    }
    .font_size_28
    {
       font-size: 1.3rem;
    }
    .line_height_1rem
    {
       line-height: 0.8rem;
   }
    .width_minus_40
    {
        width: calc(100% - 20px);
    }
    .margin_bottom100
    {
        margin-bottom: 15vw;
    }
    .margin_top100
    {
        margin-top: 15vw;
    }
    .margin_tb100
    {
       margin-top: 15vw;
       margin-bottom: 15vw;
    }
    .margin_tb75
    {
        margin-top: 9.7vw;
        margin-bottom: 9.7vw;
    }
    .margin_top50
    {
       margin-top: 8vw;
    }
    .margin_tb50
    {
       margin-top: 7vw;
       margin-bottom: 7vw;
    }
    .padding_tb50
    {
      padding-top: 7vw;
      padding-bottom: 7vw;
    }
    .padding_top50
    {
      padding-top: 7vw;
    }
    .padding_bottom50
    {
      padding-bottom: 7vw;
    }
    .padding_tb100
    {
       padding-top: 15vw;
       padding-bottom: 15vw;
    }
    .padding_bottom100
    {
       padding-bottom: 15vw;
    }
    .eyecatch_font_size_21
    {
       font-size: 1.2rem;
    }
    .flex_columnreverse
    {
        flex-direction: column-reverse;
    }
    .fixed_cta
    {
       right: 10px;
    }
    .fixed_cta img
    {
       width: 90px;
    }
    .display_flex_768column
    {
      flex-direction: column;
    }
    .eyecatch_catchcopy
    {
      max-width: 450px;
      margin-top: 0;
    }
    #EYECTCH_IILUST
    {
      max-width: 180px;
    }
    #SEC05::before
    {
      width: 450px;
      height: 360px;
    }
    #SEC05::after
    {
      width: 450px;
      height: 360px;
    }
    .step_num
    {
      width: 90px;
    }
    .step_img
    {
      width: 90px;
    }
    #STEP_ACHIEVEMENT_IMG
    {
      width: 170px;
    }
    #STEP_ACHIEVEMENT_TXT img
    {
      width: 70px;
    }
    #CLOSING_IMG
    {
      width: 150px;
    }
    .areaA
    {
       grid-row: 1 / 2;
       grid-column: 1 / 2;
    }
    .areaB
    {
       grid-row: 1 / 2;
       grid-column: 2 / 4;
    }
    .areaC
    {
       grid-row: 2 / 3;
       grid-column: 1 / 4;
    }
    #INTERVIEW_GRID
    {
       grid-template-columns: 1fr;
    }
    #EYECATCH_WIDTH
    {
       max-width: 500px; 
       margin: 0 auto;
    }
    .eyecatch_catchcopy_wrap
    {
      padding: 50px 50px 30px 20px;
    }
    #EYECTCH_IILUSTWRAP::before
    {
      right: 60px;
    }
}

/* ----------------------------------------------------------------------------- */
/* 450px以下 */
/* ----------------------------------------------------------------------------- */
@media screen and (max-width : 450px)
{
    *
    {
        font-size: 13px;
    }
    .font_size_80
    {
       font-size: 2rem;
    }
    .font_size_36
    {
        font-size: 1.4rem;
    }
    .font_size_28
    {
        font-size: 1.1rem;
    }
    #SEC05::before
    {
      width: 290px;
      height: 200px;
      }
    #SEC05::after
    {
      width: 290px;
      height: 200px;
      }
   #STEP_ACHIEVEMENT
   {
      display: block;
   }
    .step_img
    {
      display: none;
    }
    .step_ttl1::after
    {
      content: '';
      background-image: url(../img/step01_img.png);
      width: 90px;
      height: 65px;
      display: inline-block;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .step_ttl2::after
    {
      content: '';
      background-image: url(../img/step02_img.png);
      width: 90px;
      height: 65px;
      display: inline-block;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .step_ttl3::after
    {
      content: '';
      background-image: url(../img/step03_img.png);
      width: 90px;
      height: 65px;
      display: inline-block;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .step_ttl4::after
    {
      content: '';
      background-image: url(../img/step04_img.png);
      width: 90px;
      height: 65px;
      display: inline-block;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .step_ttl5::after
    {
      content: '';
      background-image: url(../img/step05_img.png);
      width: 90px;
      height: 65px;
      display: inline-block;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .cta_abouttxt::after
    {
       position: absolute;
       content: url(../img/cta_mark.png);
       top: -20px;
       right: 5px;
    }
    iframe
    {
      width: 100%;
    }
    .cta_circle
    {
       width: 70px;
       height: 70px;
    }
    .cta_circle_text
    {
       width :70px;
       line-height: 1.2rem;
    }
    .cta_link
    {
      display: inline-block;
      width: 180px;
      padding: 20px;
    }
    .cta_bottom_wrap
    {
      gap: 10px;
    }
    .h2
    {
      margin-top: -40px;
    }
    .h2sub
    {
      margin-top: -14px;
    }
    .h2sub_white
    {
      margin-top: -10px;
    }
    .question_sp
    {
      display: block;
    }
    .question
    {
      display: none;
    }
    #TRIANGLE
    {
      width: 40px;
      height: 30px;
    }
    #TRIANGLE::after
    {
      width: 30px;
      height: 30px;
    }
    #CLOSING_IMG
    {
      width: 80px;
    }
    #CLOSING_WRAP
    {
      gap: 5px;
    }
    #TROUBLE_LIST li::before
    {
       padding-bottom: 5px;
       width: 25px;
       height: 25px;
       background-size: contain;
    }
    #TROUBLE_LIST li span
    {
      margin-left: 20px;
    }
    .cta_bottom_right
    {
      width: 230px;
    }
    #ACHIEVEMENT_LIST li:nth-child(odd)
    {
      margin-top: 10px;
      margin-bottom: 10px;
    }
    #SEC11_H2::before
    {
      width: 60px;
      height: 60px;
    }
    .text_bluegradation2
    {
      height: 34px;
    }
    .eyecatch_catchcopy_wrap
    {
      padding: 50px 10px 30px 10px;
      margin-top: -16px;
    }
    #EYECTCH_IILUST
    {
      max-width: 150px;
    }
    .catchcopy
    {
      margin-bottom: 5px;
      padding: 5px;
      font-size: 1.5rem;
    }
    .catchcopy:nth-child(2)
    {
      font-size: 2.65rem;
    }
    #EYECATCH_SUBCATCH
    {
      margin-top: 10px;
    }
    #LOGO_WRAP
    {
      gap: 5px;
    }
    #LOGO_WRAP img
    {
      height: 25px;
    }
    #EYECTCH_IILUSTWRAP::before
    {
      width: 200px;
      height: 100px;
      right: 60px;
    }
}