@charset "UTF-8";
html,body{
  scroll-behavior: smooth;
}
/*= SP/ベース =*/
/*= 共通 =*/
#main {
  .section {
    text-align: center;
  }
  .section-inner {
    padding:
      clamp(60px,(120 / 750) * 100vw,120px)
      clamp(20px,(40 / 750) * 100vw,40px)
      clamp(90px,(180 / 750) * 100vw,180px)
  }
  .section-title {
    margin-bottom: 
      clamp(31px,(62 / 750) * 100vw,62px);
  }

  .section-body {
    position: relative;
    border:solid 2px #1b1464;
    border-radius: 36px;
    padding: clamp(5px,(10 / 750) * 100vw,10px);
    z-index: 1;
  }

  .section-body__inner {
    background: #fff;
    border:solid 2px #1b1464;
    border-radius: 30px;
    z-index: 0;
  } 
}

/*= fv =*/
#main .section-fv {
  .oc-badge {
    display: none;
  }
}

/*= section1 _ アイに決めた理由円グラフ =*/
#main .section1 {
  background: #ff9795;
  .graph-main {
    padding-top: clamp(37px ,(74 / 750) * 100vw,74px);
    padding-bottom: clamp(21px,(42 / 750) * 100vw,42px);
  }
  .graph-main img {
  }
  .btn-wrap {
    margin-top: clamp(20px,(40 / 750) * 100vw,40px);
  }
  .btn-wrap img{
    max-width: clamp(172px,(344 / 750) * 100vw,344px);
  }
  .graph-caption {
    margin-bottom: clamp(35px,(70 / 750) * 100vw,70px);
  }
}

/*= section2 _ アイのこんなところがすごい！ =*/
#main .section2 {
  background: #ffe480;
  .section-body {
    border: none;
    padding: 0;
  }
  .amazing-item {
    position: relative;
    border:solid 2px #1b1464;
    border-radius: 36px;
    padding: clamp(5px,(10 / 750) * 100vw,10px);
    z-index: 1;
    margin-bottom: clamp(50px,(100 / 750) * 100vw,10px);
  }
  .amazing-item__inner {
    background: #fff;
    border:solid 2px #1b1464;
    border-radius: 30px;
    z-index: 0;
  }
  .amazing-title {
    position: relative;
  }
  .amazing-badge {
    position: absolute;
    width: max(90px,(180 / 750) * 100vw);
    margin: 0;
    left: max(-30px,(60 / 750) * -100vw);
    top: max(-30px,(60 / 750) * -100vw);
  }
  .amazing-body {
    padding:clamp(12px,(24 / 750) * 100vw,24px) 0 clamp(30px,(60 / 750) * 100vw,60px);
  }
  .amazing-subheader{
    margin-bottom:clamp(18px,(36 / 750) * 100vw,36px);
  }
  .amazing-body__facility {
    padding-top: clamp(81px,(162 / 750) * 100vw,105px);
    padding-bottom: 0;
  }
  .facility-item,
  .system-item {
    margin-bottom: clamp(40px,(80 / 750) * 100vw,80px);
  }
  .system-list {
    margin-top: clamp(80px,(160 / 750) * 100vw,160px);
  }
  .amazing-body__system {
    padding-bottom: 0;
  }
}

/*= section3 _ 先輩たちのストーリー =*/
#main .section3 {
  background: #6fdffb;
  .section-body__inner {
    padding-bottom:clamp(30px,(60 / 750) * 100vw,60px);
    position: relative;
  }
  .story-sep {
    margin: clamp(65px,(130 / 750) * 100vw,130px) 0;
  }
  .story-title {
    margin-top: clamp(23px,(46 / 750) * 100vw,46px);
    margin-bottom: clamp(20px,(40 / 750) * 100vw,40px);
  }
  .story-body {
    display:flex;
    flex-direction: column;
    gap: clamp(60px,(120 / 750) * 100vw,120px);
    position: relative;
  }
  .story-body:before {
    content: "";
    width: clamp(3px,(6 / 750) * 100vw,6px);
    height: 100%;
    background:#ffe580 ;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    z-index: 0;
  }
  .story-step {
    position: relative;
    z-index:1;
  }
}

/*= ページフッター =*/
#main .page-footer {
  background-image: url(../img/reason/footer_bg_sp.webp);
  background-repeat: no-repeat;
  background-size:cover;
  .section-inner {
    padding-top: clamp(90px, (180 / 750) * 100vw, 180px);
  }
  .cta-list {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, (60 / 750) * 100vw, 60px);
  }
  .cta-item img{
    max-width: clamp(285px, (570 / 750) * 100vw, 570px);
  }
}

