@charset "utf-8";
/*=============================
 common 
 ==============================*/
 :root {
    --primary-bg: #F9F9F9;
    --secondary-bg: #EBF2FA;
    --primary-blue: #0693E3;
    --secondary-blue: #1e83ff;
    --light-blue: #B2CFF3;
    --logo-blue: #080056;
    --color-body: #25233C;
    --contentWidth: 89.3%;
    --contentPadding: 5.3%;
 }
 
 html {
    font-size: 62.5%;
 }

 body {
    font-family: 
        "Noto Sans JP", 
        Arial,
        sans-serif;
    font-style: normal;
    color: var(--color-body);
    background-color: var(--primary-bg);
    line-height: 1.7;
 }

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

.sectionTitle {
    text-align: center;
}

 .sectionTitle__name {
    font-family: "Noto Sans JP";
    font-size: 2.8rem;
    font-style: Medium;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 8px;
 }

 .sectionTitle__ja {
    font-family: "Noto Sans JP";
    font-size: 1.1rem;
    font-style: Bold;
    color: var(--primary-blue);
    font-weight: 400;
    line-height: 1;
 }

 .btn__smallBlue {
    width: 200px;
    height: 52px;
    background: linear-gradient(90deg, #3F35A4, rgba(6,147,227,0.3));
    color: #fff;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 24px;
    padding: 13px 55px;
    transform: 0.4s;
   }
   
   .btn__blue {
      width: 294px;
      height: 57px;
      background: linear-gradient(90deg, #3F35A4, rgba(6,147,227,0.3));
      color: #fff;
      text-align: center;
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 1.5;
      border-radius: 24px;
      padding: 15.5px 93px;
      transform: 0.4s;
   }
   
   .btn__white {
      display: block;
      width: 200px;
      height: 52px;
      background-color: #fff;
      color: var(--color-body);
      text-align: center;
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 1.5;
      border-radius: 24px;
      padding: 13px 55px;
      transform: 0.4s;
   }

   .btn__white:hover {
      background-color: hsl(245, 19%, 53%);
      color: #fff;
   }   

   .btn__smallBlue,
   .btn__blue:hover {
      transform: translateY(-2px);
   }

/* common pc */
@media screen and (min-width: 769px) {
   .section {
      max-width: 1440px;
      height: auto;
      margin: 0 auto;
   }
         
   .sectionTitle {
      text-align: left;
   }
         
   .sectionTitle__name {
      font-size: 50px;
   }
         
   .sectionTitle__ja {
      font-size: 20px;
      margin-top: 20px;
   }
  }
  /* pc 769px */

/*=============================
 fade in
 ==============================*/
.fadeIn {
   transform: translate(0, 70px);
   opacity: 0;
   transition: 1s;
}

.fadeIn.animated {
   transform: translate(0,0);
   opacity: 1;
}

/*=============================
 header 
 ==============================*/ 
 .header {
   padding: 20px 5%;
 }

.header__logo,
.nav__logo {
   width: 122px;
   height: auto;
}

/* .nav初期表示 */
.nav {
   background-color: var(--secondary-bg);
   width: 100%;
   height: 100vh;
   padding: 20px 5%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
   transform: translateX(-100%);
   transition: transform 0.4s; 
}

.nav__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.nav__list {
   margin-top: 70px;
}

.nav__item {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1;
   color: var(--color-body);
   margin-top: 40px;
   padding-bottom: 5px;
   position: relative;
}

.nav__item::before {
   background: var(--primary-blue);
   content: '';
   width: 100%;
   height: 2px;
   position: absolute;
   left: 0;
   bottom: 0;
   transform-origin: right top;
   transform: scale(0, 1);
   transition: transform .3s;
}

.nav__item:hover::before {
   transform-origin: center top;
   transform: scale(1, 1);
}

.nav__item:hover::before :nth-child(4) {
   display: none;
}

.nav__subitem {
   font-weight: 400;
   font-size: 1.4rem;
   line-height: 1;
   color: var(--color-body);
   margin-top: 30px;
   padding-left: 10px;
}

.navbtn__blue {
   display: block;
    width: 200px;
    height: 52px;
    background: linear-gradient(90deg, #3F35A4, rgba(6,147,227,0.3));
    color: #fff;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 24px;
    padding: 13px 55px;
    transform: 0.4s;
}

.nav.active {
   transform: translateX(0);
}

.header__btn {
   display: block;
   width: 32px;
   height: 25px;
   cursor: pointer;
   position: absolute;
   top: 33px;
   right: 5%;
}

/* pc */
@media screen and (min-width: 769px){
   .header {
      max-width: 1280px;
      height: 80px;
      margin: 0 auto;
      padding: 12px 0px;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   .header__logo {
      width: 184px;
      height: auto;
   }
   
   .nav__header {
      display: none;
   }

   .nav {
      background: transparent;
      width: auto;
      height: auto;
      padding: 0;
      position: static;
      transform: translateX(0);
      transition: transform 0.4s; 
   }   

   .nav__list {
      margin-top: 0;
      display: flex;
      align-items: center;
   }
   
   .nav__item {
      margin: 0 0 0 80px;
      font-weight: 600;
      font-size: 1.7rem;
      text-align: center;
   }

   .nav__subitem {
      display: none;
   }

   .nav__item .btn__smallBlue {
      margin-top: 0;  
   }

   .header__btn {
      display: none;
   }
}
 
/*=============================
 Article footer
 ==============================*/ 
.article__footer {
   padding: 70px 5% 90px;
   background-color: var(--primary-bg);
}

.sectionTitle--article__footer {
   text-align: center;
}

.articleFooter__group {
   text-align: center;
}

.tel,
.email {
   padding: 40px 10px;
}

.tel__box,
.email__box {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 50px;
}

.tel__img,
.email__img {
   padding-right: 20px;
}

.tel__img {
   width: 50px;
   height: auto;
}

.email__img {
   width: 60px;
   height: auto;
}

.tel__title,
.email__title {
   font-size: 2rem;
}

.tel__topic,
.email__topic {
   margin-top: 20px;
}

.tel__number,
.email__address {
   font-size: 3rem;
}

.email__address {
   text-decoration:none;
}

.tel__txt,
.email__txt {
   font-size: 1.4rem;
   margin-top: 30px;
}

.hr {
   border-width: 2px 0 0 0;
   border-style: solid;
   border-color: #0693E3;
}

/* article__footer pc */
@media screen and (min-width: 769px) {
   .article__footer {
      max-width: 1440px;
      /* margin: 0 auto; */
      padding: 100px 7%;
      margin: 0 auto;
   }

   .sectionTitle--article__footer {
      text-align: left;
   }

   .articleFooter__group {
      display: flex;
      justify-content: center;
   }   

   .tel {
      padding-right: 120px;
      text-align: left;
   }

   .email {
      text-align: left;
   }

   .tel__box,
   .email__box {
      justify-content: flex-start;
      margin-top: 60px;
   }
 
   .tel__img,
   .email__img {
      padding-right: 36px;
   }

   .tel__img {
      width: 70px;
      height: auto;
   }

   .email__img {
      width: 90px;
      height: auto;
   }

   .tel__title,
   .email__title {
      font-size: 2.4rem;
   }

   .tel__topic,
   .email__topic {
      margin-top: 44px;
   }

   .tel__number,
   .email__address {
      font-size: 3.6rem;
   }
   
   .tel__txt,
   .email__txt {
      font-size: 1.8rem;
      margin-top: 44px;
   }
}
/* pc 769px */


/*=============================
 footer
 ==============================*/ 
 /* footer */
.footer {
   background-color: #252151;
   color: #fff;
   padding: 30px 5%;
}

.footer__title {
   display: flex;
   align-items: center;
   justify-content: center;
}

.footer__logo {
   width: 59px;
   height: auto;
   margin-right: 15px;
}

.footer__name {
   font-size: 20px;
   font-weight: 700;
   line-height: 1;
}

.footer__address {
   font-size: 1.3rem;
   margin-top: 22px;
   padding: 0 79px;
}

/* .footeNav__list {
   text-align: center;
} */

.footerNav__item {
   font-size: 1.6rem;
   font-weight: 700;
   line-height: 1;
   margin-top: 40px;
   padding: 0 79px;
}

.footerNav__subItem {
   color: #CFC9C9;
   font-size: 1.4rem;
   font-weight: 700;
   line-height: 2;
   padding: 15px 0 15px;
}

.btn__white {
   display: block;
   margin: 0;
}

.copy {
   margin-top: 105px;
   text-align: center;
}

.copy small {
   font-size: 1.2rem;
} 

/* footer pc */
@media screen and (min-width: 769px) {
   .footer__container{
      /* padding: 50px 7% 44px; */
      display: flex;
      justify-content: space-between;
   }
   
   .footer__left {
      display: block;
      width: 350px;
      margin-right: 10px;
   }

   .footer__title {
      justify-content: left;
      margin-top: 20px;
   }
   
   .footer__logo {
      width: 77px;
      height: auto;
   }
   .footer__name {
      white-space: nowrap;
   }
   
   .footer__address {
      color: var(--secondary-bg);
      font-size: 1.6rem;
      line-height: 1.6;
      margin-top: 54px;
      padding: 0;
      white-space: nowrap;
   }
   
   .footer__right {
      width: 50%;
      margin-top: 40px;
   }

   .footerNav {
      position: static;
   }
   
   .footerNav__list {
      display: flex;
      width: auto;
      height: auto;
      justify-content: space-between;
      align-items: flex-start;
      transition: transform 0.4s; 
   }

   .footerNav__item {
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1;
      margin-top: 10px;
      padding: 0;
      text-align: center;
   }

   .footerNav__item:nth-child(4) {
      margin-top: -8px;
   }
   
   .footerNav__subItem {
      display: block;
      font-size: 1.4rem;
      color: #CFC9C9;
      margin-top: 20px;
      padding-left: 5px;
   }

   .copy {
      margin-top: 105px;
      text-align: right;
      color: #CFC9C9;
   }
}
/* pc 769px */