@charset "utf-8";
/*====================================
	common
====================================*/
html{
	font-size: 15px;
}
body{
    min-width: 1250px;
	color: #222;
	line-height: 1.6;
    font-weight: 400;
	-webkit-text-size-adjust: 100%;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #fff;
}
img, embed, iframe:not(.wp-embedded-content), object, audio, video {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
a:hover{
    text-decoration: none !important;
}
textarea, input, select, label{ 
    
}
h1, h2, h3, h4{
    font-weight: 500;
}
.pc_only{
    display: block;
}
.sp_only{
    display: none;
}
.btn{
    text-align: center;
    width: 320px;
    font-size: 18px;
    font-weight: 600;
    margin: auto;
}
.btn a{
    height: 64px;
    line-height: 64px;;
    position: relative;
    display: block;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0px 3px 10px rgb(0 0 0 / 18%);
    -webkit-font-smoothing: antialiased
}
.btn a i{
    margin-right: 10px;
}
.btn a::after{
    transition: 0.5s;
}
@media only screen and (min-width: 768px){
    .btn a:hover::after{
        right: 15px;
    }
}

/* ピンク
--------------*/
.btn_pt-pink a{
    color: #fff;
    background: #ff4081;
}
/* 白
--------------*/
.btn_pt-white a{
    color: #1959c2;
    background: #fff;
    border: 1px solid #1959c2;
}
.btn_pt-white a::after{
    position: absolute;
    top: 0;
    right: 20px;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f105";
    display: block;
}
/* 青
--------------*/
.btn_pt-blue a{
    color: #fff;
    background: #1959c2;
}
.btn_pt-blue a::after{
    position: absolute;
    top: 0;
    right: 20px;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f105";
    display: block;
}
/* オレンジ
--------------*/
.btn_pt-orange a{
    color: #fff;
    background: #f57630;
}


.page_back a::after {
    right: auto;
    left: 20px;
    content: "\f104";
}
.page_back a:hover::after{
    right: auto;
    left: 15px;
}

@media only screen and (min-width: 768px){
    a.opacity:hover{
        opacity: 0.7;
        transition: all .3s;
    }
    a.opacity:hover img{
        opacity: 0.7;
        transition: all .3s;
    }
}

.grecaptcha-badge { visibility: hidden; }

/*====================================
    block
====================================*/
.wrap{
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.wrap-midi{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/*====================================
	said_bnr
====================================*/
.said_bnr{
    position: fixed;
    top: 260px;
    right: 0;
}
.said_bnr a{
    display: block;
}
.said_bnr a img{
    display: block;
}

/*====================================
	header
====================================*/
header{
    height: 120px;
    position: relative;
    width: 100%;
    background: #fff;
    box-shadow: 0 3px 20px rgb(0 0 0 / 10%);
}
.hed_nav{
    width: 100%;
    margin: 0 0px;
    padding: 0 30px;
    background: #fff;
    position: relative;
    display: flex;
}
.site-header{
    width: 100%;
    transition: .5s;
    z-index: 999;
    top: 0;
    transition: .5s;
    padding: 10px 0 0 0;
}
.site-header.transform{
    background: #fff;
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.06);
}
header .logo{
    width: 180px;
    padding-top: 28px;
    display: block;
    vertical-align: middle;
    margin-right: 45px;
}
header .logo img{
    width: 180px;
    vertical-align: middle;
    display: block;
}
.navigation{
    width: 100%;
    margin-top: 37px;
    display: flex;
}
.navigation .nav_list > li{
    display: inline-block;
    vertical-align: middle;
}
.u_line .h_btn{
    position: relative;
    z-index: 1;
}
.u_line .h_btn:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -46px;
  width: 0%;
  height: 3px;
  background: #1a59c2;
  z-index: -1;
  transition: all 0.4s;
}
.u_line:hover .h_btn:after{
  width: 100%;/*hover時に表示*/
}
.sub_menu .h_btn:after{
    display: none;
}
.h_btn{
    padding: 0;
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #000;
    text-decoration: none;
    padding-bottom: 20px;
}
.navigation .nav_list > li > a{
    padding: 0;
    display: block;
    font-size: 16px;
    font-weight: 500;
    padding: 0 10px;
    text-transform: none;
    color: #000;
    text-decoration: none;
}
.navigation .nav_list > li > a:hover{
    opacity: 1;
    color: #1a59c2;
}
.navigation .nav_list > li > span{
    margin-left: 1.2em;
}
 
.navigation .nav_list .sp_only{
    display: none;
}
.h_contact{
    margin: 0px 0px 0 0;
    display: inline-block;
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}
.h_contact ul{
   display: flex;
   align-content: center;
}
.h_contact .tel{
    padding-left: 20px;
    padding-top: 4px;
    display: flex;
}
.h_contact .tel a{
   font-family: 'Big Shoulders Display', cursive;
   background-size: 20px;
   padding-left: 0px;
   font-size: 24px;
   font-weight: 800;
   display: inline-block;
   line-height: 1;
   white-space: nowrap;
}
.h_contact .tel i{
    color: #007bc7;
    font-size: 20px;
    padding-right: 5px;
}
.h_contact .tel span{
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding-top: 3px;
}
.mail{
   color: #fff;
   font-size: 14px;
   margin: 0;
   width: 200px;
   height: 50px;
}
.mail a{
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: 600;
   text-align: left;
   height: 100%;
   padding: 5px 20px;
   line-height: 1.4;
   box-shadow: 0px 3px 8px rgb(236 44 109 / 25%);
}
.btn_pt-pink.mail a::after{
   display: none;
}
.mail a i{
   font-size: 20px;
   margin-right: 15px;
}
.hed_link{
    display: flex;
    justify-content: flex-end;
    background: #fff;
    position: absolute;
    top: 4px;
    right: 30px;
}
.hed_link li{
    display: inline-block;
    border-right: 1px solid #888;
    height: 16px;
    line-height: 16px;
    padding-right: 14px;
    margin-right: 14px;
}
.hed_link li:last-child{
    border: none;
    margin-right: 0;
    padding-right: 0;
}
.hed_link li.glink{
    
}
.hed_link li.glink i{
    color: #888;
    padding-left: 2px;
}
.hed_link a{
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
    text-align: right;
}

/*====================================
	footer
====================================*/
footer{
    background: #333;
}
.footer_cont{
    max-width: 1100px;
    margin: 0px auto 0;
    padding: 70px 0 0;
    color: #fff;
    font-size: 13px;
    font-weight: 300;
}
.footer_nav{
    display: flex;
    border-bottom: 1px solid #484848;
    padding-bottom: 90px;
}
.footer_nav .f_logo{
    width: 180px;
    width: 25%;
}
.footer_nav .f_logo img{
    width: 180px;
    margin-bottom: 8px;
}
.footer_nav .f_logo a{
    display: inline-block;
    text-decoration: underline;
    padding-bottom: 0px;
    margin-left: 5px;
}
.footer_nav ul{
    width: 25%;
}
.footer_nav ul .nav_top{
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 18px;
}
.footer_nav ul .nav_sub{
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.footer_cont .copy{
    text-align: right;
    padding: 15px 0;
    color: #e4e4e4;
    font-weight: 200;
}

.fv_badge {
    position: fixed;
    top: 30vh;
    right: 0;
    width: 120px;
    z-index: 99999;
}
.fv_badge li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.fv_badge li+li {
    margin-top: 10px;
}

.pagetop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
}
.pagetop a {
  display: block;
  width: 46px;
  height: 46px;
  background: rgba(0,0,0,0.3);
  border-radius: 50px;
  text-align: center;
  color: #fff;
  font-size: 19px;
  text-decoration: none;
  line-height: 46px;
}

/* 
====================================
★以下SP画面
common
header
FOOTRE
====================================
*/
@media only screen and (max-width: 1400px){
   header .logo {
      display: block;
      vertical-align: middle;
      margin-right: 25px;
   }
   header .logo img {
      width: 100%;
      vertical-align: middle;
      display: block;
   }
   .h_contact .tel{
      padding-left: 15px;
   }
   .navigation .nav_list > li > a{
      font-size: 15px;
      padding: 0 7px;
   }
}/* 1400px */

@media only screen and (max-width: 767px){
   /*====================================
      01.common
   ====================================*/
   html{
       font-size: 14px;
       }
   body{
       min-width: initial;
      }
   .pc_only{
       display: none;
   }
   .sp_only{
       display: block;
   }
   .btn {
       text-align: center;
       width: 88%;
       font-size: 15px;
       font-weight: 700;
       margin: auto;
   }
   .btn a {
       position: relative;
       height: 55px;
       line-height: 55px;
       position: relative;
       display: block;
       border-radius: 50px;
       text-decoration: none;
       box-shadow: 0px 3px 8px rgb(0 0 0 / 12%);
       transition: all .3s;
   }
   .btn a i{
       position: absolute;
       left: 25px;
       top: 0;
       bottom: 0;
       margin: auto;
       font-size: 20px;
       width: 20px;
       height: 20px;
   }
   .btn_pt01 a {
       color: #fff;
       background: #ff4081;
   }
   .btn_pt04 a {
       color: #fff;
       background: #1959c2;
   }
   .page_back a::after {
       position: absolute;
       top: 0;
       left: 20px;
       font-family: "Font Awesome 5 Free";
       font-weight: bold;
       content: "\f104";
       display: block;
   }

   /*====================================
       block
   ====================================*/
   .wrap, .wrap-midi{
       width: auto;
       margin-left: 25px;
       margin-right: 25px;
   }

   /*====================================
      02.header
   ====================================*/   
   header{
       margin: 0 0px;
       padding: 0 20px;
       height: 60px;
       position: relative;
       display: flex;
       box-shadow: 0px 5px 10px -5px rgba(25,89,194,0.1);
   }
   .hed_nav {
       width: 100%;
       margin: 0 0px;
       padding: 0 20px;
       background: #fff;
       position: relative;
       display: flex;
       align-items: center;
   }
   .site-header{
       width: 100%;
       transition: .5s;
       z-index: 999;
       position: fixed;
       top: 0;
       transition: .5s;
       padding: 0;
   }
   header .logo{
       width: 34%;
       max-width: 135px;
       padding-top: 0px;
       display: block;
       vertical-align: middle;
   }
   header .logo a{
       width: 100%;
       display: block;
   }
   header .logo img {
       width: 100%;
       min-width: 120px;
       vertical-align: middle;
       display: block;
   }
   .nav-button{
       z-index: 20;
       position: absolute;
       width: 30px;
       height: 21px;
       top:19px;
       right: 20px;
   }
   .navigation{
       vertical-align: middle;
       margin-top: 60px;
       margin-left: auto;
       background: #fff;
       padding-top: 0px;
       width: 100%;
       height: 100%;
       overflow: scroll;
       display: none;
       border-top: 1px solid #ccc;
   }
   .navigation.open {
       display: block;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100vh;
       overflow-y: scroll;
   }
   .navigation .nav_list li ul{
       display: block;
       position: relative;
       background-color: #fff;
       width: 100%;
       left: 20px;
       top: 10px;
       margin-left: 0px;
       padding: 0px 0px 10px;
       z-index: 99;
       font-weight: 600;
   }
   .navigation .nav_list > li {
       display: block;
       width: 100%;
       margin-right: 0px;
       vertical-align: middle;
       border-bottom: 1px solid #ddd;
   }
   .navigation .nav_list > li a{
       padding: 3.5% 0px 3.5% 25px;
       font-weight: 500;
       font-size: unset;
       position: relative;
       }
   .navigation .nav_list > li a::before{
       content: '\f105';
       font-family: 'FontAwesome';
       font-size: 18px;
       color: #1959c2;
       position: absolute;
       right:30px;
       }
       @media only screen and (max-width: 360px){
           .navigation{
               font-size: 13px;
           }
           .navigation .nav_list > li a{
               padding: 3.6% 0px 3.6% 25px;
           }
       }
   .h_btn {
       padding: 0;
       display: block;
       font-size: 13px;
       color: #0e7bc7;
       font-weight: 500;
       padding-bottom: 10px;
       padding: 0;
       margin: 0 0px;
   }
   .u_line{
       margin-bottom: 0px;
       padding: 0 0px 0px;
       }
   .u_line .h_btn{
       position: relative;
     z-index: 1;
       padding-bottom: 0;
   }
   .u_line .btn_line{
       border-bottom: 1px solid #79c3c7;
       }
   .u_line .h_btn:after{
       content: '';
       display: none;
   }
   .u_line:hover .h_btn:after{
       display: none;
   }
   .navigation ul > li > span{
       margin-left: 0;
       }
   .navigation ul .sp_only{
       display: block;
   }
   /*メニューボタンのエフェクト*/
     .nav-button,
     .nav-button span {
       display: inline-block;
       transition: all 0.4s;
       box-sizing: border-box;
     }
     .nav-button span {
       position: absolute;
       left: 0;
       width: 100%;
       height: 2px;
       background-color: #1959c3;
       border-radius: 4px;
     }
     .nav-button span:nth-of-type(1) {
       top: 0;
     }
     .nav-button span:nth-of-type(2) {
       top: 9px;
     }
     .nav-button span:nth-of-type(3) {
       bottom: 0;
     }
     .nav-button.active span:nth-of-type(1) {
       -webkit-transform: translateY(8.9px) rotate(-45deg);
       transform: translateY(8.9px) rotate(-45deg);
     }
     .nav-button.active span:nth-of-type(2) {
       opacity: 0;
     }
     .nav-button.active span:nth-of-type(3) {
       -webkit-transform: translateY(-8.9px) rotate(45deg);
       transform: translateY(-8.9px) rotate(45deg);
     }
   .hed_link {
       display: block;
       justify-content: flex-end;
       background: #fff;
       position: relative;
       top: 0px;
       right: 0px;
       margin: 4% 0;
   }
   .hed_link li{
       display: block;
       border-right: none;
       height: auto;
       line-height: 16px;
       padding-right: 0px;
       margin-right: 0px;
   }
   .hed_link li:last-child{
       border: none;
       margin-right: 0;
       padding-right: 0;
   }
   .hed_link li.glink a{
       background: url(../img/hp/icon_glink.png) no-repeat right center;
       background-size:12px;
       padding-right: 20px;
   }
   .hed_link a{
       font-size: unset;
       padding: 0px 0 0px 25px;
       margin: 7px 0;
       font-weight: 500;
       display: inline-block;
       text-align: right;
       font-size: 12px;
   }
   .hed_link a::before{
       content: "ー";
       color: #bcbcbc;
       padding-right: 5px;
       }
   .h_contact{
       margin: 0px 0px 0 0;
       display: inline-block;
       margin-left: auto;
       display: flex;
       justify-content: flex-end;
       width: 100%;
   }
   .h_contact ul{
       display: flex;
       width: 100%;
   }
   .h_contact .tel,
   .h_contact .mail{
       padding: 0;
       width: 50%;
       color: #fff;
       font-size: unset;
       margin: 0;
       height: auto;
       display: block;
       position: relative;
   }
   .h_contact .tel{
       background: #1a59c2;
       order: 1;
   }
   .h_contact .mail{
       order: 2;
       background:#ff4181;
   }
   .h_contact .tel a,
   .h_contact .mail a{
       display: block;
       height: 100%;
       text-align: left;
       padding: 12px 0 10px 55px;
       position: relative;
       border-radius: 0;
       font-weight: 400;
       box-shadow: none;
   }
   .h_contact .tel i,
   .h_contact .mail a i,
   .h_webinar i{
       position: absolute;
       left: 18px;
       top: 0;
       bottom: 0;
       margin: auto;
       color: #fff;
       width: 20px;
       height: 20px;
       font-size: 20px;
   }
   .h_contact .tel a{
       font-size: 16px;
       font-weight: 800;
       display: block;
       line-height: 1;
   }
   .h_contact .tel span{
       font-size: 12px;
       font-weight: 500;
       padding-left: 0px;
   }
   .h_contact .mail a{
       line-height: 1.3;
   }

   .m_pc_only{
       display: none;
   }
   .h_webinar ul{
       display: flex;
       color: #1a59c2;
       width: 100%;
       border-bottom: 1px solid #1a59c2;
       }
   .h_webinar ul li{
       box-sizing: border-box;
       width: 100%;
       }
   .h_webinar ul li:nth-of-type(2n-1) a{
       border-right: 1px solid #1a59c2;
   }
   .h_webinar ul li a{
       position: relative;
       display: block;
       font-weight: 500;
       padding: 20px 0 20px 55px; 
   }
   .h_webinar i{
       color: #1a59c2;
   }

       .fa-arrow-up-right-from-square:before, .fa-external-link:before{
           display: none;
       }
   /*====================================
      footer
   ====================================*/
   footer{
       background: #333;
   }
   .footer_cont{
       max-width: 1100px;
       margin: 0px 20px 0;
       padding: 40px 0 0;
       color: #fff;
       font-size: 12px;
       font-weight: 200;
   }
   .footer_nav{
       display: flex;
       flex-wrap: wrap;
       border-bottom: 1px solid #484848;
       padding-bottom: 40px;
   }
   .footer_nav .f_logo{
       width: 100%;
       margin-bottom: 40px;
   }
   .footer_nav .f_logo img{
       width: 150px;
       margin-bottom: 0px;
   }
   .footer_nav .f_logo p{
       display: inline-block;
       font-size: 11px;
       margin-left: 6px;
   }
   .footer_nav .f_logo a{
       padding-bottom: 0px;
       margin-left: 5px;
   }
   .footer_nav .f_logo a:hover{
       border-bottom: none;
   }
   .footer_nav ul{
       width: 50%;
   }
   .footer_nav ul .nav_top{
       font-size: 12px;
       font-weight: 500;
       margin-bottom: 18px;
   }
   .footer_nav ul .nav_sub{
       margin-bottom: 12px;
       padding-left: 10px;
       font-weight: 200;
   }
   .footer_cont .copy{
       font-size: 12px;
       text-align: center;
       padding: 15px 0;
       color: #e4e4e4;
       font-weight: 200;
   }
   .pagetop {
     bottom: 20px;
     right: 15px;
   }
   .pagetop a {
     width: 36px;
     height: 36px;
     border-radius: 50px;
     font-size: 16px;
     line-height: 36px;
   }
}/* 767px*/

@media only screen and (max-width: 380px){
   .navigation .nav_list > li a {
      padding: 3.2% 0px 3.2% 25px;
   }
   .hed_link{
      margin: 3% 0;
   }
}


/*====================================
    common
====================================*/
.text_red{
    color: #e83a3a;
}
.back_blue{
    background: #edf8fc;
}
/* block
--------------------------------*/
.block{
    padding-top: 60px;
    padding-bottom: 100px;
}

.pankuzu{
    margin: 15px auto 0;
    font-size: 13px;
    max-width: 1100px;
}
.pankuzu span > span span{
    padding-left: 4px;
}
.pankuzu span > span a{
    color: #000;
    padding-bottom: 2px;
    margin-right: 4px;
    display: inline-block;
}
.pankuzu span > span a:hover{
    border: none;
    padding-bottom: 3px;
}
.pankuzu .breadcrumb_last{
    color: #666;
}
@media only screen and (max-width: 767px){
    .pankuzu{
        margin: 15px 20px 0;
        font-size: 11px;
        max-width: 1100px;
    }
}

/* sectTit
--------------------------------*/
.sectTit{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
    margin: 0 0 35px;
}
.sectTit img{
    width: 170px;
    margin-right: 8px;
}
.sectTit-messages{
    text-align: center;
    margin-top: -25px;
}
@media only screen and (max-width: 767px){

    .sectTit{
        font-size: 22px;
        margin: 0 0 30px;
        position: relative;
    }
    .sectTit::after {
        display: inline-block;
        position: absolute;
        content: '';
        bottom: -10px;
        left: 50%;
        width: 60px;
        height: 3px;
        border-radius: 3px;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translate(-50%);
        background-color: #1959c2;
    }
    .sectTit img{
        width: 120px;
    }
    .sectTit-messages{
        margin-top: -8px;
    }
}


/*====================================
    動き
====================================*/

/*親に「.delayScroll」を付けると順番に表示*/
.fadeUp {
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*親に「.fadein」でふわっと表示*/
.fadein {
    opacity : 0;
    transform : translate(0, 80px);
    transition:all 0.8s;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}