.company_section_01{
  grid-column: 1 / 7;

}

.company_section_background{
  grid-column: 5 / 7;
  background-color: #c3ddfa
}

.company_section_02,.company_section_03,.company_section_07,.company_section_01_02{
  grid-column: 1 / 7;
  /* margin-top: 5%; */
  /* margin-bottom: 5%; */
  
}


.company_inner_section_01,.otoiawase_inner_section_01,.news_inner_section_01,.company_inner_section_01_02{
    grid-column: 1 / 7;
    /* margin-top: 10%; */
    overflow: hidden;
    display: flex;
    display: grid;
    grid-template-columns: var(--size2) 1fr 1fr 1fr 1fr 1fr var(--size2);
}

.company_inner_section_02,.company_inner_section_03,.company_inner_section_04,.company_inner_section_05{
  grid-column: 1 / 7;
  /* margin-top: 10%; */
  overflow: hidden;
  display: flex;
  display: grid;
  grid-template-columns: var(--size2) 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr var(--size2);
}


.about_company_inner_section_02{
  grid-column: 1 / 7;
  /* margin-top: 10%; */
  overflow: hidden;
  display: flex;
  display: grid;
  grid-template-columns: var(--size2) 1fr 1fr 1fr 1fr 1fr var(--size2);
}

.company_inner_section_01_center,.company_inner_section_02_center,.company_inner_section_01_02_center{
  grid-column: 3 / 6;
  text-align: left;
  margin-bottom: var(--size1);
  /* background-image: url('../images/company_bk.png'); */
  background-repeat: no-repeat;
  background-position: right top;
  height: auto;
}

.company_inner_section_01_center h2{
  text-align: center;
  margin-top: 15%;
  /* margin-bottom: 10%; */
  --min-size: 36;
  --max-size: 64;
  font-size: var(--clamp-size);
  font-family: var(--my);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  /* border-bottom: double 5px #444444;
  8FBC3E */
  font-style: italic;
  background-image: linear-gradient(
      -45deg, 
      #8FBC3E 0 50%, 
      #31519A 20%
    );
    background-repeat: no-repeat;
    background-size: 100% 10%;
    background-position: bottom;
    
 
}

@media (max-width: 1200px) {
  .company_inner_section_01_center,.company_inner_section_02_center,.company_inner_section_01_02_center{
  grid-column: 2 / 7;
}
}

.test-class {
  /* width: 75%;
  margin: 5% auto 0; */
  /* grid-column: 3 / 6; */
    text-align: left;
  text-align: left;
    width: 90%;
    height: auto;
    margin: 3% auto;
    --min-size: 14;
    --max-size: 16;
    font-size: var(--clamp-size);

}

.test-class h2{
  grid-column: 4 / 5;
    text-align: center;
    color: #8FBC3E;
    --min-size: 24;
    --max-size: 48;
    font-size: var(--clamp-size);
}

.test-class p{
  grid-column: 4 / 5;
    text-align: center;
    color: #8FBC3E;
    --min-size: 14;
    --max-size: 16;
    font-size: var(--clamp-size);
    font-family: var(--my);
}

.test-class p .big_f{
  --min-size: 30;
  --max-size: 40;
  font-size: var(--clamp-size);
}

.test-class .test-class_br{
  padding-top: 10px;
}

.test-class .power_3{
  display: flex;
  justify-content: space-between;
  margin: 15px auto 0;
  width: 50%;

}


.hover-container {
    grid-column: 3/ 6;
    position: relative;
    width: 100%;
    background-color: #ffffff;
    /* margin-top: 5%; */
    /* margin-bottom: 20%; */
    overflow: auto;

}

.hover-container_02 {
  grid-column: 3/ 7;
  position: relative;
  width: 100%;
  background-color: #ffffff;
  /* margin-top: 5%; */
  /* margin-bottom: 20%; */
  overflow: auto;

}
@media (max-width: 1200px) {
  .hover-container {
  grid-column: 2 / 7;
}

.hover-container_02 {
  grid-column: 2 / 8;
  text-align: center;
}

.test-class p{
  text-align: left;
}

.test-class .power_3{
   width: 100%;
   display: block;

}
}


