html {
   scroll-behavior: smooth;
}
body{
 font-family: "Noto Sans","Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}
html, body {
  overflow-x: hidden;   /* 横スクロールを禁止 */
  width: 100%;          /* 常に画面幅に合わせる */
}

.fixed-btn { display: none; }

body.menu-open {
  overflow: hidden;
}

.top-img {
  position: fixed;   /* スクロールしても固定 */
  right: 20px;       /* 右からの余白（調整可能） */
  transform: translateY(-50%); /* 高さの半分ずらして真ん中に */
  width: 150px;      /* サイズ調整（任意） */
  height: auto;      /* アスペクト比維持 */
  width: 75px;
  height: 100px;
  bottom: 20px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  z-index: 95;
}

header {
      
    justify-content: center; /* 横中央 */
    align-items: center;     /* 縦中央 */
    background: url("../image/yahaba/yhb-campus-main.png") lightgray 50% / cover no-repeat;
    position: relative;
    background-size: cover;
    width: 100%;
    height: 620px;
} 
header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 11%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.6) 70%, white 100%);
  pointer-events: none;
}


.title-yahaba {
    display: block;
    margin: 0 auto;       /* ← 横方向を中央揃え */
    position: relative;   /* 必要なら上下に動かせる */
    top: 65px;  
    display: none;

}
.text1 {
    color: #00286D;
text-align: center;
font-family: "Noto Sans";
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: normal;
    padding-top: 400px;
    
}

.text1 { display: block; }
.text2 { display: none; }

.brock {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding-left: 100px;
    padding-top: 25px;
    gap: 10px;
}

.subbrock1,.subbrock2 {
    flex: 1;
    max-width: 350px;
    text-align: left;
}
.mizusawa-mobile{
  display: none;
}
.subbrock1 img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.list {
list-style: none;
color: #00286D;


}
.make{
color: #00286D;
font-family: "Noto Sans";
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: normal;
padding-top:140px;
}


