body {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  width: 100%;
}

.sp {
  display: none;
}

.pc {
  display: block;
}

.center {
  text-align: center;
}

.red {
  color: red;
  font-weight: bold;
}

.white {
  color: #fff;
}

#header {
  background-image: url('../img/bkg1_2.png');
  height: 765px;
  background-repeat: no-repeat;
  /* background-position: center; */
  text-align: center;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-size: cover;
  position: relative;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  flex-wrap: wrap;
}

.logowidth {
  width: 80px;
}

.logo {
  position: absolute;
  top: 7px;
  left: 11px;
  display: flex;
  align-items: center;
}

.logo img {
  margin-right: 10px;
}

.logo p {
  margin: 0;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  font-family: Noto Sans JP;
}

.overlay {
  position: absolute;
  top: 115px;
  max-width: 1257px;
  height: 553px;
  background-color: rgba(105, 121, 109, 0.7);
  pointer-events: none;
  padding-top: 88px;
}

.headp,
.headp2,
.headp3,
.headp4 {
  margin: 5px 0;
}

.headp {
  font-size: 65px;
  line-height: 1;
  color: #C1FF72;
  font-family: neueMachina;
  font-weight: bold;
}

.headp2 {
  font-size: 100px;
  font-weight: bold;
}

.headp3 {
  font-size: 40px;
}

.headp4 {
  font-size: 30px;
}

.btn-wrap {
  display: flex;
}

.btn-wrap-pc-sp {
  display: flex;
  width: 100%;
  max-width: 435px;
  margin: 10px;
  justify-content: space-between;
  text-align: center;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1rem;
}

.right {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 1200px;
  margin: auto;
}


.topleft,
.topright {
  display: flex;
  align-items: center;
}

.topleft {
  flex: 1;
}

.topright {
  flex: 3;
  justify-content: flex-end;
  display: flex;
}

.imgdouga {
  font-size: 0.8rem;
  margin-left: 5px
}

.imgdouga p {
  margin: 0;
  padding: 0;
}



.btn_mendan,
.btn_hojin {
  background: #5A99B7;
  line-height: 1.4;
  flex: 1;
  /* フレックスボックスの子要素として幅を均等に設定 */
  margin: 5px;
  /* ボタン間にスペースを追加 */
  padding: 1.25rem 0;
  border-radius: 100vh;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* アイコンの位置調整のため */
}

.btn_hojin {
  background: #4C684E;
}

.btn_mendan:hover {
  background-color: #a0bcc9;
}

.btn_hojin:hover {
  background-color: #909f91;
}

.imgdouga img {
  width: 180px
}

.content {
  max-width: 1366px;
  margin: auto;
}

.index {
  color: #fff;
}

.index h2 {
  font-size: 45px;
  padding: 15px;
  margin-top: 0;
}

.haikei1 {
  background-color: #4c684ebd;
  padding: 0 70px;
}

.haikei1 h1 {
  margin: 0;
  color: #56c8ff;
  font-size: 45px;
  padding: 15px;
}

.haikei1 h1 span {
  color: #C1FF72;
  font-weight: 1;
}

.haikei1-2,
.haikei2-2 {
  display: flex;
  padding-bottom: 20px;
}


.haikei3-1 {
  display: flex;
  padding-bottom: 20px;
  align-items: center;
  justify-content: center;
}

.hikei1_img {
  border-radius: 50%;
  max-width: 400px;
  max-height: 400px;
}

.hikei2_img {
  width: 260px;
}

.haikei1-right {
  color: #fff;
  margin-left: 30px;
  line-height: 2;
  font-size: 21px;
}

.btn--green,
a.btn--green {
  color: #fff;
  background-color: #237233;
  padding: 23px;
  font-size: 19px;
  font-weight: bold;
}

.btn--green:hover,
a.btn--green:hover {
  color: #fff;
  background: #4da35e;
}

.btn--2,
a.btn--2 {
  color: #3C3C3D;
  background-color: #C1FF72;
  padding: 17px;
}

.btn--2:hover,
a.btn--2:hover {
  color: #3C3C3D;
  background: #b7cd9a;
}

.toiawase_btn {
  margin: auto;
  margin-top: 33px;
  margin-left: 47px;
  padding-bottom: 39px;
}

.toiawase_btn2 {
  text-align: right;
}

.haikei2 {
  background-color: #5A99B7;
  padding: 0 70px;
}


.haikei2 h2 {
  color: #09210b;
  padding: 15px;
}

.haikei2 h2 span,
.haikei3 h2 span {
  color: #C1FF72;
  font-weight: 1;
  margin-left: 20px;
}

