@charset "UTF-8";
*,*::before,*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
img{
max-width: 100%;
height: auto;
vertical-align: middle;
}

/*背景*/
body{
background-image: linear-gradient(
rgba(198,177,152,0.6),
rgba(198,177,152,0.6)),url("../images/gara.png");
background-color: #c6b198;
background-repeat: repeat;
background-size: 180px;
}

/*ヘッダー*/
header{
width: 100%;
background-color: #603813;
height: 80px;
padding: 10px 20px;
}
h1{
width:auto;
height:auto;
margin-top: 30px;
margin-right: 50px;
}
.container{
height: 100%;
}
header h1 img{
display: block;
height: 50px;
width: auto;
}
header .wrapper{
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: 1200px;
margin: 0 auto;
}
h1.logo{
margin: 0;
flex-shrink: 0;
}
nav{
display: flex;
justify-content: flex-end;
}
.grobal-nav{
margin-left: auto;
}
.grobal-nav ul{
gap:10px;
}
.grobal-nav a{
display: inline-block;
cursor: pointer;
}
.grobal-nav a:hover{
animation: nav-purun 1s ease-in-out;
cursor: url("../images/icon_b120.png") 16 16, pointer;
}
@keyframes nav-purun{
0%{transform: scale(1);}
30%{transform: scale(1.18, 0.95);}
60%{transform: scale(0.96, 10.5);}
100%{transform: scale(1);}
}
nav ul{
list-style-type: none;
display: flex;
}
nav a{
display: block;
text-decoration: none;
padding: 20px;
color: #fff;
}
.potta-one-regular {
  font-family: "Potta One", system-ui;
  font-weight: 400;
  font-style: normal;
}


