@charset "UTF-8";

body{
  width: 100%;
  margin: 0 auto;
  font-family: "Hiragino Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #2E3B4F;
}
img{
  width: 100%;
}
main{
  width: 100%;
  overflow:hidden;
}
.pc{
  display: none;
}
a{
  text-decoration: none;
}
a:hover{
  opacity: 0.5;
  transition: 0.3s;
}
a:visited{
  color: inherit;
}

/*共通*/
h2{
  color: #3B5998;
  text-align: center;
  text-decoration: underline 4px;
  text-underline-offset: 8px;
  line-height: 2;
  padding: 1.5rem 0 1.8rem;
  font-weight: 800;
  font-size: clamp(1.375rem, 0.007rem + 6.84vw, 3rem);
}
.arrow{
  position: relative;
  padding: 0.4rem;
  border-radius: 30px;
  background-color: #A8DADC;
  color: #333;
  font-size: clamp(0.75rem, 0.457rem + 1.25vw, 1.5rem);
  text-align: center;
  width: 33%;
  margin: 0 auto 1rem;
  font-weight: 600;
}
.arrow:before {
  position: absolute;
  top: 100%;
  left: calc(50% - 4px);
  height: 0;
  width: 0;
  border-style: solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 10px solid #A8DADC;
  border-bottom: 0;
  content: "";
}
.cta_logo{
  width: 80%;
  margin: 0 auto;
}
.cta_logo img{
  display: block;
}
.cta_p{
  font-size: clamp(0.875rem, 0.533rem + 1.46vw, 1.75rem);
  font-weight: 600;
  text-align: center;
  margin: 0.5rem;
  line-height: 2;
}
.cta_btn{
  margin-bottom: 0.4rem;
}
.font-bold {
  font-weight: bold; /* 太字に設定 */
}


/*header*/
header {
  background-color: #fff;
  padding: 1.5rem 0 0.6rem;
}
.header_in{
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.header-logo{
  width: clamp(11.875rem, 7.231rem + 19.81vw, 23.75rem);
}
.header_btn a{
  font-size: clamp(0.75rem, 0.457rem + 1.25vw, 1.5rem);
}
.btn a{
  background-color: #3B5998;
  border-radius: 100vh;
  box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
  color: #fff;
  padding: 0.6rem 0.8rem;
  font-weight: 600;
  display: block;
}

/*fv*/
#fv{
  background-image: url(../images/top_back_sp.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top center;
}
#fv h1{
  width: 77%;
  margin: 0 auto;
  padding-top: 49vw;
  max-width: 420px;
}
.cta_fv {
  width: 82%;
  margin: 1em auto 6vw;
}
.cta_in{
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/*movie*/
/*------------------------------
movie
------------------------------*/
.movie {
  margin-top: 10%;
}
@media (max-width: 767px) {
  .movie {
    margin-top: 40px;
  }
}

.movie__container iframe {
  width: 100%;
  aspect-ratio: 640/360;
  height: auto;
}

.movie__container {
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

.movie-content {
  margin: 0 auto;
  max-width: 100%;
}

.movie__text strong {
  display: block;
  font-size: clamp(1.075rem, 0.634rem + 1.45vw, 2.5rem);
  font-weight: 700;
  color: #3B5998;
  margin-bottom: 0.5em;
}

.movie__text {
  margin-top: 5%;
  font-size: clamp(0.975rem, 0.534rem + 1.45vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  margin-bottom: 1.0em;
}

/*worries*/
#worries{
  background-color: #E8EAED;
}
.worries_voice{
  width: 85%;
  margin: 1em auto;
  max-width: 600px;
}
.worries_cta{
  width: 90%;
  margin: 0 auto;
  padding-bottom: 2rem;
}
.worries_cta_p{
  color: #3B5998;
  text-align: center;
  font-weight: 600;
  font-size: clamp(0.813rem, 0.023rem + 3.95vw, 1.75rem);
  padding-bottom: 1rem;
}
.worries_cta .arrow{
  margin-top: 1rem;
}

/*reason*/
#reason{
  text-align: center;
  padding-bottom: 2rem;
}
.reason_contents img {
  width: 30%;
  margin: 1rem auto;
  display: block;
}
.reason_contents h3{
  font-weight: bold;
  font-size: clamp(1.25rem, 0.75rem + 2.5vw, 2.625rem);
  line-height: 1.3;
}
.blue_marker{
  background:linear-gradient(transparent 66%, #A8DADC 0%);
}
.reason_contents p{
  padding: 1rem 0;
  line-height: 1.5;
  font-weight: 600;font-size: clamp(0.813rem, 0.371rem + 2.21vw, 1.75rem);
}

/*secrecy*/
#secrecy{
  background-color: #3B5998;
  padding-bottom: 2rem;
}
#secrecy h2{
  color: #fff;
}
.secrecy_contents{
  background-color: #fff;
  border-radius: clamp(0.75rem, 0.397rem + 1.76vw, 1.5rem);
  width: 90%;
  margin: 1rem auto;
  text-align: center;
  padding: 1rem 0 2rem;
}
.secrecy_contents img{
  width: 90%;
  margin: 0.5rem auto;
}
.secrecy_contents02 img{
  width: 95%;
}
#secrecy h3{
  font-size:clamp(1.313rem, 0.695rem + 3.09vw, 2.625rem);
  line-height: 1.1;
  padding: 1.5rem;

}
.secrecy_contents p{
  font-size: clamp(0.813rem, 0.371rem + 2.21vw, 1.75rem);
  font-weight: 400;
  width: 95%;
  margin: 1rem auto;
  line-height: 1.5;
  color: #3B5998;
}
.secrecy_contents p span{
  font-weight: 600;
}
#secrecy h4{
  font-size: clamp(0.875rem, 0.463rem + 2.06vw, 1.75rem);
  font-weight: 400;
  padding: 1.5rem 0 1rem;
}
.secrecy_contents p .secrecy_bk{
  color: #2E3B4F;
  font-weight: 400;
}