.haikei2-left {
  color: #fff;
  margin-left: 30px;
  line-height: 2;
  font-size: 21px;
}

.haikei2-right {
  padding-bottom: 30px;
  margin-top: -15px;
}

.gazowaku {
  background-color: #4C684E;
  margin-right: 55px;
  padding: 30px;
  margin: 0 78px;
}

.haikei3 {
  background-color: #afd4e2;
  padding: 0 70px;
}

.haikei3 h2 {
  color: #4c684e;
  padding: 15px;
}

.gazowaku3 {
  background-color: #0f648d;
  margin-right: 55px;
  padding: 5px 30px;
  margin: 0 45px;
}

.toiawase_btn2-3 {
  text-align: center;
  padding: 60px 0;
}

.hikei3_img {
  width: 300px;
}

.ha3span {
  color: #0f648d;
  font-weight: bold;
}

.black {
  color: #000;
}

.sodan {
  background-image: url(../img/haikei3_1.jpg);
}

.sodan,
.sodan2,
.service_title,
.ainsin_title,
.aboutus,
.service_gaiyo {
  padding: 0 70px
}

.sodan-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 21px;
  padding-bottom: 35px;
}

.box1 {
  background-color: #012E06;
  width: calc(45% - 20px);
  margin: 10px;
}

.box2 {
  background-color: #298941;
  width: calc(45% - 20px);
  margin: 10px;
}

.box1,
.box2 {
  box-sizing: border-box;
  padding: 5px;
  border: 2px solid transparent;
  border-radius: 14px;
  font-weight: bold;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sodan2 {
  background-image: url(../img/haikei4.png);
}

.box1_2 {
  background-color: #0F648D;
  width: calc(45% - 20px);
  margin: 10px;
}

.box2_2 {
  background-color: #5A99B7;
  width: calc(45% - 20px);
  margin: 10px;
}

.box1_2,
.box2_2 {
  box-sizing: border-box;
  padding: 5px;
  border: 2px solid transparent;
  border-radius: 14px;
  font-weight: bold;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service {
  margin-bottom: -10px;
}

.service_title {
  display: flex;
  background-color: #31454E;
}

.service_title h2 {
  margin-top: 20px;
}

.btn--3,
a.btn--3 {
  color: #3C3C3D;
  background-color: #AFD4E2;
  padding: 17px;
}

.btn--3:hover,
a.btn--3:hover {
  color: #3C3C3D;
  background: #c3d3d9;
}

.service_gaiyo {
  background-image: url(../img/unesya.png);
  padding-bottom: 20px;
}

.service_gaiyo_tbl {
  margin: auto;
  width: 100%;
  color: #333;
  font-size: 16px;
  margin-bottom: 20px;
  max-width: 1000px;
  font-weight: bold;
}

.service_gaiyo_tbl,
.service_gaiyo_tbl td {
  border: 2px solid black;
  border-collapse: collapse;
}


.service_gaiyo_tbl td {
  padding: 20px;
}



.yellow_s {
  background-color: #FBC800;
  font-weight: bold;
}

.gry_s {
  background-color: #DFE8E1;
  text-align: center;
  font-size: 33px;
  font-weight: bold;
}

.green_s {
  background-color: #C1FF72;
  text-align: center;
  font-size: 33px;
  font-weight: bold;
}

.rei1 {
  background-color: #DFE8E1;
  font-size: 15px;
}

.rei2 {
  background-color: #C1FF72;
  font-size: 15px;
}

.service_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 中央揃えのためにalign-itemsを使用 */
}

.toiawase_btn3 {
  padding-right: 60px;
}

.btn {
  text-decoration: none;
  padding: 10px 20px;
  color: #fff;
  background-color: #007bff;
  border-radius: 5px;
  display: inline-block;
  font-size: 19px;
  font-weight: bold;
}

.online_img {
  max-width: 100%;
  height: auto;
  /* アスペクト比を維持する */
}

.ainsin_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: url(../img/haikei5_1.png);
  background-repeat: no-repeat;
  height: 130px;
}

.ainsin_title h2 {
  margin-top: 30px;
}



.assinbox {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px;
  padding-bottom: 100px;
  text-align: center;
  background-color: #A2BF40;
  margin: 0;
  width: 100%;
}

.ansinp {
  background-color: #ced4bb;
  width: 270px;
  /* border: solid 3px #333; */
  border-radius: 60px;
  margin: 0 19px;
  padding: 10px;
  text-align: left;
  color: #333;
  height: 382px;
  padding-right: 20px;
  position: relative;
  /* ここでrelativeを指定 */
  font-weight: bold
}

