/*
 * common.css
 * 共通・ベーススタイル（全ページ・WordPress組み込み用）
 * 読み込み順：common.css → header.css → footer.css → ページ別CSS
 */
/* ベース */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
/* ヘッダー(100px)＋余白を確保してアンカースクロール時にかぶらないようにする */
#about, #learning, #scholarship, #news, #system, #contact, #overview, #privacy, /* 各ページ内セクション（フッターリンク先） */ #purpose, #founder, #history, #moral, #education, #assignment, #course, #about_scholarship, #apply, #howto, #voice {
  scroll-margin-top: 200px;
}
html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Zen Old Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
  color: #333;
  background-color: #f2f2e9;
  overflow-x: hidden;
  font-size: 1rem;
}
.pc-only {
  display: block;
}
.sp-only {
  display: none;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  /* SP：ヘッダー(60px)＋余白でアンカースクロール位置を調整 */
  #about, #learning, #scholarship, #news, #system, #contact, #overview, #privacy, #purpose, #founder, #history, #moral, #education, #assignment, #course, #about_scholarship, #apply, #howto, #voice {
    scroll-margin-top: 80px;
  }
  section#howto.under-section {
    padding-bottom: 0px;
  }
  .pc-only {
    display: none!important;
  }
  .sp-only {
    display: block;
  }
}
/*max-width:768px*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.inner {
  max-width: 1000px;
  margin-inline: auto;
}
/* 画面幅1000px以下：.inner 共通で左右20pxのpadding */
@media (max-width: 1000px) {
  .inner {
    padding-inline: 20px;
  }
}
/* 調整ユーティリティ */
.bk {
  display: inline-block;
}
.mt100 {
  margin-top: 100px !important;
}
.mt125 {
  margin-top: 125px !important;
}
.mb60 {
  margin-bottom: 60px !important;
}
.mb100 {
  margin-bottom: 100px !important;
}
.pt0 {
  padding-top: 0 !important;
}
.p0 {
  padding: 0 0 !important;
}
.pt100 {
  padding-top: 100px !important;
}
/* フォントサイズ調整 */
.fs20p {
  font-size: 20px;
}
@media screen and (max-width: 768px) {
  .fs16p {
    font-size: 16px;
  }
  .mb0 {
    margin-bottom: 0px !important;
  }
}
/* ========================================
   表示アニメーション：画面内に入ったら下からふわっと表示
   .animate-fade-in-up を付与し、JS で .is-inview を付与すると発火
   ======================================== */
.animate-fade-in-up {
  opacity: 0;
  -webkit-transform: translateY(24px);
  -ms-transform: translateY(24px);
  transform: translateY(24px);
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-fade-in-up.is-inview {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
/* ========================================
   ボタン共通：.btn-primary（黒→左から右）、.btn-contact（白→左から右）
   ======================================== */
.btn-primary-about, .btn-primary-icon-about {
  position: relative;
  overflow: hidden;
}
.btn-primary, .btn-contact {
  position: relative;
  overflow: hidden;
}
/* 黒レイヤー：ホバーで左→右に黒、解除で左→右に白（scaleX + origin で制御） */
.btn-primary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #333;
  z-index: 0;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transition: -webkit-transform 0.35s ease;
  transition: transform 0.35s ease;
}
.btn-primary:hover::before {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
}
.btn-primary:hover, .btn-primary:hover * {
  color: #fff;
}
/* ボタン内のテキスト・アイコンを fill の上に表示 */
.btn-primary > *, .btn-contact > * {
  position: relative;
  z-index: 1;
}
/* .btn-contact のみ：黒→白（白レイヤーが左から右に） */
.btn-primary-about::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 0;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transition: -webkit-transform 0.35s ease;
  transition: transform 0.35s ease;
}
.btn-primary-about:hover::before {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
}
.btn-primary-about:hover {
  color: #fff;
}
.btn-primary-about:hover * {
  color: #fff;
}
.btn-contact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 0;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transition: -webkit-transform 0.35s ease;
  transition: transform 0.35s ease;
}
.btn-contact:hover::before {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
}
.btn-contact:hover {
  color: #333;
}
.btn-contact:hover * {
  color: #333;
}