/*cta*/
.cta_inbtn{
  width: 90%;
  margin: 0 auto;
  padding: 2rem 0;
}

/*flow*/
#flow{
  background-color: #D3ECED;
  padding-bottom: 2rem;
}
.flow_in{
  width: 86%;
  margin: 0 auto;
}
.flow_titile{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flow_titile_in{
  display: flex;
  justify-content: left;
  align-items: center;
}
#flow h3{
  font-size: clamp(1.25rem, 0.145rem + 5.53vw, 2.563rem);
  color: #3B5998;
  padding-left: 0.5rem;
}
.step{
  width: clamp(1.875rem, 0.138rem + 8.68vw, 3.938rem);
  border-right: 2px solid #3B5998;
  padding-right: 0.5rem;
}
.step_icon{
  width: clamp(2.875rem, 0.243rem + 13.16vw, 6rem);
}
.flow_in p{
  padding: 0.5rem 0;
  line-height: 1.5;
  font-weight: 400;
  font-size: clamp(0.75rem, -0.092rem + 4.21vw, 1.75rem);
}
.flow_in .triangle{
  text-align: center;
  color: #fff;
  font-size: clamp(1rem, -0.053rem + 5.26vw, 2.25rem);
  padding: 0;
}

/*link*/
#link{
  padding: 2rem 0;
  background-color: #3B5998;
  color: #fff;
}
.link_in{
  width: 90%;
  margin: 1rem auto 0;
  text-align: center;
}
.link_in img{
  width: 60%;
  max-width: 370px;
}
.link_in p{
  font-size: clamp(0.75rem, -0.092rem + 4.21vw, 1.75rem);
  font-weight: 600;
  line-height: 2.5;
}
.link_btn a{
  border-radius: 20px;
  box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
  color: #fff;
  padding: 0.8rem 1rem;
  font-weight: 600;
  display: block;
  border: 2px solid #fff;
  width: 70%;
  margin: 1rem auto;
  font-size: clamp(0.75rem, -0.092rem + 4.21vw, 1.75rem);
  line-height: 1.8;
}

/*price*/
#price{
  background-color: #E8EAED;
  border-radius: 24px 24px 0 0;
  padding: 4vw 0;
}
.price_in{
  width: 90%;
  margin: 0 auto;
}
.price_cta_btn{
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 0.35rem;
}


