@charset "UTF-8";

body{
  width: 100%;
  margin: 0 auto;
  font-family: "Hiragino Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #333;
}
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;
}

/*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{
  margin-top: 0.15rem;
}
.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: 87%;
  margin: 0 auto;
  padding-top: 7vw;
}
.cta_fv {
  margin: -3rem auto 4vw auto;
}
.cta_in{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.in_btn{
  width: 48%;
}
.pc-img {
  display: none;
}

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

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

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

.movie__container {
  padding-left: 20%;
  padding-right: 20%;
  box-sizing: border-box;
  margin-bottom: 5%;
}
@media (max-width: 767px) {
    .movie__container {
      padding-left: 5%;
      padding-right: 5%;
    }
}

.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: 0.5em;
}

/*price*/
#price{
  background-color: #E8EAED;
  border-radius: 24px 24px 0 0;
  padding: 4vw 0;
}
.price_in{
  width: 90%;
  margin: 0 auto;
}
.price_in_hyo{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.price_in_hyo img{
  width: 48%;
}
.kome{
  text-align: right;
  font-size: 10px;
  padding: 0.5rem 0 1rem;
  font-weight: 300;
}
.difference_back{
  background-color: #fff;
  height: 36.5vw;
  margin-top: max(-39.5vw, -213px);
  max-height: 201px;
}
.difference img{
  width: 81%;
  margin: 0 auto;
  display: block;
  max-width: 450px;
}
.arrow{
  position: relative;
  padding: 0.35rem;
  border-radius: 30px;
  background-color: #fff;
  color: #3B5998;
  font-size: clamp(0.75rem, 0.457rem + 1.25vw, 1.5rem);
  text-align: center;
  width: 45%;
  margin: 3.3rem 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 #ffffff;
  border-bottom: 0;
  content: "";
}
.cta_logo{
  width: 55%;
  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;
}
.price_cta_btn{
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 0.35rem;
}

/*point*/
#point{
  background-color: #3B5998;
}
h2{
  color: #fff;
  text-align: center;
  text-decoration: underline 4px;
  text-underline-offset: 8px;
  line-height: 2;
  padding-bottom: 1.5rem;
  font-weight: 800;
  font-size: clamp(1.5rem, 0.92rem + 2.48vw, 3rem);
}
.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;
}

/*worries*/
#worries h2{
  color: #3B5998;
  padding: 1.5rem 0 1.8rem;
}
.worries_voice{
  width: 85%;
  margin: 1em auto;
}
.worries_cta{
  width: 90%;
  margin: 0 auto 2rem;
}
.worries_cta .arrow{
  background-color: #3B5998;
  margin-top: 0;
  color: #fff;
  width: 28%;
}
.worries_cta .arrow::before{
  border-top: 10px solid #3B5998;
}

/*achievements*/
#achievements h2 {
  color: #3B5998;
  padding: 1.8rem 0 1rem;
  margin: 0;
}
#achievements{
  background-color: #E8EAED;
  padding-bottom: 3rem;
  border-radius: 24px 24px 0 0;
}
.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: 1rem;
}
.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;
}

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

/*link_company*/
#link_company{
  padding: 1rem 0 1% 0 ;
  background-color: #3B5998;
  color: #fff;
}
.link_company_in{
  width: 80%;
  margin: 1rem auto 0;
  text-align: center;
}
.link_company_in img{
  width: 60%;
  max-width: 370px;
}
.link_company_in p{
  font-size: clamp(0.65rem, -0.092rem + 3.21vw, 1.15rem);
  font-weight: 600;
  line-height: 2.5;
}
.link_company_btn a{
  border-radius: 100vh;
  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: 75%;
  margin: 1rem auto;
  font-size: clamp(0.75rem, -0.092rem + 4.21vw, 1.25rem);
}
.font-bold {
  font-weight: bold; /* 太字に設定 */
}

