@charset "utf-8";
/*--base.css-全ページ共通の基本スタイル------*/

:root {
  --color-text: #333;
  --color-accent: #8b2219;
  --color-border: #969696;
  --color-muted: #555;
  --color-hero-overlay: rgba(0, 0, 0, 0.45);

  --font-serif: "Noto Serif SC", serif;
  --font-sans: "Noto Sans SC", sans-serif;

  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  --max-content: 75rem;
  --header-h: 6.75rem;

  --z-header: 1000;
}

@media (min-width: 48rem) {
  :root {
    --header-h: 5.5rem;
  }
}

html {
  scroll-padding-top: calc(var(--header-h) + var(--space-md));
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-serif);
  color: var(--color-text);
  line-height: 1.6;
  font-size: var(--font-size-base);
  background-color: #fff;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* ----- ヘッダー ----- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-header__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.site-header__brand a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-text);
}

.site-header__brand a:hover {
  text-decoration: none;
  opacity: 0.85;
}

.site-header__logos {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* 縦型大学ロゴ（ku_logo.png） */
.site-header__logos img {
  height: 3.75rem;
  width: auto;
  max-height: 3.5rem;
  object-fit: contain;
}

.site-header__title {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.25;
  max-width: 14rem;
}

.site-header__title-line--primary {
  font-size: var(--font-size-xl);
  font-size: 1.75rem;
}

.site-header__title-line--secondary {
  font-size: var(--font-size-base);
  font-weight: 600;
}

.site-header__top {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  width: 100%;
}

/* 日本語版ヘッダー（.header_top）に合わせた言語行 */
.site-header__lang-row {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 5px 0 10px;
  box-sizing: border-box;
}

/* 日本語版 .language_menu / .language_menu_item と同様 */
.language_menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.language_menu_item {
  margin-left: 10px;
  font-family: "Noto Sans JP", "Noto Sans", sans-serif;
  width: 75px;
  text-align: center;
}

.language_menu_item a {
  display: block;
  padding: 3px 10px;
  font-size: 0.8rem;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 80px;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.language_menu_item a:hover {
  background-color: var(--color-accent);
  color: #fff;
  text-decoration: none;
}

@media (min-width: 48rem) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .site-header__top {
    width: auto;
    flex: 1;
    align-items: flex-end;
  }

  .site-header__lang-row {
    width: auto;
    align-self: flex-end;
    margin: 0;
  }
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  font-family: var(--font-serif);
  font-size: var(--font-size-base);
  font-weight: 600;
  justify-content: flex-end;
  padding-top: 10px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 48rem) {
  .site-nav {
    width: auto;
    justify-content: flex-end;
  }
}

.site-nav a {
  color: var(--color-text);
  font-size: var(--font-size-lg);
}

.site-nav a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* ----- セクション共通 ----- */
.section {
  padding: var(--space-xl) var(--space-md);
}

.section__inner {
  max-width: var(--max-content);
  margin: 0 auto;
}

.section-title {
  margin-bottom: var(--space-lg);
}

.section-title__en {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.section-title__text {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
}

/* 見出し・導入文・参考リンク一覧の中央寄せ */
.section__inner > .section-title {
  text-align: center;
}

.section__inner > .section__lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section__inner > .ref-links {
  text-align: center;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.section__inner > .ref-links ul {
  display: inline-block;
  text-align: left;
}

/* ----- フッター ----- */
.site-footer {
  padding: var(--space-lg) var(--space-md);
  border-top: 1px solid var(--color-border);
  background: var(--color-accent);
}

.site-footer__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  font-size: var(--font-size-sm);
  color: #fff;
  text-align: center;
}

.site-footer a {
  color: #fff;
}

.pagetop{
    width: 5rem;
    height: 5rem;
    position: fixed;
    bottom: 3.75rem;
    right: 3.75rem;
    transform: translateY(100px);
    transition: .3s all ease;
    opacity: 0;
    z-index: -1;
}

.pagetop.show{
    transform: translateY(0);
    opacity: 1;
    z-index: 10;
}

    .pagetop a{
        box-sizing: border-box;
        display:flex;
        justify-content: center;
        align-items: center;
        transition:.5s all ease;
        width:100%;
        height:100%;
        text-decoration:none;
        border-radius: 50%;
        background: #8b2219;
        padding-bottom: 0.2rem;
    }
    
    .pagetop a:hover{
        filter: brightness(1.1);
    }


    .pagetop a:before{
        font-family: FontAwesome;
        content:"\f106";
        color: #fff;
        font-size: 2.4rem;
    }

/*1280px以下*/
@media screen and (min-width:1px) and (max-width:1280px){

}


/*1180px以下*/
@media screen and (min-width:1px) and (max-width:1180px){
    
}

/*1080px以下*/
@media screen and (min-width:1px) and (max-width:1080px){

}

/*ipad*/
@media screen and (min-width:1px) and (max-width:1024px){
  .site-header__logos img{
    height: 3rem;
  }

  .site-nav a{
    display: flex;
    line-height: 1.3;
    text-align: center;
    align-items: center;
  }
}

/* ##########SP########## */
@media screen and (min-width:1px) and (max-width:575px) {
  .site-header__inner {
    position: relative;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .site-header__brand{
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 0.5rem;
    padding-left: 0.5rem;
  }

  .site-header__logos img{
    height: 2.5rem;
  }

  .site-header__title-line--primary{
    font-size: var(--font-size-lg);
  }

  .site-header__title-line--secondary{
    font-size: var(--font-size-sm);
  }

  .language_menu_item{
    width: auto;
    margin-left: 0.5rem;
  }

  .language_menu_item a{
    padding: 0.1em 0.8em;
    font-size: 0.7rem;
  }

  .site-nav{
    padding-top: 0.75rem;
    justify-content: center;
  }

  .site-nav a{
    font-size: 0.9rem;
  }

  .section#contact{
    text-align: center;
  }

  .site-footer{
    padding: 1rem;
  }

  .pagetop {
      width: 12vw;
      height: 12vw;
      bottom: 9vw;
      right: 4vw;
  }
  
}