@charset "utf-8";

/* keyword font */
.zen-kaku-gothic-new-bold {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* main-word */
.main-word{
  position: relative;
  height: 100vh;
}

.main-word-box{
  position: absolute;
  top: 55vh;
  transform: translateY(-45%);
  left: 50px;
}

.main-word-text{
  font-size: 7.5rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  background: linear-gradient(180deg, #CCEDDD 0%, #00A556 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.6));
}

@media screen and (max-width: 1000px) {
  .main-word-text{
    font-size: 5.5rem;
  }
}

@media screen and (max-width: 900px) {
  .main-word-text{
    font-size: 4.0rem;
  }
}

@media screen and (max-width: 850px) {
  .main-word-text{
    font-size: 3.5rem;
  }
}

@media screen and (max-width: 800px) {
  .main-word-text{
    font-size: 5.5rem;
  }
}

@media screen and (max-width: 340px) {
  .main-word-text{
    font-size: 4.0rem;
  }
}

/* pickup */
.js-pickup-swiper {
  overflow: hidden;
  position: relative;
  width: 100%;      /* 画面幅いっぱいにする */
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 10%;   /* 数値はデザインに合わせて調整してください */
  box-sizing: border-box;
}

/* スライドがパディング領域まで食い込まないように調整 */
.js-pickup-swiper .swiper-wrapper {
  box-sizing: border-box;
}

/* もし「スライドを少し薄くする」演出を維持したい場合 */
.swiper-slide {
  opacity: 0.5;
  transition: opacity 0.3s;
}
.swiper-slide-active {
  opacity: 1;
}

.pickup-slide{
  padding: 20px;
}

.js-pickup-swiper .swiper-slide.swiper-slide-prev,.js-pickup-swiper .swiper-slide.swiper-slide-active,.js-pickup-swiper .swiper-slide.swiper-slide-next{
  display: flex;
  justify-content: center;
  align-items: center;
}

.pickup-box img {
  width: 270px;  /* 固定幅 */
  height: 270px; /* 固定高さ */
  object-fit: cover; /* 比率を保ったままトリミング */
  border: 1px solid #333;
  border-radius: 20px;
  display: block;
  margin: 0 auto 10px; /* 中央寄せ */
}

@media screen and (max-width: 768px) {
  .pickup-box img {
      /* スマホ等では画面幅に合わせて可変にする（見栄え重視） */
      width: 100%; 
      height: auto;
      aspect-ratio: 1 / 1; /* 正方形の比率だけ維持 */
      max-width: 270px;    /* 大きくなりすぎないように制限 */
  }
}

.pickup-box p{
  text-align: center;
  font-weight: 600;
}

/* swiper-controls-container */
.swiper-controls-container {
  display: flex;
  align-items: center;    /* 垂直方向の中央揃え */
  justify-content: center; /* 水平方向の中央揃え */
  gap: 20px;              /* 数字とボタンの間の余白（お好みで） */
  margin-top: 30px;       /* スライダーとの距離 */
  position: relative;     /* 位置を安定させる */
  width: 100%;
}

/* pagination */
.swiper-pagination-bullet{
  background: rgba(255, 255, 255, 1) !important;
  border-radius: var(--swiper-pagination-bullet-border-radius,10px) !important;
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 40px)) !important;
  width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,40px)) !important;
  margin: 5px var(--swiper-pagination-bullet-horizontal-gap,5px) !important;
  --swiper-pagination-bullet-inactive-opacity: 1;
  border: 2px solid #00A556;
  color: #00A556;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.5;
}

.js-pickup-swiper .swiper-pagination {
  position: static !important; /* 絶対配置を解除してFlexの制御下に置く */
  width: auto !important;      /* 幅を中身に合わせる */
  display: flex;
  align-items: center;
}

.js-pickup-swiper .swiper-pagination-bullet:hover{
  background: rgba(0, 165, 86, 1) !important;
  color: #fff;
}

