@charset "utf-8";
@media screen and (min-width: 768px) {
  

.business section>h2
{
  text-decoration: none;
}
.main-content
{
  text-align: center;
  margin-bottom: 10vw;
}
.main-content h2
{
  font-size: 180%;
  filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.16));
}
.main-content p
{
  font-size: 120%;
  font-weight: 500;
  animation-duration: 1s;
}
.business-con
{
  display: flex;
  justify-content: space-around;
  text-align: justify;
}
.business-con>div
{
  width: 45%;
  margin: 2vw;
}
.business-con>div h3
{
  font-size: 160%;
  color: #3195D3;
  margin: 0 0 1vw;
}
.busi-text1
{
  font-size: 120%;
  font-weight: 500;
  margin: 1vw 0 ;
}
.busi-text2
{
  color: #707070;
}
.business-con>div img
{
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.16));
  border-radius: 3vw;
}
span.marker {
  background: linear-gradient(transparent 50%, #B3DFFC 50%);
}

/*代表挨拶*/
.greeting-img
{
  width: 100vw;
  margin-left: -10vw;
}
.greeting-img>img
{
  filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.16));
}
.greeting-text
{
  margin: 5vw 0 2vw;
  text-align: center;
}
.greeting-text>div
{
  width: 100%;
  display: flex;
  justify-content: right;
  text-align: right;
}
.business table {
  width: 100%;
  border-collapse: collapse; /* セルの間隔をなくす */
  margin: 2vw 0;
  font-family: "Noto Sans JP", sans-serif;
}

.business th {
  padding: 1vw; /* セル内の余白を設定 */
  text-align: center; 
  align-items: center;
  border: 1px solid #fff; /* セルの境界線 */
  font-size: 100%; /* 文字サイズ */
}
.business td
{
  padding: 1vw; /* セル内の余白を設定 */
  text-align: left; 
  align-items: center;
  border: 1px solid #fff; /* セルの境界線 */
  font-size: 100%; /* 文字サイズ */
}
.business th {
  width: 30%; /* ヘッダーの幅を固定 */
  background-color: #4cafec; /* 青色の背景 */
  color: white; /* 文字色を白に設定 */
  font-weight: bold; /* 太字 */
}

.business td {
  width: 70%; /* データセルの幅 */
  background-color: #eaf6ff; /* 薄い青色 */
  color: #333; /* 文字色を濃いグレーに設定 */
}

.greeting strong
{
  font-size: 2vw;
}

}

@media screen and (max-width: 767px) {
  

  .business section>h2
  {
    text-decoration: none;
  }
  .main-content
  {
    text-align: center;
    margin-bottom: 10vw;
  }
  .main-content h2
  {
    font-size: 180%;
    filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.16));
  }
  .main-content p
  {
    font-size: 120%;
    font-weight: 500;
  }
  .business-con
  {
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    text-align: justify;
    margin: 10vw 0;
  }
  .business-con:nth-child(2)
  {
    flex-direction: column-reverse;
  }
  .business-con>div
  {
    width: 100%;
    margin: 2vw;
  }
  .business-con>div h3
  {
    font-size: 160%;
    color: #3195D3;
    margin: 0 0 1vw;
  }
  .busi-text1
  {
    font-size: 120%;
    font-weight: 500;
    margin: 5vw 0 ;
  }
  .busi-text2
  {
    color: #707070;
  }
  .business-con>div img
  {
    width: 100%;
    object-fit: contain;
    filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.16));
    border-radius: 3vw;
  }
  span.marker {
    background: linear-gradient(transparent 50%, #B3DFFC 50%);
  }
  
  /*代表挨拶*/
  .greeting-img
  {
    width: 100vw;
    margin-left: -5vw;
  }
  .greeting-img>img
  {
    filter: none;
    border-top: 2px solid #aaa;
    border-bottom: 2px solid #aaa;
  }
  .greeting-text
  {
    margin: 5vw 0 2vw;
    text-align: justify;
  }
  .greeting-text>div
  {
    width: 100%;
    display: flex;
    justify-content: right;
  }
 
  .business table {
    width: 100%;
    border-collapse: collapse; /* セルの間隔をなくす */
    margin: 2vw 0;
    font-family: "Noto Sans JP", sans-serif;
  }
  
  .business th {
    padding: 3vw; /* セル内の余白を設定 */
    text-align: center; 
    align-items: center;
    border: 1px solid #fff; /* セルの境界線 */
    font-size: 100%; /* 文字サイズ */
  }
  .business td
  {
    padding: 3vw; /* セル内の余白を設定 */
    text-align: left; 
    align-items: center;
    border: 1px solid #fff; /* セルの境界線 */
    font-size: 100%; /* 文字サイズ */
  }
  .business th {
    width: 30%; /* ヘッダーの幅を固定 */
    background-color: #4cafec; /* 青色の背景 */
    color: white; /* 文字色を白に設定 */
    font-weight: bold; /* 太字 */
  }
  
  .business td {
    width: 70%; /* データセルの幅 */
    background-color: #eaf6ff; /* 薄い青色 */
    color: #333; /* 文字色を濃いグレーに設定 */
  }
  
 

  }