@charset "UTF-8";
/* 
Theme name: RoBoHoN
*/

html{
  font-size: 100%;
  scroll-behavior: smooth;
}

:root {
  padding: 0 !important;
  margin: 0 !important;
}

body{
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
}

a{
  text-decoration: none;
  color: #000;
}

img{
  max-width: 100%;
  vertical-align: bottom;
  object-fit: cover;
}

li{
  list-style: none;
}

.pc{
    display: block;
  }

.sp{
  display: none;
}

/*-------------------------------------------
HEADER
-------------------------------------------*/

.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 960px;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 41px;
  padding-right: 41px;
}

.site-title{
  width: 109px;
  display: flex;
  align-items: center;
}

.header__nav ul{
  display: flex;
  gap: 30px;
}

.header__nav ul li a{
  font-size: 1rem;
}

/*-------------------------------------------
MV
-------------------------------------------*/

.mv{
  max-width: 960px;
  margin: 0 auto;
}

/*-------------------------------------------
ABOUT
-------------------------------------------*/

.about{
  max-width: 960px;
  margin: 0 auto;
  margin-top: 49px;
  padding-left: 20px;
  padding-right: 20px;
}

.about__title,
.capable__title,
.contact__title,
.trial__title{
  margin: 0 auto;
  width: fit-content;
  padding-bottom: 5px;
  font-size: 2.0625rem;
  font-weight: bold !important;
  font-family: "Zen Maru Gothic", serif;
  color: #35444C;
  position: relative;
}

.about__title::after,
.capable__title::after,
.contact__title::after,
.trial__title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(to right, #EACBD5 0%, #FFD5A5 25%, #FFE9A5 50%, #BCE7A5 75%, #9DBEFF 100%);
}

.about__content{
  margin-top: 47px;
  display: flex;
  justify-content: center;
  align-items: end;
}

.about__text{
  line-height: 1.75;
  color: #35444C;
  font-family: "Zen Maru Gothic", serif;
}

.about__paragraph{
  font-size: 1.125rem;
  font-weight: bold !important;
}

.about__img{
  max-width: 330px;
}

/*-------------------------------------------
CAPABLE
-------------------------------------------*/

.capable{
  max-width: 960px;
  margin: 0 auto;
  margin-top: 80px;
  padding-left: 20px;
  padding-right: 20px;
}

.capable__list{
  margin-top: 49px;
  display: flex;
  justify-content: space-between;
}

.capable__list li{
  width: 31.5%;
}

.capable__list__title{
  background-color: #FFE9A5;
  border-radius: 50px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #35444C;
  font-size: 1.25rem;
  font-weight: bold !important;
  font-family: "Zen Maru Gothic", serif;
}

.capable__list__img{
  margin-top: 10px;
  height: 200px;
  text-align: center;
}

.capable__list__img img{
  height: 100%;
}

.capable__list__text{
  margin-top: 15px;
  font-size: 1rem;
  font-weight: 500;
  font-family: "Zen Maru Gothic", serif;
  color: #35444C;
  text-align: center;
}

/*-------------------------------------------
CONTACT
-------------------------------------------*/

.contact{
  max-width: 648px;
  margin: 0 auto;
  margin-top: 60px;
  padding-left: 20px;
  padding-right: 20px;
}

.contact__text{
  margin-top: 30px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 500;
  font-family: "Zen Maru Gothic", serif;
  color: #35444C;
}

.contact__text a{
  color: #0068B7;
}

.wpcf7 label{
  display: inline-block;
  width: 100%;
  font-size: 1.4375rem;
  font-weight: 500;
  font-family: "Zen Maru Gothic", serif;
  margin-top: 25px;
  margin-bottom: 2px;
  color: #35444C;
}

.wpcf7 label span.asterisk{
  color: #FF6262;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 20px;
  border: 0.86px solid #35444C !important;
  background-color: rgba(245, 245, 245, 0.5);
  border-radius: 8.63px;
  font-size: 1.375rem;
  font-weight: 500;
  color: #35444C;
}

.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  border-radius: 8.63px !important;
}

.wpcf7 textarea {
  max-height: 190px;
}

/* .wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: rgba(53, 68, 76, 0.5);
  opacity: 1;  
} */