.js-pickup-swiper .swiper-pagination-bullet-active{
  background: rgba(0, 165, 86, 1) !important;
  color: #fff;
}

/* ボタンの配置設定 */
.swiper-autoplay-controls {
  position: static !important; /* absoluteやmargin-leftを解除 */
  margin: 0 !important;
  display: flex;
  align-items: center;
}

.js-autoplay-toggle {
  position: static !important;
  bottom: 1.1vw;
  background: #fff;
  border: 2px solid #00A556;
  color: #00A556;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 再生中・停止中での表示切り替え */
.js-autoplay-toggle.is-playing .play-icon { display: none; }
.js-autoplay-toggle:not(.is-playing) .pause-icon { display: none; }

.js-autoplay-toggle:hover {
  background-color: #00A556;
  color: #fff;
}

/* navigation buttons */
.js-pickup-swiper .swiper-button-prev{
  left: var(--swiper-navigation-sides-offset,25vw) !important;
  top: var(--swiper-navigation-top-offset, 40%) !important;
  color: #00A556 !important;
}

.js-pickup-swiper .swiper-button-next{
  right: var(--swiper-navigation-sides-offset,25vw) !important;
  top: var(--swiper-navigation-top-offset, 40%) !important;
  color: #00A556 !important;
}

/* ボタンの重なり順（z-index）を強化 */
.js-pickup-swiper .swiper-button-prev,
.js-pickup-swiper .swiper-button-next {
  z-index: 100; 
  cursor: pointer;
}

/* 1024px以下のタブレット・PC */
@media screen and (min-width: 1000px) {
  .js-pickup-swiper .swiper-button-prev{
    left: 300px !important;
  }
  
  .js-pickup-swiper .swiper-button-next{
    right: 300px !important;
  }

  .js-pickup-swiper {
      padding: 0 5%;
  }
}

/* 768px以下のスマホサイズ */
@media screen and (max-width: 768px) {
  /* スライダー本体 */
  .js-pickup-swiper {
      padding: 0 20px; /* SPではさらに狭くしてメインを大きく */
  }

  .pickup-slide {
      padding: 10px; /* スライド間の隙間を小さく */
  }

  /* 画像の角丸と余白を微調整 */
  .pickup-box img {
      border-radius: 12px;
  }

  .pickup-box p {
      font-size: 0.9rem; /* 文字を少し小さく */
      margin-top: 10px;
  }

  /* 左右の矢印ボタン (SPではスワイプがメインになるため調整) */
  .js-pickup-swiper .swiper-button-prev,
  .js-pickup-swiper .swiper-button-next {
      /* SPで矢印を消す場合は display: none; */
      /* 残す場合はサイズを縮小して位置調整 */
      transform: scale(0.6); 
      top: 35% !important;
  }
  .js-pickup-swiper .swiper-button-prev { left: 20vw !important; }
  .js-pickup-swiper .swiper-button-next { right: 20vw !important; }

  /* 下部のコントロール（ドットと再生ボタン） */
  .swiper-controls-container {
      gap: 10px;      /* 隙間を詰める */
      margin-top: 20px;
  }

  /* ページネーション（数字）のサイズ調整 */
  .swiper-pagination-bullet {
      width: 32px !important;
      height: 32px !important;
      font-size: 1rem !important;
      margin: 0 4px !important;
  }

  /* 再生・停止ボタンのサイズ調整 */
  .js-autoplay-toggle {
      width: 32px !important;
      height: 32px !important;
  }
}

@media screen and (max-width: 480px) {
  .js-pickup-swiper .swiper-button-prev{
    top: 30% !important;
  }

  .js-pickup-swiper .swiper-button-next{
    top: 30% !important;
  }
}

.swiper.is-single-slide {
  display: flex;
  justify-content: center;
}
.swiper.is-single-slide .swiper-wrapper {
  justify-content: center;
}
.swiper.is-single-slide .swiper-slide {
  opacity: 1; /* 1枚の時は半透明にしない */
  width: 100%;
  max-width: 400px; /* PCでの見栄えを調整 */
}


/* election */
.member-info-box-header {
  text-align: center;
  margin-top: 20px;
}

.member-info-box-title {
  display: flex;         /* Flexboxを適用 */
  align-items: center;   /* 垂直方向の中央揃え */
  justify-content: center;
  font-size: 1.4rem;
  gap: 15px;            /* 文字と線の間の余白 */
}

.member-info-box-title::before,
.member-info-box-title::after {
  content: "";
  flex-grow: 0;         /* 線を勝手に伸ばしたくない場合は0、画面端まで伸ばしたい場合は1 */
  width: 40px;          /* 線の長さ（固定） */
  height: 2px;
  background-color: #333;
  border-radius: 20px;
}

@media screen and (max-width: 480px) {
  .member-info-box-title {
    font-size: 1.1rem;
  }
}

.member-info-box-title-header{
  max-width: 1012px;
  margin: 20px auto 10px;
  border: 2px solid #00a556;
  border-left: 10px solid #00a556;
  padding: 2px 0 2px 10px;
}

.member-info-box-title-header p{
  font-weight: 600;
}

.member-info-box-body{
    display: flex;
    justify-content: center;
    margin: 20px auto;
}

#member .member-info-box-body{
    max-width: 1012px;
    margin-bottom: 75px;
}

