@charset "UTF-8";
body {
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  margin: 0;
  padding: 0;
  background: url(https://fact-info.net/wp-content/uploads/2024/11/orange-stripe.png);
  background-repeat: repeat;
}

.grecaptcha-badge {
    display: block;
    visibility: visible;
    height: auto;
    z-index: 900;
}

.wrapper {
  width: 100%;
 max-width: 768px;
  margin: 0 auto;
}

a {
  text-decoration: none;
}
a:hover {
  opacity: 0.8;
}

li {
  list-style: none;
}

img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

h2 {
  width: 90%;
  height: auto;
}

.contact-btn-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
}

.contact-btn {
  width: 48%;
  height: auto;
}

.p-policy-title {
color: #048fd9;
}

.privacy-company-info  {
border: 1px solid #eeeeee;
}

/* ************************
form
************************ */
#form {
width: 70%;
max-width: 768px;
padding: 40px 0;
background:url(https://fact-info.net/wp-content/uploads/2024/11/gray.jpg);
background-repeat: repeat;
}

.consulting-title {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
}

.ecPlan {
	margin-top: 20px;
	font-weight: bold;
}

.wpcf7-form {
	width: 90%;
	margin: 0 auto;
}

.form-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px; 
  margin: 50px auto;
  padding: 0 2%;
}

  /* 「送信する」ボタン */
  input.wpcf7-submit {
      display: block;
      padding: 15px;
      width: 315px;
      background:#048fd9;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      margin: 50px auto 0
  }

  /*「必須」文字デザイン*/
  .required{
  font-size: 13px;
  padding: 5px;
	width: 40px;
	height: 20px;
  background-color: #FF3246;
  color: #fff;
  margin-left: 15px;
  }

 /* 入力項目を見やすく */
input.wpcf7-form-control.wpcf7-text{
      width: 100%;
      padding: 8px 15px;
      margin: 10px auto;
      border: 1px solid #d0d5d8;
      background-color: #fff;
  }

 /* プルダウンメニュー */
select {
  -moz-appearance: menulist;
  -webkit-appearance: menulist;
   width: 7rem;
   height: 2.2rem;
  background-color: #fff;
   border: 1px solid #d0d5d8;
}

select::-ms-expand {
    display: block;
}

.bd-y, .bd-m, .bd-d {
display: flex;
align-items:center;
}

.bd-y > p, .bd-m > p, .bd-d > p {
font-weight: bold;
margin-left: 8px;
}

.form .text {
  font-size: 30px;
}

.birthday {
display:flex;
justify-content: space-between;
}

/* *************************
side-btn
************************ */
#side-btn {
  padding: 2%;
  width: 300px;
  height: auto;
  position: fixed;
  top: 40%;
  right: 0;
  z-index: 900;
}

.side-btn img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.side-contact-btn {
  width: 200px;
  height: auto;
  margin: 20px auto 0;
}

