/*
Theme Name: UPF-LP
*/

@charset "utf-8";

img{max-width: 100%;}
a{text-decoration: none;}
a:hover{text-decoration: none;}
body{font-size: 16px; font-family: "游ゴシック体" , Yu Gothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif; color: #383838; position: relative; letter-spacing: .05em;}
.noto{font-family: 'Noto Serif JP', serif;}
.container{max-width: 1350px;}
.pad_block{display: none;}
section{overflow: hidden;}
ul,li{padding: 0; margin: 0; list-style: none;}
p{line-height: 1.8em;}

/*grid*/
.grid{display: grid; grid-gap: 20px;}
.grid-2{grid-template-columns: 1fr 1fr;}
.grid-3{grid-template-columns: 1fr 1fr 1fr;}
.grid-4{grid-template-columns: 1fr 1fr 1fr 1fr;}
.grid-5{grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}

/*--- ★common-color ---*/
.accentcolor{color:#CAA846;}

/*--- header ---*/
.head{width: 100%; padding: 30px 30px;background:rgba(255,255,255,0.7); position:fixed; z-index: 1000;}
#header.fixed .head {background:rgba(255,255,255,0.7); }
.head .nav_item a{font-size: 15px;}
.head .nav_item a:hover{color: #CAA846;}
.head .nav_item:first-child{font-size: 28px; line-height: 1em;}
.head .nav_item:first-child span {margin-left: 35px; font-size: 14px;}
.head .nav_item:last-child a{width: 195px; height: 45px; padding: 13px; background-color:#E6000F; color: #FFF; text-align: center;}
.head .nav_item:last-child a:hover{color:#E6000F; background: #fff; border: 3px solid; padding-top: 10px;}
.head .nav_item:nth-child(2) a {width: 195px; height: 45px;  padding: 10px; border:2px solid #103F97; color: #103F97; text-align: center;}
.head .nav_item:nth-child(2) a:hover {background-color: #103F97; color: #FFF;}
.head .nav_item:not(:last-child){margin-right: 15px; cursor: pointer;}
.head_logo h1{margin-bottom: 0;}
.head_logo h1 a img{width: 130px; height: 40px;}
.head_logo > span a img{max-width: 85px; margin-right: 10px;}
.head_logo > div > img {width: 83px; height:51px;}
.head_logo > div  a img {width: 45px; height:45px;}
.head .fa-phone { margin-right: 5px; color:#E6000F; transform: scaleX(-1);}
.head .fa-envelope { margin-right: 5px;}
.head .nav_item {position: relative;}
.head .nav_item .fa-chevron-down{margin-left: 5px; color:#CAA846;}


/*--- main ---*/
/* public */
main{padding-bottom: 80px; position: relative;}
.page-top main{padding-top: 0;}
.section_inner {padding: 50px 0;}
.section_inner p{line-height: 2em;}
.sec-title {margin-bottom: 40px; position: relative; text-align: center;}
.sec-title .item-title{color: #192049; font-size: 30px; text-align: center;}
.sec-title .item-title span:first-child {display: block; color: #CAA846; font-size: 15px; font-weight: bold; text-align: center;}
.sec-title .item-title span:last-child {color: #221F1F; font-size: 30px; font-weight: bold; text-align: center;}

/* mv */
.mv-inner{position: relative;padding-top: 650px;}
.mv-img{background: url(assets/images/mv_img.png); background-size:cover; background-position: center right;}
.mv-img-layout{position: absolute; top: 0; left: 0; padding-top: 580px; width: 100%; z-index: 10;}
.mv-title{position: absolute; top: 210px; left: 6%;  width:660px; padding:30px 40px 20px 40px; border: 5px solid #1E3E92; background-color: #FFF; text-align: center; z-index: 100;  color: #333;}
.mv-title > div {border-bottom: 5px solid #FEC900; font-size: 36px;}
.mv-title > div span {color:#103F97;}
.mv-title > div span:first-child {color:#E6000F;}
.mv-title > div img {width: 180px;}
.mv-title p {line-height: 1.8em;}
.mv-title p span {color:#E6000F;}

/*--- top-mediaup ---*/
#top-media-up{margin-bottom: 30px;}
#top-media-up p{ position: relative; color: #103F97; font-size: 24px; font-weight: bold; text-align: center;}
#top-media-up p:before, #top-media-up p:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 40%; height: 1px; background-color: #103F97; }
#top-media-up p:before { left:0;}
#top-media-up p:after {right: 0;}


/*--- top-about ---*/
#top-about > div {position: relative;}
#top-japan-effect > div {position: relative;}
#top-about .img-left-edge img {position: absolute; top:0; left: 0; width: 47%; height: 310px; -o-object-fit: cover; object-fit: cover;}
#top-about .text-img-left-edge{width: 47%; height: auto; margin-left: 50%;}
#top-about .text-img-left-edge p span{color:#E6000F;}
#top-japan-effect .img-right-edge img {position: absolute; top:0; right: 0; width: 47%; height: 310px; -o-object-fit: cover; object-fit: cover;}
#top-japan-effect .text-img-right-edge{width: 47%; height: auto; margin-left: calc(50% - 630px);}
#top-japan-effect .text-img-right-edge p span{color:#E6000F;}

h2 {position: relative; color: #103F97;}
h2::after {display: block; content: ""; width: 4rem; height: 3px; position: absolute; left: 47%; top: 55px; background: #FEC900; overflow: hidden; }
#top-about h2::after, #top-japan-effect h2::after {left: 0; top: 55px;}
#top-contact h2::after{display: none;}

/*--- top-examination ---*/
.flow {max-width: 1080px; margin:0 auto;}
.flow span{font-size:20px;}
.flow span:first-child{background-color:#D0D9EB;}
.flow span:first-child img {width: 85px; margin-top:20px;}
.flow span:nth-child(2),.flow span:nth-child(4){background-color:#869DCA; color: #FFF; font-size:18px;}
.flow span:nth-child(2)::after{ position: absolute; content: " "; display: block; width: 0; height: 0; border-top: 13px solid transparent; border-bottom:13px solid transparent; border-left: 10px solid #869DCA; top: 50%; margin-top: -13px; left: 100%;}
.flow span:nth-child(4)::after{ position: absolute; content: " "; display: block; width: 0; height: 0; border-top: 13px solid transparent; border-bottom:13px solid transparent; border-right: 10px solid #869DCA; top: 50%; margin-top: -13px; right: 100%;}
.flow span:nth-child(3){background-color:#FACBCE;}
.flow span:nth-child(3) img {width: 145px; margin-top:20px;}
.flow span:last-child{background-color:#CEEAD7;}
.flow span:last-child img {width: 56px; margin-top:20px;}

/*--- top-level ---*/
.table-level { width: 100%; border-collapse: separate; border-spacing: 5px;}
.table-level td:first-child,.table-level td:nth-child(3) {background-color:#ECEFF7; color:#333;}
.table-level td:nth-child(2) { background-color: #103F97; color: #FFF;}
#top-3level .table-level td:first-child,#top-3level .table-level td:nth-child(3) {background-color: #103F97; color: #FFF;}
#top-3level .table-level td:nth-child(2) {background-color:#ECEFF7; color:#333;}
.table-level  td {border: 2px solid #fff; vertical-align: middle;}


/*--- top-upf-support ---*/
#top-upf-support > div {background-color: #ECEFF7;}
#top-upf-support ul{flex-wrap: wrap;}
#top-upf-support ul li { width: 32%; max-width: 350px; margin: 0 1% 40px;}
.feature-title {width: 205px; height: 205px; margin: 0 21%; padding-top: 20px; background-color: #103F97; color: #fff;}
.feature-title span{ display: block; text-align: center;}
#top-upf-support ul li:first-child .feature-title span img {width: 70px;}
#top-upf-support ul li:nth-child(2) .feature-title span img {width: 57px;}
#top-upf-support ul li:nth-child(3) .feature-title span img {width: 45px;}
#top-upf-support ul li:nth-child(4) .feature-title span img {width: 100px;}
#top-upf-support ul li:last-child .feature-title span img {width: 54px;}
.feature-title span:last-child{color:#FEC900;}
.feature-text {min-height: 300px; margin-top: -100px; padding: 120px 15px 15px; background-color: #FFF; font-size: 14px; color: #333; }

/*--- top-merit ---*/
#top-merit .feature-title {width: 344px; height: 344px; margin: 0; padding-top: 40px;  color: #FEC900; font-size: 21px;}
#top-merit .feature-title span:last-child{width: 250px;     margin: 0 auto; color:#FFF; font-size: 14px;}
#top-merit .feature-title span:first-child::after{display: block; content: ""; width: 4rem; height: 1px; position: absolute; left: 40%; top: 140px; background: #FEC900; overflow: hidden; }
#top-merit ul li:last-child .feature-title span:first-child::after{top:120px;}
#top-merit ul li:first-child .feature-title{padding-top: 94px;}
#top-merit ul li:nth-child(2) .feature-title{padding-top: 60px;}
#top-merit ul li:last-child .feature-title {padding-top: 74px;}

/*--- 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-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;}

/*--- top-media ---*/
#top-media h2::after{top:100px;}


/*--- 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;}



/*------PC3------*/
@media only screen and (max-width: 1580px) {
  .container{max-width: 1350px;}


}
  
/*------PC2------*/
@media only screen and (max-width: 1440px) {
  #top-japan-effect .text-img-right-edge {
    margin-left: calc(50% - 530px);
}
.flow {max-width: 900px;}
.flow span{font-size: 18px;}
.flow span:nth-child(2), .flow span:nth-child(4){font-size: 16px;}
}


/*------PC3------*/
@media only screen and (max-width: 1200px) {
  #top-japan-effect .text-img-right-edge { width: 42%; margin-left: calc(50% - 480px);}
  .flow span:nth-child(2), .flow span:nth-child(4){font-size: 16px;}

}


/*---PAD pro---*/
@media only screen and (max-width: 1050px) {
  .head_logo h1 a img {width: 130px; height: 40px;}
  .head_logo > div > img {width: 46px; height: 28px;}
  .head_logo > div a img {width: 28px; height: 28px;}
  .head .nav_item:nth-child(2) a{width: 150px;}
  .head .nav_item:last-child a{width: 150px;}
  .head .nav_item:not(:last-child) {font-size: 18px;}
  .head .nav_item:first-child span {margin-left: 18px; font-size: 10px;}


  .mv-inner{padding-top:580px;}
  #top-japan-effect .text-img-right-edge {width: 40%; margin-left: calc(50% - 380px);}
  #top-japan-effect h2::after{top: 95px;}

  .flow {max-width: 620px;}
  .flow span:nth-child(2), .flow span:nth-child(4){font-size: 14px;}
  .flow span:nth-child(2)::after {border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 10px solid #869DCA; margin-top: -20px;}
  .flow span:nth-child(4)::after {border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 10px solid #869DCA; margin-top: -20px;}
  .flow span:first-child img {width: 65px; margin-top:0;}
  .flow span:first-child{padding: 10px;}
  .flow span:nth-child(3){padding: 10px;}
  .flow span:nth-child(3) img {width: 125px; margin-top:0;}
  .flow span:last-child{padding: 10px;}
  .flow span:last-child img {width: 40px; margin-top:0;}

  .feature-title{ margin: 0 calc(50% - 102px);}
  .feature-text{min-height: 370px ;}

  #top-merit .feature-title{ width: 255px; height: 255px; margin: 0 2% 0 1%;}
  #top-merit .feature-title span:first-child{font-size: 16px;}
  #top-merit .feature-title span:last-child{ width: 210px; font-size: 12px;}
  #top-merit .feature-title span:first-child::after{display: none;}
  #top-merit ul li:first-child .feature-title{padding-top: 64px;}
  #top-merit ul li:nth-child(2) .feature-title{padding-top: 40px;}
  #top-merit ul li:last-child .feature-title{padding-top: 50px;}

  #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_block{display: block;}
  .container{max-width: 960px;}
  .head .nav_item:not(:last-child){margin-right: 15px;}
  .head .head_item a{font-size: 13px;}

  /*--- top-about ---*/
  #top-about .container div > span {width:470px; max-width: 470px;}

}

/*---PAD---*/
@media only screen and (max-width: 880px) {
  .head .nav_item:not(:last-child){margin-right: 10px;}
  .head .head_item a{font-size: 12px;}

  /*--- top-about ---*/
  #top-about .container div > span {width:385px; max-width:385px;}

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

  #top-merit ul li:first-child .feature-title{padding-top: 64px;}
  #top-merit ul li:nth-child(2) .feature-title{padding-top: 40px;}
  #top-merit ul li:last-child .feature-title{padding-top: 50px;}

}

@media (min-width: 768px){
  .pc-hidden{display: none;}
  a[href*="tel:"] {pointer-events: none; cursor: default; text-decoration: none;}
}

/*---Sm---*/
@media only screen and (max-width: 767px) {
  h2 {font-size: 24px;}
  .mb-5, .my-5{margin-bottom: 0 !important;}
  .pb-5, .py-5{padding-bottom: 1rem !important;}

  .sm-hidden{display: none;}
  .fx-pc{display: block;}
    /*--- pubulic ---*/
  .sec-title .item-title span:first-child {font-size: 13px;}
  .sec-title .item-title span:last-child {font-size: 24px;}

  /*--- header ---*/
  .head{ width: 100%; padding: 15px 10px 15px 10px;}

  .head_logo > span a img{max-width:60px; margin-right: 10px;}
  #header .head_item{ display: none;}
  .head .nav_item:not(:last-child){margin-right: 0;}

  /*--- footer ---*/
  .footer-logo {width: 60px;}

  /*--- nav ---*/
  .head_logo h1 {margin-top: 7px;}
  .head_logo h1 a img {width: 130px; height: 40px; }
  .head_logo h1 + div {margin-top: 2px; }
  .head_logo > div > img {width: 70px; height:45px;}
  .head_logo > div a img {width: 40px; height:40px;}

  /* オフキャンバス */
  .m-toggle{border: none; display: block; position: relative; background: none; z-index: 100; outline: none !important; padding-top: 10px;}
  .offcanvas-toggle .icon-bar{background: #103F97;}
  .icon-bar{display:block; width:30px; height:2px; border-radius:1px; margin: auto;}
  .icon-bar + .icon-bar{margin-top:7px;}
  .offcanvas-toggle{padding: 0;}
  .sm-head-contact{display: inline-block; width: 60px; font-size: 10px; color: #E6000F; }
  .sm-head-contact .fa-envelope {margin-right: 0; font-size: 30px;}
  .sm-head-contact span {display: inline-block;}
  .offcanvas-toggle.is-open .sm-head-contact{ display: none ;}
  .m-toggle.is-open  div{margin-top:10px;}

  .offcanvas-toggle .icon-bar{display: none;}
  .offcanvas-toggle.is-open .icon-bar{display: block;}
  .offcanvas-toggle.is-open .icon-bar:nth-child(3){margin-top: 14px;}
  .offcanvas-toggle.is-open .icon-bar:nth-child(4){transform: rotate(-135deg) translate(8px, 8px); margin-top: 3px;}
  .off-base.navbar-offcanvas{top: 0; overflow: auto; z-index: 99; padding: 80px 0 0;}

  /*offcanvas-size*/
  .navbar-offcanvas{max-width: 100%; position: fixed; width: 100%; height: 100%; background-color: #D0D9EB;}
  .navbar-offcanvas.navbar-offcanvas-right {right: -100%;}
  .navbar-offcanvas.navbar-offcanvas-right.offcanvas-transform.in {-webkit-transform: translateX(-100%); transform: translateX(-100%);}

  .sm-nav-box ul{margin-top: 30px;}
  .sm-nav-box li{position: relative; text-align: left;}
  .sm-nav-box li a{display: block; padding: 15px; font-weight: bold; font-size: 14px; color: white;}

  #sm-offcanvas > ul > li { padding: 0 30px;}
  #sm-offcanvas > ul > li:first-of-type a { display: inline-block; padding:0; color: #333; font-size: 24px;}
  .sm-nav-box ul .sm_drop_menu{height: 0; opacity: 0; visibility: hidden; transition: .3s; animation-duration: .3s; background-color: #C9636D; margin-top: 0; margin-bottom: 0; margin-right: -30px; margin-left: -30px;}
  .sm-nav-box ul .active > .sm_drop_menu{height: auto; display: block; opacity: 1; visibility: visible; transition: .3s; animation-duration: .3s;}
  .sm_drop_menu li{padding-left: 30px; padding-right: 30px;}
  .sm_drop_menu li a{display: block; position: relative; padding: 15px 30px; padding-left: 30px; font-weight: normal; font-size: 13px; color: white; border-bottom: solid 1px #D27E86;}
  .sm_drop_menu li a::before{content: ''; position: absolute; top: 0; bottom: 0; left: 5px; border-top: solid 1px #fff; width: 12px; height: 1px; margin: auto;}
  .sm_drop .plus_drop > a::after{position: absolute; font-family: "Font Awesome 5 Free"; content: "\f067"; font-weight: 900; top: 0; bottom: 0; right: 15px; margin: auto; width: 20px; height: 25px;}
  .sm_drop .plus_drop.active > a::after{content: "\f068"; bottom: auto; top: 15px;}

  .sm_drop li:first-child{font-size: 24px;}
  .sm_drop li:first-child span {margin-left:30px; font-size: 12px;}
  .sm_drop li:nth-child(2) a{width: 220px; height: 45px; margin: 30px auto; padding: 13px; background-color: #E6000F; text-align: center;}
  .sm_drop li:nth-child(3) a { width: 220px; height: 45px; margin: 30px auto; padding: 10px; border: 2px solid #103F97; color: #103F97; text-align: center;}


  .is-open .head_menu{display: none;}
  .is-open .head_close{display: block;}
  .sm-nav-box .in_logo{position:absolute; top: 20px; left:15px;}
  #sm-offcanvas{height: 100% !important;}

  /*--- mv ---*/
  .page-top main {padding-top: 0;}
  .mv-inner{ padding-top: 480px;}
  .mv-img-layout{ padding-top: 320px;}


  .mv-title > div {font-size: 24px;}
  .mv-title{width: 100%; width: 340px; margin: 0 auto; padding: 20px 10px 0 10px; top: 240px; left: calc( 50% - 170px);}
  .mv-title > span{font-size: 18px;}
  .mv-title > span:first-child{font-size: 28px;}
  .mv-title p{font-size: 14px;}
  .mv-title > div img {width: 100px;}

/*--- top-mediaup ---*/
#top-media-up{margin-bottom: 0;}
#top-media-up p:before, #top-media-up p:after { width: 20%;}
#top-media-up p{font-size: 20px;}

/*--- top-about ---*/
  #top-about h2{text-align: center;}
  #top-japan-effect h2{text-align: center;}
  #top-about h2::after {top:48px; left: 41%;}
  #top-japan-effect h2::after{ top: 68px; left: 41%;}
  #top-about .img-left-edge img{width: calc(100% - 50px); left: 25px; height: 275px;}
  #top-about .text-img-left-edge{width: calc(100% - 80px); margin-left:40px; margin-top: 240px;}
  #top-japan-effect .img-right-edge img{width: calc(100% - 50px); left: 25px; height: 275px;}
  #top-japan-effect .text-img-right-edge {width: calc(100% - 80px); margin-left:40px; margin-top: 300px;}
  h2::after, h2::after {top:48px; left: 41%;}
  #top-upf-support h2::after{top:68px;}


/*--- top-examination ---*/
.flow { flex-direction: column; gap: 10px;}
.flow span{font-size: 18px;}
.flow span:nth-child(2), .flow span:nth-child(4){position: relative; width: 160px;font-size: 14px;}
.flow span:nth-child(2){margin-top:-10px; margin-bottom:10px;}
.flow span:nth-child(4){margin-top:10px; margin-bottom:-10px;}
.flow span:nth-child(2)::after{position:absolute; border-right: 80px solid transparent; border-left: 80px solid transparent; border-top: 20px solid #869DCA; top: 34px; margin-top: -13px; left: 0;}
.flow span:nth-child(4)::after{position:absolute; border-right: 80px solid transparent; border-left: 80px solid transparent; border-bottom: 20px solid #869DCA; top: -41px; margin-top: 1px; left: 0;}

/*--- top-level ---*/
.table-level{font-size: 14px;}

/*--- top-upf-support ---*/
#top-upf-support ul li{width: 100%;}
.feature-text{min-height: auto;}
.feature-title{ margin: 0 21%;}

#top-merit ul{flex-direction: column; text-align: center; gap: 20px;}
#top-merit ul li:first-child .feature-title{padding-top: 64px;}
#top-merit ul li:nth-child(2) .feature-title{padding-top: 40px;}
#top-merit ul li:last-child .feature-title{padding-top: 50px;}


/*--- 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;}

}

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

}