.member-list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); 
    gap: 20px; /* アイテム間の余白 */
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    
    /* 左揃えを確実にする */
    justify-content: start;
}

@media screen and (min-width: 696px) {
    #member .member-info-box-body .member-list{
      margin-left: 0;
  }
}


.member-card{
    position: relative;
    width: 320px;
    height: 180px;
    background-color: #fff;
    border: 2px solid #D9D9D9;
    transition: all 0.3s ease;
    box-sizing: content-box;
    top: 0;
    left: 0;
}

.member-card:hover{
    background-color: #f5f4f3;
    box-shadow: 4px 4px #d6d1cd;
    top: -4px;
    left: -4px;
}

.member-card.election-result-name a{
  width: 100%;
  height: 100%;
}

.member-card.election-result-name p{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  width: 100%;
  height: 100%;
}

.member-card>a{
    display: flex;
    gap: 10px;
}

.member-pf-image{
    background-color: #D9D9D9;
    display: flex;
    align-items: center;
    width: 135px;
    height: 180px;
}

.member-pf-image img{
    width: auto;
    height: 180px;
    overflow: hidden;
}

.election-pf-info-type-box{
    width: fit-content;
    margin: 10px 0 0;
    padding: 2px 4px;
    background-color: #00A556;
    border-radius: 5px;
    color: #fff;
    font-size: 0.73rem;
}

.member-pf-info-name{
    padding: 2px 0 0;
}

.member-name{
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 5px 0;
}

.member-pf-info-post-box{
    width: fit-content;
    margin: 5px 0 2px;
    padding: 2px 4px;
    background-color: #00A556;
    font-size: 0.73rem;
}

.member-pf-info-area-box{
    width: fit-content;
    margin: 5px 0 2px;
    padding: 1px 4px;
    border: 1.5px solid #333;
    font-size: 0.73rem;
    font-weight: 600;
}

.member-pf-info-org-post-box{
    width: fit-content;
    margin: 5px 0 2px;
    padding: 1px 4px;
    font-size: 0.73rem;
    font-weight: 600;
}

.org-post-name{
    display: block;
}

.recruit-list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    gap: 20px; /* アイテム間の余白 */
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    
    /* 左揃えを確実にする */
    justify-content: start;
}

.recruit-card{
    width: 150px;
    margin: 5px 0.5vw 0;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    transition: transform .3s ease;
}

.recruit-card:hover{
    transform: scale(1.05);
}

.recruit-card>a{
   display: block;
}

.recruit-image{
    margin: 0 auto;
    width: 120px;
    height: 120px;
    padding: 20px;
    background: #fff;
    border: 2px solid #00A556;
    border-radius: 50%;
    transition: transform .6s ease;
}

