@charset "utf-8";

/* 使用カラー
sait_main{color: #d1c2f2; 
    color:#bbf1f2; 
    color:#02f1f2; 
    color:#f2bd38; 
    color:#5593f2}

*/


.hero_section{
 width: 100%;
 max-width: 1089px;
}
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.hero-image {
  animation: zoomIn 0.8s ease-out forwards;
}

.social-icons img{
    height: 100%;
    max-height: 1.8rem;
    margin: .8rem;
}

nav{letter-spacing: .2rem;}

.btn a {
  width: 95%;
        box-shadow: 3px 4px 0px 0px #bbf1f2;
        background-color:transparent;
        border-radius:5px;
        border:1px solid #000000;
        display:inline-block;
        cursor:pointer;
        color:#000000;
        font-family: "IBM Plex Sans JP", serif;
        font-weight: 300;
        font-style: normal;
        text-align: start;
        padding:5px 10px;
        text-decoration:none;
/*        text-shadow:0px 1px 0px #d9d9d9;*/
    }
    .btn a:hover {
        background-color:transparent;
    }
    .btn a:active {
        position:relative;
        top:1px;
    }
    
     /**************/
     .btnripple3{
        /*波紋の基点とするためrelativeを指定*/
        position: relative;
        /*リンクの形状*/
        display:inline-block;
        margin:0 10px 0px 10px;
        text-decoration: none;
        color: #333;
        outline: none;
    }
    
    /*波形の設定*/
    .btnripple3:hover::before {
        content: '';
        /*絶対配置で波形の位置を決める*/
        position: absolute;
        left:30%;
        top:0;
        /*波形の形状*/
        border: 1px solid #333;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        /*はじめは不透明*/
        opacity:1;
        /*アニメーションの設定*/
        animation:1s circleanime2 forwards;
    }
    
    /*波形が広がるアニメーション*/
    @keyframes circleanime2{
        0%{
          transform: scale(0);
        }
        100%{
            transform:scale(2);
            opacity: 0;
        }
    }
    
     /******************/

     h2{
      color:#000000;
      font-family: "IBM Plex Sans JP", serif;
      font-weight: 300;
      font-style: normal;
     }


     .new-section{
      
     }

/*TOPのカード*/
.instagram-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin: 40px 0;
}

.instagram-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.instagram-card:hover {
  transform: translateY(-5px);
}

.instagram-card a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.instagram-card .thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.instagram-card .card-content {
  padding: 15px;
}

.instagram-card h3 {
  font-size: 1rem;
  margin: 0 0 8px;
}

.instagram-card .date {
  font-size: 0.85rem;
  color: #666;
}