h3{
color: #00286D;
font-family: "Noto Sans";
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.sns{
    display: flex;
    gap: 85px;
     margin: 0 auto;
     padding-top: 120px;
     padding-bottom: 65px;
    width: fit-content;
    justify-content: center;
}
footer{
     margin: 0 auto;
    width: fit-content;
    justify-content: center;
    padding-right:75px ;
}
.logogazou{
    width: 454px;
height: 71px;
flex-shrink: 0;
}
.link{
    color: #2463AE;
text-align: center;
font-family: "Noto Sans";
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;

}
.mizusawa{
    width: 383px;
height: 277px;
flex-shrink: 0;
border-radius: 40px;
}
.x{
    width: 68.488px; 
    height: 70px;
    flex-shrink: 0;
    aspect-ratio: 68.49/70.00;
}
.is{
    width: 73px;
height: 73px;
flex-shrink: 0;
aspect-ratio: 1/1;
}
.yt{
    width: 93.521px;
height: 66px;
flex-shrink: 0;
aspect-ratio: 93.52/66.00;
}
.kounaimap{
    width: 830px;
height: 529px;
flex-shrink: 0;
}
.header-yahaba{
    color: #00286D;
font-family: "Noto Sans";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.minitext{
    color: #00286D;
text-align: center;
font-family: "Noto Sans";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.minitext-mobile1,.minitext-mobile2,.minitext-mobile3{
  display: none;
}
.rakuensai {
    position: fixed;   /* スクロールしても固定 */
    width: 265px;
    height: 105px;
    flex-shrink: 0;
    margin-top: 31px;
    margin-left: 26px;

    z-index: 50;     /* 最前面に表示 */
}

.day {
    position: fixed;   /* スクロールしても固定 */
    width: 183px;
    height: 73px;
    flex-shrink: 0;
    margin-left: 67px;
    margin-top: 120px;

    z-index: 50;     /* 最前面に表示 */
}

.logo{
    padding-top: 30px;
    display: block;
    margin: auto;
 
   
}
.link{
    padding-bottom: 40px;
}

.X{
width: 36px;
height: 36px;
flex-shrink: 0;
aspect-ratio: 1/1;
}
.instagram{
    width: 38px;
height: 38px;
flex-shrink: 0;
aspect-ratio: 1/1;
}
.youtube{
    width: 41px;
height: 29px;
flex-shrink: 0;
aspect-ratio: 41/29;
}
.top{
    display: flex;
}
.icon{
    position: absolute;
    right: 0;
    top:0;
    margin-right: 0px;
  
}
/* SNSアイコンコンテナのスタイル */
.snsicon {
  position: fixed; /* 画面に固定 */
  top: 103px; /* 画面の上から150pxの位置に配置 */
  right: 32px; /* 画面の右から20pxの位置に配置 */
  display: flex; /* Flexboxを有効にする */
  flex-direction: column; /* アイコンを縦に並べる */
  gap: 20px; /* アイコン間の余白 */
  z-index: 90; /* 他の要素の上に表示 */
}

/* 各SNSアイコンの共通スタイル */
.snsicon img {
  width: 36px; /* アイコンのサイズを統一 */
  height: auto; /* 縦横比を維持 */
}



.kounaimap{
    cursor: pointer; /* クリックできる感じに */
   
}
.kounaimap-mobile{
  display: none;
}
.kounaimap.enlarged{
    transform: scale(1.8); /* 拡大倍率（調整可） */
    z-index: 9999;
    position: fixed;   /* 画面中央に固定 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.8);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    background: white;
}
.main-timetablegazou{
    width: 628px;
height: 658px;
flex-shrink: 0;
}

footer{
    background-color: white;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    
}

.nav{
  
  padding-top: 15px;
  padding-right: 20px;
  
}







/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
 display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: fixed;   /* ← 右上に固定 */
  top: 20px;
  right: 20px;
  z-index: 100;
  cursor: pointer;
  background-image: url("../image/icon/Ellipse\ 57.png");
  background-size: cover;

}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
  
}
/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
/* メニューのデザイン*/
.nav_content {
  width: 380px;
  height: 100%;
  position: fixed;
  top: 0;
  right: -380px;
  z-index: 99;
  background-color:#6EA4D9;
  transition: .5s;
  overflow-y: auto;
 
}

.nav_content a{
 text-decoration: none; /* 下線を消す */
}
.text{
  color: #fff;
  padding-top: 80px;

}
.menu-top{
  padding-left: 127px;
  font-size: 22px;
}
.menu-yahaba,.menu-mizusawa{
  padding-left: 121px;
  font-size: 22px;
}
.menu-map{
  padding-left: 142px;
  font-size: 22px;
}
.menu-koumoku{
  padding-left: 120px;
  font-size: 19px;
  list-style: none;
}
.menu-koumoku li::before{
  content: "✦";

}
.menu-event{
  color: #FFF;
}
/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  right: 0%;/* メニューを画面に入れる */
}
/* アイコンがクリックされたら背景画像を消す */
#drawer_input:checked ~ .drawer_open {
  background-image: none;
  background-color: transparent; /* 完全に透明に */
  /* background-color: #fff; とかにすれば色に変えることも可能 */
}


hr {
  border: none;
  border-top: 2px solid #fff;
  width: 265px;         /* 線の長さはそのまま */
  margin-left: 60px;  
    /* 左に少し寄せる */
  margin-top: 10px;
  margin-bottom: 10px;
}

.text-bottom{
  padding-bottom: 20px;
}
.html,body{
  height: 100%;
  margin: 0;
  padding: 0;
}

.main{
    background-image: url("../image/haikei/yahaba.png");
    background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-position: 50% 20%;

}


/*------------メインタイトル--------------*/
.main-title-1{
    margin-top: 50px;
}

.main-title-2{
   margin-top: 235px;
}

.main-title-3{
   margin-top: 180px;
}

.main-title-4{
   margin-top: 149px;
}

.main-title-5{
   margin-top: 280px;
}

.main-title-6{
   margin-top: 126px;
}

.main-title-7{
   margin-top: 216px;
}


.main-title-8{
   margin-top: 165px;
}
.title{
    color: #00286D;
    font-family: "Noto Sans";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    padding-top:100px
}


.line{
    display: block;      /* ブロック化 */
    margin: -50px auto 0;      /* 中央寄せ */
    width: 482px;
    height: 64px;
    aspect-ratio: 241/32;
}


