@charset "utf-8";
/* CSS Document */

/*全体　はじめ*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
 {
  margin: 0;
  padding: 0;
 }
body {
	font-family: ‘Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, Osaka, ‘MS PGothic’, arial, helvetica, sans-serif,egular ;

}

html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
}


a {
  text-decoration: none;
}

h1{
  font-size:27px;
}

h2{
  font-size:17px;
}
h3{
  font-size:15px;
}

h4{
  font-size:12px;
}
h3 {
  color: black;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: mediumseagreen;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}


h3:before {
  content: '●';
  color: white;
  margin-right: 8px;
}

@media screen and (min-width: 768px){
.br-sp {display: none; }
}
a {
  text-decoration: none;
}

.text { display: inline-block; }


.fontsize-80{ fontsize:80%; }





/*全体　おわり*/

/*header はじめ*/

h1 {
  position: relative;
  padding: 0.35em 0.5em;
   background:#eaccff;
  color: #393939;
 text-align: center 
}
h1:before {
  content: " ";
  position: absolute;
  top: -16px;
  left: 0;
  width: -webkit-calc(100% - 16px);
  width: calc(100% - 16px);
  height: 0;
  border: solid 8px transparent;
  border-bottom-color:#9500ff ;
  }

/*header おわり*/

#container {
  max-width: 500px;
  margin: 0 auto;
}
@media screen and (max-width: 480px){
.main{
margin-left:15px;
margin-right:10px;
}}

/************************************
** 囲み枠
************************************/
.staff {
    display: flex;
    flex-wrap: wrap; /* 折り返しを有効にする */
    gap: 10px; /* アイテム間の隙間 */
  }
  .item {
    width: calc(33.33% - 10px); /* 3列にするため約33%（ギャップ分を引く） */
    box-sizing: border-box; /* パディングを含めた幅計算 */
    background-color: #f0f0f0;
    padding: 20px;
  }



/************************************
** 囲み枠
************************************/


.box-design2 {
  margin: 15px auto;
  padding: 15px;
  border-top: 3px dotted #4c9ac0;
  border-bottom: 3px dotted #4c9ac0;
}
@media screen and (max-width: 480px){
.box-design2 p{
font-size:95%;}}


img {
  max-width: 100%;
  height: atuo;
}
.logo {
   margin:0 auto;
}

.linkp {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.center {
text-align: center
 }





/************************************
** 自己紹介カード
************************************/



.card-container {
    display: flex;
    justify-content: space-between; /* カード間のスペースを均等に */
    gap: 20px; /* カード同士の隙間 */
    flex-wrap: wrap; /* スマホで折り返す */
  }
  .card {
    flex: 1; /* カード幅を均等に */
    min-width: 250px; /* カードの最小幅 */
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  }


/************************************
** フッターはじまり
************************************/
.footer{
 position: sticky;
  top: 100vh;
 text-align: center;
  width:100%;
　height: 75px;
  background: #FFFFAA ;
  color: blue;
  clear: both;

 }

.footer img{
    vertical-align: middle;
    display: inline-block;
}


/*フッター 終わり*/
/************************************
** カルーセル
************************************/
.carousel {
  display: flex; /* 横並びにする [5] */
  overflow-x: auto; /* はみ出た分をスクロール [3] */
  scroll-snap-type: x mandatory; /* スクロール位置を固定 [4] */
  gap: 10px; /* 画像間の隙間 */
  width: 100%; /* コンテナの幅 */
}

.carousel-item {
  flex: 0 0 100%; /* 画像を1枚ずつ表示 */
  scroll-snap-align: start; /* スナップ位置 */
}

.carousel-item img {
  width: 100%; /* 画像の幅をコンテナに合わせる [10] */
  height: auto;
  display: block;
}

.carousel{
  scrollbar-color: #6366f1 #f1ef63;
　}

}



/*その他おわり*/


 
}
/*フッター はじまり*/