body{
/*font-family: "Zen Maru Gothic",
               "Hiragino Maru Gothic ProN",
               "Yu Gothic",
               "Hiragino Kaku Gothic ProN","Hiragino Sans",
               "Meiryo","Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1; */

  font-family: "Roboto","Noto Sans JP",
               "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",
               "Meiryo",system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1; /* プロポーショナル仮名 */
  font-weight: 400;
  letter-spacing: 0.2rem; 
  font-size: 15px;
    color:#4e342e;
}
img{
  width:100%;
}
.sp{
  display: none;
}
@media (max-width:768px){
.sp{
  display: block;
}
.pc{
  display: none;
}

}

.catch{
  font-size:1.6rem;
}

h2.title,h3.title {
  display: inline-block;
  position: relative;
  color: #4e342e; /* 文字色（茶色） */
  font-weight: 400;
  font-size:1.4rem;
  padding-bottom: 12px; /* ← 下に余白を追加！ */
  margin-bottom:2rem;
}
h3.title{
  font-size:1.2rem; 
}
h2.title::after ,h3.title::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0; /* padding-bottomで調整済みなので0 */
  width: 100%; /* 下線の幅 */
  height: 1px; /* 下線の太さ */
  background-color: #4e342e; /* 下線の色 */
}

.section{
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.section-subtitle {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 2rem;
}

.text-left{
  text-align: left;
   line-height: 2;
}
/* ベース */
.site-header{position:sticky;top:0;z-index:1000;background:#e6e6e6;border-bottom:1px solid #cfcfcf}
.container{max-width:1100px;margin:0 auto;padding:0 16px;text-align: center;}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:56px}

/* 左：ロゴ */
.branding{display:flex;align-items:center;gap:12px}
.site-title{width:150px;font-family: "Times New Roman", serif; font-weight:700; font-size:22px; color:#111; text-decoration:none}

/* 右：メニュー */
.nav-area{display:flex;align-items:center;gap:24px}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.menu a{color:#111;text-decoration:none;font-size:14px;letter-spacing:.02em}
.menu a:hover{opacity:.7}

/* SNSアイコン（メニューの「CSSクラス」に social-facebook / social-instagram を付ける） */
.menu-social{gap:16px}
.menu-social li a{display:block;width:22px;height:22px;text-indent:-9999px;overflow:hidden;}

/* SVG を /assets/icons/ に置く例 */
.menu-social li.social-facebook a{background:url('../images/facebook.svg') no-repeat center/contain}
.menu-social li.social-instagram a{background:url('../images/instagram.svg') no-repeat center/contain}

/* モバイル */
.nav-toggle{display:none}
@media (max-width: 900px){
  .nav-toggle{display:block;align-items:center;justify-content:center;
    width:40px;border:none;background-color: unset;}
  .nav-area{display:none;position:absolute;right:16px;top:56px;background:#e6e6e6;padding:12px 16px;border:1px solid #cfcfcf;border-radius:8px}
  .nav-area.open{display:flex;flex-direction:column;gap:12px}
  .menu{flex-direction:column;gap:12px}
  .menu-social{flex-direction:row}
}


/*#members*/
/* カードを横3列 */
.member-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
  margin:0; padding:0; list-style:none;
}.member-card{border:1px solid #eee;border-radius:12px;background:#fff;padding:16px;text-align:center;transition:transform .15s}
.member-card:hover{transform:translateY(-2px)}
.member-link{text-decoration:none;color:inherit;display:block}

.member-logo{aspect-ratio:2/1;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;margin:0 0 12px}
.member-logo img{max-width:60%;max-height:100%;object-fit:contain}
.logo-placeholder{font-weight:700;font-size:14px;opacity:.5}

.member-name{font-weight:600;font-size: 12px; letter-spacing: 0.1rem;background: #f7f7f7;padding: 5px 0;}

/*#members*/
/* カードを横4列 */
.member4-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
  margin-top:24px; 
  padding:0; list-style:none;
}
.member4-grid .member-card{border:1px solid #eee;border-radius:12px;background:#fff;padding:16px;text-align:center;transition:transform .15s}
.member4-grid .member-card:hover{transform:translateY(-2px)}
.member4-grid .member-link{text-decoration:none;color:inherit;display:block}

.member4-grid .member-logo{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#f7f7f7;border-radius:8px;overflow:hidden;margin:0 0 12px}
.member4-grid .member-logo img{max-width:100%;height:auto;object-fit:contain}
.member4-grid .logo-placeholder{font-weight:700;font-size:24px;opacity:.25}

.member4-grid .member-name{font-weight:600;font-size:14px}



/*single-member.php*/

.member-single .container{max-width:960px;margin:0 auto;padding:0 20px}

/* 上段2カラム */
.ms-head{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;margin:48px 0}
@media (max-width: 900px){ .ms-head{grid-template-columns:1fr} }

/* 左：テキスト */
.ms-name{
  font-size: 28px;
    font-weight: 500;
    margin: 0 0 8px;
    background: #f7f7f7;
    padding: 10px;
    border-radius: 8px;
    /* border: 1px solid #ccc; */
    margin-bottom: 50px;}
.ms-title{letter-spacing: 0.3rem;font-size:24px;font-weight:500;margin:10px 0 16px;letter-spacing: 1.5px;}
.ms-catch{line-height:2;letter-spacing: 0.3rem;font-size:16px;font-weight:400;margin:0 0 16px;letter-spacing: 1px;text-align: left;}
.ms-desc{line-height:1.8;color:#333}
.ms-desc p{margin:0 0 1em}

/* 右：画像＋サムネ */
.ms-mainimg{border:1px solid #e5e5e5;border-radius:8px;overflow:hidden;margin:0}
.ms-mainimg img{display:block;width:100%;height:auto;object-fit:cover;background:#fafafa}
.ms-thumbs{display:flex;gap:10px;list-style:none;margin:12px 0 0;padding:0}
.ms-thumb{border:1px solid #e5e5e5;border-radius:6px;padding:0;background:#fff;cursor:pointer}
.ms-thumb img{display:block;width:72px;height:72px;object-fit:cover}

/* 右のメイン画像の枠（3:2で一定比率） */
.ms-mainimg{
  width: 100%;           /* カラム幅いっぱい */
  aspect-ratio: 3 / 2;   /* ← 比率を固定（2:3や16:9でも可） */
  overflow: hidden;      /* はみ出しを隠す */
  border-radius: 8px;    /* お好みで */
  background: #f5f5f5;
}

/* 中央基準で端をトリミング */
#ms-main{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;      /* 枠いっぱい＋はみ出した端は切り落とし */
  object-position: center;/* 中央基準 */
}

/* 下段：情報テーブル（カード） */
.card{background:#f7f7f7;border:1px solid #e5e5e5;border-radius:12px;padding:20px;margin:36px 0 64px}
.ms-table{display:grid;grid-template-columns:1fr;gap:10px;margin:0;text-align: left;}
.ms-table .row{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:start}
.ms-table dt{font-weight:600;color:#666}
.ms-table dd{margin:0}
.ms-table a{text-decoration:none;color:#0073aa}
.ms-table a:hover{text-decoration:underline}


/*footer*/

.site-footer{background:#f7f7f7;border-top:1px solid #e5e5e5;padding:24px 0}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 16px;display:flex;gap:24px;align-items:center;justify-content:space-between}
.footer-logo{text-decoration:none;color:#111;font-weight:700}
.menu-footer{list-style:none;margin:0;padding:0;display:flex;gap:16px}
.menu-footer a{text-decoration:none;color:#111}
.to-top{text-decoration:none}
@media (max-width: 860px){
  .footer-inner{flex-direction:column;align-items:flex-start;gap:12px}
}

.fade-up { 
opacity: 0; 
transform: translateY(40px); 
transition: opacity 0.8s ease, transform 0.8s ease; 

} 

.fade-up.active { 

opacity: 1; 

transform: translateY(0); 

} 


@media (max-width: 768px) { 
.container{
  max-width:90%;
}
.member-grid{
    grid-template-columns: repeat(2, 1fr);
}
.member4-grid{
    grid-template-columns: repeat(2, 1fr);
}


}

.sr-only{
  display: none;
}

.menubtn{
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin: 0 auto;
    position: relative;
}
    
.menubtn span{
    display: block;
    margin: 0;
    border: none;
    width: 50%;
    height: 3px;
    background: #000;
    transform-origin:0% 50%;
    position: absolute;
    top: 12px;
    left: 25%;
    transition: .3s;
}
.menubtn span:nth-of-type(2){
    top: 21px;
}
.menubtn span:nth-of-type(3){
    top: 30px;
}
.close span{
    left: 30%;        
}   
.close span:nth-of-type(1){
    transform: rotate(45deg);
    width: 52%;
}
.close span:nth-of-type(2){
    opacity: 0;
}
.close span:nth-of-type(3){
    top: 30px;
    transform: rotate(-45deg);
    width: 52%;
}

.news-single time{
display: block;
    text-align: right;
    margin-bottom: 5rem;
}
.subtitle{
text-align: center;
    margin: 5rem auto;
    background: #f2f2f2;
    padding: 10px;

}

.subtitle p{
  margin-bottom:0!important;
}