.setumei{
    color: #00286D;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.setumei { display: block; }
  .setumei2 { display: none; }


/*---------メカトロニクス技術科--------------*/
.meka{
    margin-top: 79px;
}


.meka-title{
    color: #00286D;
    font-family: "Noto Sans";
    text-align: center;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.meka-name{
    color: #00286D;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.meka-main {
  display: flex;               /* 横並び */
  align-items: center;         /* 垂直方向中央揃え */
  justify-content: center;     /* 全体を中央揃え */
  gap: 20px;                    /* 画像と文字の間隔 */
}

.meka-main img{
  border-radius: 55px;  /* ←角を丸くする */
  width: 383px;
height: 277px;
flex-shrink: 0;
}

.meka-sentence{
  width: 300px;
  height: 202px;
  flex-shrink: 0;
}


.meka-time h2{
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: left; /* ← これで左寄せ */
}

.koumoku{
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 39px;
  display:inline;
}
.info{
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 39px;
  display:inline;
}



/*---------電子技術科-------------*/
.densi{
    margin-top: 133px;
}


.densi-title{
    color: #00286D;
    font-family: "Noto Sans";
    text-align: center;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.densi-name{
    color: #00286D;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.densi-main {
  display: flex;               /* 横並び */
  align-items: center;         /* 垂直方向中央揃え */
  justify-content: center;     /* 全体を中央揃え */
  gap: 20px;                    /* 画像と文字の間隔 */
}

.densi-main img{
  border-radius: 60px;  /* ←角を丸くする */
  width: 383px;
height: 277px;
flex-shrink: 0;
}

.densi-sentence{
  width: 322px;
  height: 229px;
  flex-shrink: 0;
}


.densi-time h2{
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: left; /* ← これで左寄せ */
}

.info{
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px;
  display:inline;
}



/*-------------建築科-----------------*/
.kentiku{
    margin-top: 153px;
}


.ken-title{
    color: #00286D;
    font-family: "Noto Sans";
    text-align: center;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.ken-name{
    color: #00286D;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.ken-main {
  display: flex;               /* 横並び */
  align-items: center;         /* 垂直方向中央揃え */
  justify-content: center;     /* 全体を中央揃え */
  gap: 20px;                    /* 画像と文字の間隔 */
}


.ken-sentence{
  width: 300px;
  height: 279px;
  flex-shrink: 0;
}


.ken-time h2{
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: left; /* ← これで左寄せ */
}

.info{
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px;
  display:inline;
}



/*-------------情報技術科-----------------*/
.jouhou{
    margin-top: 185px;
}


.jouhou-title{
    color: #00286D;
    font-family: "Noto Sans";
    text-align: center;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.jouhou-name{
    color: #00286D;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.jouhou-main {
  display: flex;               /* 横並び */
  align-items: center;         /* 垂直方向中央揃え */
  justify-content: center;     /* 全体を中央揃え */
  gap: 20px;                    /* 画像と文字の間隔 */
}


.jouhou-sentence{
  width: 300px;
  height: 239px;
  flex-shrink: 0;
}


.jouhou-time h2{
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: left; /* ← これで左寄せ */
}

.info{
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px;
  display:inline;
}



/*-------------産業デザイン科-----------------*/
.sande{
    margin-top: 185px;
}


.sande-title{
    color: #00286D;
    font-family: "Noto Sans";
    text-align: center;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.sande-name{
    color: #00286D;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.sande-main {
  display: flex;               /* 横並び */
  align-items: center;         /* 垂直方向中央揃え */
  justify-content: center;     /* 全体を中央揃え */
  gap: 20px;                    /* 画像と文字の間隔 */
}

.sande-main img{
  border-radius: 55px;  /* ←角を丸くする */
}


.sande-sentence{
  width: 317px;
  height: 239px;
  flex-shrink: 0;
}


.sande-time h2{
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: left; /* ← これで左寄せ */
}

.info{
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px;
  display:inline;
}



/*-------------産業技術専攻科-----------------*/
.senko{
    margin-top: 185px;
}


.senko-title{
    color: #00286D;
    font-family: "Noto Sans";
    text-align: center;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.senko-name{
    color: #00286D;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.senko-main {
  display: flex;               /* 横並び */
  align-items: center;         /* 垂直方向中央揃え */
  justify-content: center;     /* 全体を中央揃え */
  gap: 20px;                    /* 画像と文字の間隔 */
  margin-left: 170px;
}

.senko-main img{
  border-radius: 55px;  /* ←角を丸くする */
}


.senko-sentence{
  width: 466px;
height: 239px;
flex-shrink: 0;
}


.senko-time h2{
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: left; /* ← これで左寄せ */
}

.info{
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px;
  display:inline;
}



/*----------模擬店-----------*/
.store {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center; /* 名前を中央揃え */
  margin-top: 60px;
}

.store img {
  width: 253px;
  height: 253px;
  flex-shrink: 0;
  border-radius: 50px;
}

.store figcaption {
  color: #00286D;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

/* 共通: まず全部表示 */
.store figure {
  display: inline-block;
}

/*---------産業デザイン科物販-------------*/

.toggle-btn{
  display: none;
}

.acce {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center; /* figcaption全体を中央揃え */
  margin-top: 63px;
}

.acce  {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 225px;
  height: 225px;
  aspect-ratio: 1/1;
   border-radius: 50%;  /* ← これで丸くなる */
}


.acce figcaption {
  display: inline-flex;      /* 棒と文字を横並びに */
  align-items: center;
  justify-content: center;   /* 真ん中寄せ */
  gap: 0.75em;               /* ← “スペース量”はここで調整 */
  
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.acce figcaption .bar {
  display: inline-block;
  height: 55px;           /* 文字の高さに合わせる */
  background: #00286D;
}

.bar1{
  width:1.6px;
}

.bar2{
  width:1.6px;
}

.bar3{
  width:1.6px;
}

.buppan01{
  width: 231px;
height: 231px;
flex-shrink: 0;
aspect-ratio: 1/1;
}

.buppan02{
  width: 231px;
height: 231px;
flex-shrink: 0;
aspect-ratio: 1/1;
}

.buppan03{
  width: 231px;
height: 231px;
flex-shrink: 0;
aspect-ratio: 1/1;
}



/*-----------サークル情報--------------*/

.circle { display: block; }
  .circle2 { display: none; }

.circle {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列 */
gap: 12px;
max-width: 1000px;
margin: 0 auto;
text-align: center; /* 名前を中央揃え */
padding-top:50px
}

.circle2 figure {

  align-items: center;
  background-color: #EDEDED;  /* 背景色 */
  border-radius: 15px;         /* 角丸 */
  padding: 15px;               /* 内側の余白 */
  margin-bottom: 20px;         /* figure同士の間隔 */
  width: 300px;
height: 185px;
flex-shrink: 0;
}

.circle img {
width: 225px;
height: 225px;
flex-shrink: 0;
aspect-ratio: 1/1;
}

.circle figcaption {
color: #00286D;
text-align: center;
font-family: "Noto Sans";
font-size: 25px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-top: 29px;
}

.circle h2{
color: #00286D;
text-align: center;
font-family: "Noto Sans";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
white-space: nowrap; /* 自動改行しない */
}



/*---------オープンキャンパス-----------*/
.campus{
width: 672px;
height: 437px;
flex-shrink: 0;
display: block;        /* ブロック要素にする */
margin: 0 auto;        /* 左右の余白を自動にして中央寄せ */
margin-top: 74px;
}


/*--------スタンプラリー----------*/
.stanp{
width: 674px;
height: 438px;
flex-shrink: 0;
aspect-ratio: 317/206;
display: block;        /* ブロック要素にする */
margin: 0 auto;        /* 左右の余白を自動にして中央寄せ */
margin-top: 74px;
border-radius: 60px;  /* ←角を丸くする */
}



/*--------タイムスケジュール-----------*/
.time-kanri{
width: 674px;
height: auto;
flex-shrink: 0;
display: block;        /* ブロック要素にする */
margin: 0 auto;
margin-top: -20px;
border-radius: 55px;  /* ←角を丸くする */
}

/*----------校内マップ-----------*/
.school-map{
width: 700px;
height: auto;
flex-shrink: 0;
display: block;        /* ブロック要素にする */
margin: 0 auto; 
margin-top: 12px;
border-radius: 55px;  /* ←角を丸くする */
}


/*----------アイコン---------*/
.icons {
display: flex;             /* 横並び */
justify-content: center;   /* 中央揃え */
align-items: center;       /* 縦方向も中央 */
gap: 100px;                 /* 画像同士の間隔（調整可） */
margin-top: 126px;
}

.icon1{
width: 68.488px;
height: 70px;
flex-shrink: 0;
aspect-ratio: 68.49/70.00;
}

.icon2{
width: 73px;
height: 73px;
flex-shrink: 0;
aspect-ratio: 1/1;
}

.icon3{
width: 93.521px;
height: 66px;
flex-shrink: 0;
aspect-ratio: 93.52/66.00;
}


/*--------------フッター-------------*/
footer { display: block; }
footer2 { display: none; }

footer {
background-color: #fff; /* 白背景 */
filter: drop-shadow(0 -15px 34px #D6E4F1); /* 上方向の影 */
text-align: center;
padding: 15px;
margin-top: 69px;
}

footer img {
width: 454px;
height: 71px;
 display: block;      /* インライン要素からブロック要素に */
  margin: 0 auto;      /* 左右の余白を自動で揃える → 中央寄せ */
margin-top: 17px;
}

footer p {
color: #2463AE;
text-align: center;
font-family: "Noto Sans";
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
}


/*-----スマホ版CSS-----*/
@media(max-width: 420px) {

  main{
    background: url("../image/haikei/sp-yahaba\ \(1\).png");
    background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-position: 50% 20%;

  }

  .fixed-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: #007bff;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 外側の影 */
  z-index: 10;
  display: block;
  /* 内側に白い線 */
  box-shadow: inset 0 0 0 1px #fff, 0 4px 8px rgba(0,0,0,0.2);
}





  .drawer_open {
    width: 45px;   /* 幅を小さく */
    height: 45px;  /* 高さを小さく */
    top: 9px;     /* 上からの位置も微調整 */
    right: 3px;   /* 右からの位置も微調整 */
    background-size: cover; /* 背景画像の調整 */
  }

  .drawer_open span,
  .drawer_open span:before,
  .drawer_open span:after {
    width: 20px;   /* 三本線の幅を小さく */
    height: 2.5px; /* 三本線の高さも少し小さく */
  }

  .drawer_open span:before {
    bottom: 6px;   /* 上下線の位置も微調整 */
  }

  .drawer_open span:after {
    top: 6px;
  }

  hr {
    width: 200px;  /* 線も小さくする場合 */
    margin-left: 100px;
  }

  .text {
  color: #fff;
  padding-top: 80px;
  text-align: center;  /* 追加：横方向中央揃え */
}

/* メニュー項目も中央揃えに */
.menu-top,
.menu-yahaba,
.menu-mizusawa,
.menu-map,
.menu-koumoku {
  padding-left: 0;         /* 左余白リセット */
  font-size: 22px;         /* 文字サイズ */
  width: fit-content;      /* コンテンツ幅に合わせる */
  margin: 0 auto;          /* 親幅の中央に配置 */
  text-align: left;        /* テキストは左揃え */
}

/* 黒ポチ（リストマーカー）の設定は解除 */
.menu-koumoku li::before {
  content: "✦";
  display: inline-block;
  margin-right: 5px;
}

  .nav_content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: -100%;
    left: 0 !important;  /* ここを追加 */
    z-index: 99;
    background-color:#6EA4D9;
    transition: top 0.5s;
    overflow-y: auto;
  }

  #drawer_input:checked ~ .nav_content {
    top: 0;
    left: 0 !important;  /* PC版の left:80% を無効化 */
  }

/* SNSアイコンコンテナのスタイル */
.snsicon {

  position: fixed; /* 画面に固定 */
  top: 70px; /* 画面の上から150pxの位置に配置 */
  right: 12px; /* 画面の右から20pxの位置に配置 */
  display: flex; /* Flexboxを有効にする */
  flex-direction: column; /* アイコンを縦に並べる */
  gap: 0px; /* アイコン間の余白 */
  z-index: 90; /* 他の要素の上に表示 */

}

/* 各SNSアイコンの共通スタイル */
.snsicon img {
  
  width: 25px; /* アイコンのサイズを統一 */
  height: auto; /* 縦横比を維持 */
}


  .text1 { display: none; }
  .text2 { display: block; }

  header {
    height: 202px;
    background-position: center;
    text-align: center;
    background-image: url("../image/yahaba/yhbmain.png");
  }

  .header-yahaba {
    padding-left: 0;
    text-align: center;
    width: 151px;
    height: 42px;
    margin: 0 auto;
  }

  .title-yahaba {
    width: 180px;
  flex-shrink: 0;
    top: 3px;
    right: 12px;
    display: block;
    margin-top: 70px;
  }

  .text2 {
    
    margin-top: 100px;
    color: #00286D;
text-align: center;
font-family: "Noto Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;

  }

  /* ハンバーガーメニュー */
  .nav_content {
    width: 100%;
    left: 100%;
  }
  #drawer_input:checked ~ .nav_content {
    left: 0;
  }
  

  /* ロゴ関連 */
  .rakuensai {
    width: 126px;
    height: 50px;
    margin-top: 12px;
    margin-left: 10px;
  }

  .day {
    width: 83px;
    height: 33px;
    margin-left: 32px;
    margin-top: 40px;
  }

  /* ハンバーガーアイコン */
  .nav {
    width: 50px;
    height: 50px;
  }

  /* SNSアイコン */
  .X {
    width: 22.39px;
    height: 22.39px;
    padding-bottom: 5px;
  }

  .instagram {
    width: 23.634px;
    height: 23.634px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    padding-bottom: 5px;
  }

  .youtube {
    width: 25.5px;
    height: 18.037px;
    flex-shrink: 0;
    aspect-ratio: 41/29;
    padding-bottom: 5px;
  }

  footer {
    padding: 20px;
    text-align: center;
    height: 20px;
  }

  .logo {
    width: 160px;
    height: 26px;
    padding-top: 10px;
  }

  .link {
    padding-bottom: 0px;
    color: #2463AE;
    font-family: "Noto Sans";
    font-size: 8px;
    font-weight: 400;
    line-height: normal;
  }


  .top-img{

    width: 30px;
height: 40px;
flex-shrink: 0;
aspect-ratio: 1/1;
margin-right: -10px;
  }

  .title{
    color: #00286D;
font-family: "Noto Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
  }

  .line{
    width: 191px;
height: 39px;
margin-top: -30px;
  }

  .setumei2{
    color: #00286D;
text-align: center;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 166.667% */
margin-top: -5px;
  }


  .setumei { display: none; }
  .setumei2 { display: block; }

  /*-------メカトロニクス技術科------*/
  .meka{
    margin-top: 30px;
  }
  .meka-title{
    color: #00286D;
font-family: "Noto Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
  }

  .meka-name{
    color: #00286D;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-top: -12px;
  }

  .meka-main {
  display: flex;
  flex-direction: column; /* 縦方向に並べる */
  align-items: center;    /* 中央揃え（お好みで） */
  gap: 20px;              /* 要素の間隔 */
}

 .meka-main img{
  width: 181px;
height: 160px;
flex-shrink: 0;
border-radius: 25px;
 }

 .meka-time{
  margin-top: -25px;
   line-height: 20px; 
 }

 .meka-time h2{
  color: #00286D;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
 }

 .koumoku{
  color: #00286D;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 166.667% */
 }

 .info{
  color: #00286D;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
 }

 .meka-sentence{
  width: 182px;
height: 121px;
flex-shrink: 0;
 }

/*---------電子技術科----------*/
.densi{
    margin-top: 20px;
  }

 .densi-title{
    color: #00286D;
font-family: "Noto Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
  }

  .densi-name{
    color: #00286D;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-top: -12px;
  }

  .densi-main {
  display: flex;
  flex-direction: column; /* 縦方向に並べる */
  align-items: center;    /* 中央揃え（お好みで） */
  gap: 20px;              /* 要素の間隔 */
}

 .densi-main img{
  width: 181px;
height: 160px;
flex-shrink: 0;
border-radius: 25px;  /* ←角を丸くする */
 }

 .densi-time{
   margin-top: -25px;
   line-height: 20px;
 }

 .densi-time h2{
  color: #00286D;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
 }


 .densi-sentence{
  width: 193px;
height: 135px;
flex-shrink: 0;
 }


 /*--------建築家---------*/
 .kentiku{
    margin-top: 25px;
  }

  .ken-title{
    color: #00286D;
font-family: "Noto Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
  }

  .ken-name{
    color: #00286D;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-top: -12px;
  }

  .ken-main {
  display: flex;
  flex-direction: column; /* 縦方向に並べる */
  align-items: center;    /* 中央揃え（お好みで） */
  gap: 20px;              /* 要素の間隔 */
}

 .ken-main img{
  width: 181px;
height: 160px;
flex-shrink: 0;
 }

 .ken-time{
   margin-top: -25px;
   line-height: 20px;
 }

 .ken-time h2{
  color: #00286D;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
 }


 .ken-sentence{
width: 184px;
height: 150px;
flex-shrink: 0;
 }

 /*---------情報技術科---------*/
 .jouhou{
    margin-top: 30px;
  }
 .jouhou-title{
    color: #00286D;
font-family: "Noto Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
  }

  .jouhou-name{
    color: #00286D;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-top: -12px;
  }

  .jouhou-main {
  display: flex;
  flex-direction: column; /* 縦方向に並べる */
  align-items: center;    /* 中央揃え（お好みで） */
  gap: 20px;              /* 要素の間隔 */
}

 .jouhou-main img{
  width: 181px;
height: 160px;
flex-shrink: 0;
 }

 .jouhou-time{
   margin-top: -25px;
   line-height: 20px;
 }

 .jouhou-time h2{
  color: #00286D;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
 }


 .jouhou-sentence{
width: 170px;
height: 139px;
flex-shrink: 0;
 }

 /*-------産業デザイン科---------*/

 .sande{
    margin-top: 30px;
  }
 .sande-title{
    color: #00286D;
font-family: "Noto Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
  }

  .sande-name{
    color: #00286D;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-top: -12px;
  }

  .sande-main {
  display: flex;
  flex-direction: column; /* 縦方向に並べる */
  align-items: center;    /* 中央揃え（お好みで） */
  gap: 20px;              /* 要素の間隔 */
}

 .sande-main img{
  width: 181px;
height: 160px;
flex-shrink: 0;
border-radius: 25px;  /* ←角を丸くする */
 }

 .sande-time{
   margin-top: -25px;
   line-height: 20px;
 }

 .sande-time h2{
  color: #00286D;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
 }


 .sande-sentence{
width: 190px;
height: 139px;
flex-shrink: 0;
 }


 /*-------産業技術専攻科---------*/

 .senko{
    margin-top: 30px;
  }
 .senko-title{
    color: #00286D;
font-family: "Noto Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
  }

  .senko-name{
    color: #00286D;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-top: -12px;
  }

  .senko-main {
  display: flex;
  flex-direction: column; /* 縦方向に並べる */
  align-items: center;    /* 中央揃え（お好みで） */
  gap: 20px;              /* 要素の間隔 */
  margin-left: 0px;
}

 .senko-main img{
  width: 181px;
height: 160px;
flex-shrink: 0;
border-radius: 25px;  /* ←角を丸くする */
 }

 .senko-time{
  margin-left: 25px;
   margin-top: -25px;
   line-height: 20px;
 }

 .senko-time h2{
  color: #00286D;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;
 }


 .senko-sentence{
width: 210px;
height: 139px;
flex-shrink: 0;
 }

 /*------------模擬店--------------*/
.main-title-2 {
  margin-top: -40px;
}

.store {
  position: relative;
  display: flex;
  justify-content: center;  /* 横中央 */
  align-items: center;      /* 縦中央 */
  flex-direction: column;   /* 縦並びにする */
  width: 100%;
  height: 240px; /* 画像+文字の高さに余白を確保 */
  margin-top: -15px;
}

/* 各 figure を重ねて配置 */
.store figure {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-72%);
  width: auto;
  opacity: 0;
  animation: fadeSlide 25s infinite; /* 5つ × 5秒 = 25秒ループ */
  text-align: center;
}

/* 各 figure の表示時間をずらす */
.store figure:nth-child(1) { animation-delay: 0s; }
.store figure:nth-child(2) { animation-delay: 5s; }
.store figure:nth-child(3) { animation-delay: 10s; }
.store figure:nth-child(4) { animation-delay: 15s; }
.store figure:nth-child(5) { animation-delay: 20s; }

@keyframes fadeSlide {
  0% { opacity: 0; }
  5% { opacity: 1; }   /* フェードイン */
  20% { opacity: 1; }  /* 表示維持 */
  25% { opacity: 0; }  /* フェードアウト */
  100% { opacity: 0; }
}

/* 画像 */
.store img {
  width: 184px;
  height: 184px;
  border-radius: 30px;
  display: block;
  margin: 0 auto;
}

/* キャプション */
.store figcaption {
  margin-top: 8px;
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap; /* 改行させない */
}



/*-----------産業デザイン物販------------------*/
 .main-title-3{
  margin-top: -40px;
 }

 .toggle-btn {
  display: block;
  background-color: #007BFF; /* 青色 */
  color: #fff;               /* 文字は白 */
  padding: 14px 32px;        /* 縦14px 横32pxで大きめ横長に */
  border: none;              /* 枠線なし */
  border-radius: 70px;       /* 丸み */
  font-size: 16px;            /* 文字サイズ少し大きめ */
  font-weight: 600;
  cursor: pointer;
  margin: 30px auto 0;       /* 上マージン30px、左右自動で中央寄せ */
  text-align: center;         /* 中央寄せ */
  margin-top: 50px;
}



.acce {
  width: 331px;
  /* 高さは自動にして縦に広がるように */
  height: 185px;
  flex-shrink: 0;
  background-color: #EDEDED;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column; /* 縦並びに変更 */
  align-items: flex-start; /* 左寄せ */
  margin-top: 30px;
  gap: 12px; /* figure同士の縦の隙間 */
}


.acce figure {
  display: none; /* 初期は非表示 */
}

.acce figure:first-child {
  display: flex; /* 最初の1つだけ表示 */
}

.acce.expanded figure {
  display: flex; /* expandedのとき全て表示 */
}

.acce.expanded{
  height: auto;
}
.acce figure img {
  width: 135px;
  height: 135px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

.acce figcaption {
  color: #00286D;
  font-family: "Noto Sans";
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.acce figure:first-child figcaption {
  font-size: 14px;
  writing-mode: horizontal-tb;
  white-space: nowrap;
}



.acce figcaption .bar {
  display: inline-block;
  width: 1px;              /* 棒の太さ */
  height: 40px;           /* 文字の高さに合わせる */
  background: #00286D;
}

/* 2つ目以降の figure 用に縦並び時のスタイル */
.acce figure:not(:first-child) {
  width: 100%; /* 親幅いっぱい */
}




  /*----------------サークル情報---------------*/

  .main-title-4{
    margin-top: -50px;
  }
.circle { display: none; }
  .circle2 { display: block; }

  

  .circle2 figure {
    display: flex;             /* 横並び */
    align-items: center;       /* 縦中央揃え */
    margin-bottom: 20px;
  }

  .circle2 img {
    width: 120px;              /* 画像サイズ */
    margin-right: 15px;        /* 文章との間隔 */
  }

  .circle-info {
    display: flex;
    flex-direction: column;    /* タイトルと説明文を縦に積む */
    justify-content: center;   /* 縦中央揃え */
    max-width: calc(100% - 135px);
  }
  

  .circle-koumoku {
    width: 115px;
   color: #00286D;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: normal;    
text-align: center;     /* 下に少し間隔 */
  }

  .circle-text {
    width: 133px;
   color: #00286D;
text-align: center;
font-family: "Noto Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;       
text-align: center;       /* タイトル下の余白を調整 */
  }


/*--------ミニオープンキャンパス------------*/
.main-title-5 { 

  margin-top: -40px;
 }
 .campus{
width: 184px;
height: 180px;
margin-top: 20px;
 }

/*---------スタンプラリー------------*/
.main-title-6{
  margin-top: -40px;
}

 .stanp{
width: 184px;
height: 180px;
margin-top: 20px;
border-radius: 25px;  /* ←角を丸くする */
 }

 /*------------タイムテーブル-----------------*/
 .main-title-7{
      margin-top: -40px;
 }

 .time-kanri{
  width: 224px;
  height: auto;
flex-shrink: 0;
margin-top: 2px;
 }


 /*---------校内マップ-------------*/
.main-title-8{
  margin-top: -40px;
  margin-bottom: 70px;
}

.school-map{
  width: 224px;
height: auto;
flex-shrink: 0;
margin-top: 10px;

}

/*----------アイコン-------------*/
.icons{
   display: none;
}

/*--------------フッター-------------*/
footer { display: none; }
footer2 { display: block; }

footer2 {
  display: block;
  width: 100%;
  max-width: 412px;
  margin: 0 auto;
  text-align: center;
  padding: 10px 10px;      /* 上下余白を調整 */
  box-sizing: border-box;
  background-color: #FFF;
 fill: #FFF;
filter: drop-shadow(0 -10px 16px #D6E4F1);
   position: relative;  /* z-indexを効かせるため必須 */
  z-index: 20;   
}

footer2 img.footer-img {
  width: 150%;
  max-width: 200px;
  height: auto;
  display: block;
  margin: 0 auto 5px auto; /* 下の余白を少しだけ */
}

footer2 p {
  color: #2463AE;
  font-family: "Noto Sans", sans-serif;
  font-size: 8px;
  margin: 0;
}

  


}