.ansinp h3 {
  text-align: center;
  background-color: #304214;
  color: #fff;
  font-size: 21px;
  padding: 15px;
  margin: 0px -20px 0 -11px;

}

.ansin_img {
  text-align: center;
}

.ansin1 {
  margin-top: 40px;
}


.ansin2 {
  margin-top: 100px;
}

.step-circle,
.step-circle2,
.step-circle3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: #237233;
  border-radius: 50%;
  color: white;
  font-size: 30px;
  text-align: center;
  position: absolute;
  top: -20px;
  /* 親要素のtopに対して位置を指定 */
  left: -20px;
  /* 親要素のleftに対して位置を指定 */
}

/* .step-circle {
  left: 205px;
  top: 20px;
}

.step-circle2 {
  left: 550px;
  top: 75px;
}

.step-circle3 {
  right: 425px;
  top: 20px;
} */


.step-circle span {
  display: inline-block;
  line-height: 1.2;
}

.option {
  padding: 20px 70px 50px;
}

.option h2 {
  margin-bottom: 0;
}

.op1-2 {
  width: 80%;
  margin: auto;
  font-size: 2rem;
  font-weight: bold;
}

.op1 {
  background-color: #fbc800;
  margin: 0;
  padding: 25px;
  color: #333;
}

.op2 {
  background-color: #7ed957;
  margin: 0;
  padding: 25px;
  color: #333;
}

.op3 {
  background-color: #298941;
  margin: 0;
  padding: 25px;

}


.aboutus,
.option {
  background-image: url(../img/unesya.png);
}

.aboutus h2 {
  text-align: right;
  padding: 28px 59px 0;
  line-height: 1;
  margin: 0;
  font-size: 45px;
}

.aboutus h2 span {
  color: #333;
  font-size: 29px;
}

.container {
  position: relative;
  width: 100%;
  height: 610px;
}

.intro {
  position: absolute;
  display: flex;
  align-items: center;
  font-size: 28px;
}

.intro1_img {
  width: 245px;
  height: auto;
  border-radius: 50%;

}

.oku_img {
  width: 280px;

}

.intro img {
  margin-right: 10px;
}

.intro1 {
  top: 9%;
  left: 26%;
  transform: translate(-50%, -50%);
}

.intro2 {
  top: 17%;
  right: 10%;
}

.intro3 {
  top: 76%;
  left: 26%;
  transform: translate(-50%, -50%);
}

.mazuha {
  color: #C1FF72;
  font-size: 45px;
  font-weight: bold;
  margin-bottom: 0;
}

.company {
  background-color: #43484B;
  padding: 10px 45px;
}

.company h2 {
  margin: 0;
}

.toiawasesaki {
  font-size: 25px;
  margin-left: 30px;
  margin-top: -17px;
}

.toiawasesaki2 {
  display: flex;
}

.toiawase2_2 {
  font-size: 30px;
  margin-left: 80px;
}

.contactp {
  color: #5A99B7;
  text-align: center;
  margin-top: 0;
}

.toiawase_img {
  width: 90%;
  border-radius: 246px;
}

.plan1_1 {
  background-color: #298941;
  padding: 0 70px 20px;
}



.plan {
  background-color: #5A99B7;
  margin: auto;
  padding: 0 70px 20px;
}


.planh2 {
  margin-left: 25px;
}

.plan_right1,
.plan_right {
  font-size: 24px;
}

.plan_right1,
.plan_right {
  color: #fff;
  font-weight: bold;
}

.planh1_2,
.planh2,
.plan_tbl1,
.plan_tbl1_1 {
  display: flex;
}

.kihon {
  color: #333;
  font-size: 29px;
  font-weight: bold;
  margin: 10px 90px;
}

.sen span {
  color: black;
}

.sen {
  color: #f200286b !important;
  text-decoration: line-through;
  text-decoration-thickness: 5px;
}

.plantbl1_1,
.plantbl {
  color: black;
  font-weight: bold;
}


.plantbl1_1,
.plantbl1_1 td,
.plantbl,
.plantbl td {
  padding: 10px 28px;
  border: 3px solid rgb(20 35 11 / 65%);
  border-collapse: collapse;
  text-align: center;
}

.planh1_2 h2,
.planh2 h2 {
  width: 345px;
}

.planh1_2 h2 {
  color: #c1ff72;
  font-size: 56px;

}

.plan_tbl1_1,
.plan_tbl1 {
  margin: auto;
  justify-content: center;
}

.planh2 h2 {
  color: #5ce1e6;
  font-size: 56px;
}


.plant1_l,
.plant_l {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin: 0 25px;
}