/*point*/
#point{
  background-color: #3B5998;
}
.point_in{
  width: 90%;
  margin: 0 auto;
  padding: 1.5rem 0;
}
.point_hyo{
  width: 90%;
  margin: 0 auto;
  display: block;
}
.point_02{
  width: 95%;
  margin: 0 auto;
  display: block;
}
.point_cta{
  color: #fff;
  padding-bottom: 0.5rem;
}
.point_cta .arrow{
  width: 24%;
  margin-top: 0.8rem;
}

/*achievements*/
#achievements h2 {
  color: #3B5998;
  padding: 1.8rem 0 1rem;
  margin: 0;
}
#achievements{
  background-color: #E8EAED;
  padding-bottom: 5rem;
}
.achievements_p{
  font-size: clamp(1rem, 0.61rem + 1.65vw, 2rem);
  text-align: center;
  font-weight: 600;
  line-height:1.3;
  margin: 0;
  padding: 1.1rem;
}
.achievements_p span{
  font-size: 1.5em;
  color: #3B5998;
}
.achievements_in{
  width: 90%;
  margin: 1rem auto;
  background-color: #fff;
  border-radius: 0.5em;
}
.achievements_in h3{
  font-size: clamp(0.875rem, 0.534rem + 1.45vw, 1.75rem);
  font-weight: 500;
  text-align: center;
  padding: 1.2rem;
}
.achievements_in img{
  width: 95%;
  margin: 0 auto;
  display: block;
}
.achievements_in p{
  font-size: clamp(0.75rem, 0.458rem + 1.24vw, 1.5rem);
  text-align: center;
  line-height: 1.3;
  padding: 0.9rem 0;
}
.achievements_in p a{
  color: #2892C5;
  text-decoration: underline;
  font-weight: 800;
}
.achievements_in p span{
  font-size: 0.84em;
}
.achievements_cta {
  width: 90%;
  margin: 0 auto;
  padding: 0.2rem 0 2.5rem 0;
}
.achievements_cta .arrow{
  background-color: #3B5998;
  color: #fff;
  width: 30%;
  margin-top: 2.4rem;
}
.achievements_cta .arrow:before {
  border-top: 10px solid #3B5998;
}

/*faq*/
#faq h2 {
  color: #3B5998;
  padding: 8vw 0 4vw;
  margin: 0;
}
.faq_dl{
  width: 90%;
  margin: 1rem auto;
  font-size: clamp(0.875rem, 0.534rem + 1.45vw, 1.75rem);
  font-weight: 600;
}
.faq_dl dt{
  display: flex;
  border: clamp(0.25rem, 0.153rem + 0.41vw, 0.5rem) solid #3B5998;
  color: #3B5998;
  align-items: center;
}
.faq_dl .dt_top{
  align-items: normal;
}
.faq_dl .dt_top p{
  padding: 0.5rem 0;
}
.faq_dl dd{
  display: flex;
  border: clamp(0.25rem, 0.153rem + 0.41vw, 0.5rem) solid #3B5998;
  background-color: #3B5998;
  color: #fff;
  padding-bottom: 0.5rem;
  line-height: 1.3;
}
.faq_dl dd p{
  padding-top: 0.5rem;
}
.faq_dl dt img,dd img{
  width: clamp(1.5rem, 0.915rem + 2.48vw, 3rem);
  height: clamp(1.5rem, 0.915rem + 2.48vw, 3rem);
  padding: 0.5rem;
}