/*footer*/
footer{
  color: #fff;
  background-color: #3B5998;
  padding: 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% 0 1.5rem 0;
  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;
  }
  .pc_in,.pc_company_in{
    max-width: 730px;
    width: 65%;
    margin: 0 auto;
  }

  .link_company_btn a{
    width: 55%;
   }

  #fv{
    background-image: url(../images/top_back.jpg);
  }
  #fv h1 {
    padding-top: 8.3vw;
  }
  .fv_contact_btn {
    margin-bottom: 0.8rem;
  }
  .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_voice{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .worries_voice img{
    width: 49%;
    margin-bottom: 1em;
  }
  .worries_cta {
    margin: 2rem auto 4rem;
  }
  #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: 7.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, 1.7rem); 
  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, 1.7rem);
  font-weight: 400;
  font-family: "Hiragino Sans", sans-serif;
}
form input[type="text"], form textarea, form select {
  box-sizing: border-box; /* パディングとボーダーを含む幅の計算 */
	width:80%;
	font-size: clamp(1rem, 0.623rem + 1.6vw, 1.7rem);
	display:block;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 4px;
}
form input[type="text"]{
  height: 2.5em;
  padding:0 5px;
}
form select{
  height: 2.5em;
  padding:0 5px;
}
form textarea {
  height: 13em;
	padding: 0.5rem 5px;
}
.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 0.8em;
  font-weight: 600;
  display: block;
  font-size: clamp(1rem, 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;
}
}



/* FV フォーム部分 */
#formWrap_fv {
	width:80%;
  max-width: 800px;
	margin:0 auto;
	color:#555;
	line-height:120%;

}
.formWrap-rounded {
  display: inline-block;
  padding: 25px 20px;
  background-color: #3B5998;
  color: #ffffff;
  font-size: clamp(1rem, 0.623rem + 1.6vw, 2rem); /* フレキシブルな文字サイズ */
  font-weight: 600;
  text-align: center;
  border: 2px solid #3B5998;
  border-radius: 5px;
  box-shadow: none;
  width: 90%;
  max-width: 800px;
  margin: 10px auto;
}
.form_dl_fv, .form_dl_fv_select{
  display: flex; /* 横並びにするためにフレックスボックスを使用 */
  flex-wrap: wrap; /* 画面サイズが小さくなったときに折り返し */
  justify-content: flex-start; /* 空白を均等に分ける */
  align-items: center;
  padding: 0.8rem 0;
}

.form_dl_fv dt {
  width: 35%; /* 各要素が横並びで50%幅を占めるように設定 */
  margin: 0 0 0 1%; /* 要素間にスペースを追加 */
  font-size: clamp(0.8rem, 0.5rem + 1.2vw, 1.5rem); /* より小さいサイズに変更 */
  padding: 0.5rem 0;
}
.form_dl_fv dd {
  width: 63%; /* 各要素が横並びで50%幅を占めるように設定 */
  margin: 0 1% 0 0; /* 要素間にスペースを追加 */
}
.form_dl_fv_select dt {
  width: 47%; /* 各要素が横並びで50%幅を占めるように設定 */
  margin: 0 0 0 1%; /* 要素間にスペースを追加 */
  font-size: clamp(0.8rem, 0.5rem + 1vw, 1.5rem); /* より小さいサイズに変更 */
  padding: 0.5rem 0;
}
.form_dl_fv_select dd {
  width: 51%; /* 各要素が横並びで50%幅を占めるように設定 */
  margin: 0 1% 0 0; /* 要素間にスペースを追加 */
}

.form_dl_fv input {
  width: 100%; /* 入力フィールドが親要素の幅に合わせて広がる */
  padding: 0.8em;
  font-size: clamp(0.75rem, 0.5rem + 1.2vw, 1.25rem); /* 入力フィールドの文字サイズを小さく設定 */
  box-sizing: border-box; /* パディングを含む全体幅の計算 */
}

.special-dl input[type="text"], .special-dl select {
  width: 100%;                  /* 幅を変更 */
  padding: 12px;               /* パディングを変更 */
  border-radius: 5px;         /* 角をさらに丸く */
  border: 1px solid #444;      /* 枠線の色を変更 */
}
.special-dl input[type="text"] {
  font-size: clamp(1rem, 0.5rem + 1.2vw, 1.25rem);
}

.special-dl select  {
  font-size: clamp(0.8rem, 0.5rem + 1vw, 1.15rem);
  height: 3em;
}

.form_btn_fv{
  width: 40%;
  margin: 0 auto;
}
.form_btn_fv input{
  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.4em 2em;
  font-weight: 600;
  display: block;
  font-size: clamp(1rem, 0.457rem + 1.25vw, 1.5rem);
  margin: 0.3rem auto 0;
}

.form_btn_fv input:hover{
  opacity: 0.5;
  transition: 0.3s;
}

@media screen and (max-width:572px) {
  .formWrap-rounded {
    padding: 10px 10px;
  }
}

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

.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;
}