/*= タブレット以上(min-width:769px) =*/
/*= 共通 =*/
@media screen and (min-width:769px){
  #main {
    .section-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding-top: 120px;
      padding-bottom: 160px;
      position: relative;
      box-sizing: content-box;
    }
    .section-title {
      margin-bottom: 54px;
    }
    .section-title img {
      width: auto;
    }
  }

  /*= section2 _ アイのこんなところがすごい！ =*/
  #main .section2 {
    .amazing-title {
    }
    .facility-header img{
      width: auto;
    }
    .facility-body {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: min(50px,(50 / 1400) * 100vw);
      padding: 0 min(60px,(60 / 1400) * 100vw);
    }
    .system-list {
      margin-top: min(87px,(87 / 750) * 100vw);
    }
    .system-item {
      margin-bottom: min(48px,(48 / 750) * 100vw);
    }
  }

  /*= section3 _ 先輩たちのストーリー =*/
  #main .section3 {
  }

  /*= ページフッター =*/
  #main .page-footer {
    background: none;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: min(343px,(343 / 1400) * 100vw);
      height: 100%;
      background-image:url(../img/reason/footer_bg_l_pc.webp);
      background-size: cover;
      background-position: top right;
      z-index: 1;
    }
    &:after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      width: min(337px,(337 / 1400) * 100vw);
      height: 100%;
      background-image:url(../img/reason/footer_bg_r_pc.webp);
      background-size: cover;
      background-position: top left;
      z-index: 1;
    }
    .cta-list {
      position: relative;
      z-index: 2;
      flex-direction: row;
      justify-content: center;
    }
  }
}

/*= PC以上(min-width:1024px) =*/
/*= 共通 =*/
@media screen and (min-width:1024px){
  /*= fv =*/
  #main .section-fv {
    position: relative;
    .oc-badge {
      display: block;
      text-align: right;
      min-width:1000px;
      max-width:1200px;
      margin:auto;
      right: 0;
      left: 0;
      bottom: 0;
      position: absolute;
      translate:0 65%;
      z-index: 3;
    }
    .oc-badge img{
      width: auto;
    }
  }
  /*= section1 _ アイに決めた理由は？ =*/
  #main .section1 {
    .section-inner:before {
      content: "";
      position: absolute;
      width: min(119px, (119 / 1400) * 100vw);
      height: min(119px, (119 / 1400) * 100vw);
      background-image: url(../img/reason/section1_bg_top_pc.webp);
      background-size: contain;
      background-repeat: no-repeat;
      left: min(52px, (52 / 1400) * 100vw);
      top: min(78px, (78 / 1400) * 100vw);
    }
    .section-inner:after {
      content: "";
      position: absolute;
      width: min(119px, (119 / 1400) * 100vw);
      height: min(119px, (119 / 1400) * 100vw);
      background-image: url(../img/reason/section1_bg_btm_pc.webp);
      background-size: contain;
      background-repeat: no-repeat;
      right: min(52px, (52 / 1400) * 100vw);
      bottom: min(33px, (33 / 1400) * 100vw);
    }
    .graph-main {
      padding-top:min(258px, (246 / 1400) * 100vw);
    }
    .graph-main img {
      width:min(400px, (400 / 1400) * 100vw);
    }
    .graph-caption {
      position: absolute;
      margin: 0;
    }
    .graph-caption img{
      width: 100%;
    }
    .graph-caption__1 {
      top: min(86px,(172 / 1400) * 100vw);
      right:min(62px,(124 / 1400) * 100vw);
    }
    .graph-caption__1 img{
      width: min(498px,(498 / 1400) * 100vw);
    }
    .graph-caption__2 {
      top: min(408px,(408 / 1400) * 100vw);
      right:min(62px,(124 / 1400) * 100vw);
    }
    .graph-caption__2 img{
      width: min(432px,(432 / 1400) * 100vw);
    }
    .graph-caption__3 {
      top: min(508px,(508 / 1400) * 100vw);
      left:min(100px,(200 / 1400) * 100vw);
    }
    .graph-caption__3 img{
      width: min(365px,(365 / 1400) * 100vw);
    }
    .graph-caption__4 {
      top: min(227px,(227 / 1400) * 100vw);
      left:min(100px,(200 / 1400) * 100vw);
    }
    .graph-caption__4 img{
      width: min(368px,(368 / 1400) * 100vw);
    }
    .graph-caption__5 {
      top: min(50px,(50 / 1400) * 100vw);
      left:min(254px,(254 / 1400) * 100vw);
    }
    .graph-caption__5 img{
      width: min(324px,(324 / 1400) * 100vw);
    }
    .btn-wrap {
      margin: 0;
      position: absolute;
    }
    .btn-wrap img{
      max-width: min(194px,(194 / 1400) * 100vw);
    }
    .graph-caption__1 .btn-wrap{
      top: 80.9302325581%;
      left: 41.7670682731%;
    }
    .graph-caption__2 .btn-wrap{
      top: 104%;
      left: 33.7962962963%;
    }
    .graph-caption__3 .btn-wrap,
    .graph-caption__4 .btn-wrap{
      top: 120.869565217%;
      left: 3.26086956522%;
    }
    .graph-caption__5 .btn-wrap{
      top:56%;
      left: 3.26086956522%;
    }
  }

  /*= section2 _ アイのこんなところがすごい！ =*/
  #main .section2 {
    .amazing-badge {
      width: min(211px,(211 / 1400) * 100vw);
      left: max(-42px,(42 / 1400) * -100vw);
      top: max(-42px,(42 / 1400) * -100vw);
    }
  }

  /*= section3 _ 先輩たちのストーリー =*/
  #main .section3 {
    .section-body__inner {
      display: flex;
      padding-top: min(48px,(48 / 1400) * 100vw);
    }
    .story-title {
      margin-top: min(26px,(26 / 1400) * 100vw);
    }
    .story-sep {
      margin: 0;
      width: 3px;
      background-image: url(../img/reason/sep_pc.webp);
      background-repeat: repeat-y;
    }
    .story-sep img{
      display: none;
    }
  }
}