/*
Theme Name: UPF-LP2
*/

@charset "utf-8";

img{max-width: 100%;}
a{text-decoration: none;}
a:hover{text-decoration: none;}
p{margin-bottom: 0;}
body{font-size: 16px; font-family: "游ゴシック体" , Yu Gothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif; color: #2c2c2c;}
.pad_block{display: none;}
ul,li{padding: 0; margin: 0; list-style: none;}
.mb80{margin-bottom: 80px;}
.font-weight-bold{font-weight: bold;}

/*--- header ---*/
header{position: fixed; top: 0; left: 0; width: 100%; z-index: 10; background-color: rgba(255, 255, 255, 0.8);}
.head_inner{padding: 20px 30px; display: flex; justify-content: space-between; align-items: center;}
.wrp_logo{display: flex;align-items: center;width: 35%;}
.wrp_logo a{display: block;}
.wrp_logo .logo{margin-right: 5px;}
.wrp_logo .logo img{max-width: 250px;}
.wrp_logo .p_mark img{width: 45px;}
.head_right{display: flex; align-items: center;}
.head_right a{margin-left: 15px;}
.head_right a:first-of-type{margin-left: 0;}
.head_right .tel{color: #103f97;}
.head_right .tel .main{font-size: 24px; font-weight: bold; letter-spacing: 2px; text-align: right;}
.head_right .tel .main i{margin-right: 5px; margin-left: 0;}
.head_right .tel .sub{font-size: 12px; padding-left: 33px;}
.head_right .w_btn{border: 2px solid #103f97; color: #103f97; font-weight: bold; padding: 10px 30px; border-radius: 30px;}
.head_right .r_btn{border: 2px solid #e6000f; background-color: #e6000f; color: #fff; font-weight: bold; padding: 10px 30px; border-radius: 30px;}
.head_right .r_btn i{margin-left: 0; margin-right: 5px;}

/*--- mv ---*/
.mv{padding: 100px 0 0; position: relative; margin-bottom: 70px;}
.mv_main{text-align: center;}
.mv .cloud{max-width: 420px; margin-bottom: 20px;}
.mv h1{margin-bottom: 20px; font-size: 42px; font-weight: bold; letter-spacing: 2px;}
.mv .red{color: #e6000f; font-size: 45px;}
.mv .small{font-size: 33px;}
.mv .upf{max-width: 190px;}
.mv .hand{max-width: 630px;}
.mv .lc_box{position: absolute; left: 0; bottom: 20%; text-align: right; width: 300px;}
.mv .lc_box .ct{border-radius: 50%; border: 1px solid #103f97; color: #939393; font-weight: bold; margin-left: auto; text-align: center; background-color: transparent; display: inline-block; padding: 20px 20px; position: relative; z-index: 2;}
.mv .lc_box .df_c{background-color: #E4F2FF; border-radius: 50%; color: #103f97; text-align: center; font-weight: bold; font-size: 21px; padding: 55px 30px; display: inline-block; line-height: 1.2; margin-right: 20px; margin-top: -35px;}
.mv .lc_box .df_c .yellow{color: #FEC900; font-size: 16px; margin-bottom: 7px;}
.mv .lc_box .df_c:last-of-type{margin-right: 100px;}
.mv .wrp_rt_box{position: absolute; top: 30%; right: 10%;}
.mv .wrp_rt_box .rt_box{background-color: #E4F2FF; border-radius: 50%; color: #103f97; text-align: center; font-weight: bold; font-size: 18px; padding: 60px 20px; position: relative;}
.mv .wrp_rt_box .rt_box::before{content: ''; position: absolute; bottom: 30px; left: -5px; border-right: 15px solid transparent; border-bottom: 20px solid #E4F2FF; border-left: 15px solid transparent;}
.mv .df_c2{background-color: #E4F2FF; border-radius: 50%; color: #103f97; text-align: center; font-weight: bold; font-size: 18px; padding: 80px 10px; position: absolute; right: 0; bottom: 0;}
.bt_mv{display: flex; justify-content: flex-start; max-width: 1000px; margin: 0 auto; margin-bottom: 40px;}
.bt_mv .item{width: 31%; margin: 0 1%; background-image: url(assets/images/cloud2.png); background-size: contain; background-repeat: no-repeat; background-position: center; text-align: center; font-weight: bold; font-size: 21px; padding: 60px 0 40px;}

/*--- section ---*/
.sec_inner{padding: 60px 0;}
.sec_tit{font-size: 33px; font-weight: bold; color: #103f97; padding-bottom: 25px; margin-bottom: 50px; position: relative; text-align: center;}
.sec_tit::after{content: ''; border-bottom: 5px solid #FFEA2A; width: 100px; position: absolute; bottom: 0; left: 0; right: 0; margin: auto;}
.sec_h3{font-size: 30px; text-align: center; font-weight: bold; color: #103f97; margin-bottom: 40px;}
.sec_text{text-align: center; margin-bottom: 40px;}

/* lr_box */
.lr_box{position: relative; padding: 40px 0;}
.lr_box::before{content: ''; position: absolute; background-color: #96D6F8; width: 50%; height: 100%; top: 0; left: 0; z-index: -1;}
.rev .lr_box::before{left: auto; right: 0;}
.lr_box .sec_tit{margin-bottom: 30px; text-align: left;}
.lr_box .sec_tit::after{left: 0; right: auto;}
.lr_box .box{display: flex; align-items: center;}
.rev .lr_box .box{flex-direction: row-reverse;}
.lr_box .box .item_img{width: 50%; padding-right: 40px; text-align: right;}
.rev .lr_box .box .item_img{text-align: left; padding-right: 0; padding-left: 40px;}
.lr_box .box .item_img img{max-width: 400px;}
.lr_box .box .item{width: 50%; padding: 30px;}
.lr_box .box .item .small{font-size: 14px;}

/*--- flow ---*/
.bg_blue{background-color: #E4F2FF;}
.wrp_flow{display: flex; flex-wrap: wrap;}
.wrp_flow .sum{width: 90%; font-size: 24px; color: #103f97; position: relative; text-align: center; font-weight: bold; margin-bottom: 30px;}
.wrp_flow .bd::before{content: ''; border-left: 3px solid #103f97; top: 17px; left: 0; height: 20px; width: 3px; position: absolute;}
.wrp_flow .bd::after{content: ''; border-right: 3px solid #103f97; top: 17px; right: 0; height: 20px; width: 3px; position: absolute;}
.wrp_flow .bod{border-top: solid 3px #103f97; width: 45%; position: absolute; top: 0; bottom: 0; height: 3px; margin: auto;}
.wrp_flow .bod.left{left: 0;}
.wrp_flow .bod.right{right: 0;}
.wrp_flow .wrp_time{width: 90%; display: flex; margin-bottom: 30px; justify-content: space-between;}
.wrp_flow .wrp_time .time{position: relative; font-size: 21px; color: #103f97; text-align: center; font-weight: bold;}
.wrp_flow .wrp_time .time .bod{width: 30%;}
.wrp_flow .wrp_time .time.first{width: 23%;}
.wrp_flow .wrp_time .time.second{width: 40%;}
.wrp_flow .wrp_time .time.third{width: 34%;}
.wrp_flow .wrp_con{width: 100%; display: flex;}
.wrp_flow .wrp_con .box{margin-right: 1.2%;}
.wrp_flow .wrp_con .box > ul {display: none;}
.wrp_flow .wrp_con .box.first{width: 10.7%;}
.wrp_flow .wrp_con .box.second{width: 9%;}
.wrp_flow .wrp_con .box.third{width: 36%;}
.wrp_flow .wrp_con .box.four{width: 30.7%;}
.wrp_flow .wrp_con .box.last{width: 8.8%; margin-right: 0;}
.wrp_flow .wrp_con .box .main{background-color: #3F72D1; color: #fff; text-align: center; padding: 30px 0; position: relative; margin-bottom: 20px; font-size: 21px; font-weight: 600; margin-right: 15px;}
.wrp_flow .wrp_con .box .main::after{content: ''; border-top: 46px solid transparent; border-bottom: 46px solid transparent; border-left: 15px solid #3F72D1; position: absolute; top: 0; right: -15px;}
.wrp_flow .wrp_con .box.last .main{background-color: #00B0F0; margin-right: 0;}
.wrp_flow .wrp_con .box.last .main::after{display: none;}
.wrp_flow .wrp_con .box ul li{padding-left: 15px; position: relative; color: #0071B2; margin-bottom: 1px; font-size: 13px;}
.wrp_flow .wrp_con .box ul li::before{content: '・'; top: 0; left: 0; position: absolute;}
.wrp_flow .wrp_con .box.last ul li{padding-left: 0;}
.wrp_flow .wrp_con .box.last ul li::before{display: none;}

/*--- wrp_pria ---*/
.wrp_pria{margin-bottom: 70px;}
.wrp_pria .box{margin-bottom: 20px; display: flex;}
.wrp_pria .box .l_item{width: 30%; text-align: center; position: relative; color: #fff; font-size: 24px; font-weight: 600; background-size: contain; background-position: center; background-repeat: no-repeat; padding-top: 70px;}
.wrp_pria .box .l_item.first{background-image: url(assets/images/tri01.png); padding-top: 140px;}
.wrp_pria .box .l_item.second{background-image: url(assets/images/tri02.png);}
.wrp_pria .box .l_item.third{background-image: url(assets/images/tri03.png);}
.wrp_pria .box .r_item{width: 70%; padding-bottom: 40px; padding-top: 10px; border-bottom: 2px solid #F6CB45; display: flex;}
.wrp_pria .box:last-of-type .r_item{border-bottom: 0px;}
.wrp_pria .box .r_item .title{width: 33%;}
.wrp_pria .box .r_item .title .main{font-size: 24px; font-weight: 600;}
.wrp_pria .box .r_item .title .sub{font-size: 14px; font-weight: bold;}
.wrp_pria .box:nth-of-type(1) .r_item .title .main{color: #00B0F0;}
.wrp_pria .box:nth-of-type(2) .r_item .title .main{color: #3F72D1;}
.wrp_pria .box:nth-of-type(3) .r_item .title .main{color: #103F97;}
.wrp_pria .box .r_item .content{width: 67%; line-height: 1.7;}

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

/* card */
.mb70{margin-bottom: 70px;}
.d_card{background-color: #3F72D1; padding: 30px 30px; color: #fff; border-radius: 30px 0 0 0;}
.d_card:nth-of-type(2n){background-color: #E4F2FF; color: #333333;}
.d_card .main{text-align: center; font-size: 21px; font-weight: 600; padding-bottom: 20px; margin-bottom: 20px; position: relative;}
.d_card .main::after{content: ''; border-bottom: 1px solid #FFEA2A; width: 50px; position: absolute; bottom: 0; left: 0; right: 0; margin: auto;}
.d_card .item_img{text-align: center; margin-bottom: 30px;}
.d_card .item_img img{max-width: 140px;}
.c_box{display: flex; justify-content: center;}
.c_box .c_card{width: 250px; background-color: #E4F2FF; text-align: center; padding: 40px 0; border-radius: 50%; margin: 0 15px;}
.c_box .c_card .main{font-weight: 600; font-size: 21px; margin-bottom: 5px;}
.c_box .c_card .sub{font-size: 14px; color: #103F97; margin-bottom: 15px;}
.c_box .c_card img{max-height: 50px;}

/*--- top-contact ---*/
.caution { font-size: 14px;}
#top-contact .caution { margin: 0 auto;}
#top-contact input, #top-contact textarea {width: 100%; border-radius: 7px; border: solid 1px #a9a9a9; padding: 5px 20px;}
#top-contact div div {margin: 0 auto;}
#top-contact .wpcf7-form{max-width: 900px; margin: 0 auto;}
#top-contact  .wpcf7-submit{padding: 20px; background-color: #E6000F; color: #FFF; border: 0; font-size: 20px; font-weight: bold; font-family: FontAwesome;}
#top-contact  .wpcf7-submit:hover{color:#E6000F; background: #fff; border: 3px solid;}
#top-contact  .wpcf7-submit::before{content: "\f164"; font-weight: 400; font-family: "Font Awesome 5 Free";padding-right: 10px;}
#top-contact h2 + p span { color:#E6000F; font-weight: bold;}
#top-contact form p label{ width: 100%; color:#103F97; font-weight: bold; line-height: 3;}
#top-contact form p label span { color:#E6000F;}
#top-contact .wpcf7-spinner{display: block; margin: 0 auto;}
#top-contact form > p{margin-bottom:20px;}

/*--- top-contact-step ---*/
#top-contact-step ul li > span{color: #FFF;}
#top-contact-step ul li > span:first-child{background-color: #D0D9EB;}
#top-contact-step ul li:nth-child(2) span:first-child{background-color: #A1B3D6;}
#top-contact-step ul li:nth-child(3) span:first-child{background-color: #6E8BC0;}
#top-contact-step ul li:nth-child(4) span:first-child{background-color: #4066AC;}
#top-contact-step ul li:nth-child(5) span:first-child{background-color: #103E96;}
#top-contact-step h3{ font-size: 16px;}
#top-contact-step ul p{ font-size: 14px;text-align:left;}
#top-contact-step ul li {text-align:center;}

.thanks-message h1 { padding-bottom: 20px; color: #103E96; font-weight: bold;}
.thanks-message div{ margin: 0 auto; padding-top: 200px; text-align: center;}

/*--- footer ---*/
.footer-logo {width:90px;}
.foot-inner {padding: 60px 0 30px; background-color: #F8F8F8; text-align: center; font-size: 14px; font-weight: bold;}
.foot-inner ul { width: 500px; margin:0 auto; }
.foot-inner ul li a { color: #103F97;}
.foot-inner ul li a:hover{color: #CAA846;}
.foot-inner ul li ul li { text-align: left;}
.copy{color: #fff; font-size: 12px; padding: 15px 0 15px; background-color: #103F97; text-align: center; line-height: 1;}
.caution-center{
  text-align: center;
}
  
/*------PC2------*/
@media only screen and (max-width: 1400px) {

  .mv .lc_box{width: 260px; bottom: 15%;}
  .mv .lc_box .ct{font-size: 14px; padding: 10px 10px;}
  .mv .lc_box .df_c{padding: 40px 20px; font-size: 18px;}
  .mv .lc_box .df_c .yellow{font-size: 14px;}
  .mv .wrp_rt_box .rt_box{font-size: 16px; padding: 50px 15px;}

}

/*---PAD pro---*/
@media only screen and (max-width: 1050px) {

  .head_inner{padding: 20px 20px;}
  .wrp_logo .logo img{max-width: 150px;}
  .wrp_logo .jqa{max-width: 60px;}
  .wrp_logo .p_mark img{width: 40px;}
  .head_right a{margin-left: 10px;}
  .head_right .tel .main{font-size: 18px;}
  .head_right .w_btn,.head_right .r_btn{font-size: 14px; padding: 10px 20px;}

  .mv .cloud{max-width: 280px;}
  .mv h1{font-size: 33px;}
  .mv .red{font-size: 39px;}
  .mv .upf{max-width: 160px;}
  .mv .hand{max-width: 500px;}
  .mv .lc_box{width: 245px;}
  .mv .lc_box .df_c{font-size: 16px;}
  .mv .lc_box .df_c .yellow{font-size: 12px;}
  .mv .lc_box .ct{font-size: 12px;}
  .mv .wrp_rt_box{right: 0;}
  .mv .df_c2{font-size: 16px; padding: 70px 10px;}
  .bt_mv .item{font-size: 18px;}

  .wrp_flow .wrp_time .time{font-size: 16px;}
  .wrp_flow .sum{font-size: 18px;}
  .wrp_flow .wrp_con .box .main{font-size: 18px;}
  .wrp_flow .wrp_con .box .main::after{border-top: 43px solid transparent; border-bottom: 43px solid transparent;}
  .wrp_flow .bd::before{top: 14px;}
  .wrp_flow .bd::after{top: 14px;}

  .wrp_pria .box .l_item{width: 35%;}
  .wrp_pria .box .r_item{width: 65%;}
  .wrp_pria .box .r_item .title .main{font-size: 21px;}
  .wrp_pria .box .r_item .title .sub{font-size: 14px;}
  .wrp_pria .box .r_item .content{font-size: 14px;}

  .grid-4{grid-template-columns: 1fr 1fr;}
  #wpcf7-f8-p11-o1{padding-right: 15px; padding-left: 15px;}

  #top-contact h2 img{width: 130px;}
  #top-contact div div{width: 100%;}
  #top-contact input, #top-contact textarea{width: 100%;}
  #top-contact .wpcf7-submit{font-size: 16px;}
  
}
  
/*---PAD---*/
@media only screen and (max-width: 880px) {

  body{font-size: 14px;}
  .pad_block{display: block;}

  .head_right .w_btn, .head_right .r_btn{font-size: 12px; padding: 10px 15px;}
  .head_right .tel .main{font-size: 14px;}
  .head_right .tel .sub{font-size: 8px;padding-left: 27px;}

  .mv{margin-bottom: 40px; padding-bottom: 60px;}
  .mv .cloud{font-size: 24px; margin-bottom: 15px;}
  .mv h1{font-size: 30px;}
  .mv .red{font-size: 36px;}
  .mv .wrp_rt_box{top: 25%;}
  .mv .wrp_rt_box .rt_box{font-size: 14px;}
  .mv .wrp_rt_box .rt_box::before{bottom: 5px; left: 20px; border-right: 25px solid transparent; border-bottom: 20px solid #E4F2FF; border-left: 0px solid transparent;}

  .mv .lc_box{width: 180px; bottom: 0%;}
  .mv .lc_box .df_c:last-of-type{margin-right: 50px;}
  .mv .lc_box .df_c{margin-top: -15px; font-size: 14px; padding: 35px 20px;}
  .mv .lc_box .df_c .yellow{font-size: 10px;}
  .mv .hand{max-width: 330px;}
  .mv .df_c2{font-size: 14px;}

  .bt_mv .item{font-size: 16px;}
  .lr_box{padding: 15px 0;}
  .lr_box .box .item{padding: 20px;}
  .lr_box .box .item_img img{max-width: 250px;}

  #top-contact .wpcf7-submit{font-size: 14px;}

  .sec_tit{font-size: 27px;}
  .sec_tit::after{width: 70px; border-bottom: 3px solid #FFEA2A;}
  .sec_h3{font-size: 24px;}

  .wrp_flow{display: none;}
  .bg_blue .pad_block{text-align: center;}
  .bg_blue .pad_block img{max-width: 400px;}

  .wrp_pria .box{justify-content: space-between; margin-bottom: 10px;}
  .wrp_pria .box .r_item{flex-wrap: wrap;}
  .wrp_pria .box .r_item .title{width: 100%; margin-bottom: 15px;}
  .wrp_pria .box .r_item .content{width: 100%;}
  .wrp_pria .box .l_item{width: 48%;}
  .wrp_pria .box .r_item{width: 48%; padding-bottom: 20px;}
  .wrp_pria .box .l_item.second{background-size: 80%;}
  .wrp_pria .box .l_item.third{padding-top: 100px;}

  .c_box .c_card .main{font-size: 16px;}
  .c_box .c_card{padding: 35px 0; margin: 0 15px;}
  

}
  
/*---Sm---*/
@media only screen and (max-width: 767px) {

  .head_right .tel{display: none;}
  .head_right .w_btn{display: none;}
  .grid-4{grid-template-columns: 1fr;}

  .mv{padding-bottom: 0; margin-bottom: 0;}
  .mv > div{display: none;}
  .bt_mv{margin-bottom: 0;}
  .bt_mv .item{font-size: 10px; padding: 50px 0 40px;}
  .sec_inner{padding: 40px 0;}
  .sec_tit{font-size: 24px;}
  .sec_h3{font-size: 21px;}

  .head_inner{padding: 15px 10px;}
  .wrp_logo .logo img{max-width: 100px;}
  .head_right{justify-content: flex-end;}
  .head_right .r_btn{border: 0px solid #e6000f; background-color: transparent; color: #e6000f; font-weight: bold; padding: 0px; border-radius: 0px; font-size: 8px; text-align: center; margin-right: 0;}
  .head_right .r_btn i{margin-right: 0px; font-size: 24px;}
  .wrp_logo .jqa{max-width: 50px;}
  .wrp_logo .p_mark img{width: 30px;}

  .lr_box .sec_tit{text-align: center;}
  .lr_box .sec_tit::after{left: 0; right: 0;}
  .lr_box .box{flex-wrap: wrap-reverse;}
  .lr_box .box .item_img{width: 100%; padding-right: 0; text-align: center;}
  .lr_box .box .item{width: 100%; padding: 0 0px; margin-bottom: 50px;}
  .lr_box::before{width: 100%; height: 280px; top: auto; bottom: 0;}
  .rev .lr_box .box .item_img{padding-left: 0; text-align: center;}

  .wrp_pria .box{flex-wrap: wrap; margin-bottom: 30px;}
  .wrp_pria .box .l_item{width: 100%; margin-bottom: 20px; padding-top: 70px; padding-bottom: 60px;}
  .wrp_pria .box .r_item{width: 100%;}
  .wrp_pria .box .l_item.first{padding-top: 180px; padding-bottom: 20px;}
  .wrp_pria .box .l_item.second{background-size: 90%;}
  .wrp_pria .box .l_item.third{padding-top: 70px;}

  .d_card{padding: 20px 20px;}
  .d_card .item_img img{max-width: 120px;}

  .c_box{flex-wrap: wrap;}
  .c_box .c_card{margin-bottom: 20px; padding: 45px 0;}
  .c_box .c_card:last-of-type{margin-bottom: 0;}

  .bg_blue .pad_block img{max-width: 100%;}

  /*--- top-contact ---*/
  #top-contact h2 + p{font-size: 14px;}
  #top-contact .caution{width: auto;}
  #top-contact .wpcf7-submit{font-size: 14px;}
  #top-contact-step ul li img{width: 60%;}

  .thanks-message h1 { font-size: 20px;}
  .thanks-message p { font-size: 14px;}

  .foot-inner ul{width: auto;}
  .foot-inner{padding: 5  0px 0;}
  .foot-inner ul{ flex-direction: column;}
  .foot-inner ul li { text-align: center; font-size:13px;}
  .foot-inner ul li ul li { text-align: center;}
  .foot-inner ul li ul li { display: inline; padding: 0 10px;}
  .copy div div span:first-child {margin-bottom: 15px; text-align: center;}
  .copy div div span:last-child {text-align: center;}


  #top-contact .caution{padding-right: 15px; padding-left: 15px;}
  .main i{
    display: none;
  }

  #top-contact{
    padding-right: var(--bs-gutter-x, .75rem);
    padding-left: var(--bs-gutter-x, .75rem);    
  }
}
  
/*---Sm small---*/
@media only screen and (max-width: 350px) {


}

.tab_on {
  display: none;
}

@media screen and (max-width: 1180px) {
  .tab_on {
    display: block;
  }
  .head_right .tel .sub{
    text-align: right;
  }
  .head_right .tel{
    display: block;
  }
}