/*footer*/
footer{
  color: #fff;
  background-color: #3B5998;
  padding: 1rem 0;
  text-align: center;
}
.footer-link{
  display: block;
}
.footer-link a{
  text-decoration: underline;
  line-height: 2;
  font-size: clamp(0.875rem, 0.73rem + 0.62vw, 1.25rem);
  color: #fff;
}
.footer-link a:visited{
  color: #fff;
}
.footer-bottom{
  padding: 1.5rem;
  font-size: clamp(0.625rem, 0.48rem + 0.62vw, 1rem);
}
@media screen and (min-width: 768px){
  body{
    background-color: #E8EAED;
  }
  main{
    background-color: #fff;
  }
  .pc{
    display: block;
  }
  .sp{
    display: none;
  }
  header,main,footer{
    width: 100%;
    max-width: 1334px;
    margin: 0 auto;
  }
  .header_btn{
    margin-top: 1.15em;
  }
  .pc_in{
    max-width: 730px;
    width: 70%;
    margin: 0 auto;
  }

  #fv{
    background-image: url(../images/top_back.png);
  }
  #fv h1 {
    padding-top: 26vw;
  }
  .fv_contact_btn {
    margin-bottom: 0.8rem;
  }
  .cta_p{
    padding-bottom: 1rem;
  }
  .cta_fv {
    margin-top: 4vw;
  }
  #worries,#reason,#secrecy,.cta,#flow,#formWrap{
    padding: 4rem 0;
  }

  .price_cta_btn {
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
  }
  .difference{
    margin-top: 3rem;
  }
  .difference_back {
    background-color: #fff;
    height: 13em;
    margin-top: max(-14em, -255px);
  }
  .worries_cta {
    width: 90%;
    margin: 0 auto;
    padding: 0 0 5rem;
  }
  #achievements .pc_in .achievements_cta{
    padding-bottom: 0;
  }

  .footer-link{
    width: 56%;
    max-width: 540px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
  }
}
@media screen and (min-width: 1344px) {
  #fv h1 {
      padding-top: 23.3em;
  }
}


/*お問い合わせフォーム*/
.main{
  padding: 5rem 0;
}
#formWrap {
	width:80%;
  max-width: 800px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
#formWrap h2{
  color: #3B5998;
}
.formWrap_center{
  text-align: center;
}
.form_dl{
  padding: 0.8rem 0;
}
.form_dl dt{
  font-size: clamp(1rem, 0.623rem + 1.6vw, 2rem); 
  padding: 0.5rem 0;
  width: 82.5%;
  margin: 0 auto 0.5rem;
}

.required{
  font-size: 0.8em;
  background-color: #E70013;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  margin-left: 0.5rem;
  color: #fff;
}
::placeholder {
  color: #cccccc;
  font-size: clamp(1rem, 0.623rem + 1.6vw, 2rem);
  padding-top: 0.5rem;
  font-weight: 400;
  font-family: "Hiragino Sans", sans-serif;
}
form input[type="text"], form textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 4px;
}
form input[type="text"]{
  height: 2.5em;
}
form textarea {
  height: 13em;
}
.form_btn,.form_btn02{
  width: 40%;
  margin: 0 auto;
}
.form_btn input,a.form_a{
  background-color: #3B5998;
  border: 2px solid #3B5998;
  border-radius: 100vh;
  box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
  color: #fff;
  padding: 0.6em 0.8em;
  font-weight: 600;
  display: block;
  font-size: clamp(0.75rem, 0.457rem + 1.25vw, 1.5rem);
  margin: 2rem auto 0;
}
.form_btn02 input{
  background-color: #fff;
  border-radius: 100vh;
  border: 2px solid #3B5998;
  box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
  color: #3B5998;
  padding: 0.6em 0.8em;
  font-weight: 600;
  display: block;
  font-size: clamp(0.75rem, 0.457rem + 1.25vw, 1.5rem);
  margin: 2rem auto 0;
}
.form_btn input:hover,.form_btn02 input:hover,.form_a:hover{
  opacity: 0.5;
  transition: 0.3s;
}
.contact_inputbtn{
  margin-top: 2rem;
  text-align: center;
}
a.form_a {
  width: 50%;
}
@media screen and (max-width:572px) {
#formWrap {
	width:95%;
	margin:0 auto;
}
form input[type="submit"], form input[type="reset"], form input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}
}

/*ラインと電話のボタン*/

.in_btn{
  width: 48%;
}
.pc-img {
  display: none;
}

@media (min-width: 768px) {
  .mobile-img {
      display: none;
  }
  
  .pc-img {
      display: inline;
  }
}

/*フッターリンクページ*/

.l-header__inner {
  padding: 0 2.5rem 0;
}
.c-section-title {
  background: linear-gradient(transparent 85%, #3B5998 0%);
  color: #3B5998;
}
.p-inquiry__form-button .c-button,.l-header__contact .c-button {
  background-color: #3B5998;
}
a.c-button:visited {
  color: #fff;
}
.u--bg-red {
  background-color: #3B5998;
  color: #fff;
}
.p-inquiry__head-tail::after {
  border-color: #3B5998 transparent transparent transparent;
}
.p-inquiry__head-tail-text{
  background-color:#3B5998;
}