.wpcf7 p:has(input[type="checkbox"]){
  text-align: center;
  color: #35444C;
  font-size: 1.375rem;
  font-weight: 500;
  font-family: "Zen Maru Gothic", serif;
}

.wpcf7 label:has(input[type="checkbox"]) {
  margin-top: 50px;
  position: relative;
  cursor: pointer;
  width: 100%;
  padding-left: 40px;
}

.wpcf7 input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* チェックボックスの枠を ::before で作る */
.wpcf7 label:has(input[type="checkbox"])::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 5px;
  border: 1.7px solid #35444C;
  background-color: #fff;
  box-sizing: border-box;
}

/* チェックマークを::after で作る */
.wpcf7 input[type="checkbox"]:checked + *::after {
  content: "";
  position: absolute;
  left: -30px; 
  top: 15px;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 17px;
  border: solid #4B4B4B;
  border-width: 0 4px 4px 0;
  box-sizing: border-box;
}

.wpcf7 input[type="checkbox"] + * {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.wpcf7 p:has(input[type="submit"]){
  text-align: center;
}

.wpcf7 input[type="submit"] {
  margin-top: 50px;
  width: 250px;
  background-color: #EC96A9;
  color: #fff;
  padding: 9px 20px;
  border: none;
  border-radius: 8.6px;
  font-size: 1.4375rem;
  font-weight: bold;
  font-family: "Zen Maru Gothic", serif;
   box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}


/*-------------------------------------------
TRIAL
-------------------------------------------*/

.trial{
  max-width: 960px;
  margin: 0 auto;
  margin-top: 71px;
  padding-left: 20px;
  padding-right: 20px;
}

.trial__text{
  margin-top: 29px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 500;
  font-family: "Zen Maru Gothic", serif;
  color: #35444C;
}

.trial__img{
  margin: 0 auto;
  margin-top: 20px;
  max-width: 767px;
}

/*-------------------------------------------
FOOTER
-------------------------------------------*/

.footer{
  max-width: 960px;
  margin: 0 auto;
  margin-top: 191px;
  background-color: #FFE9A5;
  padding-top: 50px;
  padding-bottom: 49px;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 110px;
}

.footer__nav ul{
  display: flex;
  justify-content: center;
}

.footer__nav ul li{
  padding-left: 20px;
  padding-right: 20px;
  border-left: 1px solid #35444C;
}

.footer__nav ul li:last-of-type{
  border-right: 1px solid #35444C;
}

.footer__nav ul li a{
  color: #35444C;
  font-size: 1.25rem;
}

.fixed{
  text-align: center;
  position: fixed;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 768px) {

  .pc{
    display: none;
  }

  .sp{
    display: block;
  }

  .footer{
    margin-bottom: 250px;
  }

  .fixed{
    width: 100%;
  }

  /*-------------------------------------------
  HEADER
  -------------------------------------------*/

  .header{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 30px;
  }

  .site-title{
    width: 103px;
  }

  #g-nav{
    position:fixed;
    z-index: 999;
    top: -120%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 768px;
    height: 100vh;
    background:#fff;
    transition: all 0.6s;
  }

  #g-nav.panelactive{
    top: 0;
  }

  #g-nav ul {
    position: absolute;
    z-index: 999;
    top: 35%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  #g-nav li{
    text-align: center; 
  }

  #g-nav li a{
    margin-top: 48px;
    color: #35444C;
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
  }

  #g-nav li:first-of-type a{
    margin-top: 0px;
  }

  .openbtn{
    position: relative;
    cursor: pointer;
    width: 30px;
    height: 30px;
    z-index: 1000;
  }

  .openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 0px;
    width: 100%;
    height: 3px;
	  background: #35444C;
  }

  .openbtn span:nth-of-type(1) {
    top: 0px;	
  }

  .openbtn span:nth-of-type(2) {
    top: 12px;
  }

  .openbtn span:nth-of-type(3) {
    top: 24px;
  }

  .openbtn.active span:nth-of-type(1) {
    top: 13px;
    left: 0px;
    transform: translateY(6px) rotate(-45deg);
  }

  .openbtn.active span:nth-of-type(2) {
    opacity: 0;
  }

  .openbtn.active span:nth-of-type(3){
    top: 25px;
    left: 0px;
    transform: translateY(-6px) rotate(45deg);
  }

  /*-------------------------------------------
  ABOUT
  -------------------------------------------*/

  .about{
    margin-top: 42px;
  }

  .about__title,
  .capable__title,
  .contact__title,
  .trial__title{
    padding-bottom: 2px;
    font-size: 1.6875rem;
    font-weight: bold !important;
  }

  .about__content{
    margin-top: 30px;
    align-items: center;
    flex-direction: column-reverse;
    gap: 25px;
  }

  .about__text{
    text-align: center;
  }

  .about__paragraph{
    font-size: 1.125rem;
    font-weight: bold !important;
  }

  .about__img{
    max-width: 258px;
  }

  /*-------------------------------------------
  CAPABLE
  -------------------------------------------*/

  .capable{
    margin-top: 54px;
  }

  .capable__list{
    margin-top: 17px;
    flex-direction: column;
    gap: 12px;
  }

  .capable__list li{
    width: 100%;
  }

  .capable__list__title{
    margin: 0 auto;
    max-width: 190px;
    height: 37px;
    font-size: 1.125rem;
    font-weight: bold !important;
  }

  .capable__list__title br{
    display: none;
  }

  .capable__list__img{
    margin: 0 auto;
    margin-top: 8px;
    /* height: auto !important;
    max-width: 150px !important; */
  }

  .capable__list__text{
    margin-top: 12px;
    font-size: 1rem;
  }

  /*-------------------------------------------
  CONTACT
  -------------------------------------------*/

  .contact{
    margin-top: 50px;
  }

  .contact__text{
    margin-top: 14px;
    font-size: 1rem;
  }

  .wpcf7-form p{
    margin: 0 !important;
    width: 100% !important;
  }

  .wpcf7 label{
    font-size: 1rem;
    margin-top: 14px;
  }

  .wpcf7 label:has(input[type="text"]){
    margin-top: 20px;
  }

  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 input[type="date"],
  .wpcf7 select,
  .wpcf7 textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 15px;
    border: 0.42px solid #35444C;
    border-radius: 4.19px;
    font-size: 1rem;
  }

  .wpcf7 input[type="date"],
  .wpcf7 select,
  .wpcf7 textarea {
    border-radius: 4.19px !important;
  }

  .wpcf7 .wpcf7-form-control-wrap {
    width: 100%;
    min-width: 0;
  }

  .wpcf7 .wpcf7-form-control.wpcf7-date,
  .wpcf7 .wpcf7-form-control.wpcf7-date-time {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    min-width: 0;          
    display: block;
    -webkit-appearance: none;
    appearance: none;
    height: 42px !important;
  } 


  .wpcf7 p{
    margin: 0 auto;
    width: fit-content;
  }

  .wpcf7 p:has(input[type="checkbox"]){
    font-size: 1rem;
  }

  .wpcf7 label:has(input[type="checkbox"]) {
    margin-top: 15px;
    padding-left: 15px;
  }

  .wpcf7 label:has(input[type="checkbox"])::before {
    left: -5px;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 0.84px solid #35444C;
  }

  .wpcf7 input[type="checkbox"]:checked + *::after {
    left: -15.5px; 
    top: 10.5px;
    width: 7px;
    height: 9px;
    border-width: 0 2px 2px 0;
  }

  .wpcf7 input[type="submit"] {
    margin-top: 21px;
    width: 159px;
    padding: 9px 20px;
    border-radius: 4.19px;
    font-size: 1.125rem;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2);
  }


  /*-------------------------------------------
  TRIAL
  -------------------------------------------*/

  .trial{
    margin-top: 24px;
    padding-left: 0;
    padding-right: 0;
  }

  .trial__text{
    margin-top: 21px;
    font-size: 1rem;
  }

  .trial__img{
    margin: 0 auto;
    margin-top: 20px;
    max-width: 377px;
  }

  /*-------------------------------------------
  FOOTER
  -------------------------------------------*/

  .footer{
    margin-top: 76px;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer__nav ul{
    height: 14px;
  }

  .footer__nav ul li{
    padding-left: 10px;
    padding-right: 10px;
    border-left: 0.5px solid #35444C;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .footer__nav ul li:last-of-type{
    border-right: 0.5px solid #35444C;
  }

  .footer__nav ul li a{
    font-size: 0.625rem;
  }
}

@media screen and (max-width: 450px) {
  .footer{
    margin-bottom: 150px;
  }
}