.hover-container_service {
  grid-column: 3 / 9;
  position: relative;
  width: 100%;
  background-color: #ffffff;
  margin-block: 5%;
  /* margin-bottom: 20%; */
  overflow: hidden;
  display: flex;
  gap: 5%;
  justify-content: space-between;

}



.hover-text{
    display: flex;
    margin: 0 auto;
    margin-block: 10%;
    opacity: 0; /* 最初は見えない状態 */
    transform: translateX(-100px); /* 左からスライドイン */
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; /* フェードインとスライドイン */
}

.company_text{
 width: 100%;
  margin: 0 auto;
  /* margin-block: 10%; */
  /* opacity: 0;  最初は見えない状態 */
  /* transform: translateX(-100px); 左からスライドイン */
  /* transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; フェードインとスライドイン */
}


.hover-text .text-left{
    width: 20%;
    --min-size: 20;
    --max-size: 36;
    font-size: var(--clamp-size);
}

.hover-text .text-center{
  width: 50%;
  --min-size: 12;
  --max-size: 16;
  font-size: var(--clamp-size);
}


.hover-text .text-right{
    width: 30%;
    padding-left: 20px;    
}

.hover-text .text-right img{
  width: 50%;
  height: auto;

}


.company_text .text-left_service{
  
  --min-size: 16;
  --max-size: 20;
  font-size: var(--clamp-size);
}

.company_text{
  width: 100%;
}

.text-left_service{
  
  --min-size: 16;
  --max-size: 20;
  font-size: var(--clamp-size);
  margin-bottom: 3%;
}

.text-anime01,.text-anime02,.text-anime03,.text-anime04,.text-anime05,.text-anime06{
  
  
  margin-bottom: 3%;
}

.anime_h{
  --min-size: 16;
  --max-size: 20;
  font-size: var(--clamp-size);
  text-align: center;
}


.anime_p{
  --min-size: 14;
  --max-size: 16;
  font-size: var(--clamp-size);
  width: 75%;
  margin: 0 auto;
  height: 90px;
}

@media (min-width: 1200px) and (max-width: 1699px) {
  .anime_p{

    height: 100px;

}
}

@media (max-width: 699px) {
  .anime_p{

    margin: 0 auto;

}
}

.company_text .right{
  text-align: right;
}


.company_text .text-right_service{
  
  --min-size: 12;
  --max-size: 16;
  font-size: var(--clamp-size);
}

.text-right_service .text-right_inner{
  width: 75%;
  margin: 0 auto;
  height: 80px;
}

.title-anime02{
  width: 75%;
  margin: 0 auto;
  /* height: 80px; */
}



@media(max-width:1000px){
  .text-erea_cone{
    text-align: left;
  }

  .hover-text{
    flex-direction: column;
  }
  .hover-text .text-left{
    width: 100%;
  }
  .hover-text .text-center{
    width: 100%;
  }
  .hover-text .text-right{
    width: 100%;
    padding-left: 0;
    padding-top: 5px;
  }
  
  
}

.text-anime02_bottom{
  --min-size: 12;
  --max-size: 16;
  font-size: var(--clamp-size);
}

.awesome_icon{
  text-align: center;
  margin-top: 3%;
}



.about_company_inner_section_02.hovered .hover-text:nth-child(1),
.about_company_inner_section_02.inview .hover-text:nth-child(1) {
  transition-delay: 0s;
  opacity: 1;
  transform: translateX(0); 
}
.about_company_inner_section_02.hovered .hover-text:nth-child(2),
.about_company_inner_section_02.inview .hover-text:nth-child(2) {
  transition-delay: 1s;
  opacity: 1;
  transform: translateX(0); 
}

.about_company_inner_section_02.hovered .hover-text:nth-child(3),
.about_company_inner_section_02.inview .hover-text:nth-child(3) {
  transition-delay: 2s;
  opacity: 1;
  transform: translateX(0); 
}



.table-container {
  grid-column: 3/ 6;
  position: relative;

}

.company_section_07 table{
  margin-left: 10%;
   margin-top: 5%;
 }

@media (max-width: 1200px) {
  .table-container {
  grid-column: 1 / 8;
  padding-inline: 5%;
}

.company_section_07 table{
  margin-left: 0%;
   margin-top: 5%;
   width: 100%;
 }

 .hover-container_service {
  grid-column: 1 / 11;
}
.company_text .text-left_service{
  text-align: center;
}
}