.side-contact-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* *************************
mainvisual
************************ */
.mainvisual {
  padding-top: 2%;
  width: 70%;
  max-width: 768px;
  height: 895px;
  background: url(https://fact-info.net/wp-content/uploads/2024/11/bg.jpg);
  position: relative;
}

.logo {
  width: 40%;
  height: auto;
  margin-left: 2%;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-btn {
  position: absolute;
  left: 5%;
  bottom: 0;
}


/* *************************
worry
************************ */

.worry {
  background-image: url(https://fact-info.net/wp-content/uploads/2024/11/worry-bg-1.jpg);
  background-repeat: repeat;
  width: 70%;
  max-width: 768px;
  height: auto;
  padding: 40px 0;
}

.worry h2 {
  width: 90%;
  margin: 0 auto;
}



.circle-container {
  width: 100%;
  height: auto;
  margin-top: 20px;
  padding: 0 2%;
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 0; 
  justify-content: center; 
}

.circle {
  width: 11vw; 
  aspect-ratio: 1 / 1; 
  border-radius: 50%; 
  background-color: #eeeeee; 
  display: flex;
  align-items: center; 
  justify-content: center; 
  margin-bottom: 1vw; 
  text-align: center; 
}

.circle:nth-child(4) {
  background-color:transparent;
}


/* *************************
feature
************************ */
.feature {
  width: 70%;
  max-width: 768px;
  background-image: url(https://fact-info.net/wp-content/uploads/2024/11/feature-bg.jpg);
  height: auto;
  position: relative;
}

.feature-title {
  margin: 32px auto 50px;
}

.feature-triangle {
  width: 109px;
  height: 84px;
  margin: 0 auto;
}

.feaure-triangle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-small-title {
  color: #fff;
  width: 100%;
  margin: -70px auto 40px;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  background-color: #048fd9;
  border-radius: 30px;
}

.f-list-container {
  background-color: #abe1fa;
  width: 98%;
  height: auto;
  padding: 5%;
  margin: 0 auto;
}

.f-list-container > li {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.f-list-container > li > p {
  font-size: 18px;
  font-weight: bold;
}

.f-list-container > li > p > span {
  color: #ff3246;
  font-size: 25px;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
  -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

.checkmark {
  width: 24px;
  height: 24px;
  margin-right: 16px;
}

.feature-bottom {
  display: flex;
  justify-content: space-between;
  padding: 2% 2% 0 2%;
}

.feature-girl {
  width: 43%;
  height: auto;
  margin-top: -80px;
}

.feature-btn {
  width: 55%;
  height: auto;
  margin-top: 100px;
}

.feature-mail-btn {
  margin-top: 16px;
}


/* *************************
conditions
************************ */
.conditions {
  width: 70%;
  max-width: 768px;
  height:auto;
  background-color: #f5f6fa;
  padding-top: 24px;
  padding-bottom: 24px;
}

.conditions-title {
  margin: 0 auto;
}

.conditions-container {
  margin-top: 32px;
  width: 92%;
  margin: 32px auto 0;
}

.conditions-item {
  margin-bottom: 32px;
}

.c-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  background-color: #048fd9;
  padding-left: 2%;
  height: 70px;
}

.c-number {
  width: 45px;
  height: 45px;
  background-color: #fff;
  border-radius: 50%;
  color: #048fd9;
  text-align: center;
  line-height: 45px;
}

.c-number img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-text {
  padding:4%;
  background-color: #fff;
  border: 1px solid #048fd9;
  line-height: 1.6;
  font-size: 18px;
}

/* *************************
reason
************************ */
.reason {
  width: 70%;
  max-width: 768px;
  height: auto;
  padding: 40px;
  background: url(https://fact-info.net/wp-content/uploads/2024/11/reason-bg.jpg);
}

.reason-title {
  margin: 0 auto;
}

.reason-container {
  width: 92%;
  margin: 40px auto 0;
}

.reason-item {
  margin-bottom: 32px;
  background-color: #FFF;
  border-radius: 0 30px 0 30px;
  padding: 4% 2% 2%;
  position: relative;
  margin-bottom: 80px;

}

.r-number {
  background-color: #fff;
  color: #048fd9;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  width: 120px;
  padding: 1%;
  border: 1px solid #048fd9;
  transform: rotate(-10deg);
  position: absolute;
  top: -20px;
  left: -10px;
}

h3 {
  color: #048fd9;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin: 22px auto;
}

.reason-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.r-content-img {
  width: 30%;
}

.r-content-text {
  width: 65%;
  font-size: 18px;
  line-height: 1.6;
}

.orange-t {
  font-weight: bold;
  color: #fd7e00;
}

/* *************************
flow
************************ */
.flow {
  width: 70%;
  max-width: 768px;
  height: auto;
  background: url(https://fact-info.net/wp-content/uploads/2024/11/flow-bg.jpg);
  padding: 40px;
}

.flow-title {
  width: 90%;
  margin: 0 auto;
}

.flow-container {
  width: 96%;
  margin: 40px auto;
}

.flow-item,
.flow-item2 {
  filter:drop-shadow(1px 3px 1px rgba(0, 0, 0, .3));
  position: relative;
}

.flow-item {
  margin-bottom: 60px;
}

.flow-item:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top: 30px solid #fff;  
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  filter:drop-shadow(1px 3px 1px rgba(0, 0, 0, .3));
}

.flow-container-title {
  background-color: #048fd9;
  color: #fff;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
  font-size: 22px;
}

.rampart {
  font-family: 'rampart one';
}

.flow-content {
  display: flex;
  justify-content: space-between;
  padding: 3%;
  background-color: #FFF;
}

.flow-text {
  font-size: 18px;
  line-height: 1.6;
  width: 70%;
}

.flow-img {
  width: 30%;
  height: 30%;
}

.flow-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* *************************
jobinfo
************************ */
.jobinfo {
  width: 70%;
  max-width: 768px;
  height: auto;
  background-color: #048fd9;
  position: relative;
  padding: 40px;
}

.jobinfo > h3 {
  font-weight: bold;
  font-size: 24px;
  color: #FFF;
  text-align: center;
}


.job-card  {
  width: 96%;
  height: auto;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.job-card_item {
width: 100%;
margin: 0 auto;
}

.arrow_box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 20px 5px;
  position: relative;
}

.prev-arrow,
.next-arrow {
  display: block;
  width: 50px;
  height: 50px;
  background: #f2f7fb;
  border-radius: 50%;
  transition: all .3s ease;
  cursor: pointer;
  position:relative;
}

.prev-arrow {
  transform: rotate(180deg);
  margin-right: 20px;
}

.prev-arrow::before,
.next-arrow::before{
  position:absolute;
  content: "";
  width:10px;
  height:10px;
  border-right: 2px solid #048fd9;
  border-top: 2px solid #048fd9;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  transform:rotate(45deg);
}

/* *************************
voices
************************ */
.voices {
  width: 70%;
  max-width: 768px;
  height: auto;
  background: url(https://fact-info.net/wp-content/uploads/2024/11/voices-bg.jpg);
  padding: 40px;
}

.voices-container {
  margin: 40px auto 0;
  width: 96%;
}

.voices-item {
  background-color: #fffee6;
  padding: 5%;
}

.voices-item:first-child {
  margin-bottom: 40px;
}

.voices-title {
  width: 70%;
  margin: 0 auto;
}

.voices-desc {
  display: flex;
  justify-content: flex-start;
  gap: 24px;
}

.voices-img {
  width: 25%;
  height: 25%;
}

.voices-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voices-list {
  font-weight: 700;
}

.voices-text {
  margin-top: 32px;
  line-height: 1.6;
  font-size: 18px;
}

/* *************************
faq
************************ */
.faq {
  width: 70%;
  max-width: 768px;
  height: auto;
  background-color: #f5f6fa;
  padding: 40px;
}

.faq-title {
  width: 70%;
  margin: 0 auto;
}

.faq-container {
  margin: 40px auto;
  width: 96%;
}

.faq-item {
  margin-bottom: 40px;
}

.faq-list-title {
  background-color: #048fd9;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  padding: 3%;
}

.faq-list-answer {
  display: flex;
  justify-content: space-between;
  padding: 2%;
  background-color: #fff;
}

.faq-A {
  background-color: #ff3246;
  color: #fff;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
 margin-right: 8px;
}

.faq-text {
  width: 90%;
  line-height: 1.6;
  font-size: 18px;
}


/* *************************
footer
************************ */
footer {
  padding: 5% 0;
  margin: 0 auto;
  text-align: center;
  width: 70%; 
  max-width: 768px;
  height: 180px;
  background-color: #fff;
}

.footer-logo {
width: 80%;
height: auto;
margin: 0 auto;
}

.footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

footer .copyright {
  margin-top: 24px;
  font-size: 9px;
}

/* *************************
footer 固定ボタン
************************ */
.footer-btn {
  background-color: #048fd9;
  width: 70%;
  height: auto;
  display: flex;
  justify-content: space-around;
  padding: 2%;
  display: none;
}

.line-footer-btn {
  width: 49%;
  height: auto;
}

.mail-footer-btn {
  width: 49%;
  height: atuo;
}

.line-footer-btn img,
.mail-footer-btn img {
  width: 100%; 
  height: auto; 
}

/* *******************************************************************
SP
************************ */

@media screen and (max-width:768px) {
  .mainvisual,
  .worry,
  .feature,
  .conditions,
  .reason,
  .flow,
  .jobinfo,
  .voices,
  .faq,
  .footer-btn {
    width: 100%;
  }

body {
background:none;
overflow-x: hidden; 
}

.grecaptcha-badge {
    bottom: 100px!important;
}


/* *************************
 side-btn
************************ */
  #side-btn {
   display: none;
  }

/* ************************
form
************************ */
#form {
width: 100%;
}

.birthday {
flex-direction: column;
}

.bd-y, .bd-m, .bd-d {
width: 90%;
margin-bottom: 24px;
}

 /* プルダウンメニュー */
select {
   width: 11rem;
}
/* *************************
 mainvisual
************************ */
.mainvisual {
  height: auto;
}


/* *************************
 worry
************************ */
.worry {
  width: 100%;
  height: auto;
}

.circle {
  width: 42vw; 
  aspect-ratio: 1 / 1; 
  margin: 5px; 
}

.circle-container {
  grid-template-columns: repeat(2, 1fr); 
  gap: 20px; 
}


/* *************************
feature
************************ */
.feature {
  height: auto;
}

.feature-small-title {
font-size: 23px;
padding: 2%;
}

.f-list-container li p {
  width: 100%;
  font-size: 18px;
}

.f-list-container > li > p > span {
font-size: 20px;
}


.feature-girl {
width: 45%;
margin-top: -40px
}

/* *************************
conditions
************************ */
.conditions {
  height: auto;
}

.c-title {
font-size: 21px;
}

/* *************************
reason
************************ */
.reason {
padding: 2%;
}

.reason-container {
width: 98%;
}

/* *************************
flow
************************ */
.flow {
padding: 2%;
}

.flow-text {
  font-size: 22px;
  width: 100%;
}

.flow-img {
  width: 50%;
  height: 50%;
}

.flow-content {
flex-direction: column;
}

/* *************************
jobinfo
************************ */
.jobinfo {
padding: 2%;
}

.jobinfo > h3 {
font-size: 20px;
}

.job-card_item {
width: 100%;
margin: 8px 4px;
}

/* *************************
voices
************************ */
.voices {
  padding: 2% 2% 5% 2%;
}

.voices-container {
  width: 98%;
}

.voices-item {
  padding: 2%;
}

.voices-text {
  line-height: 1.6;
  font-size: 18px;
}

/* *************************
faq
************************ */
.faq {
  padding: 2%;
}

/* *************************
footer
************************ */
footer {
  margin-bottom: 100px;
  width: 100%;
}

/* *************************
footer固定ボタン
************************ */
.footer-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: center;
  position: fixed;
  bottom: 0;
  height: 15%;
  z-index: 300;
}

.footer-btn .line-footer-btn,
.footer-btn .mail-footer-btn {
  flex: 1; /* ボタンを均等に配置 */
  text-align: center;
}
.footer-btn img {
  max-width: 100%; /* ボタン画像がレスポンシブになるように調整 */
  height: auto;
}

}