.c89998C {
  background-color: #89998C;
}

.c298941 {
  background-color: #298941;
}

.c89998C {
  background-color: #89998C;
}

.c4C684E {
  background-color: #4C684E;
}

.c4C684E {
  background-color: #4C684E;
}

.c304214 {
  background-color: #304214;
}

.c1ff72 {
  background-color: #c1ff72;
}

.c7ed957 {
  background-color: #7ed957;
}

.c298941 {
  background-color: #298941;
}

.c5ce1e6 {
  background-color: #5ce1e6;
}

.c0cc0df {
  background-color: #0cc0df;
}

.c5a99b7 {
  background-color: #5a99b7;
}

.f30 {
  font-size: 30px;
}

.f25 {
  font-size: 25px;
}

.f28 {
  font-size: 28px;
}


footer {
  text-align: center;
}


/* 
contact 
*/

.tope {
  margin-left: 30px;
}

.contact h1 {
  position: relative;
  color: #158b2b;
  font-size: 20px;
  padding: 10px 0;
  text-align: center;
  margin: 1.5em 0;
}

.contact h1:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 150px;
  height: 58px;
  border-radius: 50%;
  border: 5px solid #a6ddb0;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.contact {
  flex-grow: 1;
  background-color: #e5f7dcee;
}

.contact-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 40px;
}

.c_logo_l {
  margin-right: 10px;
}

.c_logo_r {
  font-family: Noto Sans JP;
  font-weight: bold;
  font-size: 25px;
}

.contact_logo_img {
  width: 100px;
}

.contact-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  margin: 50px auto;
  text-align: center;
}

.contact-form h1 {
  margin-top: 0;
  color: #333;
}

.contact_tbl,
.contact_tbl_con {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
}

.contact_tbl td,
.contact_tbl_con td {
  padding: 10px;
  vertical-align: top;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.contact-form label {
  display: inline-block;
  margin-bottom: 5px;
}

.required:after {
  content: ' *';
  color: red;
}

.contact-form input,
.contact-form textarea {
  width: calc(100% - 20px);
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #28a745;
  color: #fff;
  font-size: 16px;
  margin: 10px 5px;
  cursor: pointer;
}

.contact-form button:hover {
  background-color: #218838;
}

.contact_tbl th,
.contact_tbl td {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 8px;
}

.wi67 {
  width: 140px;
}

.btn_con {
  display: flex;
}

footer {
  background-color: #f5f5f5;
  padding: 10px;
  text-align: center;
}

.left {
  text-align: left;
}



/* qa */

.qa {
  background-color: #e5f7dcee;
  padding: 20px;
  border-radius: 8px;
  margin: 0px auto;

  font-family: Arial, sans-serif;
}

.qa h1 {
  text-align: center;
  font-size: 28px;
  color: #444;
  margin-bottom: 20px;
}

.qa-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.qa_waku {
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

.qa_logo_img {
  width: 80px;
  height: auto;
  margin-right: 10px;
}

.c_logo_r p {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.tope {
  display: inline-block;
  margin: 15px 0;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

.tope:hover {
  background-color: #45a049;
}



.qa-section {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #ffffff;
  border-left: 5px solid #4CAF50;
  border-radius: 5px;
}

.qa-section p {
  margin: 10px 0;
}

.qa-q {
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.qa-a {
  color: #555;
  line-height: 1.6;
}


.btn_qa1 {
  display: flex;
  position: absolute;
  bottom: 2px;
  left: 10px;
  margin-left: 10px;
  text-decoration: none;
  padding: 9px;
  background-color: #3379c4;
  color: white;
  border-radius: 5px;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100px;
  text-align: center;
  font-size: 20px;
  justify-content: center;
}

.btn_qa {
  margin-left: 10px;
  text-decoration: none;
  padding: 15px;
  background-color: #3379c4;
  color: white;
  border-radius: 5px;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100px;
  text-align: center;
  font-size: 25px;
}

.btn-wrap a:first-child {
  margin-left: 0;
}

.btn_qa i,
.btn_mendan i,
.btn_hojin i {
  margin-left: 5px;
}

.btn_qa:hover,
.btn_mendan:hover,
.btn_hojin:hover {
  background-color: #0056b3;
}











#pagetop {
  position: fixed;
  bottom: 50px;
  right: 16px;
  display: none;
  background-color: #87dddab3;
  border-radius: 40px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 110%;
  margin: 0px;
  padding: 20px;
  filter: alpha(opacity=60);
  -moz-opacity: 0.60;
  opacity: 0.60;
}

#pagetop a {
  color: #fff;
  text-decoration: none;
}