.recruit-type-name{
    margin-top: 5px;
    text-align: center;
}

.recruit-type-name>p{
    font-size: 0.72rem;
    font-weight: 600;
}

.member-noPost{
  margin: 50px 0 75px;
  font-weight: 600;
}

@media screen and (max-width: 340px) {
    .member-list{
        display: block;
    }
    .member-card{
        margin: 20px auto;
        width: 220px;
        height: auto;
    }
    .member-card>a{
        width: 100%;
        display: block;
        gap: 0px;
        text-align: center;
        margin: 0 auto;
    }
    .member-pf-image{
        background-color: #D9D9D9;
        width: 100%;
        height: auto;
    }
    .member-pf-info{
        text-align: center;
        margin: 0 10px;
        padding: 0 0 10px;
    }

}



/* news */

.news-body{
  margin: 0 auto;
}

.news-content{
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.news-card{
  margin: 10px;
  width: 250px;
  height: 350px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 8px gray;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  overflow: hidden;
}

.news-card.visible{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.news-card.visible:hover{
  background-color: #CCEDDD;
  overflow: hidden;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.news-card.visible:hover>.news-card-image{
  max-height: 187.5px;
  max-width: 250px;
  overflow: hidden;
}

.news-card.visible:hover>a>.news-card-image>img{
  transform: scale(1.05);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.news-card::before{
content:"";
display: block;
width:23%;
order:1;
}

.news-card::after{
content:"";
display: block;
width:23%;
}

.news-card-image{
  max-height: 187.5px;
  background-color: #D9D9D9;
  overflow: hidden;
}

.news-card-image>img{
  min-width: 100%;
  height: 187.5px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.news-card-info{
  display: flex;
  justify-content: space-between;
  padding: 5px 20px 5px;
  font-size: 1.1rem;
}

.news-card-category>.news-cat>a{
  padding: 1px 5px;
  background-color: #00A556;
  border-radius: 5px;
  font-size: 1.1rem;
  color: #fff;
}

.news-card-date{
  font-weight: 600;
}

.news-card-title{
  height: 115px;
  padding: 0 20px;
  font-size: 1.2rem;
  font-weight: 600;
  overflow: hidden;
}

.navigation.pagination{
  margin: 10px 0;
  padding: 10px 0;
  text-align: center;
}

.page-numbers{
  margin: 0 5px;
  padding: 2px 10px;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 5px;
  box-shadow: 0 0 8px gray;

}

@media screen and (min-width: 1180px) {
  .news-body,.news-content,.news-list,.grid{
      width: 1080px;
  }
}

@media screen and (max-width: 880px) {
  .news-list{
      justify-content: center;
      gap: 20px;
  }
}

@media screen and (max-width: 800px) {
  .news-category-list{
      flex-wrap: wrap;
  }

  .news-category-item{
      width: 29%;
      text-align: center;
      margin: 5px;
  }
}


/* policy */
.policy-box{
  width: 80%;
  margin: 30px auto 0;
}

.policy-box-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.policy-box-item{
  transition: all 0.6s ease;
}

.policy-box-item.sec-button{
  margin: 0;
}

.policy-box-item .sec-button-box{
  padding: 10px 20px;
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  flex-direction: column; /* 縦に並べる */
  justify-content: center; /* 垂直方向中央 */
  align-items: center;     /* 水平方向中央 */
  gap: 10px;
}

.policy-box-item img{
  width: 250px;
}

.policy-box-item:hover{
  transform: scale(1.05);
}

@media screen and (max-width: 315px) {
  .policy-box-item .sec-button-box{
    width: 90%;
    height: auto;
  }
  
}

/* member（LP用） */
.map-none{
  position: relative;
}

.area1,.area2,.area3,.area4,.area5,.area6,.area7,.area8,.area9,.area10,
.area11,.area12,.area13,.area14,.area15,.area16,.area17,.area18,.area19,.area20,
.area21,.area22,.area23,.area24,.area25,.area26,.area27,.area28,.area29,.area30{
  position: absolute;
  top: 50px;
  left: 200px;
  cursor: pointer;
  display: inline-block;
  color: rgba(0, 0, 0, 0);
}

.area1:hover,.area2:hover,.area3:hover,.area4:hover,.area5:hover,.area6:hover,.area7:hover,.area8:hover,.area9:hover,.area10:hover,
.area11:hover,.area12:hover,.area13:hover,.area14:hover,.area15:hover,.area16:hover,.area17:hover,.area18:hover,.area19:hover,.area20:hover,
.area21:hover,.area22:hover,.area23:hover,.area24:hover,.area25:hover,.area26:hover,.area27:hover,.area28:hover,.area29:hover,.area30:hover{
  color: #333;
  border: 2px solid #333;
  padding: 2px 5px;
  font-weight: 600;
}

.overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  z-index: 99;
}

.modal-window-1,.modal-window-2,.modal-window-3,.modal-window-4,.modal-window-5,
.modal-window-6,.modal-window-7,.modal-window-8,.modal-window-9,.modal-window-10,
.modal-window-11,.modal-window-12,.modal-window-13,.modal-window-14,.modal-window-15,
.modal-window-16,.modal-window-17,.modal-window-18,.modal-window-19,.modal-window-20,
.modal-window-21,.modal-window-22,.modal-window-23,.modal-window-24,.modal-window-25,
.modal-window-26,.modal-window-27,.modal-window-28,.modal-window-29,.modal-window-30{
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 60vh;
  max-height: 600px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  z-index: 150;
  padding: 20px;
  overflow-y: scroll;
}

.member-modal-closed{
  position: absolute;
  width: 40px;
  top: 20px;
  right: 20px;
  border-radius: 50%;
  padding: 5px;
  background-color: #00a556;
}

.map-box h4{
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 20px;
}

.member-list-item{
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
  height: 180px;
}

.member-pf-left{
  margin: auto 0;
  width: 50%;
}

.member-list-item .member-pf-image{
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  height: auto;
}

.member-pf-right{
  margin: auto 0;
  width: 50%;
}

.member-position{
  display: block;
  font-size: 0.9rem;
}

.member-pf-right table{
  margin-left: 10px;
}

.member-sns-icon{
  width: 30px;
  height: 30px;
  border-radius: 5px;
}

.sns-x{
  padding: 5px;
  width: 30px;
  height: 30px;
  background: #000;
}

.member-pf-right td{
  text-align: center
}

.member-box-sp-list{
  display: none;
  margin: 20px auto 0;
  border-spacing: 10px;
}

.member-box-sp-list>tbody>tr>th{
  width: 200px;
  padding: 5px;
  background-color: #CCEDDD;
  color: #333;
  /* border: 2px solid #333; */
  border-radius: 5px;
  box-shadow: 0 0 8px gray;
  font-size: 1.5rem;
  cursor: pointer;
}

@media screen and (max-width: 819px) {
  .map-none{
      display: none;
  }
  .member-box-sp-list{
      display: inline-block;
  }
  .member-description{
      font-size: 1.0rem;
      font-weight: bold;
  }
}

@media screen and (max-width: 480px) {
  .member-description{
      font-size: 0.8rem;
      margin-bottom: 0;
  }
  .member-box-sp-list>tbody>tr>th{
      font-size: 1.0rem;
  }
  .modal-window-1,.modal-window-2,.modal-window-3,.modal-window-4,.modal-window-5,
  .modal-window-6,.modal-window-7,.modal-window-8,.modal-window-9,.modal-window-10,
  .modal-window-11,.modal-window-12,.modal-window-13,.modal-window-14,.modal-window-15,
  .modal-window-16,.modal-window-17,.modal-window-18,.modal-window-19,.modal-window-20,
  .modal-window-21,.modal-window-22,.modal-window-23,.modal-window-24,.modal-window-25,
  .modal-window-26,.modal-window-27,.modal-window-28,.modal-window-29,.modal-window-30{
      width: 300px;
      height: 400px;
      padding: 20px 10px 20px 20px;
  }
  .member-list-item{
    height: 140px;
  }
  .member-pf-left{
    width: 40%;
  }
  .member-pf-right{
    width: 60%;
    padding-top: 10px;
  }
  .member-position{
    font-size: 0.7rem;
  }
  .member-sns-icon{
    width: 25px;
    height: 25px;
    border-radius: 5px;
  }
  .sns-x{
    padding: 5px;
    width: 25px;
    height: 25px;
    background: #000;
  }

}

.member-description{
  margin-bottom: 10px;
}

.member-page-list{
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 40px;
}

.member-page-pf-image{
  width: 200px;
  border-radius: 10px;
}

.member-page-sns-icon{
  margin: 0 auto;
}

.member-page-pf-left,.member-page-pf-right{
  width: 40%;
}

.member-page-pf-right{
  text-align: left;
  padding-left: 20px;
}

.member-type{
  font-size: 2.0rem;
  font-weight: 600;
  margin: 40px 0;
}

.member-page-position{
  font-size: 1.2rem;
  font-weight: 600;
  color: #00a556;
  margin: 0 0 10px;
}

.member-page-pf-cat{
  font-size: 1.2rem;
  font-weight: 600;
  margin: 10px 0;
}

@media screen and (max-width: 480px) {
  .member-page-list{
      display: block;
  }
  .member-page-pf-left,.member-page-pf-right{
      width: 100%;
  }
  .member-page-pf-right td{
    width: 20px;
    height: 20px;
  }
}

/* recruit */
.recruit-text{
  text-align: center;
  font-weight: 600;
}

/* about */
.front-page-about{
  padding: 0 4%;
  display: flex;
  justify-content: center;
}

.about-box-left{
  width: 40%;
}

.about-box-right{
  width: 50%;
}

.about-image{
  position: relative;
  width: 100%;
  height: 200px; /* 画像が重なりすぎないよう少し高さを確保 */
  margin-top: 30px;
}

.about-image-1,.about-image-2{
  position: absolute;
  width: 150px; /* サイズは適宜調整してください */
  height: auto;
  object-fit: cover;
  transition: none !important;
  box-shadow: 0 0 8px gray;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.about-image-1{
  top: -25px;
  left: 30px;
  z-index: 2;
}

.about-image-2{
  bottom: 25px;
  right: 30px;
  z-index: 1;
}

.about-box-right{
  padding: 10px 0 0 30px;
}

.about-box-text>p{
  font-size: 1.1rem;
  font-weight: 600;
}

.introduction-member{
  margin-left: auto;
  margin-right: 0;
}

.about-button{
  padding: 0 4%;
}

.about-button>.sec-button{
  margin: 20px auto 0 17.5%;
}

.about-button a{
  width: fit-content;
}

/* フェードインのベース設定 */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px); /* 30px下に下げておく */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transition-delay: 0.2s; /* 少し遅らせると上品に見えます */
}

/* 画面内に入った時に付与するクラス */
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (min-width: 1440px) {
  .about-image-1{
    top: -25px;
    left: 15%;
  }
  .about-image-2{
    bottom: 50px;
    right: 15%;
  }
}

@media screen and (max-width: 768px) {
  .front-page-about {
    flex-direction: column;
    align-items: center;
  }
  .about-box-left, .about-box-right {
    width: 100%;
    padding-left: 0;
  }
  .about-image{
    height: 250px;
  }
  .about-image-1{
    top: -50px;
    left: 20%;
  }
  .about-image-2{
    bottom: 75px;
    right: 20%;
  }
  .about-button>.sec-button{
    margin: 20px auto 0;
  }
  
}

@media screen and (max-width: 480px) {
  .about-image-1{
    top: -50px;
    left: 5%;
  }
  .about-image-2{
    bottom: 75px;
    right: 5%;
  }
}