.company_section_07 table th{
  padding: 5px;
    /* text-align: left; */
    vertical-align: middle;
    border: 1px solid #dfdfdf;
    background: #eee;
    font-weight: 300;
    width: 20%;
    --min-size: 12;
  --max-size: 16;
  font-size: var(--clamp-size);
  font-family: var(--my);
}

.company_section_07 table td{
  padding: 5px;
    /* text-align: center; */
    vertical-align: middle;
    border: 1px solid #dfdfdf;
    background: #fff;
    font-weight: 300;
    --min-size: 14;
  --max-size: 18;
  font-size: var(--clamp-size);
  font-family: var(--my);
}


.service_section_01{
  grid-column: 1 / 7;

}

.service_inner_section_02{
  grid-column: 1/7;
  display: grid;
  grid-template-columns: var(--size2) 1fr 1fr 1fr 1fr 1fr var(--size2);

}



.service_inner_section_01{
  grid-column: 1 / 7;
  /* margin-top: 10%; */
  overflow: hidden;
  display: flex;
  display: grid;
  grid-template-columns: var(--size2) 1fr 1fr 1fr 1fr 1fr var(--size2);
}

.service_inner_section_01_center{
  grid-column: 3 / 6;
  text-align: left;
  margin-top: -var(--size2);
  /* background-image: url('../images/repair_bk.png'); */
  background-repeat: no-repeat;
  background-position: 100% 5%; /* コンテナの中心から横に50%、縦に30%の位置 */
  height: auto;
}

.service_inner_section_02_center{
  grid-column: 3 / 6;
  text-align: left;
  margin-top: -var(--size2);
  /* background-image: url('images/ipcn.png');
  background-repeat: no-repeat;
  background-position: right top; */
  height: auto;
}

.news_inner_section_01_center h2{
  text-align: center;
  margin-top: 15%;
  /* margin-bottom: 10%; */
  --min-size: 36;
  --max-size: 64;
  font-size: var(--clamp-size);
  font-family: var(--my);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  /* border-bottom: double 5px #444444; */
  font-style: italic;
  background-image: linear-gradient(
      -45deg, 
      #8FBC3E 0 50%, 
      #31519A 20%
    );
    background-repeat: no-repeat;
    background-size: 100% 10%;
    background-position: bottom;
 
}

.otoiawase_inner_section_01_center{
  grid-column: 3 / 6;
  text-align: left;
  margin-top: -var(--size2);
  /* background-image: url('../images/mail.png'); */
  background-repeat: no-repeat;
  background-position: right top;
  height: auto;
}

.otoiawase_inner_section_01_center h2{
  text-align: center;
  margin-top: 15%;
  /* margin-bottom: 10%; */
  --min-size: 32;
  --max-size: 48;
  font-size: var(--clamp-size);
  font-family: var(--my);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  /* border-bottom: double 5px #444444; */
  font-style: italic;
  background-image: linear-gradient(
      -45deg, 
      #8FBC3E 0 50%, 
      #31519A 20%
    );
    background-repeat: no-repeat;
    background-size: 100% 10%;
    background-position: bottom;
}

@media (max-width: 1200px) {

.otoiawase_inner_section_01_center{
  grid-column: 2 / 7;
}
}
.news_inner_section_01_center{
  grid-column: 3 / 6;
  text-align: left;
  margin-top: -var(--size2);
  /* background-image: url('../images/news_bk.png');
  background-repeat: no-repeat; */
  background-position: 100% 5%; /* コンテナの中心から横に50%、縦に30%の位置 */
  height: auto;
  /* background-image: url('../images/news_bk.png'); */
  background-size: 150px 150px;
  background-repeat: no-repeat;
}


@media (max-width: 1000px) {
  .news_inner_section_01_center{
    grid-column: 2 / 7;
    background-image: none;
  }
}


.service_inner_section_02_center h5{
  text-align: center;
  margin: 15% 0 10%;
  --min-size: 20;
  --max-size: 36;
  font-size: var(--clamp-size);
  font-family: var(--my);
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  /* border-bottom: solid 3px #444444; */
}