/*カード*/
.intro{
max-width: 1000px;
margin: 80px auto;
}
.intro-card{
display: flex;
align-items: center;
gap: 40px;
}
.intro__image img{
width: 440px;
}
.intro__text {
width: 350px;
margin-bottom: 10px;
background: rgba(255,255,255,0.5);
padding: 32px;
border-radius: 20px;
padding-top: 60px;    
padding-bottom: 60px;
min-height: 350px;
}
.intro__text h2{
font-size: 40px;
}
.intro__text p{
font-weight: bold;
line-height: 2.0;
letter-spacing: 0.05em;
}
/* 登場時のポヨン！ */
.intro__image {
  animation: poyon-in 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes poyon-in {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
/* キャラクターのぷにょんぷにょんアニメーション */
.intro__image img {
  width: 440px;
  animation: punyon 3s ease-in-out infinite; /* 3秒周期で無限に繰り返す */
  transform-origin: center bottom; /* 足元を軸に動かすとより餅感が出ます */
}
@keyframes punyon {
  0%, 100% {
    transform: scale(1, 1) translateY(0);
  }
  30% {
    /* 横に少し広がり、縦に潰れる（ぷにょっ） */
    transform: scale(1.08, 0.92) translateY(0);
  }
  50% {
    /* 縦に少し伸びる（びよん） */
    transform: scale(0.95, 1.05) translateY(-10px);
  }
  70% {
    /* 再び少し横に広がる */
    transform: scale(1.03, 0.97) translateY(0);
  }
}
@media(max-width:768px){
.intro-card{
flex-direction: column;
}
.intro__image, .intro__text{
width: 100%;
}
}
/* モバイル用（画面幅768px以下）の調整 */
@media screen and (max-width: 768px) {
  .intro__text h2 {
    font-size: 2.1rem; /* PCより少し小さく調整。お好みで 24px などに変更してください */
    margin-bottom: 10px; /* 下の隙間も少し狭くするとスッキリします */
    line-height: 1.4;
  }
  /* もし「広報部長」などの文字も大きければ、ここも調整できます */
  .intro__text p {
    font-size: 1.2rem;
  }
}
@media (max-width: 768px) {
  .intro__text {
    padding-top: 30px;    /* スマホでは少し控えめに */
    padding-bottom: 30px;
    min-height: auto;     /* スマホでは高さ固定を解除 */
  }
}

/*プロフィール詳細*/
.profile-wrap{
max-width: 800px;
margin: 60px auto;
font-size: 20px;
}
.profile-bg{
background-color: rgba(255,255,255,0.5);
padding: 40px;
border-radius: 20px;
}
.profile-row{
display: grid;
grid-template-columns: 120px 1fr;
gap:20px;
padding: 12px 0;
}
.profile-row last-child{
margin-bottom: none;
}
.profile-value{
line-height: 1.6;
font-weight: bold;
}
/* プロフィール項目をぷるっとさせる */
.profile-label {
color:#000;
position: relative; /* ラインの基準位置にするために必要 */
  z-index: 1;
  transition: transform 0.8s ease;
  cursor: default; /* 触れることがわかるように */
  display: inline-block; /* アニメーション（scale）を正しく効かせるために必要 */
  width: fit-content;
  transform-origin: center; /* 中央を軸に動かす */
  font-weight: bold;
  padding-bottom: 5px; /* ラインが入るスペースを確保 */
}
/* マウスを乗せた行をぷるんとさせる */
.profile-label:hover {
  animation: item-purun 1.0s ease-in-out;
  border-radius: 10px;
}
/* スマホ用：タップした瞬間 */
.profile-label:active {
  animation: item-purun 0.6s ease-in-out;
  color: #f05a24;
}
@keyframes item-purun {
  0% { transform: scale(1,1); }
  30% { transform: scale(1.52, 0.98); } /* 横に少し広がる */
  60% { transform: scale(0.98, 1.52); } /* 縦に少し伸びる */
  100% { transform: scale(1,1); }
}
/* ラベル（名前、役職など）の色も少し強調 */
.profile-label:hover .profile-label {
 /* color: #f05a24;*/ /* 肉巻きだんごカラーに変化 */
  transition: color 0.3s ease;
  animation: item-purun 1.0s ease-in-out;
}
/* 画像で筆ラインを追加 */
.profile-label::after {
  content: "";
  position: absolute;
  left: 40%;
  top: 0.5em;
  transform: translateX(-50%); /* 中央寄せ */
  width: 150%; /* 文字より少し長めにする */
  height: 0.8em; /* 画像の高さに合わせて調整 */
  /* ここに用意した画像のパスを指定してください */
  background: url("../images/brush-line-orange.png") no-repeat center bottom / contain;
  z-index: -1; /* 文字の後ろに配置 */
  pointer-events: none; /* ライン自体がクリックを邪魔しないように */
  background-size: contain; /* 画像の比率を保ったまま枠内に収める */
  opacity: 0.8;         /* 重なりが見えるように不透明度を調整 */
}
@media(max-width:768px){
.profile-row{
grid-template-columns: 1fr;
}
.profile-label{
margin-bottom: 4px;
}
}
@media screen and (max-width: 768px) {
  .profile-row {
    padding: 15px 0; /* タップしやすいように上下の隙間を広げる */
    display: block;  /* 縦並びにして、ラベルを大きく見せる */
  }
  .profile-label {
    margin-bottom: 10px;
    font-size: 1.8rem; /* 少し大きくして存在感を出す */
	display: inline-block;
  }
}


/*ひとことポイント*/
.point{
text-align: center;
font-weight: bold;
font-size: 25px;
}


/*タグづけ*/
.tag{
text-align: center;
font-size: 18px;
margin: 15px;
}
.tag ul {
  list-style: none; 
  padding: 0;      
  display: flex;  
  flex-wrap: wrap;  
  gap: 10px;       
  justify-content: center; 
}

.tag li {
  margin: 5px 0;
}

.tag li a {
  display: inline-block;
  text-decoration: none;
  color: #603813;           /* 文字色を茶色に */
  background-color: #fff;   /* 背景を白に */
  padding: 8px 15px;        /* 内側の余白 */
  border-radius: 20px;      /* 角を丸くして「だんご感」を出す */
  border: 1px solid #603813;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}
@media (max-width: 768px) {
  .tag ul {
    justify-content: flex-start; /* 左詰めに */
    gap: 8px;
  }
}
/* ホバーした時に「ぷるん」とさせる */
.tag li a:hover {
  background-color: #f05a24; /* オレンジ色に */
  color: #fff;
  animation: item-purun 0.6s ease-in-out; /* さっきのぷるぷるを流用 */
}


/*トップに戻る*/
.modoru h3{
text-align: center;
margin: 15px;
}


/*カーソル*/
 body{
cursor: url("../images/icon-32.png")16 16, auto;
}

/*ふったー*/
footer{
background-color: #603813;
padding: 40px 0 20px;
    display: flex;
    flex-direction: column; /* ★縦並びにする */
    align-items: center;    /* ★中央寄せ */
    text-align: center;
color: #fff;
}
footer img{
width: 120px;
height: auto;
display: block;
margin: 0 auto;
}
/* フッターロゴの設定 */
.footer-logo img {
    width: 150px;     /* ロゴのサイズ（お好みで調整） */
    margin-bottom: 20px; /* ★ロゴとナビの間の余白 */
}

/* ナビゲーション画像の設定 */
.footer-nav {
    display: flex;
    justify-content: center;
    gap: 15px;        /* 画像同士の間隔 */
    margin-bottom: 20px;
}

.footer-nav img {
    width: 40px;      /* ★画像の大きさを小さく調整 */
    height: auto;
    transition: 0.3s;
}

.footer-nav img:hover {
    opacity: 0.7;
}
.footer-nav ul li a{
border: none;
margin-left: 0;
}
footer ul{
display: flex;
list-style-type: none;
justify-content: center;
}
footer li a{
color: #fff;
text-decoration: none;
padding: 0 20px;
border-left:1px solid #fff;
border-right: 1px solid #fff;
margin-left: -1px;
}
footer a:hover{
text-decoration: underline;
}
footer p{
text-align: center;
margin:10px 0;
color: #fff;
}

/* スマホ表示（768px以下）でのサイズ固定 */
@media screen and (max-width: 768px) {
  footer img {
    width: 120px; /* スマホでちょうど良い固定幅 */
  }
}

.menu-btn {
    display: none; /* PCでは隠す */
}
/* --- レスポンシブ対応 (768px以下) --- */
@media screen and (max-width: 768px) {
    /* ボタンの見た目 */
    .menu-btn {
        display: block;
        width: 40px;
        height: 40px;
        position: relative;
        z-index: 100;
        cursor: pointer;
    }
    .menu-btn span {
        display: block;
        height: 2px;
        width: 30px;
        background-color: #fff;
        position: absolute;
        left: 5px;
        transition: 0.3s;
    }
    .menu-btn span:nth-child(1) { top: 10px; }
    .menu-btn span:nth-child(2) { top: 20px; }
    .menu-btn span:nth-child(3) { top: 30px; }

    /* メニューを隠しておく */
    .grobal-nav {
        position: fixed;
        top: 0;
        right: -100%; /* 右側に隠す */
        width: 100%;
        height: 100vh;
		display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(240, 90, 36, 0.65);
        transition: 0.4s;
        z-index: 90;
    }
.grobal-nav ul {
        display: flex;
        flex-direction: column; /* 縦並び */
        align-items: center;    /* 左右の中央 */
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
	.grobal-nav a {
        font-size: 24px; /* スマホで見やすいよう文字を大きく */
        font-weight: bold;
        padding: 10px 20px;
    }
	.grobal-nav li {
        margin: 15px 0; /* メニュー項目ごとの上下の隙間 */
    }
    /* メニューが開いた時の動き（JSでactiveクラスを付与） */
    .grobal-nav.active {
        right: 0;
    }
    
    /* ボタンがバツ印になるアニメーション */
    .menu-btn.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
    .menu-btn.active span:nth-child(2) { opacity: 0; }
    .menu-btn.active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
}