.service_inner_section_03_center{
  grid-column: 3 / 6;
  text-align: left;
  margin-top: -var(--size2);
  /* background-image: url('images/elect.png');
  background-repeat: no-repeat;
  background-position: right top; */
  height: auto;
}

.service_inner_section_03_center h5 {
  text-align: center;
  margin-block: 15% 10%;
  --min-size: 20;
  --max-size: 36;
  font-size: var(--clamp-size);
  font-family: var(--my);
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  /* border-bottom: solid 3px #444444; */
}


.service_inner_section_0 h2{
  grid-column: 4 / 5;
  text-align: center;
  color: #8FBC3E;
  --min-size: 20;
  --max-size: 36;
  font-size: var(--clamp-size);
}

@media (max-width: 768px) {
.service_inner_section_02_center,.service_inner_section_03_center,.service_inner_section_01_center,.otoiawase_inner_section_01_center,.company_inner_section_01_center{
  background-image: none;
}

}

form{
  margin-top: 10%;
}

.form-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 300px;
}
.form-container h2 {
  margin-bottom: 20px;
  font-size: 1.5em;
  color: #333;
}
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
}
.form-group textarea {
  resize: vertical;
}
.form-group button {
  width: 100%;
  padding: 10px;
  background-color: #31519A;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 1em;
  cursor: pointer;
}
.form-group button:hover {
  background-color: #0056b3;
}

@media (max-width: 768px) {
  .service_inner_section_01_center,.service_inner_section_02_center,.service_inner_section_03_center{
    grid-column: 2 / 7;
  }
  .hover-container_service {
    display: block;
  }

  .company_text {
    padding-block: 10%;
  }
  
}



.terial-icons.md-64 { 
  font-size: 64px; 
}

.terial-icons.md-32 { 
  font-size: 32px; 
}


.text-anime01 {
  overflow: hidden;
  transform: translate(0%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.text-anime02 {
  overflow: hidden;
  transform: translate(0%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.text-anime03 {
  overflow: hidden;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.text-anime04 {
  overflow: hidden;
  transform: translate(-210%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.text-anime05 {
  overflow: hidden;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.text-anime06 {
  overflow: hidden;
  transform: translate(-210%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.text-anime01.-visible,
.text-anime02.-visible,
.text-anime03.-visible,
.text-anime04.-visible,
.text-anime05.-visible,
.text-anime06.-visible{
  transform: translate(0, 0);
}


.text-anime01_bottom,.text-anime02_bottom,.text-anime03_bottom,.text-anime04_bottom,.text-anime05_bottom,.text-anime06_bottom,.text-anime03_bottom {
  transform: translateY(100%); /* 初期状態で下から */
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.5s ease;
  }





  .text-anime01_bottom.-visible02,.text-anime02_bottom.-visible02,.text-anime03_bottom.-visible02,
  .text-anime04_bottom.-visible02,.text-anime05_bottom.-visible02,.text-anime06_bottom.-visible02,.text-anime03_bottom.-visible02 {
    transform: translateY(0); /* 表示された位置に戻る */
    opacity: 1;
}




.-visible03{
  /* clip-path: inset(0 0 0 0); 元に戻して表示 */
    opacity: 1;
    transform: translateX(0); 
}

.anime01,.anime02,.anime03,.anime04,.anime05,.anime06,.anime07,.anime08 {
  opacity: 0;
  transform: translateY(40px) scale(0.9); /* 少し縮小し、下に配置 */
  filter: blur(5px); /* ぼかし効果 */
  transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 1.5s cubic-bezier(0.25, 1, 0.5, 1), 
              filter 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.anime01.-visible,.anime02.-visible,.anime03.-visible,.anime04.-visible,.anime05.-visible,.anime06.-visible,.anime07.-visible{
  opacity: 1;
  transform: translateY(0) scale(1); /* 元の位置に戻し、ぼかし解除 */
  filter: blur(0);
}

.md-font{
  --min-size: 60;
  --max-size: 96;
  font-size: var(--clamp-size);
  color: #444444;
}

.md-font_60{
  --min-size: 48;
  --max-size: 60;
  font-size: var(--clamp-size);
  color: #444444;
}

.font_small{
  --min-size: 16;
  --max-size: 18;
  font-size: var(--clamp-size);
}